◆Origin design system · Volume II
One look, every app, any client. This page is rendered by the system it documents — if it looks wrong here, the system is wrong.
◆01 · Palette
Stone is the page. Ink is the words — and the "act here" surface. Magenta is the voice of the system. Lime exists for exactly one job.
◆02 · The magenta law
Five lawful voices. Semantic magenta is uncapped but always small — text, dots, borders, tints ≤8%. Decorative flourish: one moment per layout. Magenta never fills anything larger than a button. No red, ever.
◆03 · Type
Display black.
Headline extrabold.
Subhead
Row title — what lists are made of
Body — plain Inter at a comfortable measure, muted when secondary, never gray-on-gray below AA.
The flourish — their voice, pull-quotes, numerals, the wink.
Mono label — the entry point to every block
Mono detail — subsection labels, metadata
◆04 · The ink island
Every intake is an ink island: the dot rolls off the corner, clipped. Fields stay light. One magenta submit — the layout's accent moment. The ◆ kicker is required.
◆Grow the library
Hints on ink sit at stone 45%.
◆05 · Chapters & rows
The 44px magenta tick + ◆ kicker is chapter-level ONLY — subsections use quiet detail labels. Every list row darkens, the title goes magenta, the arrow slides. Hover these:
Status glyphs
◆06 · Tiles & controls
A selected tile keeps the darker ground, magenta frame, magenta title — never a dark fill. Spend controls carry their price at the moment of choice.
◆ Mode
Single page
one page, one keyword
Mode
Location pages
one service × many cities
Mode
Ad landing
message-matched to one ad
Buttons
Fields
Fields focus magenta — the one lawful magenta focus.
◆07 · Icons
44×44 grid, stroke 2, rounded, upright. Exactly one meaningful accent per icon. Silhouettes must read monochrome at 14px — shown big and small below. Full commission: 36 more in livery-icon-brief.md.