01 — Foundation
02 — Typography
03 — Spacing
04 — Shape & Depth
Border Radius
Shadows
05 — Components
Primary
Secondary
Ghost
Icon Buttons
06 — Navigation
Tab Group
Navigation Bar
07 — Forms
Departure
Destination
Date Picker
Passengers
Promo Code
08 — Cards
Frosted Default
Used for standard content panels. Subtle blur and border create depth without heavy visual weight.
Booking Glass
Used for the main booking panel. Deeper teal tint with stronger blur — anchors UI over photo background.
Accent Bordered
Used to highlight selected or featured content. Acid green border signals active or promotional state.
09 — Badges & Tags
10 — Motion
11 — Tokens
| Token | Value | Usage |
|---|---|---|
| --acid | #CBFF00 | Primary CTA, active states, brand mark |
| --acid-dim | #B0E000 | Button hover, pressed state |
| --navy | #1C3A4A | Page background, deepest surface |
| --teal-dark | #1A3D4F | Card backgrounds, secondary surfaces |
| --teal-mid | #2A5569 | Elevated cards, dropdowns |
| --teal-light | #3D7A92 | Accent tones, illustration elements |
| --sky | #5A9CB5 | Sky tones, hero illustration |
| --shadow-card | 0 8px 40px rgba(0,0,0,0.35) | Cards, modals, popups |
| --shadow-btn | 0 4px 24px rgba(203,255,0,0.35) | Primary CTA acid glow |
| --radius-sm | 6px | Buttons, input fields, small tags |
| --radius-md | 10px | Icon buttons, medium panels |
| --radius-lg | 16px | Cards, main containers |
| --radius-xl | 24px | Booking panel, hero cards |
| --font-display | Ag 'Inter', sans-serif | Headings, labels, tabs, logo |
| --font-body | Ag 'Inter', sans-serif | Body copy, nav links, inputs |
12 — Decorative
Dot Grid Pattern
Used as left-side decorative
texture behind hero text.
Accent Rule
Acid green horizontal rule
below hero text, section breaks.
Logo Mark
Two acid-green bars + wordmark
in Syne 700 or 800.
Swap Icon
Circular swap button between
departure / destination fields.