prism·mdthe design press
EXTRACTED · 10 SECTIONS · 28 COLORS · GRADE B 84/100

choisis-ton-avenir.com

28 colours · Poppins woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

28
colors
5
faces
3
shadows
11
keyframes
01

Color — roles, semantics & the full census

28 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 15.13:1
Ink
#262626
AAA 15.13:1
Accent
#ffe456
Fail 1.27:1
Line
#666666
AA 5.74:1
Semantic states
error#dc3545success#198754warning#ffc107info#0dcaf0

4 semantic roles found.

28 colors mined from the live renderexpand
02

Type — the ladder, in the real face

7 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl
display-xl40px · 400
display lg
display-lg40px · 400 · ×1.00
display md
display-md32px · 400 · ×1.25
body
body16px · 400 · ×2.00
body sm
body-sm12px · 400 · ×1.33
caption
caption14px · 400 · ×0.86
button
button20px · 400 · ×0.70
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 10px
sm · 12px
md · 13px
base · 15px
lg · 24px
xl · 30px
2xl · 50px
3xl · 70px
Radius
none
0px
xs
4px
sm
10px
md
12px
lg
20px
xl
25px
full
9999px
04

Depth — elevation is extracted, not invented

3 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
shadow-2
shadow-3
05

Motion — easings, transitions & live keyframes

1 easing curve · 11 keyframes · hover a tile to preview

Easing & transitions
transition-5ease-in
11 keyframe animations extracted
spin
blink
cmplz-fadein
progress-bar-stripes
spinner-border
spinner-grow
changeWidth
eicon-spin
mc_slideIn
mc_slideOut
fadeIn
06

Components — the closed vocabulary

12 component families · 58 variants counted on the live DOM

ComponentVariants found
links×10
buttons×9
nav Links×8
footer Links×7
heading H2×7
inputs×5
pricing Card×5
search Bar×3
badges×1
status Badge×1
heading H1×1
heading H3×1
Component style specs (§4)expand

Buttons

Pill

  • Background: #ffe456 {colors.primary}
  • Text: #262626 {colors.ink}
  • Padding: 10px 14px
  • Radius: 50px
  • Font: 12px weight 500
  • Use: Status pills, tags, chips

Pill

  • Background: #ffe456 {colors.primary}
  • Text: #262626 {colors.ink}
  • Padding: 10px 15px
  • Radius: 50px
  • Font: 12px weight 500
  • Use: Status pills, tags, chips

Light / Invert

  • Background: #ffffff {colors.background}
  • Text: #222222
  • Padding: 15px
  • Radius: 12px 12px 0px 0px
  • Shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px
  • Font: 16px weight 400
  • Use: Bright CTA on dark sections

Primary Brand

  • Background: #ee5c53
  • Text: #ffffff {colors.background}
  • Padding: 60px 25px
  • Radius: 20px
  • Font: 16px weight 400
  • Use: Primary CTA / brand action

Primary Brand

  • Background: #563cdc {colors.primary-hover}
  • Text: #ffffff {colors.background}
  • Padding: 60px 25px
  • Radius: 20px
  • Font: 16px weight 400
  • Use: Primary CTA / brand action

Inputs & Forms

Text Input

  • Background: #ffffff {colors.background}
  • Text: #666666 {colors.hairline}
  • Padding: 15px 50px 15px 25px
  • Radius: 50px
  • Border: 1px solid rgb(204, 204, 204)
  • Font: 16px weight 400
  • Use: Text fields, search inputs
  • Focus: color: rgb(17, 17, 17), outline: rgb(16, 16, 16) auto 1px

Navigation

Main Nav

  • Background: #ffffff {colors.background}
  • Padding: 20px 10px
07

Layout — structure & dimensions

4 layout metrics measured

header 82px 1200px max-width
max Width1200px
header Height82px
sidebar Width0px
container Padding0px
08

Responsive — real breakpoints

23 media-query stops read from the live CSS

37px
320px
350px
400px
425px
479px
575px
576px
767px
768px
769px
786px
991px
992px
993px
1024px
1025px
1199px
1200px
1300px
1399px
1400px
1440px
09

Do's & Don'ts

17 enforceable rules pulled verbatim from the spec

Do
Use Near-Black (`#262626`) for text — not pure black, it's warmer and more readable
Use Poppins as the primary typeface — it defines the brand personality
Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use #ffe456 (`#ffe456`) as the primary accent — it's the brand's signature interactive color
Use 50px border-radius on primary buttons — the brand uses generously-rounded CTAs
Style form inputs with a `1px solid rgb(204, 204, 204)` border — use border-based inputs, not floating labels or underline-only
Each card includes a top image — imagery is part of the card identity, not optional
Don't
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
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 use sharp-cornered or pill buttons — 50px is the CTA border-radius standard
Don't remove the input border — the border is the primary affordance indicator for form fields
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
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the choisis-ton-avenir.com design system. Canvas #ffffff · ink #262626 · accent #ffe456. Type: Poppins — 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.
$ npx prismd add choisis-ton-avenir
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press