Analyse du design system

ikoyilondon.com

ikoyilondon.com is built on a near-black canvas (rgb(51, 33, 10)). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Radikal as the primary typeface. Radikal is paired with Baskerville for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 25 keyframe animations plus transition-driven interactions.

Accent #9c7a3c · police principale Radikal

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

Desktop · source de vérité

Mobile

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

3 couleurs mesurées · clique une pastille pour copier

Canvas

#33210a

AAA 11.2:1

Ink

#e1dbd2

AAA 11.2:1

Accent

#9c7a3c

AA·lg 3.86:1

Line

#ffffff

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

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl14px · 400

display md

display-md14px · 700 · ×1.00

body

body10px · 400 · ×1.40

body sm

body-sm14px · 400 · ×0.71

button

button12.25px · 400 · ×1.14

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 1px

sm · 7px

md · 12px

base · 16px

lg · 18px

xl · 35px

2xl · 36px

3xl · 190px

Arrondis

none
0px

xs
4px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Motion — courbes, transitions & keyframes réels

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

25 animations keyframes extraites

preview_pulse__x3YE2

marching-ants

Toastify__trackProgress

Toastify__bounceInRight

Toastify__bounceOutRight

Toastify__bounceInLeft

Toastify__bounceOutLeft

Toastify__bounceInUp

Toastify__bounceOutUp

Toastify__bounceInDown

Toastify__bounceOutDown

Toastify__zoomIn

Composants — le vocabulaire fermé

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

Composant	Variantes
buttons	×5
links	×3
heading H1	×2
heading H2	×2
price Tag	×2
inputs	×1
footer Links	×1
heading H3	×1

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

Buttons

Outline

Background: transparent
Text: #e1dbd2 {colors.ink}
Padding: 9.1875px 9.1875px 6.125px
Radius: 0px
Border: 1px solid rgb(225, 219, 210)
Font: 12.25px weight 400
Use: Secondary action with border
Focus: outline: rgb(16, 16, 16) auto 5px

Icon Button

Background: transparent
Text: #e1dbd2 {colors.ink}
Padding: 12px 0px 10px
Radius: 0px
Border: 1px solid rgb(225, 219, 210)
Font: 14px weight 400
Use: Toolbar/UI icons
Focus: outline: rgb(16, 16, 16) auto 5px

Inputs & Forms

Text Input

Background: transparent
Text: #e1dbd2 {colors.ink}
Padding: 12px 12px 10px
Radius: 0px
Border: 1px solid border-color
Font: 14px weight 400
Use: Text fields, search inputs
Focus: outline: rgb(225, 219, 210) none 0px

Navigation

Main Nav

Background: transparent
Padding: 15.5px 17.5px
Radius: none
Font: 14px weight 400
Use: Fixed/sticky flex nav — N/A items

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height96px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

11 points de rupture lus dans le CSS live

389px

480px

499px

500px

767px

768px

950px

1023px

1024px

1440px

1681px

À faire / À éviter

9 règles applicables, verbatim de la spec

À faire

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

Use Radikal as the primary typeface — it defines the brand personality

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

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

Make the navigation fixed — it stays visible during scroll, signaling content depth

Include a newsletter signup in the footer — email capture is part of the conversion funnel

À éviter

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 over-build the footer — this design keeps it minimal (1 cols, 2 links)

Guide agent & export

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

Construis une UI dans le design system de ikoyilondon.com. Fond #33210a · encre #e1dbd2 · accent #9c7a3c. Typo : Radikal — 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 ikoyilondon

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