Theme Builder

Personnalisez les design tokens CSS et téléchargez tokens.css à importer par-dessus @brickslab/theme-default.

Polices d'écriture

Choisissez 2 polices pour votre projet. Elles seront incluses en commentaires dans le CSS généré avec les instructions d'import.

Principaletitres, labels, navigation

The quick brown fox

jumps over the lazy dog — 0123456789

ABCDEFGHIJKLM abcdefghijklm

--font-primary: 'Inter', sans-serif

Secondairecorps de texte, paragraphes

The quick brown fox

jumps over the lazy dog — 0123456789

ABCDEFGHIJKLM abcdefghijklm

--font-secondary: 'Merriweather', serif

Palette identitaire

Définissez les 5 couleurs qui expriment le mood du projet. Cliquez sur une couleur pour la modifier. Utilisez Appliquer aux tokens pour propager automatiquement vers les couleurs sémantiques.

Primaire

Brand / identité

Secondaire

Complémentaire

Accent

Mise en avant

Neutre

Texte / UI

Fond

Arrière-plan

Mapping appliqué

Primaire→ --color-brand, --color-error

Secondaire→ --color-info

Accent→ --color-warning, --color-success

Neutre→ --color-muted

Fond→ --color-bg, --c-surface

Couleurs sémantiques

Arrière-plan

--color-bg

#ffffff

Texte principal

--color-fg

#0b1220

Texte secondaire

--color-muted

#52607a

Brand

--color-brand

#CC4A48

Succès

--color-success

#4ADE80

Avertissement

--color-warning

#F59E0B

Erreur

--color-error

#CC4A48

Info

--color-info

#3B82F6

Surfaces & Bordures

Surface

--c-surface

#ffffff

Surface élevée

--c-surface-elevated

#f7f7f7

Bordure

--c-border

#e0e0e0

Brand subtle

--c-brand-subtle

#fff0f0

Brand border

--c-brand-border

#f5c6c5

Typographie — Tailles fixes

2XS--fontsize-2xs

10px

XS--fontsize-xs

12px

SM--fontsize-sm

14px

Medium--fontsize-medium

16px

Typographie — Tailles fluides (clamp)

LG--fontsize-lg

clamp(18px, 5vw, 48px)

min 18px

viewport 5vw

max 48px

XL--fontsize-xl

clamp(20px, 5vw, 48px)

min 20px

viewport 5vw

max 48px

2XL--fontsize-2xl

clamp(24px, 5vw, 48px)

min 24px

viewport 5vw

max 48px

3XL--fontsize-3xl

clamp(30px, 5vw, 48px)

min 30px

viewport 5vw

max 48px

4XL--fontsize-4xl

clamp(36px, 5vw, 48px)

min 36px

viewport 5vw

max 48px

5XL--fontsize-5xl

clamp(32px, 5vw, 48px)

min 32px

viewport 5vw

max 48px

Typographie — Graisses

Thin

--fontweight-thin

Extralight

--fontweight-extralight

Light

--fontweight-light

Normal

--fontweight-normal

Medium

--fontweight-medium

Semibold

--fontweight-semibold

Bold

--fontweight-bold

Extrabold

--fontweight-extrabold

Black

--fontweight-black

Espacements

space-1

--space-1

space-1-5

--space-1-5

space-2

--space-2

space-3

--space-3

space-4

--space-4

space-5

--space-5

space-6

--space-6

space-7

--space-7

space-8

--space-8

space-10

--space-10

space-12

--space-12

space-15

--space-15

space-20

--space-20

Épaisseurs de bordure

XM (fine)--border-xm

1px

SM--border-sm

2px

MD--border-md

4px

Radius

SM--radius-sm

6px

MD--radius-md

12px

LG--radius-lg

16px

Full (pill)--radius-full

999px

Ombres

--shadow-10 1px 2px rgba(0, 0, 0, 0.06)

Décalage Yy

1px

Blurblur

2px

