TaskFlow
Agent-first task orchestration. This is the single source of truth for the TaskFlow mark, color, type, and voice - and the one rule that governs all of it: the marketing surface is always light.
The theme rule
TaskFlow runs two surfaces with two different theme policies. This is load-bearing - get it wrong and a dark platform theme bleeds into the public site.
Always light / white
The public marketing site (landing, pricing, docs, contact, legal, this page) renders on white at all times. It never follows the app theme toggle. The light --mkt-* tokens are locked to the .marketing wrapper so a user's app theme choice cannot bleed in.
Dual light + dark
The authenticated app and dashboard keep both themes, switched per-account via Settings, persisted to users.theme and data-theme on <html>. The platform theming is untouched by the marketing rule.
Wordmark & brandmark
The wordmark is “TaskFlow” (one word, weight 700, letter-spacing -0.5px). The brandmark is an SVG: a rounded violet tile carrying a routing-to-completion glyph - two executor nodes (human + agent) whose flow path resolves into a checkmark. It ships as src/app/icon.svg (favicon), apple-icon.png, and favicon.ico, and renders inline via the BrandMark component. The violet tile reads on both light and dark surfaces.
- Keep the wordmark one word, capital T and F.
- Use the solid violet badge on light surfaces.
- Give the mark clear space at least the height of the tile.
- Pair the monogram with the wordmark in the header.
- Don't recolor the badge outside the brand violet.
- Don't split or re-space “TaskFlow”.
- Don't put the dark outlined tile on a white surface.
- Don't stretch, rotate, or add shadows to the mark.
Palette
Brand violet #a78bfa carries fills and gradients; a darker #7c3aed carries links and small text so it passes AA on white. Neutrals mirror the platform light theme.
Accent - violet
Neutrals - light ramp
Signal
Platform dark (reference only - not used on marketing)
Typography
Inter for everything human-readable, with a system fallback stack. SF Mono for code and technical figures. Body is 16px / 1.6.
Voice & tone
Confident, technical, operator-focused. Humans and AI agents are equal “executors”. Lead with governance, evidence, and measurement.
Operator-first
Speak to people who run work, not browse it. Confident and technical.
Governed, not magic
AI delegation under human control - checkpoints, approvals, evidence.
Evidence over hype
Execution logs, audit trails, measured outcomes. Numbers, not adjectives.
Imperative CTAs
Verb-led calls to action. Tell the operator what to do next.
✓ Words we use
- executor
- route / routing
- governance
- checkpoint approvals
- execution logs
- context packages
- escalation
- outcomes
✕ Words we avoid
- orchestrate (overused)
- magic
- revolutionary
- seamless
- 10x
- synergy
Shape
Content maxes at 1200px. Sections are 56–80px of vertical rhythm. Radius steps down by surface size.
Core components
Buttons, badges, and pills as they render on the light marketing surface - built from the same mkt-* classes used across the site.