Meridian is the interface language of a fictional scheduling product. Three rules decide most things: one accent, used only for the action that matters on the screen; text contrast first, decoration last; and every component below is the real component, not a picture of it. If it looks wrong here, it is wrong in the product.
Comment on any section with Reply. Each version of this page keeps the same link; the previous ones stay in the history.
Tokens are CSS custom properties. The dark theme redefines the same names, so components never reference a raw hex.
--m-primary--m-accent--m-ink--m-ink-2--m-ink-3--m-surface--m-line-2--m-ok--m-warn--m-errManrope for everything readable, JetBrains Mono for tokens, ids and numbers in tables. Four sizes carry 90% of the product.
display · 34/1.05Your week, settledtitle · 22/1.2Shared with Priya and two othersbody · 15/1.55Each week starts on the day you choose, and anything unfinished moves on Sunday night.caption · 12/1.4Updated 4 minutes ago · 3 devicesA 4 px base. Components use 2, 3 and 4; layout uses 6 and 8. Nothing in between.
Labels above, help text below, errors in the error color with the message, never only the border.
A card is a surface with one border, one radius and one padding. Status is a dot and a word, never a colored background.
14 tasks, 9 done. Priya added 3 yesterday.
6 tasks, 1 done. Two carried over twice.
Shared with Tomás. Groceries on Saturday.
Numbers right-aligned in the mono face. Row borders only; no zebra stripes.
| Plan | Seats | Price | Status |
|---|---|---|---|
| Free | 1 | $0 | Active |
| Plus | 5 | $4.00 | Trial ends in 3 days |
| Team | 25 | $29.00 | Payment failed |
Copy the tokens block into a stylesheet and the components follow. The dark theme is one attribute on the root element.
:root { --m-bg: #f7f7f5; --m-ink: #1d1f2a; --m-accent: #ef8354; /* … */ }
[data-theme="dark"] { --m-bg: #14151c; --m-ink: #eef0f6; /* … */ }
<button class="btn">Save week</button>
<button class="btn secondary">Cancel</button>
document.documentElement.dataset.theme = "dark";