Tag feed

#design-tokens

8 posts4 followers

Explore Hashnode

Alternatives

Trending tags this week

77onic7onic.hashnode.devApr 17 · 5 min read

Design to Code #2: One JSON, Eleven Outputs

The entire 7onic design system runs on a single JSON file. It's 1,847 lines long. Colors live there as hex values like #6B21A8. Spacing is stored as plain numbers like 16. Border radius uses the same format. Animations are defined as keyframe objects...

0

77onic7onic.hashnode.devApr 16 · 7 min read

Design to Code #1: Why I Built 7onic

I remember the exact moment I gave up on handoffs. A developer had implemented a card component I designed. The spacing was off by 2 pixels. The border radius was 8px instead of 6px. The shadow was close but not quite right — they'd grabbed a Tailwin...

0

HCHomi Choudhuryhomi.hashnode.devFeb 28 · 8 min read

How to Create and Export Design Tokens in Figma for Scalable UI - Pipeline Details

Building on my previous post, this article provides an in-depth exploration of the token extraction pipeline architecture. I'll also compare this approach with Token Studio, a popular Figma plugin for

0

GGGrzegorz Gurguldesignsystems-ai.hashnode.devFeb 20 · 3 min read

Design Tokens Are API Contracts, Not Styling Shortcuts

If your design tokens don't have layers, you don't have a system. You have a spreadsheet with hex values. I've seen this in almost every design system I've audited: a flat list of tokens applied direc

0

CMCesar Maldonadoux-maldo.hashnode.devFeb 18 · 10 min read

Session 2: Automated QA — WCAG, Contracts, and Impact Tracing

Series: What If a Design System Could Self QA?Author: C. MaldonadoDate: February 2026 Where We Picked Up Between sessions, I'd done some homework. Spacing and typography tokens got created in Tokens

0

CMCesar Maldonadoux-maldo.hashnode.devFeb 18 · 8 min read

Session 1: Pipeline + Color Token Architecture

Series: What If a Design System Could Self QA?Author: C. MaldonadoDate: February 2026 The Starting Point Our design system was in that awkward middle stage — we had Figma variables, dev had implemented their own version of our color tokens, and the ...

0

FAFatuma Abdullahiblog.hijabicoder.devDec 30, 2024 · 4 min read

On Design Tokens, Variables, and Penpot

Working on Wikimedia’s Figma-based design system (Codex) means diving deep into Figma, Penpot, and all things product design. As a developer who has not spent enough time on the design side, I struggled with suddenly working with an entire design sys...

0

ADAhona Dastechblog.geekyants.comAug 22, 2023 · 6 min read

A Simple Guide to Design Tokens, Tokens Studio, and Resolver Graph

What Are Design Tokens? Let us take a look at how some leading companies have defined design tokens: Mozilla: A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application ...

0

#design-tokens

Search Hashnode

#design-tokens

Explore Hashnode

Trending tags this week

Design to Code #2: One JSON, Eleven Outputs

Design to Code #1: Why I Built 7onic

How to Create and Export Design Tokens in Figma for Scalable UI - Pipeline Details

Design Tokens Are API Contracts, Not Styling Shortcuts

Session 2: Automated QA — WCAG, Contracts, and Impact Tracing

Session 1: Pipeline + Color Token Architecture

On Design Tokens, Variables, and Penpot

A Simple Guide to Design Tokens, Tokens Studio, and Resolver Graph