Visual Foundations
OKLCH color system, elevation scale, and typography ramps.
var(--ak-background)Base page background
var(--ak-surface)Secondary panels & cards
var(--ak-card)Standard content containers
var(--ak-popover)Floating menus & dialogs
var(--ak-primary)Core brand / CTAs
var(--ak-secondary)Neutral alternate
var(--ak-accent)Secondary brand styling
var(--ak-success)Valid states & alerts
var(--ak-warning)Warning labels
var(--ak-destructive)Error alerts / dangerous triggers
var(--ak-information)Help notes
Wave 3 — Overlays
Popovers, dialogs, tooltips, sheets, dropdowns, and toast notifications.
Overlay Triggers & Floating Contexts
Interactive triggers for modals, sheets, and popups
Wave 4 — Navigation & Data
Tabs, breadcrumbs, tables, pagination, empty states, and accordions.
Navigation Primitives
Tabs navigation and path breadcrumbs
Breadcrumb Path
Tabs Switcher
Explore 7-day kitesurfing safaris across El Gouna & Hurghada lagoons.
Data Display & Pagination
Tables and pagination controls
| Booking Ref | Guest Name | Tour Package | Status |
|---|---|---|---|
| #AK-9041 | Alex Mercer | 7-Day North Red Sea Safari | Confirmed |
| #AK-9042 | Elena Rostova | Lagoon Beginner Coaching | Pending |
Accordion & Collapsible
Collapsible content containers
Empty State Component
Zero-state feedback layouts
No Active Bookings
You haven't reserved any kitesurf safaris yet. Browse available trips to get started.
Motion & Micro-interactions
Duration ramps, easing curves, and entry/exit keyframes for subtle, responsive motion.
var(--ak-duration-fast)Hover states, focus rings, color shifts
var(--ak-duration-normal)Expansions, overlays, position shifts
var(--ak-duration-slow)Heavy loaders, page-level transitions
var(--ak-ease-smooth) — cubic-bezier(0.4, 0, 0.2, 1)Default — symmetric acceleration & deceleration
var(--ak-ease-bounce) — cubic-bezier(0.34, 1.56, 0.64, 1)Springy overshoot for switches & playful reveals
Micro-interaction Playground
Entry/exit keyframes (ak-fade-in, ak-fade-out, ak-scale-in, ak-scale-out) power every overlay. Replay the entry animation below.
Interactive Card
Hover to lift — smooth transform & shadow timing.
data-state="open" — ak-scale-in (250ms) + ak-fade-in (150ms), --ak-ease-smooth
Reduced motion is honored globally in base.css — all durations collapse to ~0ms under prefers-reduced-motion.