Library
Design systems
YUUKI MASTER holds what is true across every project. Each product system inherits it and overrides only what makes that product distinct — so two products differ in structure, not merely in palette.
YUUKI MASTER
v1.0.0Principles
- · High polish: nothing ships with an unfinished state
- · Keyboard friendly: every primary action is reachable and shortcut-labelled
- · Excellent dark mode: dark is designed first, not inverted
- · Strong typography: type carries hierarchy before color does
- · Real states: all eight interaction states exist in code
- · Restrained radius: radius is a decision, not a default
- · Subtle motion: motion explains change or it is cut
- · No AI slop: distinctive structure per product, never a recolored template
Invariants
audit-enforced- criticalBody text ≥4.5:1, large text/icons/focus ≥3:1 against computed background
- criticalEvery interactive element implements default·hover·focus-visible·active·disabled·loading·error·success
- highEvery animation has a prefers-reduced-motion fallback
- criticalNo horizontal scroll between 320px and 1920px
- mediumNo raw color or font literals outside the token block
- mediumExactly one icon family per product
- criticalNo fabricated metrics, testimonials, or decorative charts
- highTouch targets ≥44×44px
- highTwo Yuuki products must differ in macrostructure, density, nav, and type — not just palette
Project systems
5 inheriting MASTERDesign Forge
v1.0.0Technical Dense
- · The design product must not look AI-generated — that is the whole proof
- · Density with air: dense information, generous rhythm between regions
- · Show the rule, then obey it: every surface demonstrates a rule it teaches
| palette | forge-ember |
|---|---|
| typography | instrument-mono |
| icons | lucide |
| radius | 0–6px |
| navigation | Left rail with sectioned nav + ⌘K |
Own invariants
- · Panels never nest; one surface level per region
- · All counts, scores and IDs render in the mono face
resolves to 11 principles · 11 invariants
v1.0.0 · 2026-08-14 — Initial contract generated by the Forge for itself
Factory
v1.0.0Technical Dense
- · Technical Dense: the AI software factory is an instrument, not a brochure
| palette | ops-console |
|---|---|
| typography | swiss-data |
| navigation | Pipeline rail + run inspector |
Own invariants
- · Build/pipeline state is visible from any screen
resolves to 9 principles · 10 invariants
v1.0.0 · 2026-08-14 — Seeded from MASTER
Yuuki OS
v1.0.0Soft Productivity
- · Personal Command Center: calm, glanceable, mine — not an enterprise dashboard
| palette | soft-daybreak |
|---|---|
| typography | soft-humanist |
| navigation | Labeled sidebar + quick capture |
Own invariants
- · Home answers 'what needs me now' in one screen without scrolling
resolves to 9 principles · 10 invariants
v1.0.0 · 2026-08-14 — Seeded from MASTER
MusicGuess
v1.0.0Playful Social
- · Playful Social: energy with a grammar; celebration reserved for real wins
| palette | arcade-night |
|---|---|
| typography | playful-round |
| navigation | Lobby-first, session state always visible |
Own invariants
- · Round state changes render within one frame of the server event
resolves to 9 principles · 10 invariants
v1.0.0 · 2026-08-14 — Seeded from MASTER
Travel
v1.0.0Editorial
- · Editorial Atmospheric: the trip is a story; the map is its index
| palette | paper-ledger |
|---|---|
| typography | editorial-serif |
| navigation | Masthead + map/journal toggle |
Own invariants
- · Photography leads; UI chrome recedes on media surfaces
resolves to 9 principles · 10 invariants
v1.0.0 · 2026-08-14 — Seeded from MASTER
Style presets
12 — structure, not just paletteTechnical Dense
high densityInstrument-grade tooling for people who live in it
- Structure
- Sidebar workspace; master–detail and split-inspector interiors; tables over cards
- Navigation
- Icon+label side-rail, project switcher, Cmd+K primary
- Component strategy
- First-party vault primitives; every state implemented; zero decorative components
- Spacing / radius
- 4px base · 0–6px; controls 4px, panels 6px, never 16px
- Motion stance
- functional
Instrument PanelForge Emberlucide
Data Intelligence
very-high densityVery high density, semantic color, the data is the interface
- Structure
- Monitoring workspace or map/diagram-dominant canvas with docked panels
- Navigation
- Thin toolbar + layer/scope toggles; the primary surface is navigation
- Component strategy
- Stat tiles, sparklines, virtualized tables; color reserved for status semantics
- Spacing / radius
- 4px base · 0–4px
- Motion stance
- functional
Swiss DataOps Consoletabler
Editorial
low densityTypography-led publishing voice; the page reads like it was set, not assembled
- Structure
- Long-document and editorial-feed shapes; asymmetric folds; hairline rules
- Navigation
- Masthead + minimal links; footer as colophon
- Component strategy
- Prose primitives, pull-quotes, bylines; almost no chrome components
- Spacing / radius
- 8px base · 0–2px; images may be square
- Motion stance
- motion-cut
Editorial DeskPaper Ledgerphosphor
Atmospheric
medium densityCinematic dark canvas; ambience carries the brand, restraint carries the trust
- Structure
- Marquee-hero entries; stage-dominant interiors with docked chrome
- Navigation
- Floating pill or hidden ⌘K nav; chrome recedes
- Component strategy
- Few, large, considered components; ambient background is the one indulgence (≤20% canvas)
- Spacing / radius
- 8px base · 8–12px on floating panels only
- Motion stance
- expressive
Atmos GroteskAtelier Noirphosphor
Playful Social
medium densityWarm, bouncy, human — energy with a grammar, not chaos
- Structure
- Gaming-lobby and feed shapes; big friendly blocks; irregular bento allowed
- Navigation
- Bottom tabs (mobile) / chunky top tabs (desktop); labels always visible
- Component strategy
- Big-choice cards, player tiles, ready badges; states expressed loudly
- Spacing / radius
- 8px base · 12–16px earned here — chunky controls fit the voice
- Motion stance
- expressive
PlaygroundArcade Nightkoboyo
Luxury
low densityScarcity of elements, abundance of space; gold used like punctuation
- Structure
- Split-studio and photographic folds; generous asymmetric whitespace
- Navigation
- Edge-aligned minimal nav; wordmark-led
- Component strategy
- Almost none visible; typography and imagery are the components
- Spacing / radius
- 8px base · 0px — square is the luxury tell
- Motion stance
- motion-cut
MaisonAtelier Noirphosphor
Utilitarian
medium densityZero-webfont, zero-decoration internal tooling that ships today
- Structure
- Settings/forms and master–detail; native controls preferred
- Navigation
- Plain left nav with text links; breadcrumb trail
- Component strategy
- Native-first (select, details, dialog); vault primitives only where native fails
- Spacing / radius
- 4px base · 4px flat
- Motion stance
- motion-cut
Utility StackResearch Slateheroicons
Terminal
high densityMonospace world; the single-font choice IS the design
- Structure
- Log-stream and command surfaces; everything left-aligned on a character grid
- Navigation
- Command-line prompt + numbered menus; ⌘K equivalent built in
- Component strategy
- Text-first components; ASCII-adjacent tables; cursor as ornament only when it means input
- Spacing / radius
- 4px base · 0px
- Motion stance
- functional
Pure TerminalTerminal Phosphorradix-icons
Soft Productivity
medium densityCalm personal tools that feel kept, not gamified
- Structure
- Command-center home + timeline/kanban interiors
- Navigation
- Labeled sidebar with friendly grouping; search secondary
- Component strategy
- Rounded field rows, gentle empty states, progress visualized honestly
- Spacing / radius
- 8px base · 8–10px consistent
- Motion stance
- functional
Soft HumanistSoft Daybreaklucide
Gaming
medium densityScore-driven surfaces with arcade energy and codified saturation
- Structure
- Lobby → session → results loop; leaderboards as primary tables
- Navigation
- Big mode tiles; session state always visible
- Component strategy
- Player tiles, score displays, timers; celebration reserved for real wins
- Spacing / radius
- 8px base · 8px + angular display accents
- Motion stance
- expressive
ArcadeArcade Nightkoboyo
Research
high densityCitation-grade reading and analysis; quiet ink on paper
- Structure
- Three-pane docs shape or annotated-reading layout; footnote gutters
- Navigation
- Persistent tree + in-document anchors; breadcrumb depth
- Component strategy
- Prose, tables, callouts, citations; charts follow dataviz discipline
- Spacing / radius
- 8px base · 2–4px
- Motion stance
- motion-cut
ScholarResearch Slatelucide
Mobile Minimal
low densityThumb-first, 16px floor, one action per screen
- Structure
- Single-column stacks; bottom sheet details; tab bar world
- Navigation
- 3–5 bottom tabs, FAB only when one action truly dominates
- Component strategy
- 44px+ touch targets everywhere; sheets over modals; skeletons over spinners
- Spacing / radius
- 4px base · 10px continuous
- Motion stance
- functional
PocketSoft Daybreaklucide