prismd
Éditeur Extraire un site
Analyse du design system

destroyer.la

destroyer.la is built on a near-black canvas (rgb(35, 35, 35)). The system uses rgb(27, 179, 233) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside monospace typography (GT Pressura Mono Regular) — developer-first identity. GT Pressura Mono Regular is paired with GT Pressura Mono Bold for secondary roles. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 7 keyframe animations plus transition-driven interactions.

Accent #1bb3e9 · police principale GT Pressura Mono Regular

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://destroyer.la/ ·extrait le 2026-08-12 ·scorer v2 ·moteur getComputedStyle
Desktop · source de vérité
destroyer.la desktop
Mobile
destroyer.la mobile
01

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

13 couleurs mesurées · clique une pastille pour copier

Canvas
#232323
AAA 15.72:1
Ink
#ffffff
AAA 15.72:1
Accent
#1bb3e9
AA 6.49:1
Line
#ffffff
AAA 15.72: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.

13 couleurs extraites du rendu livedéplier
02

Typographie — l’échelle, dans la vraie police

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

display xl
display-xl51.2px · 400
display lg
display-lg32px · 300 · ×1.60
body
body16px · 400 · ×2.00
body sm
body-sm13px · 400 · ×1.23
button
button12px · 400 · ×1.08
03

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement
xxs · 2px
xs · 6px
sm · 14px
md · 25px
base · 27px
lg · 32px
xl · 46px
2xl · 50px
3xl · 70px
Arrondis
none
0px
xs
8px
sm
50px
md
100px
lg
1000px
xl
1008px
full
9999px
04

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

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

shadow-1
shadow-2
shadow-3
05

Motion — courbes, transitions & keyframes réels

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

7 animations keyframes extraites
mapDot
shimmer
spacebar
shake-7
spin-cw-1turn
wiggle-7deg
fa-spin
06

Composants — le vocabulaire fermé

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

ComposantVariantes
links×6
buttons×4
nav Links×3
skeleton×3
cards×1
footer Links×1
Specs de style des composants (§4)déplier

Buttons

Icon Button

  • Background: transparent
  • Text: #ffffff {colors.hairline}
  • Padding: 1px 6px
  • Radius: 0px
  • Font: 16px weight 400
  • Use: Toolbar/UI icons

Ghost

  • Background: transparent
  • Text: #ffffff {colors.hairline}
  • Padding: 0px 12.8px
  • Radius: 0px
  • Font: 12px weight 400
  • Use: Subtle action, toolbar, nav button
07

Mise en page — structure & dimensions

5 métriques de layout mesurées

header 900px 1200px max-width
max Width1200px
header Height900px
sidebar Width0px
gap16px
container Padding24px
08

Responsive — vrais breakpoints

13 points de rupture lus dans le CSS live

30px
40px
47px
48px
58px
59px
60px
74px
640px
750px
930px
931px
1280px
09

À faire / À éviter

18 règles applicables, verbatim de la spec

À faire
Use dark background (`#232323`) as the foundation — this is a dark-mode-native design
Use GT Pressura Mono Regular as the primary typeface — it defines the brand personality
Keep font weights between 300-400 — the system uses a narrow weight range for subtle hierarchy
Use negative letter-spacing (-3px) at display sizes for compressed, editorial headlines
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use Sky Bright (`#1bb3e9`) as the primary accent — it's the brand's signature interactive color
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 right — text and visual share equal weight
Make the navigation fixed — it stays visible during scroll, signaling content depth
À é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 increase letter-spacing on headings — the type is designed to run tight at scale
Don't invent new shadow values — use only the extracted shadow levels
Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
Don't introduce additional saturated accent colors — the palette is intentionally controlled
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 destroyer.la. Fond #232323 · encre #ffffff · accent #1bb3e9. Typo : GT Pressura Mono Regular — 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 destroyer
DESIGN.md · narrative spec tokens.json