Analyse du design system

bondisushi.com

bondisushi.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(26, 27, 31) as a near-neutral accent (low saturation). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Circular Std 500 as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 9 keyframe animations plus transition-driven interactions.

Accent #1a1b1f · police principale Circular Std 500

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://bondisushi.com/ ·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 12.63:1

Ink

#333333

AAA 12.63:1

Accent

#1a1b1f

AAA 17.21:1

Line

#333333

AAA 12.63: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

4 rôles · rendu live dans la vraie Circular Std 500 (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl40px · 500

body

body14px · 400 · ×2.86

button

button14px · 400 · ×1.00

mono

mono16px · 400 · ×0.88

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 8px

sm · 10px

md · 13px

base · 15px

lg · 20px

xl · 45px

2xl · 80px

3xl · 85px

Arrondis

none
0px

xs
4px

sm
8px

md
12px

lg
23px

xl
100px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

Motion — courbes, transitions & keyframes réels

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

9 animations keyframes extraites

spin

swim

move

fish-bounce

fish-bounce-slow

menu-wave

eapps-instagram-feed-loader

eapps-instagram-feed-popup-scroll-indicator

eapps-instagram-feed-popup-item-media-video-placeholder-loader

Composants — le vocabulaire fermé

9 familles de composants · 33 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
links	×7
badges	×6
status Badge	×3
inputs	×2
nav Links	×2
cards	×1
heading H1	×1
heading H2	×1

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

Buttons

Ghost

Background: transparent
Text: #333333 {colors.hairline}
Padding: 0px 20px
Radius: 0px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button

Pill

Background: #1a1b1f {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 14px 28px
Radius: 100px
Border: 2px solid rgb(255, 255, 255)
Font: 14px weight 500
Use: Status pills, tags, chips

Pill

Background: #1a1b1f {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 15px 20px
Radius: 100px
Border: 2px solid rgb(255, 255, 255)
Font: 14px weight 500
Use: Status pills, tags, chips

Subtle

Background: rgba(255, 255, 255, 0.9) {colors.on-primary}
Text: #333333 {colors.hairline}
Padding: 1px 6px
Radius: 50%
Shadow: rgba(0, 0, 0, 0.3) 2px 0px 5px 0px
Font: 14px weight 400
Use: Quiet action against page bg

Inputs & Forms

Text Input

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 8px 10px 8px 0px
Radius: 0px
Border: 0px solid rgb(0, 0, 0)
Font: 16px weight 400
Use: Text fields, search inputs
Focus: outline: rgb(255, 255, 255) none 0px

Status Badges

Neutral Light

Background: #ffffff {colors.on-primary}
Text: #333333 {colors.hairline}
Padding: 16px
Radius: 8px
Font: 14px weight 400
Use: Status indicator, label, pill

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height70px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

37 points de rupture lus dans le CSS live

320px

395px

400px

440px

441px

476px

479px

480px

489px

490px

576px

639px

640px

679px

767px

768px

769px

800px

820px

991px

992px

1000px

1023px

1099px

1100px

1200px

1279px

1280px

1399px

1400px

1599px

1600px

1700px

1875px

1876px

1920px

2000px

À faire / À éviter

19 règles applicables, verbatim de la spec

À faire

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

Keep font weights between 400-500 — 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 Near-Black (`#1a1b1f`) 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

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

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Build the hero as a split layout with media on the left — text and visual share equal weight

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

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

À éviter

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't reach for weight 700 (bold) or above — 500 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 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

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

Guide agent & export

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

Construis une UI dans le design system de bondisushi.com. Fond #ffffff · encre #333333 · accent #1a1b1f. Typo : Circular Std 500 — 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 bondisushi

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