Version 3.0
The live design system and identity foundations used across flow-three.
Five foundational constraints that govern every decision. These are not guidelines — they are rules.
Performance-first
Every visual decision is validated against conversion, task completion, and retention. Aesthetics serve function — not the reverse. If a design element cannot be tied to an outcome, remove it.
Clarity over decoration
Remove anything that does not communicate or convert. Whitespace is active and intentional. Complexity must justify its presence with a measurable benefit.
Measured contrast
Color and weight create hierarchy. Contrast ratios meet WCAG AA (4.5:1 for body, 3:1 for large text). Never use color purely for decoration — it must carry meaning or action.
Restrained color usage
Two accent colors. One rule each. Blue on light surfaces only. Teal on navy only. Components never mix both. No color is added to the system without a documented use case.
Functional motion
Motion communicates state change or guides attention. UI transitions: 150–200ms ease. Ambient animations: 20–30s ease-in-out. Nothing animates without a functional reason.
The wordmark is the logo. Always lowercase. Always DM Sans 700 with tight tracking (−0.02em). Never modify letterforms, never add a mark, never use a non-700 weight.
On light
24px · Navigation
16px · Footer
On dark
Always white on dark backgrounds
Ink Scale — Text & Borders
Ink
#0A0A0A
Headings, strong text
Ink 70
rgba(10,10,10,0.70)
Body text (default)
Ink 50
rgba(10,10,10,0.50)
Secondary text, labels
Ink 30
rgba(10,10,10,0.30)
Disabled text
Ink 12
rgba(10,10,10,0.12)
Borders, dividers
Ink 6
rgba(10,10,10,0.06)
Subtle borders
Backgrounds
Paper
#FCFBF9
Default page BG
Warm
#F7F5F1
Section alternation
White
#FFFFFF
Cards, elevated
Blue — Primary Action
Blue
#0047FF
CTA, links, focus, diagrams
Blue 90
rgba(0,71,255,0.90)
Button hover
Blue 15
rgba(0,71,255,0.15)
Tag borders
Blue 8
rgba(0,71,255,0.08)
Tag BG, section tint
Teal — Accent (Dark Backgrounds Only)
Teal
#00C896
Text on navy (#001a4d), checkmarks
Teal 8
rgba(0,200,150,0.08)
Subtle background tint
Dark — Section Backgrounds
Dark
#0D0D14
Footer sections
Dark Blue
#001a4d
Tiles with blue/teal text
Color Rules — Formal Constraints
These rules prevent visual inconsistency and preserve the contrast model across all surfaces.
DoUse blue (#0047FF) on paper, warm, and white backgrounds for CTAs, links, focus states, and diagrams.
DoUse teal (#00C896) exclusively on navy (#001a4d) backgrounds — labels, checkmarks, and accents only.
DoUse the ink scale (ink, ink70, ink50, ink30) for all text hierarchy without exception.
DoUse ink12 and ink6 for dividers and borders on light backgrounds.
DoUse white (#FFFFFF) for card surfaces and elevated components on warm or paper backgrounds.
Don'tUse teal on paper, warm, or white backgrounds — ever.
Don'tUse blue on navy (#001a4d) or dark (#0D0D14) backgrounds. Use teal or white instead.
Don'tMix blue and teal within the same component, card, or section.
Don'tAdd decorative gradients outside the hero and statement sections.
Don'tUse color for decoration. Color communicates meaning or action — nothing else.
Don'tIntroduce new color values not present in the C token map.
DM Sans for all UI and body text. DM Mono for labels and code only. All heading sizes use fluid scaling (clamp) for responsive design.
Weight Constraints
Font Family Rules
DoUse DM Sans for all UI text: headings, body, navigation, buttons, captions.
DoUse DM Mono for section labels (e.g. 'Services'), tags, inline specs, and the design system UI itself.
Don'tUse DM Mono for paragraph text or any run of text longer than six words.
Don'tApply positive letter-spacing to headings. Headings always use negative tracking.
Don'tApply random letter-spacing to body text. Body tracking is fixed at 0.002em.
Don'tMix font weights within a single heading. One role, one weight — always.
Correct Heading Hierarchy
Performance Design
Design That Moves Business.
Clearly scoped. Outcome-focused.
Four service tiers, one coherent system.
Body text follows the heading stack. Never heavier than 400. Default color is ink70; use ink only for deliberate emphasis within a paragraph.
DM MONO LABEL → H1 700 → H2 700 → H3 500 → BODY 400
Three elevation levels. Never stack them. Never apply shadow-card-hover at rest. Shadow communicates interactivity — use it deliberately.
Flat surface
No shadow, no border needed
Level 0 — Flat
box-shadow: none
Use for section content areas on paper, warm, or dark backgrounds. No interactivity implied.
Elevated card
shadow-card at rest
Level 1 — Card
shadow-card
Use for interactive tiles, service cards, and elevated surfaces. Applied at rest.
Hovered card
shadow-card-hover + lift
Level 2 — Hover
shadow-card-hover + translateY(−2px)
Applied on :hover only. Paired with translateY(−2px). Transition: all 0.2s ease. Never at rest.
Stacked shadows
Both levels simultaneously
Never — Stacked
shadow-card + shadow-card-hover
Never apply both shadows together. Never add a custom shadow outside these two levels.
Buttons (components/ui/button.tsx)
Primary
Secondary
Ghost
Button State Matrix
Form Inputs
Tags / Pills
Two variants: blue (primary emphasis) and gray (neutral). Teal tags removed in color system refinement.
Cards (components/ui/card.tsx)
Default resting state with shadow-card. White surface on any background.
Hover state with shadow-card-hover and −2px lift. Never at rest.
Section Labels (components/ui/section.tsx)
Services
On light · ink50Our Philosophy
On navy · tealConnect
On dark · white 35%DM Mono 400 · 11px · uppercase · letter-spacing: 0.1em
Navigation Links
DM Sans 400 · 15px · no underline on default or hover · underline optional on hover per context
Shadows (tailwind.config.ts)
shadow-card
Cards at rest · ink-tinted
0 1px 3px rgba(10,10,10,0.04), 0 4px 16px rgba(10,10,10,0.06)
shadow-card-hover
Cards on hover · ink-tinted
0 4px 12px rgba(10,10,10,0.08), 0 16px 40px rgba(10,10,10,0.12)
shadow-button
Primary button at rest · blue-tinted
0 2px 8px rgba(0,71,255,0.14)
shadow-button-hover
Primary button on hover · blue-tinted
0 6px 20px rgba(0,71,255,0.24)
Gradient Background (Hero & Statement sections only)
Animation Timing Reference
Icons use Radix Icons with consistent sizing and theme-aware color. Blue on light backgrounds, teal on dark navy surfaces. All icons use stroke style—never mix filled and stroke.
Size Scale
UI Icons · Light Mode (Primary = Blue)
Check
Cross
Arrow
Plus
Minus
Info
Alert
Chevron
Menu
Calendar
UI Icons · Dark Mode (Primary = Teal on Navy)
Check
Cross
Arrow
Plus
Minus
Info
Alert
Chevron
Menu
Calendar
Icon Variants
Pictograms · Light Surface
Larger expressive icons for section headers and feature cards. Circular background with soft blue tint.
Growth
48px
Performance
64px
Systems
64px
Speed
64px
Results
48px
Users
48px
Pictograms · Dark Navy Surface
Growth
48px
Performance
64px
Systems
64px
Speed
64px
Results
48px
Users
48px
Lucide Icons · In Production
All Lucide icons used across the site. strokeWidth=1.5 everywhere. Via Icon or TileIcon wrapper, or direct JSX. Click any icon to open its Lucide page.
CircleCheck
results-section
AlertCircle
executive-summary
Target
executive-summary
TrendingUp
executive-summary
Users
executive-summary
Search
services-section
Rocket
services-section
SlidersHorizontal
services-section
RotateCw
services-section
Box
how-we-work
Waypoints
how-we-work
User
approach-section
BarChart2
approach-section
Wand2
approach-section
Component
approach-section
Layers
approach-section
ArrowRight
hero, how-we-work, cta…
ExternalLink
cta-section
Target
mobile-bottom-nav
AlertCircle
mobile-bottom-nav
Wrench
mobile-bottom-nav
BriefcaseIcon
mobile-bottom-nav
GitBranch
mobile-bottom-nav
Icon Usage Rules
DoAlways use Lucide icons — strokeWidth={1.5} everywhere
DoUse primary variant for theme-aware blue ↔ teal switching
DoKeep icons 8px gap from adjacent text in buttons
DoInline icons align to text baseline automatically
Don'tNever mix filled and stroke icon styles
Don'tNever exceed lg (24px) inside buttons
Don'tNever hardcode blue or teal—always use variant="primary"
Don'tDon't use icon-only buttons without aria-label
Reusable structural patterns using existing tokens only. Each demonstrates a common compositional need beyond the current website pages.
P1 — Two-Column Content Block (text + visual)
Services
Each engagement has a defined scope, measurable outcomes, and a clear exit criteria. No retainer lock-in.
IMAGE PLACEHOLDER
Grid: 3fr 2fr · gap: 40px · align: center
P2 — Case Study Preview Grid
Rebuilt the payment and confirmation flow for a fintech platform. Four-week Flow Fix engagement.
View case studyMapped the full activation journey for a B2B SaaS product. Delivered in six weeks with measurable lift.
View case studyP3 — KPI Metrics Row
42%
Conversion lift
3.2×
ROI within 90 days
18d
Average delivery
94%
Client satisfaction
Font: DM Sans 700 · 36px · tracking −0.03em · label: DM Mono 9px
P4 — Comparison Table (light + navy variant)
Without flow-three
Unclear scope and shifting deliverables
No measurable success criteria
Long feedback cycles
Accumulating design debt
With flow-three
Scoped, time-boxed, and transparent
Measurable KPIs agreed from day one
Fast iteration and weekly reviews
Zero design debt on delivery
P5 — Testimonial Card
"They didn't just redesign the page — they redesigned how customers move through our entire funnel. The numbers prove it."
Sarah Chen
VP Growth · Meridian SaaS
P6 — Feature Checklist (light + navy)
Blue on light
Defined scope and timeline
Measurable success criteria
Weekly progress reviews
Full IP transfer on completion
Teal on navy
Defined scope and timeline
Measurable success criteria
Weekly progress reviews
Full IP transfer on completion
P7 — Structured Service Card (pricing-style)
1–2 week engagement
Full journey audit
Heatmap and session analysis
Priority issue map
Benchmark report
3–6 week engagement
Redesigned conversion flows
A/B test against original
Dev-ready specs
Performance benchmark
P8 — Simple Form Layout
We respond within one business day.
Visual block references for common page types. All use system tokens and follow established patterns. These are starting structures — not fully implemented pages.
T1 — SaaS Landing Hero
T2 — B2B Service Page Section
Services
Flow Clarity
Flow Fix
Flow Rebuild
Flow Partnership
T3 — Case Study Detail Page
Work → Case Study → Meridian SaaS
Meridian SaaS · Flow Fix engagement · 4 weeks
CASE STUDY HERO IMAGE
42%
Conversion lift
4 wks
Delivery
3.2×
ROI
T4 — Blog / Insight Article Layout
The critical failure point isn't the feature — it's the first 90 seconds. We analyzed 40 onboarding flows to understand why.
Article body text sits at a maximum width of 560–580px — approximately 65–70 characters per line at 14–15px. This is the ideal line length for reading comfort. Paragraphs are separated by 20px margin-bottom.
T5 — Minimal Dashboard Screen
T6 — Email Capture Section
Insights
One email per month. No fluff, no sales. Frameworks, patterns, and real-world results.
No spam. Unsubscribe anytime.
T7 — Thank-You / Confirmation State
We'll review your brief and respond within one business day. Check your inbox for a confirmation.
T8 — Error / Empty State
This section is empty. Start by adding your first item or check back later.
Implementation guidance for engineers and designers. These rules prevent the most common structural and compositional mistakes.
When to use navy vs. warm sections
Navy (#001a4d)
Warm (#F7F5F1)
When to introduce motion
DoScroll-triggered reveals for section content entering the viewport (400–600ms, ease-out, stagger 80ms between items).
DoButton and card hover/active transitions (150–200ms ease).
DoHero gradient orbs (float, 20–30s, ease-in-out). Statement section glow (18–24s).
Don'tAnimate elements that aren't interactive or entering the viewport.
Don'tUse transitions above 300ms for UI state changes (hover, focus, active).
Don'tAdd motion to elements below the fold on mobile — prefer reduced-motion fallbacks.
Text width and line length
CTA placement best practices
DoPlace the primary CTA immediately after the value proposition — end of the hero above the fold.
DoPair a secondary CTA alongside the primary when offering an alternative action (e.g. 'See our work').
DoRepeat the primary CTA at the end of long sections or before the footer.
Don'tShow more than two CTAs in a single section. Hierarchy collapses above two.
Don'tUse ghost buttons as primary CTAs. Ghost = tertiary or supplementary action only.
Don'tPlace CTAs mid-paragraph or inline within body text — use a dedicated button row.
Section spacing rhythm
Never double-pad adjacent sections. If two sections share a background color, use a single divider (1px ink6) rather than stacking padding.
Let's Talk
First call is always diagnostic. You describe where the numbers feel wrong — most of the time, we can identify the cause before we’ve seen the product.
Not a pitch. A look at the problem together.