SYSTEM
ORDERARBMQ+FIG 00 / 03X:0.0 / Y:0.0[ ORDER ] /KEPTA·01S·∞A design system held as a living artifact: type colliding, forms over forms, order kept not by tidiness but by four pillars working underneath. Monochrome; hierarchy by scale, weight and tone. Hue = 0.
Content → Container
Structure follows content, not the reverse. Once you know what a thing is and where it lives, the rest follows: collection, card, component, tokens. The content gives the container its shape.
Typography
two voices · five steps · the jumpABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@#%·—()[]?!
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghij 0123456789 #+_@=$&*%<!--([{?!}])->
Variables
tokens · code → Figma variablesGrid
how a layout is built · content on the columnsLayouts aren't drawn freehand. They're composed on a 12-column grid anchored to the outer padding. A block claims a span of columns (a zone). The container sits on those lines, and the content breathes inside. What's left is free space, kept on purpose. The grid measures; it never owns the content.
content type → zone → column span → container (outer) → padding (inner) → tokens
Space
outer & inner padding · the rhythm tokens- --padclamp(16px, 3.2vw, 44px)OUTER · page side inset
- --gapclamp(56px, 9vw, 140px)between movements
- --track0.09emmeta letter-spacing
- Outer = the page's side inset (one token, everywhere). Inner = a component's own padding. They never get hardcoded: the value lives in the token, the intent in the name.