From The Stack
From The Stack
Practical design systems writing — tokens, type, spacing, and the decisions behind them. No fluff.
-
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.
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design -
scrollbar tokens: the rail nobody designed
2–3 minutesEvery browser draws the scrollbar its own way, and none of those defaults were a decision anyone actually made. Chrome on Windows draws a scrollbar you can’t miss: wide, gray, square-edged. Firefox draws something thinner. Safari on macOS hides its scrollbar’s thumb until the cursor gets near the edge, and then it’s a faint blob…
-
the pipeline that posts itself: how m4d’s instagram content actually ships
1–2 minutesEvery post on @march4orthdesign is decided, built, and shipped by one file, and nobody opens it to check what’s next. Most content calendars are a decision someone has to keep making: what format today, what topic, who’s writing the caption. M4D replaced that decision with a state machine. `content/queue.md` holds the whole rotation — carousel,…
-
text selection tokens: the color nobody decided
2–3 minutesDrag-select a sentence on almost any site and you’re looking at a decision nobody actually made. Every browser ships a default highlight color for selected text, usually some flavor of blue, and most design systems never touch it. That’s fine right up until the blue clashes with a dark, teal-and-purple brand and nobody can say…
-
truncation tokens: the line limit nobody named
1–2 minutesEvery card eventually runs into text it doesn’t have room for, and most systems never decided what happens next. Look at a real notification feed for five minutes and you’ll find the bug: a message cut off mid-word with no ellipsis, or a comment card that just grows however tall the copy happens to be.…
-
focus ring tokens: the accessibility feature people delete without meaning to
1–2 minutes`outline: none;` is one line of CSS that quietly breaks keyboard navigation for every user tabbing through the page. Here’s how to token a real focus ring instead.
-
tabs tokens: the underline isn’t deciding anything on its own
2–3 minutesEvery tab bar in your product slides to a slightly different beat because nobody named the four decisions that actually control it. A settings page, a dashboard, an email client: three different surfaces, and in most codebases, three different opinions about how far apart the tab labels sit, how much padding wraps each one, how…
-
form input tokens: the four states nobody agreed on
1–2 minutesDefault and focus get styled. Error and disabled get invented on the spot, differently, every time. Here’s how to name and token all four input states.
-
skeleton tokens: name the wait, not just the shape
1–2 minutesThe four seconds before content arrives are not a mystery state. They are a design decision waiting for tokens. Most design systems cover the loaded state in detail and leave the loading state to whatever the frontend framework ships by default, usually a spinner with no clock and no shape. Skeleton tokens close that gap…
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design -
empty states: the screen everyone forgets to design
1–2 minutesThe loaded state gets a spec. The empty one gets whatever someone types at 2am before launch. Every product has a moment where a screen has nothing in it yet: a new account with no files, a search with no results, a dashboard before the first data point lands. Teams spend real time on the…
—
by
in Accessibility, Buttons, Components, css, Educational, Sites, Styleguides, Tokens, UI KIt, UI/UX, WCAG, Web Design
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 🔥🔥🔥🔥