Design System includes/header.php

Système de design & Guide de style GTS

Aperçu en direct des couleurs de marque, typographies, boutons, badges, champs, cartes et tableaux.

ENFR
← Retour à l'app

1. Couleurs sémantiques de la marque

Définies dans tailwind.config dans includes/header.php

tailwind.config.theme.extend.colors
brand-primary
bg-brand-primary · text-brand-primary
brand-hover
hover:bg-brand-hover
brand-bg
bg-brand-bg
brand-surface
bg-brand-surface
brand-muted
text-brand-muted
Liquid Glass Translucency: 62% surface + 28px backdrop-blur + saturate(190%) Corner Radius Scale: md: 4px · lg: 5px · xl: 6px · 2xl: 8px · 3xl: 10px

2. Échelle typographique

font-sans / font-mono

H1 Page Title — Bell Corporate Shoot

text-2xl sm:text-3xl font-extrabold text-white

H2 Section Header — Shoot Schedule & Positions

text-lg font-bold text-white

H3 Card Title — Crew Availability

text-base font-bold text-white

Body Text — Standard production notes, descriptions, and table cell copy.

text-sm text-zinc-200

Form Label / Table Column Header

text-xs font-semibold uppercase tracking-wider text-brand-muted
08:00 → 17:00 font-mono text-sm font-bold text-brand-primary

3. Boutons (@layer components)

.btn-primary / .btn-secondary / .btn-danger
Standard Actions
Compact / Table Actions
Full-Width Mobile CTA

4. Badges de statut

.badge-*
Core Semantic Badges
✓ .badge-available .badge-pending ✓ .badge-booked ◑ .badge-hold
Additional Production & Category Badges
Corporate Video Music Video Not Available
Interactive Tap-Target Selector

5. Champs de formulaire (.input-field)

.input-field

6. Cartes & Indicateurs KPI (.card)

.card
Open Invites
12
Booked Crew
4 / 4
On Hold
2
Pending Reply
3

7. Modèle de tableau de réponses de l'équipe

Sample Data
Crew Member Role Reply Status Rate Selection Actions
Marc-André Tremblay FR Cameraman Available All $650 BOOKED
Sophie Lavoie EN Gaffer Available All $500 1ST HOLD
David Chen EN Sound Guy Pending — Unassigned