Opacitéopacity

0.06

--shadow-20 10px 30px rgba(0, 0, 0, 0.10)

Décalage Yy

10px

Blurblur

30px

Opacitéopacity

0.10

Transitions

--transition-bg

Duréeduration

0.2s

Easing

easing

--transition-all

Duréeduration

0.2s

Easing

easing

Accessibilité — Focus ring

0 0 0 3px rgba(204, 74, 72, 0.25)

Couleur

focus color

#CC4A48

Spreadspread

3px

Opacitéopacity

0.25

Z-index

Base

--z-base

Drawer

--z-drawer

Dropdown

--z-dropdown

Modal

--z-modal

Primaire

Secondaire

Accent

Neutre

Fond

Titre du composant

Description illustrant les tokens de couleur, typographie et bordures.

surface-elevated · radius-sm

BrandSuccèsWarningInfoErreur

Brand subtle + border

↑ Survole ou focus avec Tab pour tester transition + focus-ring

CSS généré

/*
 * ── Polices d'écriture ───────────────────────────────────────────────────────
 *
 * 1. Police principale — titres, labels, navigation
 *    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 *    --font-primary: 'Inter', sans-serif;
 *
 * 2. Police secondaire — corps de texte, paragraphes
 *    @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700&display=swap');
 *    --font-secondary: 'Merriweather', serif;
 *
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette identitaire ─────────── */
  --palette-primaire: #CC4A48;
  --palette-secondaire: #3B82F6;
  --palette-accent: #F59E0B;
  --palette-neutre: #52607a;
  --palette-fond: #ffffff;

  /* ── Couleurs sémantiques ─────────── */
  --color-bg: #ffffff;
  --color-fg: #0b1220;
  --color-muted: #52607a;
  --color-brand: #CC4A48;
  --color-success: #4ADE80;
  --color-warning: #F59E0B;
  --color-error: #CC4A48;
  --color-info: #3B82F6;
  --color-transparent: transparent;

  /* ── Surfaces & Bordures ─────────── */
  --c-surface: #ffffff;
  --c-surface-elevated: #f7f7f7;
  --c-border: #e0e0e0;
  --c-brand-subtle: #fff0f0;
  --c-brand-border: #f5c6c5;

  /* ── Typographie — Tailles ───────── */
  --fontsize-2xs: 10px;
  --fontsize-xs: 12px;
  --fontsize-sm: 14px;
  --fontsize-medium: 16px;
  --fontsize-lg: clamp(18px, 5vw, 48px);
  --fontsize-xl: clamp(20px, 5vw, 48px);
  --fontsize-2xl: clamp(24px, 5vw, 48px);
  --fontsize-3xl: clamp(30px, 5vw, 48px);
  --fontsize-4xl: clamp(36px, 5vw, 48px);
  --fontsize-5xl: clamp(32px, 5vw, 48px);

  /* ── Typographie — Graisses ──────── */
  --fontweight-thin: 100;
  --fontweight-extralight: 200;
  --fontweight-light: 300;
  --fontweight-normal: 400;
  --fontweight-medium: 500;
  --fontweight-semibold: 600;
  --fontweight-bold: 700;
  --fontweight-extrabold: 800;
  --fontweight-black: 900;

  /* ── Espacements ─────────────────── */
  --space-1: 2px;
  --space-1-5: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-20: 80px;

  /* ── Bordures ────────────────────── */
  --border-solid: solid;
  --border-dotted: dotted;
  --border-double: double;
  --border-xm: 1px;
  --border-sm: 2px;
  --border-md: 4px;

  /* ── Radius ──────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ── Ombres ──────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* ── Transitions ─────────────────── */
  --transition-bg: background 0.2s ease;
  --transition-all: all 0.2s ease;

  /* ── Accessibilité ───────────────── */
  --focus-ring: 0 0 0 3px rgba(204, 74, 72, 0.25);

  /* ── Z-index ─────────────────────── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-drawer: 50;
}