01
Color — roles, semantics & the full census 18 colors measured · click any swatch to copy
Semantic states
error #dc3545 success #198754 warning #ffc107 info #0dcaf0
4 semantic roles found.
18 colors mined from the live render expand
02
Type — the ladder, in the real face 6 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy
display xl
display-xl 72px · 800
display md
display-md 29.952px · 600 · ×2.40
body
body 14.56px · 400 · ×2.06
body sm
body-sm 14px · 400 · ×1.04
caption
caption 16.38px · 600 · ×0.85
button
button 18.2px · 700 · ×0.90
03
Spacing & radius, made spatial 9 spacing steps · 7 radii · bars are exact px widths
Spacing scale
xxs · 2px
xs · 7px
sm · 18px
md · 25px
base · 27px
lg · 29px
xl · 44px
2xl · 46px
3xl · 55px
04
Depth — elevation is extracted, not invented 1 box-shadows measured on the live page · click a tile to copy its raw value
surface light dark
05
Motion — easings, transitions & live keyframes 0 easing curves · 8 keyframes · hover a tile to preview
8 keyframe animations extracted
06
Components — the closed vocabulary 13 component families · 46 variants counted on the live DOM
Component Variants found links ×10 nav Links ×8 status Badge ×5 cta Banner ×5 buttons ×4 heading H2 ×3 badges ×2 footer Links ×2 heading H3 ×2 breadcrumb ×2 cards ×1 heading H1 ×1 eyebrow Labels ×1
Component style specs (§4) expand Buttons
Outline
Background: transparent
Text: #000000
Padding: 5.46px 36.4px 7.28px 18.2px
Radius: 6px 6px 45.5px / 6px 6px 100%
Border: 3px solid rgb(0, 0, 0)
Font: 18.2px weight 700
Use: Secondary action with border
Focus: outline: rgb(16, 16, 16) auto 1px
Cards & Containers
Standard Card
Background: transparent
Padding: 27.3px
Radius: 18.2px
Use: Content containers, listing items
CTA Banners
Full-width CTA
Background: transparent
Text: #000000
Padding: 0px 50.76px
Radius: 0px
Font: 18.2px weight 400
Use: Full-width conversion strip with headline + button
Focus: outline: rgb(16, 16, 16) auto 1px
Status Badges
Neutral Light
Background: #ffec36 {colors.primary}
Text: #000000
Padding: 18.2px 36.4px
Radius: 500px
Font: 20.02px weight 700
Use: Status indicator, label, pill
Tinted
Background: #a1f816
Text: #000000
Padding: 18.2px 36.4px
Radius: 500px
Font: 20.02px weight 700
Use: Status indicator, label, pill
Neutral Light
Background: #6affec {colors.primary-hover}
Text: #000000
Padding: 18.2px 36.4px
Radius: 500px
Font: 20.02px weight 700
Use: Status indicator, label, pill
07
Layout — structure & dimensions 5 layout metrics measured
header 70px
1800px
max-width
max Width 1800px
header Height 70px
sidebar Width 0px
gap 16px
container Padding 24px
08
Responsive — real breakpoints 14 media-query stops read from the live CSS
10 enforceable rules pulled verbatim from the spec
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Yellow (`#ffec36`) as the primary accent — it's the brand's signature interactive color
Use 6px 6px 45.5px / 6px 6px 100% border-radius on buttons — the standard corner rounding for interactive elements
Apply 27.3px padding inside cards — matches the design system's content breathing room
Use 18.2px border-radius on cards — consistent with the grid card corners
Don't invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't make the nav sticky — this design lets it scroll away to maximize content focus
Don't put a CTA button in the nav — this design uses links only at the top
Don't over-build the footer — this design keeps it minimal (2 cols, 11 links)
Paste-ready prompt + the real files behind this page
Build a UI in the hello-charly.com design system.
Canvas #ffffff · ink #111111 · accent #ffec36.
Type: fieldwork — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.