Design System

Token system

First-tier tokens (colors, spacing, typography) are defined as primitives. Component tokens consume them to form the semantic layer.

To customize the theme, only edit primitives in this file:

assets/styles/theme.scss

Actions

Symfony PHP 8.4 PostgreSQL

Feedback & Loading

Operation successful

An error occurred

User identity

AB CD EF

Forms

Email

Pays

Option A Option B Choix 1 Choix 2

Navigation

Data

Nom	Rôle	Statut
Alice	Admin	Actif
Bob	Member	Actif

Overlays

Titre de la modal ✕

Billing

79,00 € / mois

Membres illimités
Domaine personnalisé
Support prioritaire

Feature	Starter	Pro
Membres	5	∞
Domaine

Feature	Starter	Pro
Membres	5	Illimités
Domaine personnalisé
Support prioritaire

Usage

<table class="plan-compare">
  <thead>
    <tr>
      <th class="plan-compare__head-cell">Feature</th>
      <th class="plan-compare__head-cell plan-compare__cell--center">Starter</th>
    </tr>
  </thead>
  <tbody>
    <tr class="plan-compare__row">
      <td class="plan-compare__cell plan-compare__cell--feature">Membres</td>
      <td class="plan-compare__cell plan-compare__cell--center">
        <span class="plan-compare__check"><i data-lucide="check"></i></span>
        <!-- or -->
        <span class="plan-compare__cross"><i data-lucide="minus"></i></span>
      </td>
    </tr>
  </tbody>
</table>

SCSS build

Components are imported in ITCSS order in:

assets/styles/components/_index.scss

To recompile after a SCSS change:

bin/console sass:build