Prism prismd.fr

Extracted · 9 sections · 18 colors · grade B

binance.com

Accent #5e6ad2 · BinanceNova — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

faces

keyframes

breakpoints

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

binance.com is built on a near-black canvas (rgb(24, 26, 32)). The system uses rgb(252, 213, 53) as the high-saturation accent for primary actions. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside BinanceNova as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 5 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

18 colors measured · click any swatch to copy

Canvas

#181a20

AAA 14.69:1

Ink

#eaecef

AAA 14.69:1

Accent

#fcd535

AAA 12.18:1

Line

#ffffff

AAA 17.39:1

Semantic states

error#f6465dsuccess#2ebd85

2 semantic roles found.

18 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 · 600

display md

display-md16px · 600 · ×2.50

body

body16px · 400 · ×1.00

body sm

body-sm14px · 400 · ×1.14

caption

caption12px · 500 · ×1.17

button

button16px · 500 · ×0.75

eyebrow

eyebrow24px · 600 · ×0.67

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 40px

3xl · 64px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
20px

xl
24px

full
9999px

Motion — easings, transitions & live keyframes

2 easing curves · 5 keyframes · hover a tile to preview

Easing & transitions

transition-2ease-in-out

transition-4cubic-bezier(0, 0, 0.2, 1)

5 keyframe animations extracted

onetrust-fade-in

widget-show-grow

widget-chat-loading-spin

fadeInUp

slideUpFromBottom

Components — the closed vocabulary

13 component families · 59 variants counted on the live DOM

Component	Variants found
buttons	×10
links	×10
eyebrow Labels	×10
tabs	×7
nav Links	×6
tooltip	×4
heading H2	×3
inputs	×2
footer Links	×2
captions	×2
cta Banner	×1
heading H1	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Secondary

Background: #333b47 {colors.surface-2}
Text: #eaecef {colors.ink}
Padding: 0px 10px
Radius: 4px
Font: 14px weight 500
Use: Secondary action
Hover: opacity: 0.8
Focus: backgroundColor: rgb(79, 88, 103)

Primary Brand

Background: #fcd535 {colors.primary}
Text: #202630
Padding: 0px 10px
Radius: 4px
Font: 14px weight 500
Use: Primary CTA / brand action
Hover: opacity: 0.8
Focus: backgroundColor: rgb(79, 88, 103)

Primary Brand

Background: #fcd535 {colors.primary}
Text: #202630
Padding: 0px 32px
Radius: 8px
Font: 16px weight 500
Use: Primary CTA / brand action
Hover: opacity: 0.8
Focus: backgroundColor: rgb(79, 88, 103)

Outline

Background: transparent
Text: #eaecef {colors.ink}
Padding: 11px
Radius: 10px
Border: 1px solid rgb(43, 49, 57)
Font: 0px weight 400
Use: Secondary action with border
Hover: opacity: 0.8
Focus: backgroundColor: rgb(79, 88, 103)

Ghost

Background: transparent
Text: #0000ee
Padding: 8px
Radius: 8px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button
Hover: opacity: 0.8
Focus: backgroundColor: rgb(79, 88, 103)

Primary Brand

Background: #fcd535 {colors.primary}
Text: #202630
Padding: 8px 16px
Radius: 8px
Font: 16px weight 500
Use: Primary CTA / brand action

Layout — structure & dimensions

5 layout metrics measured

max Width1440px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

16 media-query stops read from the live CSS

400px

425px

426px

500px

530px

550px

600px

767px

768px

769px

890px

896px

897px

1023px

1024px

1280px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Use dark background (`#181a20`) as the foundation — this is a dark-mode-native design

Use BinanceNova 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 Btnbg (`#fcd535`) as the primary accent — it's the brand's signature interactive color

Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

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

Place 2 pricing tiers side-by-side on desktop — direct comparison is the value prop

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

Don't

Don't use light backgrounds — the dark canvas is the native medium

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 introduce additional saturated accent colors — the palette is intentionally controlled

Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

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 binance.com design system. Canvas #181a20 · ink #eaecef · accent #fcd535. Type: BinanceNova — 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 binance

DESIGN.md · narrative spec tokens.json