Design system
One green, one family, and a room to walk into
Airbnb-faithful, applied to a community space in Fort Kochi. The reader is a neighbour on a phone, often an entry-level Android, deciding whether to come on Saturday.
Colour — and the accent has one job
Green marks the way in. At most once per screen, and only ever as a fill behind dark text. It is never a category, a tag, a heading, a link or a drop cap.
| Token | Value | On paper | Job | |
|---|---|---|---|---|
| --aik-ink | #262626 | 15.13:1 | All primary text | |
| --aik-ink-quiet | #595959 | 7.00:1 | Secondary. There is no third grey | |
| --aik-green | #2eac6d | ⛔ 2.90:1 | A FILL only. Ink on it is 5.22:1 | |
| --aik-green-ink | #217d4f | 5.11:1 | The rare case where green must be a word | |
| --aik-green-wash | #eaf7f0 | ink 13.74:1 | The one tinted block: today's row | |
| --aik-paper-sunk | #fafafa | ink 14.50:1 | Panels, secondary buttons | |
| --aik-rule | #ebebeb | 1.19:1 | Decoration. ⛔ Never a control's edge | |
| --aik-edge | #8c8c8c | 3.36:1 | The edge of something you type in | |
| --aik-focus | #0b60c4 | 6.03:1 | Focus ring, drawn outside the control |
⛔ What the live site does with this green
White on it (every Subscribe button) is 2.90:1. It as text on white (every category tag, every drop cap) is also 2.90:1. Measured across seven pages: 25 green fills and 24 green words. The cause is arithmetic — the theme computes its contrast colour with a YIQ luma test, and #2eac6d scores 127.14 against a threshold of 128, so it picks white by 0.86.
Type — one family, eight steps
Figtree, self-hosted in production. It replaces Poppins, Lora and the system sans — three families that render on one live post card today. Poppins has no tabular figures, tested three ways, which disqualifies it from a page whose job is a schedule.
--type-display · h1 · 30→40px / 600
A room you can walk into
--type-heading · h2 · 25→28px / 600
The clubs
--type-subheading · h3 · 21→23px / 600
Stitching Club
--type-body · 19→20px / 400 / 1.55 — the floor
Fresh cut pieces collected before they reach landfill, cleaned, arranged into designs and stitched into strong, useful tote bags. This column is 544px at the desktop body size, which counts out at 56 characters per line — measured by counting rendered line boxes, not estimated.
--type-ui · 17px / 500 — anything a thumb aims at
Just turn up
--type-small · 16px / 400 — captions, card rows
Children and teachers exploring science by doing.
--type-micro · 14px / 500 — the floor of the whole system
Monday to Saturday, 2–6 PM
⭐ Tabular figures, where numbers stack
A column of times that does not line up reads as an estimate. Compare — the same four rows, proportional then tabular:
21:00
₹2,000
₹5,000
21:00
₹2,000
₹5,000
Space, shape and touch
| Token | Value | Why that number |
|---|---|---|
| --gutter | 16px → 24px | ⭐ Departs from Airbnb's 24px on a phone: at our 19px body a 24px gutter gives 36 characters a line against 39 at 16px, and neither reaches 45. Take the wider column |
| --measure | 34rem = 544px | 56 characters at 20px. The live article column is 700px = 78–82 |
| --tap / --tap-comfortable | 44px / 52px | 44 is what a check asserts; 52 is what CSS sets, on BOTH axes |
| --radius-card / control / pill | 8 / 12 / 999px | Rank is carried by SHAPE, because the green cannot carry it |
| --portrait-list | 64px | The live team page renders faces at 52×52 from 600–1385px sources |
| --grid-gap-col / row | 24 / 40px | Airbnb's measured grid. The live grid is 16px both ways |
Buttons — rank is shape, not colour
All three are the same height. A reader who cannot separate the hues can still tell them apart, which matters here because the brand green fails contrast in both polarities.
Pill + ink = the one thing to do here. Pill + green = the way in, once per screen. 12px + sunk = everything else.
The one bespoke component — the session row
-
Monday to Saturday, 2–6 PM
Stitching Club
Fresh cut pieces collected before they reach landfill, cleaned, arranged and stitched into tote bags.
- Fee Free — tools included
- With Mary Gracy
- In Malayalam
⛔ The tap target is
the LINK, not the row. The title is a 26px inline box, so the anchor pads itself to
44px — same target, text selection still works, and the boundary is visible. An overlay
covering the whole row was the earlier fix and the owner objected to it on 10 Aug: a
section is several unrelated things sharing a box, and covering them makes it unclear
what the link even is. Verified with elementFromPoint, never assumed.
⛔ The action is now a single link to /contact-us/, and the
three-state list this note used to carry is gone. It read
Just turn up · Write to us first · Full — the next one is …, and the first two were
unsourced: the live page says nothing about turning up versus writing first for any
club, and the two “write first” values had been inferred from times that are now
published. ⭐ A specimen that demonstrates a state we cannot source teaches the state
as if it were real — which is how an invented fact gets into a component library and
then into every page built from it.
And its empty state, which is the common case
Nothing on this week
The room is open Tuesday to Sunday, 2–6 PM. Come and see, or write to us.
⛔ Never hide the schedule when it is empty. The heading survives; the value is replaced by the reason. A schedule that disappears teaches people to stop checking.
⛔ Figtree has no Malayalam, and every club is taught in Malayalam
The “one family” absolute breaks the moment one Malayalam word is published
Verified from the source, not inferred: the Google Fonts response for Figtree declares
exactly two subsets — latin and latin-ext — and no declared
range touches the Malayalam block. Any Malayalam string falls through to an
unpredictable system face at unpredictable metrics, mid-sentence.
⚠️ A width test does not settle this. One Malayalam letter measures 123.88px in Figtree against 125.78px under a deliberately bogus family name — different, which looks like coverage and is not. Two fallback chains, two faces. The declared unicode-range is the authority.
⭐ The answer is not to avoid Malayalam — the readers speak it. It is a second family for a second script, each with its own range, chosen so the two sit at the same optical size. Not chosen here: that needs the same measured bake-off Figtree won, and no Malayalam copy exists yet to test against.
⚠️ Dark mode is real, and this is a correction
An earlier version of this system said “light only, the dark CSS is unreachable”
That was wrong, and it was found while building these mockups. The live footer carries
a visible <select> — System / Light / Dark — measured at 106×27.
Choosing System sets data-color-scheme="system" and the page really does
go dark: background #1f1f1f, text #d9d9d9, 11.68:1.
Two things follow. The brand green as a tag on that dark ground is 5.68:1 — it passes, so the green's contrast problem is specifically a light-mode problem. And the Subscribe button is still 2.90:1 in dark mode, because the YIQ script picks white regardless of scheme.
So dark mode is a decision nobody has taken here, not dead code to delete. This system is drawn light-only and its dark values are undefined — that gap is real and is listed on the index.