Principles
Four rules decide every open question in this system. When a component and a principle disagree, the principle wins.
Quiet by default
Hairlines and space before boxes and fills.
One accent
Green marks what matters — nothing else.
Bilingual first
Every layout must survive an RTL to LTR flip.
Evidence on screen
Numbers get the most typographic weight on a page.
Color
Six tokens, two themes. There is no seventh color; anything else you need is a mix of the accent with the background.
Only these five mixes: 7 / 16 / 34 / 62 / 100 percent of the accent over --bg.
Typography
Four faces with strictly separate jobs. If a piece of text does not fit one of the roles below, it does not belong on the page.
Pinar — all headings, light and regular weights.
Yekan Bakh — body copy, UI labels, forms.
Instrument Serif — wordmark and key figures only.
JetBrains Mono — metadata, always LTR, .2em tracking.
Space & radius
Nested corners step down by 4: a 16px card holds 12px inputs.
Grid & breakpoints
A 12-column grid inside a 1360px container, gutters from the space scale. Below each breakpoint the layout simplifies rather than shrinks.
Surfaces & depth
There are no shadows in this system. Depth is a hairline, a 6% tint, or a blur behind a sticky bar — nothing else.
Iconography
Icons never carry the accent on their own; they inherit the color of the text they sit with.
Components
Each component below is shown live, followed by its states and rules. Hover and focus the examples — they behave exactly as they do in production.
Labels sit above the field; errors sit below in accent, never red.
Figures are Latin, in Instrument Serif; their labels are mono.
Motion
Motion behaves like a plant growing: slow in, soft out. Nothing loops in the reader’s field of view except a single seed dot.
Accessibility
Requirements, not recommendations. A component that fails one of these does not ship.
Body contrast in both themes; 3:1 above 24px.
Minimum touch target, even for small controls.
2px accent outline, 3px offset. Never removed.
Fields never below 16px on mobile — prevents iOS zoom.
inset-inline and margin-inline only — no left/right.
State is never green alone — pair it with text or an icon.