FOS / DESIGN SYSTEM
The blueprint.
Tokens, motion, primitives. The only place to change them. If you find yourself reaching for a hex code in a component, come here first.
01 / BRAND
Mark, wordmark, voice.
Monogram
FO interlock
FASHIONOS
Wordmark
Archivo Black, -0.02em
Voice
Direct. Editorial. Engineered. We say garment, not asset. We say drape, not render.
02 / COLOR
Eight tokens. Zero hex in components.
--color-paper
Base surface
--color-ink
Text + structure
--color-rule
1px dividers
--color-hot
Accent / action
--color-muted
Soft surface
--color-seam
Studio stitch lines
--color-vertex
Studio handles
--color-destructive
Destructive action
03 / TYPE
Three voices, one hierarchy.
DISPLAY / Archivo Black
Garments at the speed of thought.
SANS / Space Grotesk
Body copy stays calm, legible, and quietly elegant in every weight.
MONO / JetBrains Mono
PIECE / 014 · SEAM-SM-03 · ALLOW 1.0cm
04 / MOTION
One curve. Three durations. One signature.
--dur-instant
75ms
Hover, focus, tap response
--dur-quick
180ms
Panel open, toast, swap
--dur-fall
420ms
Signature cloth-fall entrance
--ease-fashion
cubic-bezier(0.2,0.9,0.1,1)
The only easing curve
Signature transition
FALL / 01
Drape.
FALL / 02
Drape.
FALL / 03
Drape.
05 / PRIMITIVES
The atoms.
Buttons
Hard edges. 1px borders. Mono labels.
Spec row
PIECE014
SEAMSM-03
ALLOW1.0 cm
06 / CHECKLIST
The 11 paradigm shifts.
01Simplicity gradient — novice to power user
02Sub-100ms feel everywhere
03Real-time multiplayer architecture
04Offline-first / PWA
05AI as default input
06Mobile-first parity
07Industry-grade output (tech-pack, DXF, grading)
08Creator monetization built in
09Generational visual identity
10Edge-native infra (R2, CDN, workers)
11Shareable virality — every artifact has a URL