Brand System · v0.9

A design system for commerce operations.

eStorePilot should feel calm under pressure, precise where it matters, and useful before it's beautiful. This system encodes the building blocks: palette, type, tokens, components, motion, and voice.

01 · Identity

Mark & wordmark

A precise upward vector — pilot's blade, a chart's apex, a cursor in motion. Geometric, minimal, monochrome by default. Designed to read at 16px and at 200px without losing meaning.

Primary mark
Monochrome (uses currentColor)
On light surface
eStorePilot
02 · Palette

Color system

Midnight navy carries the brand. Electric blue is reserved for actions, focus, and recommendations. Off-white provides the breathing room. Semantic colors are calibrated for AAA contrast on navy.

Surface — Midnight Navy

Ink#050816
Bg#0A0F1F
Surface#0E1426
Surface 2#131A30
Surface 3#182142
Border#232E55

Primary — Electric Blue

Primary Active#2C66E8
Primary#3D7BFF
Primary Hover#5790FF
Primary Light#A5BFFF

Off-white & Text

Text Strong#FFFFFF
Off-white#F4F6FA
Muted#A1AAC3
Faint#6E7799

Semantic

Success#34D399
Warning#F5B544
Danger#F26E6E
Info#65B8FF
Contrast (on navy)
Off-white on bg: 14.8 : 1 · AAA
Primary on bg: 7.2 : 1 · AAA Large
Muted on bg: 7.1 : 1 · AAA
Dark-mode treatment
Default theme is dark. Light mode inverts surfaces to off-white with deeper electric blue (#2C66E8) for action contrast.
Don't
Don't use semantic colors decoratively. Don't tint copy with primary. Don't mix more than 2 accent colors per surface.
03 · Typography

Type system

Cabinet Grotesk for display — geometric warmth, enterprise restraint. Inter for body — proven legibility at small sizes. JetBrains Mono for tabular numbers, SKUs, deploy hashes.

Display · 96/100
Operational
H1 · 44/52
AI Operating Layer
H2 · 30/40
Revenue at risk: €186K
H3 · 22/30
Pricing & margin consistency
Body Large · 18/28
eStorePilot reconciles every signal in your storefront — pricing, content, traffic, ops — and tells you exactly what to ship next.
Body · 16/26
For brands doing €10M–€500M GMV, even a 1% margin drift is a six-figure problem. We don't paint dashboards. We tell you what to do today.
Eyebrow · 13/16
Commerce operations
Mono · 14/22
SKU OUT-2204 · €189.00 · margin 42.1%
04 · Tokens

Design tokens

All values live in assets/tokens.css as CSS custom properties. Two themes: dark (default), light (off-white surfaces, navy text).

Token Value Sample
${[ ['--radius-md','0.5rem','8px rounded','box'], ['--radius-lg','0.75rem','12px rounded','box'], ['--space-4','1rem','16px',''], ['--space-8','2rem','32px',''], ['--text-xl','1.875rem fluid','30px display',''], ['--shadow-md','0 8px 24px navy','elevated card',''], ['--transition-interactive','200ms ease','hover/state',''], ].map(()=> '').join('')} ${[ ['--radius-sm','6px','sm'], ['--radius-md','8px','md'], ['--radius-lg','12px','lg'], ['--radius-xl','16px','xl'], ['--space-1','4px','1'], ['--space-2','8px','2'], ['--space-4','16px','4'], ['--space-8','32px','8'], ['--space-16','64px','16'], ['--shadow-md','0 8px 24px rgba(5,8,20,.35)',''], ['--shadow-lg','0 24px 60px rgba(5,8,20,.45)',''], ['--transition-fast','120ms ease-out',''], ['--transition-interactive','200ms ease-out',''], ].map(([n,v])=>`
${n} ${v} ${n.startsWith('--radius')?`
`:''} ${n.startsWith('--space')?`
`:''} ${n.startsWith('--shadow')?`
`:''} ${n.startsWith('--transition')?`
`:''}
`).join('')}
05 · Components

Component treatments

Components are restrained, dense-but-breathable, and rely on type and tone rather than ornament.

Buttons

Tags · State

resolved high critical info AI insight

KPI card

Revenue at Risk
€186K
4 active issues

Recommendation card — the unit of action

Always: what happened, why, modeled impact, confidence, effort, action.

Impact: +€42K/mo Confidence: 94% Effort: Low
06 · Motion

Motion direction

Settle, don't perform.

Motion exists to reduce surprise. Default duration 200ms cubic-bezier(0.16, 1, 0.3, 1). No bouncing, no glow pulses.

Numbers are sacred.

Counters tick up at 400ms on first render. After that, only the delta animates — never the digits themselves.

Charts draw, never zoom.

Sparklines stroke-draw in 600ms. No camera moves, no parallax, no auto-rotate. Respect prefers-reduced-motion.

07 · Voice

Voice principles

We write like an operator briefing another operator. Plainspoken. Numerate. Never marketing-y.

1. Lead with the number.

"+€42K/month margin opportunity" reads before any claim about it.

2. Be specific.

"14 SKUs in the Outerwear collection" — not "many products."

3. Show confidence and effort.

Every recommendation discloses its confidence % and the effort to ship it.

4. Name the trade-off.

If we're recommending a risk, we say what it costs. No upside-only pitches.

5. No AI theater.

No "magical", no "intelligent" as a hand-wave. Describe what the model does, not what it feels like.

6. Brevity beats explanation.

If a sentence doesn't change a decision, cut it.

Write

"Competitor median rose €11 over 7 days. Lifting Outerwear 6–8% adds an estimated €42K/month margin without measurable conversion impact (94% confidence)."

Don't write

"Our intelligent AI has detected exciting new pricing opportunities that could revolutionize your margin and supercharge your growth journey."