Category: UI KIt
-
button state tokens: the three states nobody designs
A 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
Flip 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.…
-
-
-
how i built this site with the system i teach — one file, every decision derived
—
by
This site isn’t a demo of a design system. It runs on one — a single token file drives every color, spacing value, and type decision on the page you’re reading. Most design systems content has a credibility problem. The system gets taught from mockups. The examples live in a sandbox. The person explaining tokens…
-
-
wcag and design systems: why accessibility belongs in the token layer
—
by
in Accessibility, Color, css, Figma, Fonts, Iconography, Sites, Styleguides, Tokens, UI KIt, UI/UX, Web DesignWCAG compliance isn’t a checklist you run at the end — it’s a constraint you build into the system at the token level. A lot of designers treat accessibility as a QA pass: ship the design, then check the contrast ratios. That approach fails at scale because it moves the problem downstream where it’s expensive…
-
type scale
A type scale is a sequence of font sizes built on a single ratio — so every size in your system is mathematically related to every other. Pick a base size (usually 16px) and a ratio (1.25 is modest, 1.5 is expressive) and multiply up and down from there. Token each step by role —…
-
3dicons
A free, open-source library offers over 1,500 hand-crafted 3D icons, available in various angles and color variants for mockups and UI. A Figma plugin simplifies icon integration, while a pro tier provides an online editor for customization. Developed by Vijay Verma, icons require no attribution.
-
BRAND: Electronic Arts
—
by
in Color, Fonts, Iconography, Illustrations, Images, Sites, Styleguides, Typography, UI KIt, UI/UX, Unique DesignsElectronic Arts 2025 BRAND REFRESH by Instrument DESIGN STUDIO Check out this article by Brand Archive that details the elements of the 2025 brand refresh from Electronic Arts and their partnership with Instrument design studio. https://brandarchive.xyz/identity/electronic-arts