Analyse du design system

coffeesupreme.com

coffeesupreme.com is built on a warm, off-white canvas (rgb(250, 250, 243)). The system uses rgb(210, 34, 38) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Domainetext as the primary typeface. Domainetext is paired with Knockout 33 for secondary roles. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 117 keyframe animations plus transition-driven interactions.

Accent #d22226 · police principale Domainetext

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://coffeesupreme.com ·extrait le 2026-07-13 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

14 couleurs mesurées · clique une pastille pour copier

Canvas

#fafaf3

AAA 12.05:1

Ink

#333333

AAA 12.05:1

Accent

#d22226

AA 5.01:1

Line

#333333

AAA 12.05:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

14 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

8 rôles · rendu live dans la vraie Domainetext (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl35px · 400

display lg

display-lg35px · 400 · ×1.00

display md

display-md15px · 400 · ×2.33

headline

headline14.98px · 400 · ×1.00

body

body10.5px · 500 · ×1.43

body sm

body-sm10.5px · 500 · ×1.00

button

button14px · 400 · ×0.75

mono

mono20px · 400 · ×0.70

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 2px

sm · 8px

md · 11px

base · 16px

lg · 25px

xl · 35px

2xl · 49px

3xl · 64px

Arrondis

none
0px

xs
2px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

1 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

Motion — courbes, transitions & keyframes réels

0 courbes d’easing · 117 keyframes · survole une tuile pour prévisualiser

117 animations keyframes extraites

slideInDown

clockwise

donut-rotate

browseIn

browseOutLeft

browseOutRight

dropIn

dropOut

fadeIn

fadeInUp

fadeInDown

fadeInLeft

Composants — le vocabulaire fermé

17 familles de composants · 65 variantes comptées sur le DOM live

Composant	Variantes
nav Links	×10
links	×10
inputs	×8
heading H2	×6
buttons	×5
cards	×4
footer Links	×4
heading H6	×4
badges	×3
accordion	×3
price Tag	×2
search Bar	×1
heading H1	×1
heading H3	×1
heading H5	×1
eyebrow Labels	×1
divider	×1

Specs de style des composants (§4)déplier

Buttons

Primary Brand

Background: #d22226 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 7.5px 25px
Radius: 0px
Border: 1px solid rgb(210, 34, 38)
Font: 10px weight 600
Use: Primary CTA / brand action

Ghost

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 0px 7px 0px 0px
Radius: 0px
Font: 10px weight 500
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #d22226 {colors.primary}
Text: #fafaf3 {colors.background}
Padding: 7px 14px
Radius: 0px
Font: 10px weight 400
Use: Primary CTA / brand action

Cards & Containers

Standard Card

Background: #fafaf3 {colors.background}
Padding: 0px 16px
Radius: 8px
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 7.5px 6.25px 7.5px 2px
Radius: 0px
Border: 0px none rgb(255, 255, 255)
Font: 20px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height93px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

34 points de rupture lus dans le CSS live

37px

62px

74px

75px

93px

124px

125px

360px

420px

480px

550px

568px

576px

591px

600px

640px

700px

720px

750px

767px

768px

769px

1000px

1024px

1199px

1200px

1260px

1280px

1399px

1400px

1659px

1660px

1719px

2000px

À faire / À éviter

19 règles applicables, verbatim de la spec

À faire

Use Body (`#fafaf3`) as the page background — it's intentionally not pure white

Use Secondary (`#333333`) for text — not pure black, it's warmer and more readable

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

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

Respect the 2px–35px 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

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

Use a 13-column grid on desktop — density matters for this content type

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

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

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

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 reach for weight 700 (bold) or above — 600 is the heaviest weight this design paints

Don't invent new shadow values — use only the extracted shadow levels

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

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de coffeesupreme.com. Fond #fafaf3 · encre #333333 · accent #d22226. Typo : Domainetext — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.

Chaque valeur ci-dessus est vérifiée par getComputedStyle.

$ npx prism-design add coffeesupreme

Repeindre ce design · éditeur live DESIGN.md · narrative spec tokens.json