sle
A design system for freelancers who run themselves like a business.
Sole is the operating system for independent workers. This is the living library that every screen, email, export, and nudge is built from.
Philosophy
Principles
01
Confidence, delivered in seconds.
Every screen ends in a verdict. No freelancer should leave Sole unsure of what to do next — scores, flags, and nudges are the primitives of our product, not the decoration.
02
Warm, not cute.
Sole speaks to solo operators with real money on the line. Ember conveys urgency with warmth; Sand and Paper hold space for long-form work. No emoji, no kawaii illustration, no jargon theater.
03
Motion is meaning, not decoration.
Scores draw because they are being calculated. Nudges pulse because they are waiting. Drawers slide because they are returning. Every animation earns its 250ms.
04
Untitled UI is our backbone.
We don't reinvent a button. We take the Untitled UI v2.0 component, theme it with Sole tokens, and compose it into the patterns on this page. New primitives require a Joe-owned RFC.
05
Dark mode first for the work. Light mode for the forms.
Analyses, dashboards, and summaries live on Midnight — the mode where freelancers stay. Forms, wizards, and onboarding live on Paper — the mode where they decide. Sand bridges both.
What's in the library
Foundations
8 pages
Tokens, brand, logo, color, type, space, motion, iconography — every decision before a component exists.
Systems
19 UUI + 6 Sole
Every Untitled UI v2.0 core component themed for Sole, plus six patterns you won't find anywhere else.
Practice
Do's & Don'ts
Side-by-side rules for when to use each pattern — and when to back away slowly.
Foundations
Brand
Sole is the operating system for the independent economy. Every visual and verbal choice is tuned to one reader: the freelancer who is one invoice away from a hard month.
Voice
How we sound
Direct. Specific. Slightly dry. We explain the stakes, never the feelings. We use numbers when we have them.
Sample: "This contract gives the client your IP. One line fixes it."
How we don't sound
Not bubbly. Not aspirational. Not fintech-sterile. Not legal-ese.
Avoid: "We're so excited to help you crush your goals!" · "Transform your freelance journey." · "Leverage synergies."
Naming
Sole has four meanings stacked into one word: the sole operator, the sole responsibility, the sole of a shoe (grounded), and the soul of the work. The ring-as-o in the wordmark carries all four — it's the loop of work, money, and client — always moving, always returning.
Brand in one sentence
Sole is the tool that turns freelance chaos into a business you can defend, invoice, and grow from.
Foundations
Logo
The Sole wordmark. Inter Semi Bold with an ember ring replacing the "o". Built once; used everywhere at every size from favicon to billboard.
The mark
sle
Size family
Always use a preset. Never scale arbitrarily — kerning, ring stroke, and baseline tuning are set per size.
sle
size-xs · 20px · favicon, footers
sle
size-sm · 28px · app nav, chrome
sle
size-md · 48px · headers
sle
size-lg · 72px · marketing hero
sle
size-xl · 112px · conference, print
sle
on-dark variant
Mechanics
Ring & dot specs (per size)
- • xl 112px → ring 64 / 4px stroke · dot 22px
- • lg 72px → ring 42 / 3px · dot 14px
- • md 48px → ring 28 / 2px · dot 10px
- • sm 28px → ring 17 / 1.5px · dot 6px
- • xs 20px → ring 13 / 1.2px · dot 4.5px
- • Stroke = Midnight (or Sand on-dark) · Dot = Ember
- • Letter-spacing -0.085em · Line-height 0.95
l → e kerning
The letters "l" and "e" need a bespoke optical correction. Always apply margin-left: 0.06em to the "e" at every size. This is what separates Sole from a Google Font dump.
Clear space
Always reserve 1× ring diameter of clear space on all sides. Don't crop the mark into other shapes. Don't box it.
Forbidden treatments
Don't
Tint the ring. It is always Ember — on Midnight, on Paper, on photography, in print. The ring is the brand.
Don't
Italicize or compress the wordmark. Never change the tracking.
Don't
Add a tagline lockup under the mark. Sole stands alone. Context comes from surrounding copy.
Don't
Use Semi Bold at display sizes above 96px. Drop to Medium (500) for giant applications to keep the letterforms from feeling chunky.
Foundations
Color
Four brand colors. Three surface colors. A semantic layer. Together they define every screen — no custom hex values, ever.
Brand
Ramps
Midnight
900
800
700
600
500
400
300
Ember
900
800
700
600
500
400
300
Sand
700
500
400
300
200
100
50
Semantic
Usage rules
Do
Primary CTAs are Midnight on Sand/Paper. Dark reads as confident, not destructive — the way Linear, Stripe, and Vercel do it.
Don't
Use Ember as a primary button background. Warm red-orange reads as destructive — it will be mistaken for a delete action.
Do
Reserve Ember for brand accents: the logo dot, the Sole Score ring, active nav indicators, and the breathing session badge.
Don't
Pair Ember with Error (Red) in the same view. The warm-to-warm clash makes real alerts harder to scan.
Do
Use Midnight for long-form work surfaces. Use Paper for forms, wizards, and onboarding. Use Sand to bridge.
Don't
Use pure white (#FFFFFF) as a page background. Paper is our white — it's warmer and matches the ink.
Foundations
Typography
One typeface. One monospace. Nine sizes. Four weights. Every line of text on Sole picks from this list — no exceptions.
Typefaces
Primary
Inter
Sole's entire voice. Regular for body, Medium for UI labels, Semi Bold for headings, Bold for display. Never use Light or Extra Bold.
Monospace
JetBrains Mono
Reserved for: token names, specs, code samples, invoice numbers, and the "meta" microtype on resource lists. Never body copy.
Scale
display-xl
Paid faster.
72px · 700 · -0.025em · 1.0 lh
display-lg
Own your work.
56px · 700 · -0.025em · 1.05 lh
display-md
Verdict in seconds.
40px · 700 · -0.02em · 1.1 lh
display-sm
Contracts that protect you.
32px · 700 · -0.02em · 1.15 lh
xl
Section header on a dashboard.
24px · 600 · -0.01em · 1.3 lh
lg
Lede copy under a page title.
20px · 500 · 1.4 lh
md
Body copy. The default paragraph size for everything inside the product shell.
16px · 400 · 1.55 lh
sm
Secondary UI text. Buttons, labels, table cells, tooltips.
14px · 400 · 1.5 lh
xs
CAPTIONS · MICRO TEXT · BADGES
12px · 500 · 0.02em tracking
Weights
300 · Light
Never used. Don't touch.
avoid
400 · Regular
Body prose. Sentences. Paragraphs.
body, md, sm
500 · Medium
UI labels, buttons, meta text.
lg, labels, nav
600 · Semi Bold
Section headings. Most titles live here.
xl, h2, h3
700 · Bold
Display-scale headlines only.
display-sm → xl
Pairing rules
Do
Pair a display title with lede (lg) copy underneath. Sand-on-paper or Sand-on-midnight; never lede on color.
Don't
Use display sizes for body text. If there's more than 2 lines, it's not display — it's body.
Foundations
Space & Grid
Everything on a 4-pixel grid. Everything inside a 12-column canvas. Break either and the UI starts to look like it was hand-assembled.
Spacing scale
--s-1 · 4px
--s-2 · 8px
--s-3 · 12px
--s-4 · 16px
--s-5 · 20px
--s-6 · 24px
--s-8 · 32px
--s-10 · 40px
--s-12 · 48px
--s-16 · 64px
--s-20 · 80px
--s-24 · 96px
Radius
--r-xs · 4px
--r-md · 8px · buttons, badges
--r-lg · 12px · cards, inputs
--r-xl · 16px · modals
Grid
12-column grid. 16px gutter inside the product shell; 32px gutter on marketing surfaces. Max content width 1080px inside the library; 1200px on marketing.
Shadows
sh-xs
sh-sm
sh-md
sh-lg
Foundations · Baked into Core
Motion
Sole's animation library is not an add-on. Durations and easings live in the core tokens; every component references them. This page shows what each token feels like and when to reach for it.
Principles
M1
Motion earns its milliseconds.
Every animation answers "why is this moving?" — calculating, revealing, confirming, loading, returning. If the answer is "to look alive," cut it.
M2
Organic over linear.
Default easing is
--ease-out-soft. Linear is reserved for indeterminate loading strips only.M3
Respect the reduced-motion pledge.
Every motion-based signal has a non-motion equivalent (icon, color, weight).
prefers-reduced-motion collapses durations to 0.001ms system-wide.Duration tokens
--dur-instant
100ms · Hover color flips, tab active state. No transform changes.
press, tab, hover
--dur-fast
150ms · Button states, input focus ring, toggle thumb.
buttons, inputs
--dur-base
250ms · Default for any state change with transform (cards lift, dropdowns open).
default
--dur-slow
400ms · Page transitions, drawer slide, collapse/expand.
nav, drawers
--dur-reveal
600ms · Score Draw, Verdict Reveal — moments of truth.
verdicts
--dur-breathe
3000ms · Ambient loop on standby states (pending-action badges).
loops only
Easing tokens
--ease-out-soft
cubic-bezier(0.22, 1, 0.36, 1)
default · exits gracefully
--ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)
symmetric moves, toggles
--ease-reveal
cubic-bezier(0.16, 1, 0.3, 1)
score draw, verdict reveal
--ease-organic
cubic-bezier(0.65, 0, 0.35, 1)
marketing, long-form
--ease-standard
cubic-bezier(0.2, 0, 0, 1)
Material-style, rare
Signature motion
Sole has six named motions. Learn their feel; use them verbatim.
Score Draw
The ring fills in as the score is calculated. Number counts up in sync. This is Sole's visual signature — never skip it when a score first renders.
600ms · --ease-reveal · on mount / recalc
Verdict Reveal
Card slides up 8px and fades in, then lands with a micro-scale (0.96→1.00). Used once per analysis, at the top of the result.
600ms · --ease-reveal
Fair · 71
Nudge Pulse
A ring-shaped breath indicating something is waiting for the user (a Nudge to send, an unread flag). Never apply to destructive actions.
1.6s loop · --ease-out-soft
1
Load Scan
Linear sweep across a progress strip while Claude is analyzing. The only place linear motion is allowed — the motion itself represents machine reading.
1.4s loop · --ease-in-out
Pressable Lift
On tap/click the element moves down 1px then returns 2px above origin before settling. Confirms the tap physically.
150ms · --ease-out-soft
Analyze
Drawer Slide
Right-side drawers slide in 40px with a gentle fade. Left-side nav is never a drawer — it's always mounted.
400ms · --ease-out-soft
Field Focus
Input border morphs from stone to Ember, plus 3px Ember halo at 12% alpha. Happens on every focusable control.
150ms · --ease-in-out
Client email
Breathe (Ambient)
A 3-second breathing loop on the session badge while Claude holds context. Subtle — the only permissible decorative motion.
3s loop · --ease-in-out · rare
Brand mark motion
The Sole wordmark has five sanctioned motions. All five loop in the stages below for study — in production each fires once (or loops in a designated ambient surface only).
Mark Reveal
Whole wordmark fades in from below. The app's first breath — used once, on initial load of the product shell and marketing hero.
600ms one-shot · --ease-reveal · on app mount
sle
Ring Reveal
The Midnight ring scales in, then the Ember dot pops 200ms later. This is the canonical brand-signature entrance — reserved for product intro videos, loading splashes, and investor decks.
800ms one-shot · --ease-reveal · brand surfaces
sle
Dot Breathe
Ember dot pulses inside a static ring — signals "Sole is running" or "session is active". The brand equivalent of a heartbeat. On-dark and on-light alike.
3s loop · --ease-in-out · ambient
sle
Mark Breathe
Whole wordmark scales 1.00 → 1.03 → 1.00 slowly. Used only on the login screen and the empty-state hero. Never inside the app shell — it would fight with the Dot Breathe.
3s loop · --ease-in-out · login, empty states
sle
Mark Draw-In
Letters arrive in sequence — s, l, e — then the Ring Reveal closes the word with the Ember dot last. The most cinematic of the logo motions. Reserved for the first frame of brand videos, major launches, and the Sole.app loading splash once per session.
3.6s loop (1.2s one-shot in production) · --ease-reveal · launch moments
s
l
e
Logo motion rules
Do
Use Ring Reveal once per session on the app load splash — it's the brand's handshake.
Don't
Stack two logo motions on the same mark. Mark Breathe and Dot Breathe cannot coexist — pick the ambient behavior once and commit.
Do
Fall back to a static mark when prefers-reduced-motion is set. The logo is recognizable without movement.
Don't
Rotate, skew, or color-shift the wordmark. The five motions above are the complete set — new logo motions require a Joe-owned RFC.
Motion × component matrix
| Component | Motion | Duration | Easing |
|---|---|---|---|
| Button · primary/secondary | Pressable Lift | 150ms | --ease-out-soft |
| Input · focus | Field Focus | 150ms | --ease-in-out |
| Card · hover | Translate -2px | 250ms | --ease-out-soft |
| Modal · open | Fade + scale 0.98→1 | 250ms | --ease-out-soft |
| Drawer · slide | Drawer Slide | 400ms | --ease-out-soft |
| Toast · arrive | Translate up 12px + fade | 250ms | --ease-out-soft |
| Sole Score · mount | Score Draw | 600ms | --ease-reveal |
| Verdict Card · mount | Verdict Reveal | 600ms | --ease-reveal |
| Nudge badge · waiting | Nudge Pulse | 1.6s loop | --ease-out-soft |
| Analyzer · working | Load Scan | 1.4s loop | --ease-in-out |
| Session badge · idle | Breathe | 3s loop | --ease-in-out |
| Logo · app mount | Mark Reveal | 600ms | --ease-reveal |
| Logo · brand splash | Ring Reveal | 800ms | --ease-reveal |
| Logo · session active | Dot Breathe | 3s loop | --ease-in-out |
| Logo · empty state | Mark Breathe | 3s loop | --ease-in-out |
| Logo · launch moment | Mark Draw-In | 1.2s one-shot | --ease-reveal |
Do's & Don'ts
Do
Reference tokens, not raw values. transition: transform var(--dur-fast) var(--ease-out-soft);
Don't
Stack animations on a single element (no "scale + rotate + fade" cocktails). One move, one intent.
Do
Test every animation with reduced motion on. If the UI becomes unclear without motion, the design itself is broken.
Don't
Use durations outside the token set. No 200ms, no 300ms, no 500ms. The scale exists to create rhythm.
Foundations
Iconography
Phosphor Icons at 1.5px stroke. Always. Never Lucide, Feather, Heroicons, or emoji. Icons are always paired with a label on first use.
Set
Phosphor Icons · Regular weight · 24px default, 16px in tight contexts, 32px for empty-state centerpieces.
Sample icons (Phosphor-style)
Verified
Add
Home
Document
Time
Star
Message
Settings
Menu
Person
Calendar
Location
Rules
Do
Use Phosphor at 1.5px stroke, 24px default. Stroke color = current text color (inherits).
Don't
Mix icon families. Never ship Phosphor + Feather + Lucide in the same UI. The stroke weights don't match.
Do
Pair an icon with a label on first use in a screen. Solo icons only after the meaning is taught.
Don't
Use emoji in the product. Not in copy, not in empty states, not in tooltips. Emoji read as casual; Sole handles other people's money.
Foundations
Illustrations
The warm layer. 24 spots in Style C — editorial-minimalist shape with heavy risograph texture, warm shadows, wobbly outlines. The illustration system intentionally breaks Sole's surgical UI register so the emotional moments feel earned.
Why illustrations break the register on purpose.
Sole's UI is Linear-lane: precise, engineering-tool, surgical. That register works for 95% of the product — the tables, forms, dashboards, flows where freelancers need speed and clarity. But the 5% of the product that carries an emotional beat — a client finally paid after the Nudge, a contract got signed, a scope got agreed on — deserves warmth the chrome would never offer.
Illustrations carry that warmth. Heavy riso grain, visible hand, warm light falling across objects. Locked as "Style C" on April 17, 2026. Drawn by Vera Sable in the Hedof / Brian Edward Miller / Tom Froese lineage.
Style C locked
Riso-textured
Warm humanist
24 spots
24 animations
Palette
Each illustration uses 3–4 colors, always drawn from this set. Sand is the field. Midnight is line and structure. Ember is life (coins, dots, seals). Clay is the riso tint. Ink is the warm shadow. Paper is the alternate surface for editorial hero work.
Ember#E8684A
Midnight#0E1A2B
Sand#F6EFE3
Clay#C9765A
Paper#FAF6EC
Ink#1A1816
Contracts · Module 1
5 spots · empty · success · error · onboarding · nudge
Get Paid · Module 2
5 spots · empty · success · error · onboarding · nudge
Define · Module 3
5 spots · empty · success · error · onboarding · nudge
Cross-module · 9 shared surfaces
404 · 500 · loading · welcome · upgrade · milestone · export · offline · module-complete
Shared vocabulary
Every piece in the kit uses some subset of the same object, surface, and motion library. That's how 24 illustrations feel like one artist made every one — and how the 25th and 50th and 100th will continue to feel coherent as the kit grows.
Object library
The coin. Ember circle, 32–62px. Heavy riso. Always carries weight.
The paper. Paper-fill rectangle, Midnight outline. The thing that gets signed, sent, or marked.
The ruler. 3px Midnight line with ticks. Always horizontal. "Define" lives here.
The compass. Circle + cardinals + rotating needle. Navigation and loss.
Surface library
Tabletop line. The horizon every object rests on. Drawn in from the left.
Warm shadow. Ink ellipse, 35% opacity, riso-textured. Under every lifted object.
Light rays. Ember diagonal strokes from upper-right. Arrive with the good moments.
Ambient grain. Clay-tinted overlay at 8–10% on every piece. The paper feel.
Motion library
Rise. Fade + 10px translateY. For papers and planned arrivals.
Drop. Fall + slight bounce. For coins and concluded deals.
Pop. Scale-0.6→1.1→1. For seals, dots, and punctuation marks.
Draw. Stroke-dashoffset. For lines that narrate themselves.
Pulse. Scale 1→1.25→1. For dots that haven't resolved yet.
Rules
Do
Lean into texture on celebration and welcome surfaces. The grain is the proof a human made this — the studio's premium signal against AI-smooth vector gloss.
Don't
Pull the texture back to "fit" Sole's surgical UI register. The mismatch is the point. The illustration's job is to break the register.
Do
Write the one-sentence idea before drawing. If you can't write the caption, the concept isn't done.
Don't
Mix style registers across the kit. A, B, and C cannot coexist — pick one and ship all 24 in it. We picked C.
Do
Animate once on mount. Gentle ease-out with slight overshoot. No looping — the moment matters because it happens once.
Don't
Use emoji or stock illustration as a substitute. If we don't have a Vera piece for a surface yet, brief one — don't swap in temporary art. Temporary art becomes permanent.
Systems
UUI Components
Untitled UI v2.0 is Sole's backbone. Every primitive here is a real UUI component themed with Sole tokens. Never build a custom button when a UUI button exists.
Buttons
Inputs
Badges
Ember
Paid
Due soon
Overdue
Draft
Archived
Avatars
JR
ZA
LD
JR
ZA
LD
+4
Toggle · Progress · Tabs
Toggle
Auto-send nudges
Weekly summary
Progress
4 of 7 modules complete
Tabs
Active
Archived
Drafts
Data table
| Client | Contract | Score | Status | Amount |
|---|---|---|---|---|
| Lovelace Studio | Brand system · v2 | 89 | Paid | $8,400 |
| Mariner & Co | Monthly retainer | 71 | Due Apr 30 | $3,200 |
| Banyan Coffee | Packaging design | 50 | Overdue 12d | $1,850 |
The full UUI map
Sole draws on every core UUI v2.0 primitive. Search the Untitled UI library before inventing new components.
Actions
Button · Button Group · Icon Button · Dropdown · Menu · Context Menu
Inputs
Input · Textarea · Select · Multi Select · Radio Group · Checkbox · Toggle · Date Picker · Range Slider
Display
Avatar · Avatar Group · Badge · Tag · Progress Bar · Progress Circle · Tooltip · Divider
Navigation
Tabs · Breadcrumbs · Pagination · Sidebar · Sub-nav · Command Palette
Feedback
Alert · Toast · Modal · Drawer · Banner · Empty State · Loading Scan
Data
Table · Card Grid · List · Stat Card · Chart Card · Activity Feed
Systems
Sole Patterns
Six patterns that only exist in Sole. Each is a composition of UUI primitives plus a Sole-specific signature. Memorize them — they are what makes the product feel like Sole.
1 · Sole Score
A 0–100 number backed by a ring. Tiered: Red (0–39), Ember (40–69), Success (70–89), Strong (90–100). Always animates with Score Draw on mount.
2 · Verdict Card
The top-of-result card: one-sentence verdict, Sole Score, and three sharable badges. Always appears before the detailed analysis.
3 · Nudge Tone Matrix
Every Nudge (follow-up message) is available in three tones. Users pick based on how overdue the invoice is.
Friendly
Firm
Final
1 day late
Friendly
Hey — quick nudge that invoice #104 went out last week. Let me know if you need a second copy.Firm
Just a heads up — invoice #104 is one day past due. Can you confirm it's in your payable queue?Final
Invoice #104 is past due as of today. Please confirm payment timing by end of week.7 days late
Friendly
Following up on #104 — it's now a week past due. Any blockers I can help with?Firm
Invoice #104 is seven days past due. Per our contract, a 2% late fee applies starting today.Final
Invoice #104 is seven days past due. If payment isn't received by Friday, I'll pause current work.30 days late
Friendly
I want to make sure invoice #104 hasn't fallen through the cracks — it's at day 30.Firm
Invoice #104 is 30 days past due. I'm pausing active work until it's settled.Final
Invoice #104 is 30 days past due. This is the final reminder before I escalate to collections.4 · Shareable One-Pager
Every major analysis produces a single vertical summary image (Midnight background, Ember accent, Sole wordmark locked bottom-right) that freelancers can post to LinkedIn or send to a client. This is the product's main growth vector.
Shareable · 1080 × 1350
Fair · 71
Three clauses flagged. One rewrite needed to protect your IP.
sle
5 · Flag Stack
Ordered list of issues found in an analysis. Each flag has a severity chip, plain-English description, and "Rewrite this" CTA. The top flag always has Nudge Pulse applied until user acknowledges.
6 · Risk Stack Strip
A thin horizontal strip at the bottom of every screen that shows what Sole can and can't advise on (the legal risk tiering — T1 through T4). Always present. Never dismissable. This is what keeps Vivian happy.
T1Informational only
·
T2Template language
·
T3Refer to counsel
·
T4Do not advise
Practice
Do's & Don'ts
The fastest way to make a Sole screen feel wrong is to break one of these. When in doubt, ping Joe before shipping.
Voice
Do
"This contract transfers your IP. Fix with one line."
Don't
"We're excited to help you on your freelance journey! 🚀"
Color
Do
Primary CTAs = Midnight. Ember is reserved for the logo dot, active nav bar, and the Sole Score ring only.
Don't
Use Ember as a button background. It reads as red/destructive and will be confused with delete.
Do
Destructive = Error Red (#D02424). Delete, remove, unlink. Nothing else belongs in red.
Don't
Apply Ember to icons, dividers, or decorative backgrounds. That's Coral's job.
Type
Do
Use display sizes only for page titles and hero copy. Body stays at 16px.
Don't
Mix Inter and a second sans-serif "for variety." Inter carries all the voices we need.
Motion
Do
Use Score Draw on mount for every Sole Score — including tiny ones in a table cell.
Don't
Animate error states with pulse or shake. Errors should feel certain, not jittery.
Components
Do
Reach for a UUI primitive first. If it doesn't fit, check with Joe — that's the only way new primitives enter the library.
Don't
Build a one-off button "because this screen is different." It's not.
Practice
Resources
Where the real work lives. Figma keys, GitHub paths, token exports, and the humans who own each layer.
Figma
-
Product · v0.2.0Sole — Product Design FileCanonical source of truth. 16 pages. 3-layer token model. Tailwind breakpoints xs–2xl.Open →
-
UUI LibraryUntitled UI v2.0 (published)Every primitive Sole uses. Themed with Sole tokens in the product file.Open →
-
Logo · Systemsole-lockup-system.htmlReusable wordmark CSS, size family, EPS export. This page inherits its wordmark from here.View →
Code
-
Next.js 15apps/sole-webPrimary product shell. Turborepo monorepo. Imports tokens from packages/tokens.Repo →
-
Tokenspackages/tokensCSS variables + Tailwind preset. Exported nightly from the Figma file.Repo →
-
Componentspackages/uiSole-specific patterns: VerdictCard, ScoreRing, NudgeBadge, FlagStack, RiskStackStrip.Repo →
Token sample
/* Core motion — referenced by every component */
--dur-instant: 100ms;
--dur-fast: 150ms;
--dur-base: 250ms;
--dur-slow: 400ms;
--dur-reveal: 600ms;
--dur-breathe: 3000ms;
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
--ease-organic: cubic-bezier(0.65, 0, 0.35, 1);
Owners
-
DesignJoe Richardson (CDO)Vision, component library additions, motion library.joe@primismerian.co
-
Product DesignZara Ahmed (Design Lead)Day-to-day pattern work and Figma file owner.zara@primismerian.co
-
EngineeringLucas Pereira (Platform Lead)Token pipeline, components package, Figma→code bridge.lucas@primismerian.co
-
CounselVivian Park (Fractional GC)Risk Stack strip authority. Release-gate review on every launch.vivian@parkgc.com
Version
This document is V2. Additions since v0.1: full Illustrations foundation (24 Phase 1 spots in locked Style C, shared object/surface/motion vocabulary, risograph filter system, animation primitives). Next release: v0.3 (adds Grow module patterns, dark-mode specific shadow tokens, the complete Flag Stack interaction model, and Phase 2 illustration expansion).