Analyse du design system

bunsen.ie

bunsen.ie is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(0, 180, 101) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Caslon Doric as the primary typeface. Caslon Doric is paired with Open Sans for secondary roles. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 68 keyframe animations plus transition-driven interactions.

Accent #000000 · police principale Caslon Doric

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://bunsen.ie/ ·extrait le 2026-07-13 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

19 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 15.91:1

Ink

#222222

AAA 15.91:1

Accent

#000000

AAA 21:1

Line

#000000

AAA 21: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.

19 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl60px · 500

display lg

display-lg50px · 500 · ×1.20

display md

display-md32px · 400 · ×1.56

headline

headline27px · 500 · ×1.19

body

body13.3333px · 400 · ×2.03

body sm

body-sm26px · 700 · ×0.51

button

button26px · 400 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 4px

sm · 7px

md · 11px

base · 20px

lg · 25px

xl · 29px

2xl · 45px

3xl · 58px

Arrondis

none
0px

xs
5px

sm
30px

md
99px

lg
100px

xl
200px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

1 courbe d’easing · 68 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-4cubic-bezier(0.25, 1, 0.33, 1)

68 animations keyframes extraites

sbi-sk-scaleout

fa-spin

wc-skeleton-shimmer

spin

spinning_animation

bounce_in_animation

row_bg_zoom_out

portSliderLine

portSliderLine2

ctaArrowSVGStart

ctaArrowSVGEnd

ctaArrowTextStart

Composants — le vocabulaire fermé

18 familles de composants · 55 variantes comptées sur le DOM live

Composant	Variantes
cta Banner	×10
divider	×6
links	×5
buttons	×4
nav Links	×4
heading H4	×4
cards	×3
tabs	×3
heading H2	×3
heading H5	×3
heading H3	×2
table Headers	×2
inputs	×1
badges	×1
footer Links	×1
pricing Card	×1
captions	×1
price Tag	×1

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

Buttons

Ghost

Background: #000000
Text: #000000
Padding: 7px 11px
Radius: 200px
Font: 14px weight 600
Use: Subtle action, toolbar, nav button

Pill

Background: #000000
Text: #000000
Padding: 0px
Radius: 100px
Shadow: rgb(0, 0, 0) 0px 0px 0px 4px
Font: 18px weight 400
Use: Status pills, tags, chips

Inputs & Forms

Text Input

Background: #ffffff {colors.surface-1}
Text: #000000
Padding: 10px
Radius: 0px
Border: 1px solid border-color
Font: 32px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1425px

header Height124px

sidebar Width0px

gap16px

container Padding0px 90px

Responsive — vrais breakpoints

44 points de rupture lus dans le CSS live

38px

44px

56px

59px

450px

470px

479px

480px

481px

500px

576px

600px

640px

673px

690px

691px

698px

767px

768px

769px

770px

782px

800px

850px

990px

992px

998px

999px

1000px

1024px

1025px

1040px

1100px

1110px

1168px

1199px

1200px

1218px

1299px

1300px

1425px

1500px

1600px

2600px

À faire / À éviter

15 règles applicables, verbatim de la spec

À faire

Use Near-Black (`#222222`) for text — not pure black, it's warmer and more readable

Use Caslon Doric 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 Emerald (`#00b465`) as the primary accent — it's the brand's signature interactive color

Use 100px border-radius on primary buttons — the brand uses generously-rounded CTAs

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

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

À éviter

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

Don't use sharp-cornered or pill buttons — 100px is the CTA border-radius standard

Don't over-build the footer — this design keeps it minimal (1 cols, 8 links)

Guide agent & export

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

Construis une UI dans le design system de bunsen.ie. Fond #ffffff · encre #222222 · accent #000000. Typo : Caslon Doric — 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 bunsen

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