Design System Spartan

Documentation officielle des atomes et molécules de l'interface Speares. Référence pour tous les développements UI afin de garantir cohérence et maintenabilité.

1. Couleurs & Identité

#fbbf24

Spartan Gold

.spartan-gold

#991b1b

Spartan Red

.spartan-red

#1f2937

Spartan Grey

.spartan-grey

#111827

Spartan BG

.spartan-bg

2. Boutons

3. Saisie de Données

Inputs Standards

Sélecteurs & Date

Text Areas

4. Badges & Status

Base

Default (Gold)
Outline
Muted

Types de Transaction

REVENU
DÉPENSE
MIXTE

Status

EN LIGNE
A LANCER

Badges Cliquables

Marketplace Link

Legacy (aliases)

success = active
danger = depense
destructive

5. Cards & Containers

Standard Card

Sous-titre explicatif
Contenu de la carte standard. Utilise <Card>. Parfait pour des sections délimitées.

KPI Card

1,234 €
+12% vs N-1

6. Data Visualization

Graphique Standard (Spartan Theme)

7. Pagination

1-20 sur 127

8. Info Cards

InfoGroup & InfoItem

Label Standard
Valeur texte
Avec copie
[email protected]
Vide
-
Long texte
Une valeur très longue qui sera tronquée automatiquement

9. Bento Grid

Span 1

Contenu de base

Span 2

Double largeur pour contenus plus importants

Avec Action

Bouton dans le header

10. Modales

11. Tables

Composants Table réutilisables avec tri, états vide/loading, et styling cohérent.

Nom↑Status↕Montant↕Actions
Acme Corp
ACTIVE
1 250 €
Globex Inc
PENDING
890 €
Initech
ACTIVE
2 100 €