Start free trial

Generated, not configured.

Two.run turns your brand profile into a complete token architecture, colour library, type scale and themes — structured the way senior design-system teams build them.

Brand→
guidelines.pdf · p.6
“Fernlight Teal”
Primitive→
teal.600
Semantic→
lightteal.600darkteal.400
color.action.primary
Component9 places
Continue
button.primary.bg
Teal 100#CCFBF1
Teal 200#99F6E4
Teal 300#5EEAD4
Teal 400#2DD4BF
Teal 500#14B8A6
Teal 600#0F766E
Teal 800#134E4A
Coral 100#FDE4DD
Coral 200#FAC7B8
Coral 300#F4A28C
Coral 400#EE8A70
Coral 500#E8735A
Coral 600#C9553E
Coral 800#7A2E20
Neutral 0#F7F5F0
Neutral 100#E4E8E6
Neutral 300#A9B5B1
Neutral 500#6E7C78
Neutral 700#2A3835
Neutral 800#18221F
Neutral 900#10201D

Full ramps from every brand colour.

  • Ramps generated from each brand colour
  • Semantic roles for light and dark
  • Contrast checked on every pairing
  • Locked brand values stay exact

A scale that reads well everywhere.

  • Modular scale as tokens
  • Weight, line height and tracking specified
  • Responsive steps for small screens
  • Pairings checked in real screens
AaIBM Plex Sans · Fernlight
Display XL40 / 44 · MediumDisplay
Display L32 / 36 · MediumDisplay
Heading24 / 30 · SemiboldDisplay
Title18 / 26 · SemiboldDisplay
Body15 / 24 · RegularDisplay
Caption13 / 18 · RegularDisplay

One system. Many brands.

Components keep their behaviour. Each brand — or each light and dark theme — brings its own colour, type and shape.

Aa
Create your workspaceContinue
FernlightIBM Plex Sans · r10
Aa
Create your workspaceContinue
AtlasSpace Grotesk · r2
Aa
Create your workspaceContinue
KilnNewsreader · r18

Fernlight, Atlas and Kiln are fictional demonstration brands. Exports to the W3C Design Tokens format.

Next · 03Components & codeReal React + TypeScript. Real screens. Honest gaps.