ACME-060 · Training module

Five design directions for the same screens

Identical markup, data, and interactions in all five. Only the design language changes, so you can compare the directions rather than the feature set.

01 Aa

Inter · 14px body
Dense hairlines, 6–12px radii
Accent #5E6AD2

Option 1 — Linear

Open Option 1 Detail page

02 Aa

Poppins · 14px body
Pill controls, 10–24px radii
Accent #9450FD

Option 2 - monday.com

Open Option 2 Detail page

03 Aa

Figtree · 16px body
Flat surfaces, single 8px radius
Accent #A370FC

Option 3 — Canva

Open Option 3 Detail page

04 Aa

Inter (figmaSans) · 16px body
Pill controls, pastel color blocks
Accent #000000

Option 4 — Figma

Open Option 4 Detail page

05 Aa

Roobert PRO · 16px body
Black pills, pastel feature cards
Brand mark #FFD02F

Option 5 — Miro

Open Option 5 Detail page

Option 1 renders from app.css, Option 2 from app-monday.css, Option 3 from app-canva.css, Option 4 from app-figma.css, and Option 5 from app-miro.css. All five stylesheets expose the same class names, so the options share one set of templates.