prism·mdthe design press

EXTRACTED · 9 SECTIONS · 7 COLORS · GRADE C 69/100

renault.com

7 colours · RenaultGroupAH-Variable woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

colors

faces

188

keyframes

breakpoints

Get DESIGN.md tokens.json

Color — roles, semantics & the full census

7 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#786450

AA 5.62:1

Line

#978b7f

AA·lg 3.33:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

7 colors mined from the live renderexpand

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 · 700

display md

display-md30px · 700 · ×1.33

body

body16px · 400 · ×1.88

body sm

body-sm30px · 700 · ×0.53

caption

caption14px · 700 · ×2.14

button

button14px · 700 · ×1.00

eyebrow

eyebrow14px · 400 · ×1.00

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 8px

sm · 12px

md · 13px

base · 16px

lg · 32px

xl · 40px

2xl · 52px

3xl · 64px

Radius

none
0px

xs
4px

sm
16px

md
24px

lg
100px

xl
108px

full
9999px

Motion — easings, transitions & live keyframes

3 easing curves · 188 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

transition-4ease-out

transition-5ease-in-out

188 keyframe animations extracted

pulse

Accordion_accordion-up__9US55

Accordion_accordion-down__J7mnm

Dialog_enter__2M3wc

Dialog_exit__XNHjg

Dialog_slideInFromRight__YAxOz

Dialog_slideInFromLeft__DxGR2

Dialog_slideInFromBottom__i2bre

Dialog_slideInFromTop__0GdnE

Dialog_slideOutToRight__Z6d8W

Dialog_slideOutToLeft___vvqB

Dialog_slideOutToBottom__akdTJ

Components — the closed vocabulary

12 component families · 58 variants counted on the live DOM

Component	Variants found
buttons	×10
cards	×10
links	×10
nav Links	×8
footer Links	×7
badges	×5
heading H2	×2
heading H3	×2
cta Banner	×1
heading H1	×1
eyebrow Labels	×1
tooltip	×1

Component style specs (§4)expand

Buttons

Icon Button

Background: transparent
Text: #ffffff {colors.surface-1}
Padding: 0px
Radius: 100px
Border: 1px solid rgb(255, 255, 255)
Font: 14px weight 700
Use: Toolbar/UI icons
Hover: cursor: pointer

Icon Button

Background: transparent
Text: #000000
Padding: 0px
Radius: 100px
Font: 14px weight 700
Use: Toolbar/UI icons
Hover: cursor: pointer

Pill

Background: #000000
Text: #ffffff {colors.surface-1}
Padding: 19px 24px
Radius: 100px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 14px weight 700
Use: Status pills, tags, chips
Hover: cursor: pointer

Secondary

Background: #9e9e9e
Text: #ffffff {colors.surface-1}
Padding: 32px
Radius: 16px
Font: 16px weight 400
Use: Secondary action
Hover: cursor: pointer

Cards & Containers

Standard Card

Background: transparent
Padding: 56px
Radius: 16px
Use: Content containers, listing items

CTA Banners

Full-width CTA

Background: #000000
Text: #ffffff {colors.surface-1}
Padding: 0px 0px 104px
Radius: 0px
Font: 16px weight 400
Use: Full-width conversion strip with headline + button
Hover: cursor: pointer

Layout — structure & dimensions

4 layout metrics measured

max Width972px

header Height119px

sidebar Width0px

container Padding119px 0px 0px

Responsive — real breakpoints

26 media-query stops read from the live CSS

400px

425px

426px

430px

530px

550px

575px

576px

600px

640px

767px

768px

781px

782px

896px

899px

900px

1023px

1024px

1088px

1185px

1199px

1200px

1260px

1440px

1920px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Use RenaultGroupAH-Variable as the primary typeface — it defines the brand personality

Use negative letter-spacing (-1.8px) at display sizes for compressed, editorial headlines

Use Dim Gray (`#786450`) as the primary accent — it's the brand's signature interactive color

Use 16px border-radius on buttons — the standard corner rounding for interactive elements

Apply 56px padding inside cards — matches the design system's content breathing room

Use 16px border-radius on cards — consistent with the grid card corners

Maintain nav height at 80px — consistent vertical space for the navigation bar

Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

Include a search input directly in the nav — discoverability is a primary UX value here

Each card includes a top image — imagery is part of the card identity, not optional

Repeat the primary CTA across 6 banner sections — conversion paths are layered, not single

Build a content-dense footer (6 columns, ~32 links) — this site treats the footer as a sitemap, not an afterthought

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

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

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the renault.com design system. Canvas #ffffff · ink #111111 · accent #786450. Type: RenaultGroupAH-Variable — 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 renault

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press