# Eat Activ — Design spec (draft v0.1)

Codename for the design system: **Activ UI**. This file is the source of truth; when we build
`packages/ui` the tokens below become CSS custom properties 1:1.

## 1. Direction

**"Market kitchen at dusk."** Take what eatactiv.com already has (deep forest-green photography,
hand-drawn caps, cream paper, leaf green) and make it feel like a premium product, not a WordPress theme.

- **Food is the hero.** Big, cut-out bowl photography on cream or forest surfaces. UI recedes.
- **Two moods, one brand**: *Cream* (light, daytime — default for ordering) and *Forest* (dark —
  hero sections, kiosk attract, admin). Both come from the brand palette, no generic greys or navy.
- **Hand-made accent, precise body**: the hand-drawn display font only for short headlines and
  numbers that should feel human (order number, "FEEL YOUR BEST"); everything functional is a clean sans.
- **Alive, not busy**: every state change is animated, but motion is short, eased and purposeful.
- Signature elements borrowed from the current site: **marquee strips** and **outlined pill buttons**.

## 2. Colour tokens

Brand (from Storekit branding + site CSS):

| Token | Hex | Notes |
|---|---|---|
| `--leaf-500` | `#91B054` | brand green |
| `--leaf-300` | `#B9CF8C` | tints, selected backgrounds on dark |
| `--leaf-700` | `#6E8A3A` | leaf text on cream (contrast) |
| `--moss-600` | `#284638` | primary action, prices |
| `--moss-800` | `#1B2A23` | body text on cream |
| `--forest-900` | `#13221B` | dark surfaces |
| `--forest-950` | `#0C1611` | deepest bg (kiosk, admin canvas) |
| `--cream-100` | `#F1E8D9` | paper / cards |
| `--cream-50` | `#FAF6EE` | page bg (light) |
| `--clay-500` | `#D9774B` | accent: spicy, "popular", alerts — warm counterpoint to green (new) |
| `--sun-400` | `#E8C468` | accent: "new", loyalty points, pending (new) |

Semantic (light / dark):

| Semantic | Cream mode | Forest mode |
|---|---|---|
| `--bg` | cream-50 | forest-950 |
| `--surface` | cream-100 | forest-900 |
| `--surface-raised` | #FFFFFF | color-mix(forest-900, leaf-500 6%) |
| `--text` | moss-800 | cream-100 |
| `--text-muted` | moss-800 @ 64% | cream-100 @ 60% |
| `--primary` | moss-600 | leaf-500 |
| `--on-primary` | cream-100 | forest-950 |
| `--accent` | leaf-500 | leaf-300 |
| `--border` | moss-800 @ 12% | cream-100 @ 10% |
| `--success` / `--warning` / `--danger` | leaf-700 / sun-400 / clay-500 | leaf-300 / sun-400 / clay-500 |

Order-state colours (admin board, tracking): `received` sun-400 · `preparing` clay-500 ·
`ready` leaf-500 · `collected` muted · `failed` #C2413A.

## 3. Typography

| Role | Font | Fallback for mockups |
|---|---|---|
| Display (headlines, order numbers, marquee) | **DK Lemon Yellow Sun** (licence **[Q]**) | Google: *Amatic SC* 700 is the closest free match |
| UI / body | **Jost** (already used on eatactiv.com, geometric, friendly) | Google Fonts: Jost |
| Numbers in admin tables | Jost with `font-variant-numeric: tabular-nums` | — |

Scale (mobile → desktop via `clamp`): display-xl 56→104 · display-l 40→72 · h1 28→40 · h2 22→28 ·
h3 18→20 · body 16 · small 14 · micro 12 (uppercase, +0.12em tracking for labels/marquee).
Display is always uppercase, line-height 0.9, slight letter-spacing +0.02em.

## 4. Shape, space, elevation

- Spacing: 4px base — 4, 8, 12, 16, 24, 32, 48, 64, 96.
- Radius: `sm 10` (inputs, chips) · `md 18` (cards) · `lg 28` (sheets, modals) · `pill 999` (buttons, nav).
  Food photo frames use the site's **stadium shape** (fully rounded ends) as a signature.
- Elevation (cream): soft, green-tinted shadows `0 1px 2px #1B2A2314, 0 8px 24px #28463814`.
  Forest mode: no drop shadows — use 1px inner border + subtle leaf glow for focus/selected.
- Touch targets: min 44px web/app, **min 64px kiosk**.

## 5. Motion

Library: **GSAP 3** (+ Flip, ScrollTrigger). In production the same easing tokens go to CSS for simple
transitions.

| Token | Value | Use |
|---|---|---|
| `--ease-out` | `power3.out` / `cubic-bezier(.2,.8,.2,1)` | default enter |
| `--ease-in` | `power2.in` | exit |
| `--ease-inout` | `power3.inOut` | Flip, layout moves |
| `--ease-pop` | `back.out(1.8)` | add-to-basket, badges, counters |
| `--dur-xs/s/m/l` | 160 / 280 / 450 / 700 ms | micro / hover / enter / hero |
| `--stagger` | 40 ms (cards), 25 ms (list rows) | |

Choreography rules:
1. **First load**: skeleton shapes in final layout → content cross-fades in with a stagger, headline
   reveals with a mask (bottom-up), images de-blur from a low-res placeholder. Total ≤ 1.2s.
2. **Navigation between states uses Flip**: product card → customizer sheet (the photo flies),
   basket item → checkout summary, order card moves between admin columns.
3. **Add to basket**: product thumbnail arcs into the basket button, button counter pops (`--ease-pop`).
4. **Marquee strips** run at constant slow speed, pause on hover, never on functional UI.
5. **Numbers count up** (totals, KPIs) over `--dur-m`.
6. `prefers-reduced-motion: reduce` → no translation/scale, only opacity fades ≤ 160ms; marquee static.

## 6. Core components (inventory)

Customer / kiosk: StorePicker card (open/closed state, ETA), CategoryRail (sticky, scrollspy, active pill
slides), ProductCard (stadium photo, dietary badges, price, quick-add), DietaryBadge (VG, V, GF, DF, Halal,
Spicy), AllergenList, Customizer sheet (modifier groups: radio / checkbox / stepper, required validation,
live price), BasketButton (floating, count + total), Basket drawer, TimeSlotPicker (ASAP + slots),
Checkout steps, PaymentSheet, OrderTracker (state timeline + order number in display font), LoyaltyCard.

Kiosk only: AttractScreen (video/photo loop + marquee), IdleWarning (countdown), Big keypad, Terminal
payment overlay, Order number screen.

Admin: AppShell (pill top-nav + icon rail, location switcher), KpiTile (value + delta chip), OrderTicket
(state-coloured), Kanban board, DataTable, Toggle "Available", Snooze menu (30 min / until close / custom),
PermissionMatrix, AuditTimeline (actor, action, diff), Drawer forms.

## 7. Responsive

Breakpoints: `sm 390` (design base) · `md 768` · `lg 1024` · `xl 1440`. Customer layout: single column
→ menu + sticky basket side panel at `lg`. Kiosk: fixed portrait 1080×1920, scaled with CSS `zoom`
in the mockup. Admin: designed at `xl`, usable at `md` (store tablet).

## 8. Accessibility

WCAG 2.2 AA: text contrast ≥ 4.5:1 (leaf-500 is **not** text-safe on cream → use leaf-700 or moss),
visible focus ring (2px leaf + 2px offset), all motion optional, allergen info always text not icon only.