rakunyc.com is built on a near-black canvas (rgb(0, 0, 0)).
Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Lato as the primary typeface.
Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
Motion is minimal — a few targeted transitions, no decorative animation.
Accent #0066ff · police principale Lato
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.
2 courbes d’easing · 1 keyframes · survole une tuile pour prévisualiser
Courbes & transitions
transition-1cubic-bezier(0.4, 0, 0.2, 1)
transition-2cubic-bezier(0.4, 0, 1, 1)
1 animations keyframes extraites
swiper-preloader-spin
06
Composants — le vocabulaire fermé
8 familles de composants · 27 variantes comptées sur le DOM live
Composant
Variantes
links
×10
heading H3
×5
buttons
×3
nav Links
×3
heading H2
×3
footer Links
×1
heading H1
×1
heading H4
×1
07
Mise en page — structure & dimensions
5 métriques de layout mesurées
max Width1200px
header Height56px
sidebar Width0px
gap16px
container Padding0px 0px 52px
08
Responsive — vrais breakpoints
5 points de rupture lus dans le CSS live
392px
600px
768px
1200px
1440px
09
À faire / À éviter
17 règles applicables, verbatim de la spec
À faire
Use dark background (`#000000`) as the foundation — this is a dark-mode-native design
Use Lato as the primary typeface — it defines the brand personality
Keep font weights between 200-400 — the system uses a narrow weight range for subtle hierarchy
Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
Maintain nav height at 46px — consistent vertical space for the navigation bar
Respect the 5px–52px spacing range — the design uses a wide scale for visual breathing room
Build the hero as a split layout with media on the right — text and visual share equal weight
Each card includes a top image — imagery is part of the card identity, not optional
À é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 reach for weight 700 (bold) or above — 400 is the heaviest weight this design paints
Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
Don't use rectangular buttons for primary actions — the rounded pill shape is the brand 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
10
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page
Construis une UI dans le design system de rakunyc.com.
Fond #ffffff · encre #ffffff · accent #0066ff.
Typo : Lato — 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.
