ScopePilot Design System

Sovereign

The locked Step 0.5 system every ScopePilot screen inherits. Fraunces for the document voice, Inter for the chrome — warm paper, cool ink, an iris brand. Confident, fast, expensive.

Owner-locked 2026-06-13Light mode firstWCAG 2.2 AAInherits everywhere

Tokens

Typography

Fraunces (display serif) carries brand moments and large headings; Inter runs the UI and body; JetBrains Mono labels code and data. Money uses Inter tabular figures.

Display XL · Fraunces 56Every document knows what comes next.
Display L · Fraunces 44Proposal accepted.
Display M · Fraunces 34Scope, signed and sealed.
Display S · Fraunces 26What it does to revenue.
Heading · Inter 20/600Document Control Center
Body · Inter 16/400The recipient opens the room on their phone and signs in under a minute.
Body S · Inter 14Secondary copy and helper text sit in muted ink for calm hierarchy.
Overline · Inter 12Lifecycle stage
Mono · JetBrains 14--brand: oklch(0.50 0.18 286)
Tabular figures · Inter$48,500.00 · 1,204 sends · 99.9%

Tokens

Color

Light mode first. Warm-paper surfaces, cool-ink text, an iris/indigo brand, and a full semantic + data-viz set — all in OKLCH for perceptual evenness.

Surfaces & ink

bg-canvasApp background
bg-surfaceCards / panels
bg-surface-2Subtle fill
bg-surface-3Wells / header
text-inkPrimary text
text-ink-mutedSecondary
text-ink-subtleTertiary
borderHairline
border-strongEmphasis

Brand · iris

bg-brandPrimary action
brand-hoverHover
brand-activePressed
brand-subtleTint bg
brand-borderTint border

Accent · warm (secondary)

bg-accentFeatured fill
accent-hoverHover
accent-activePressed
accent-subtleTint bg
accent-borderTint border
NewInteractive pricing blocks

The warm accent flags what's featured or new — the iris brand still owns every primary action.

Semantic

successAccepted / paid
warningNeeds attention
dangerError / destroy
infoInformational

Data-viz · categorical

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8

Tokens

Radius, shadow & elevation

A soft-but-precise radius scale and a cool-tinted, layered shadow language. Elevation is restraint: shadows are felt, not seen.

Radius

xs
sm
md
lg
xl
2xl

Shadow

xs
sm
md
lg
xl

Components

Buttons

One press language across every variant: a tactile 1px sink and color deepen on :active, a brand glow on the primary. Hover and press them.

Components

Status & badges

The lifecycle vocabulary — every document state reads at a glance in a calm, color-coded pill.

DraftSentViewedIn reviewAcceptedPaidDeclinedv3AI draft

Patterns

Card

A real proposal card — sample data on insert (R-E), so nothing ever looks unfinished. Hover to feel the lift.

Website redesign
Acme Co · Proposal #1042
Accepted
Contract value$48,500.00
Signed 2 days ago
AI next action
Send the quote to Northwind
The brief is confirmed and locked. Drafting is ready — review the three options and send when it feels right.

Patterns

Table

Quiet hairline rows, tabular money right-aligned (DEF-1), status at a glance. Rows tint on hover.

ClientDocumentStatusValue
Acme CoWebsite redesignAccepted$48,500.00
NorthwindBrand systemViewed$22,000.00
GlobexQ3 retainerSent$9,750.00
InitechAudit + roadmapDraft$15,200.00

Patterns

Form

The form contract (ARCH-15): inline validation, input preserved on error, a calm error voice, and a quiet success. Submit empty to see the error, then a real email to send.

Where the secure proposal link is delivered.

Optional — appears above the proposal.

0% ScopePilot platform fee — processor fees apply

Motion · R-L

Signature micro-interactions

Five interactions that define how ScopePilot feels. Purposeful only — hierarchy, feedback, delight — tokenized in duration + easing, and honoring prefers-reduced-motion.

Button press

80ms · standard

Card hover

200ms · ease-out

Acme Co · Proposal

Hover to lift

State change

flash · 320ms
Draft

Success moment

pop + ripple · spring

Page transition

fade-up · 320ms
Brief
Proposal
Quote

Respects reduced motion

R-L · WCAG 2.3.3

Every animation here collapses to an instant state change under prefers-reduced-motion: reduce. Motion is decoration, never the message.

Component voice

Empty, loading, error, success

Nothing ever looks unfinished (R-E). Empty is a designed moment; loading mirrors the final layout; errors are calm and recoverable; success is quietly certain.

Empty state

No proposals yet

Your first one takes about two minutes — start from a certified template or a blank canvas.

Loading — skeleton mirrors the layout

Quote locked

The totals are frozen and the client can now accept. You'll be notified the moment they do.

Heads up

This proposal expires in 7 days. We'll remind the client at day 5.