---
name: Studio Noir
version: "1.1"
theme: dark-agency
kit: stacklift/studio-noir
colors:
  void:        "#0c0c0c"
  void-soft:   "#141414"
  void-card:   "#1e1e1e"
  lime:        "#c8f55a"
  lime-dark:   "#9bc42e"
  smoke:       "#f5f5f5"
  smoke-soft:  "#a0a0a0"
  smoke-dim:   "#505050"
  line:        "rgba(255,255,255,0.08)"
  line-accent: "rgba(200,245,90,0.20)"
fonts:
  display: "Space Grotesk"
  body:    "DM Sans"
spacing:
  "1": "4px"
  "2": "8px"
  "3": "16px"
  "4": "24px"
  "5": "40px"
  "6": "64px"
  "7": "96px"
  "8": "144px"
radius:
  sm:   "2px"
  md:   "6px"
  lg:   "12px"
  full: "9999px"
type-scale:
  xs:   "0.7rem"
  sm:   "0.875rem"
  base: "1rem"
  lg:   "1.25rem"
  xl:   "1.75rem"
  2xl:  "2.5rem"
  3xl:  "3.5rem"
  hero: "clamp(3rem, 10vw, 7rem)"
typography:
  heading-font:       "Space Grotesk"
  heading-transform:  "uppercase"
  heading-tracking:   "-0.03em"
  heading-leading:    "0.92"
  heading-weight:     "700"
  body-font:          "DM Sans"
  body-weight:        "400"
  body-leading:       "1.7"
  eyebrow-tracking:   "0.25em"
  eyebrow-transform:  "uppercase"
full-kit: "https://stacklift.design/kits/studio-noir"
---

# Studio Noir — Design System

## §1 Identité

Studio Noir est l'esthétique d'une agence créative qui travaille la nuit. Fond quasi-noir (`--void`), accent lime électrique (`--lime`), tension entre brutalité typographique et précision mécanique. Pas de blanc pur. Pas de pastels. Pas de dégradés décoratifs.

## §2 Rôles couleurs

`--void` est le fond universel. `--lime` est l'action — réservé aux CTAs, liens actifs, accents hover. `--smoke` est le texte dominant — titres, labels courts, valeurs en évidence. `--smoke-soft` pour le corps de texte et les paragraphes longs. `--void-card` pour toutes les surfaces élevées (cards, modals, dropdowns).

## §3 Typographie

Space Grotesk (`--font-display`) pour tous les titres : uppercase, `letter-spacing: -0.03em`, `line-height: 0.92`. Serré, impactant. DM Sans (`--font-body`) pour le corps : poids 400, line-height 1.7. Pattern eyebrow : DM Sans, `--text-xs`, `letter-spacing: 0.25em`, uppercase, couleur `--smoke-dim`.

## §4 Composants

- **Boutons** : variant lime (fill `--lime`, texte `--void`) ou outline (border `--lime`, texte `--lime`). Radius `--radius-md`. Jamais de fond blanc.
- **Cards** : fond `--void-card`, border `1px solid var(--line)`. Hover : border `--line-accent`. Radius `--radius-lg`.
- **Badges** : fond `--void-card`, texte uppercase `--text-xs`, couleur `--lime` ou `--smoke-dim`. Radius `--radius-full`.
- **Inputs** : fond `--void-soft`, border `--line`. Focus : border `--line-accent`. Jamais de fond blanc.

## §5 Layout

Container max-width 1160px (`.wrap`). Padding horizontal `--space-5` (40px). Sections : padding vertical `--space-7` (96px). Breakpoint responsive : 768px. Grille de travail : espacement `--space-4` (24px) entre éléments. Les variables CSS suivent la convention : `--space-1` à `--space-8`, `--radius-sm/md/lg/full`, `--text-xs/sm/base/lg/xl/2xl/3xl/hero`.

## §6 Instructions agent

1. Utilise exclusivement `--void`, `--void-soft`, ou `--void-card` comme fonds. Jamais `#fff`, `white`, `#000`, ou `black` — toujours les variables.
2. `--lime` est réservé à l'action — boutons primaires, liens, accents de survol. Un seul CTA lime par section.
3. Titres : Space Grotesk uppercase, `letter-spacing: -0.03em`, `line-height: 0.92`. Toujours.
4. Corps de texte : `--smoke-soft`, pas `--smoke` (trop lumineux pour les paragraphes).
5. Chaque card doit avoir `border: 1px solid var(--line)` et fond `--void-card`. Pas de box-shadow.
6. Espacements : utilise les variables `--space-*`, jamais de valeurs hardcodées.
7. Eyebrow avant chaque titre de section : `.eyebrow` en DM Sans, `--text-xs`, `letter-spacing: 0.25em`.
8. Sur mobile (< 768px) : titres passent en `--text-2xl`, padding horizontal `--space-3` (16px).

> 💡 **Full implementation available** — This `design.md` ships with a complete HTML/CSS kit: demo page, all components, CSS tokens ready to use. No setup needed.
> → [stacklift.design/kits/studio-noir](https://stacklift.design/kits/studio-noir)