From The Stack
From The Stack
Practical design systems writing — tokens, type, spacing, and the decisions behind them. No fluff.
-
how to bake wcag aa into your token file from day one
2–4 minutesContrast ratios, touch targets, focus rings, semantic pairing — here’s exactly what to write in your token file to bake WCAG AA in from day one.
-
density tokens: the row height nobody agreed on
1–2 minutesEvery screen ends up with its own row height, because nobody wrote down when to use which one. Dashboards, settings pages, and email templates all render the same kind of row, but each one usually gets a hand-picked pixel value: 36px here, 51px there, whatever looked right in the moment. Density tokens fix this by…
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design -
status tokens: no new colors, just roles
1–2 minutesEvery team hits the same moment: the app needs a success state and an error state, and someone picks two new hex codes that have never appeared in the design file before. Those two colors turn into four within a sprint (warning, info) and none of them were chosen against the palette that already shipped.…
-
border radius tokens: rounding corners on purpose instead of by accident
1–2 minutes4px on the input, 6px on the card, 12px on the modal — nobody decided the modal should be softer. Here’s how to name four radius steps on purpose.
-
fluid type scale: the clamp() token that ends breakpoint math
1–2 minutesA type scale hardcoded to four breakpoints is four separate guesses about how big text should be, not one decision. Most font-size tokens still live inside media queries: 28px on mobile, 34px at 640px, 40px at 768px, 48px at 1024px, each value picked by eye and none of them connected to the others. The gaps…
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design -
data visualization tokens: the chart color category most systems skip
1–2 minutesSix chart colors, chosen by six different people, is not a palette – it’s six separate guesses that happen to render next to each other. Most design systems name every color except the ones inside a chart. Marketing’s dashboard uses orange for churn risk, support’s uses red, and nobody decided that on purpose – each…
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design -
breakpoint tokens: naming the width so nobody has to guess it
1–2 minutes767px or 768px? Every developer picks their own tablet breakpoint. Here’s how naming four fixed boundaries once ends the guessing for good.
-
button state tokens: the three states nobody designs
1–2 minutesA button has five real states, not two. Default and hover get designed; active, disabled, and loading get left to accident. Here’s how to name and token all five.
-
dark mode tokens: why inverting your palette doesn’t work
1–2 minutesFlip every hex value for dark mode and the depth disappears — a card that read as “elevated” in light mode goes flat, because that depth was never really in the color. The instinct to treat dark mode as an inversion makes sense on the surface: light backgrounds become dark, dark text becomes light, done.…
Latest Comments
me designing on a random tuesday lool
test
This is a great article!
Tags
#qatar2022 afrobeats animations apps borders branding breakpoints browser defaults chillhop coding css dark/light mode designers design system design tokens education emails emojis food google hexadecimal icons image compression inspiration line-clamp lofi luxury marketing mobile music naming conventions portfolios scrollbar selection color specimens svg tab indicator tabs text selection text truncation tools users WCAG web-design youtube
Categories
- 3D (1)
- Accessibility (20)
- AI (14)
- Analytics (2)
- Automation (10)
- Buttons (8)
- Color (18)
- Components (16)
- css (15)
- Educational (37)
- Figma (3)
- Fonts (9)
- Iconography (12)
- Illustrations (13)
- Images (18)
- Inputs (2)
- Logos (1)
- Mockups (6)
- Payments (1)
- Personas (1)
- SEO (3)
- Sites (47)
- Styleguides (16)
- Tokens (29)
- Typography (11)
- UI KIt (23)
- UI/UX (79)
- Uncategorized (1)
- Unique Designs (14)
- Vibes (2)
- video (5)
- WCAG (10)
- Web Design (24)
Join 900+ subscribers
Stay in the loop with everything you need to know.
these are 🔥🔥🔥🔥