Joe Inz · design system
A design system is the set of rules that keeps everything I make looking like one thing. This one works in two languages, and every rule on this board can be checked.
v1.1.0two scriptsone accentaudited
Two scripts, one system
Neither side is the original and neither side is the translation. Flip the card and the layout follows the reading direction.
خطّان، نظام واحد
لا يُعدّ أيٌّ من الجانبين هو الأصل ولا أيٌّ منهما هو الترجمة. اقلب البطاقة وسيتكيف التصميم مع اتجاه القراءة.
Drawn in 2021. Waiting in a folder for years. Now it signs everything.
One drawing became a family. Each mark has one job, and none of them may be redrawn, mirrored or re-lettered.
One saturated accent. A budget, not a paint.
Caramel appears in exactly five jobs, spent like money. If it turns up anywhere else, some other use has to give its slot back. The state colours and the chart colours are separate sets with their own jobs.
The small dash that marks the start of a section
One marker highlight per screen, never two
The primary action, filled
The focus halo around the active field
Selected text, tinted rather than painted
The same four on navy
Dark mode is a matched scheme, not an inversion. The accent stays caramel, and where caramel must read as text it steps up to its brighter twin.
7
Sizes, one setting that resizes them all together, and an Arabic size for every step.
Seven roles, each about a quarter larger than the one below. Any surface that uses the system, a page or a screen or a slide, resizes the whole ladder with one number and never touches a single step.
A tightly packed screen sets one number, 0.9375, and every step follows it down together. Nothing is ever resized by hand.
Arabic reads smaller at equal size, so every step ships a pre-computed Arabic size. The one exception: the label never drops to 11px. Weight 700 carries it at 13px.
“Senior is a behaviour, not a title.”
«الأقدمية سلوك، لا لقب.»
The system calls a tone a register, and it has two. Sharp is the declarative one, and it is set in Readex Pro, which carries both scripts so one speaker sounds like one speaker.
عبد اللّه عدّون
خطّ عربي بقواعده الكاملة، لا طبقة ترجمة. أحجام أكبر، تباعد أسطر أكبر، ولا تباعد بين الحروف أبدًا.
My name, set in Arabic by its own rules rather than translated into someone else's.
أربعة قوانين تجعل العربية خطًّا أصيلًا في النظام، لا طبقة ترجمة فوقه.
Aa ع
Five typefaces, each with one job. One that speaks, one that works, one that computes, and two that carry Arabic.
Every typeface has one job and a script it answers for. None of them is ever faked into a weight or a slant it does not have, and none stands in for another.
“Confident about ideas, humble about myself.”
«واثق بالأفكار، متواضع بالنفس.»
Warm is the reassuring tone, set in Literata in English and Harmattan in Arabic. Arabic runs larger at the same step, and it is never letter-spaced.
$ npm run buildbuilt 37 pages in 1.8s
Code, terminals and logs are brand territory too, not a theme bolted on afterwards.
Marking a surface as the console voice is one class. The mono face, the recessed well, sixteen terminal colours and the diff and log styles all arrive with it.
the diff
+--type-scale: 1;---type-scale: .9375;~font-feature-settings: 'liga' 0;
The tinted band tells you which line changed. The plus or minus at the start of it tells you what happened, because colour never carries a meaning alone.
the log
tracecache lookup, 2 hitsdebug24 rows renderedinfolistening on port 4321warnretrying in 2serrorupload rejected, file too largefatalout of memory
Trace is the quietest and fatal is the only filled band, so a long run reads as a hierarchy instead of a wall.
the sixteen terminal colours
One fixed set, so every terminal and prompt shows the same sixteen. On a light background, bright means more ink rather than more light, so nothing drops below the contrast floor.
Colour never works alone. Every state carries a symbol as well, so nobody has to see the colour to get the message.
Four of them speak, one stays neutral, and one is allowed to whisper.
Good news. A soft green called sage, on its own tint.
Guidance. A blue drawn out of the brand's navy.
Bad news. A brick red called madder, never an alarm red.
A warning. A dry gold called ochre, kept darker than caramel on purpose.
No verdict. A soft grey-brown called putty, for plain facts.
Deliberately faint, and the one thing here allowed to be. Switched-off controls only.
A running order, not a set of meanings. The first three stay apart for colour-blind readers with no extra help.
Ordered for reading, not for decoration. Past the first three, every line carries a shape or a dash as well, so colour never carries a meaning alone.
Seven lines in their fixed order, each labelled where it sits. A key off to the side is a lookup the reader should not need.
how much of something, light to dark
worse to better, with a neutral middle
no data
Missing values get a hatch, never a grey that could read as a value.
Every colour pairing is measured before it ships, on both backgrounds, and the ones that fall short are published instead of hidden.
Contrast is measured as a ratio. The standard asks for 4.5 to one at normal text sizes, and anything above that is easier to read. Every number below is the tightest case rather than the average.
published, not hidden
caramel as text on cream3.07 to one. Large type only, and code takes a darker caramel ink instead.
sage as text on creamRaw sage passes only at large sizes. Body text takes the deeper sage cut.
inactive, both modesAbout 2.7 to one and left that way on purpose. Disabled controls are the one exemption the rules allow.
the tightest four, drawn
Each label is drawn in the ink it names, on the ground it was measured against. Comment dim is the faded grey used for code comments, and it is the quietest text allowed anywhere.
colour blindness, simulated
The seven chart colours simulated for the two commonest kinds of red-green colour blindness, deuteranopia and protanopia. The first three hold apart in every row, which is why the later ones also carry a shape or a dash.
2
Two speeds. One for movement, which stops for anyone whose device asks for less motion. One for colour changes, which always happens.
Two speeds with two duties. Movement rides the first and can be taken away. Colour feedback rides the second and never is.
Movement, 420ms. The card rises once as it arrives, and one moment like that per screen is the whole budget.
Feedback, 220ms. The chip changes colour. Hover, focus and selection must never go dead, so this one always runs.
Animation makes some people genuinely unwell, and their device can say so. When it does, the movement goes and the colour change stays.
The system is a contract, not a kit. Six things you may set, six things you never touch, and everything on this board comes with its proof.
You may set six things. What a page is for, the tone it speaks in, light or dark, how tightly it packs, its spacing, and your own settings kept under your own name.
You may never touch six things. The type sizes, the typefaces, the palette, the Arabic rules, the motion law, and any name the system already uses.