Design System includes/header.php

GTS UI Design System & Styleguide

Live preview of all semantic brand colors, typography, buttons, status badges, inputs, cards, and tables.

ENFR
← Back to App

1. Semantic Brand Colors

Defined in tailwind.config inside 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. Typography Scale

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. Buttons (@layer components)

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

4. Status Badges

.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. Form Inputs (.input-field)

.input-field

6. Cards & KPI Summary Strip (.card)

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

7. Live Crew Response Table Layout

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