DTDesign Token Studio

Focused portfolio preview

Aftab Khan ↗
Portfolio preview · Design systems

Turn a product direction into a usable token foundation.

Generate a focused system, test it on real interface patterns, check key contrast pairs, and export developer-ready tokens in one page.

What this demonstratesStrategy → tokens → UI → code

A limited public preview of design-system thinking and frontend implementation.

01

Define the direction

Give the generator only the decisions that should shape the foundation.

AI output is a starting point. Validate it against product context, brand standards and user needs.
02

Focused Foundation

A neutral starting system ready to adapt to your product direction.

primary
onPrimary
surface
text
muted

Typography Tokens

Font & Scale
Scale Steps (px)

Dimension Tokens

Spacing & Radii
Spacing Scale (px)
Border Radii (px)
Weekly performance

Clarity for every operational decision.

One representative component composition proves how foundational decisions behave together.

03

Validate the foundation

Key semantic pairs checked against WCAG contrast thresholds.

On-primary text#FFFFFF on #3157D5
6.08:1 · AA
Body text#172033 on #F7F8FC
15.33:1 · AAA
Developer handoff

Export the result

:root {
  --color-primary: #3157D5;
  --color-on-primary: #FFFFFF;
  --color-surface: #F7F8FC;
  --color-text: #172033;
  --color-muted: #667085;
  --font-family: Inter, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}