🦄 Unicorn.Land ▸ docs/plans/2026-03-07-kiosk-v4-gallery-frame-design.md
updated 2026-03-07
Kiosk v4 “Gallery Frame” Design
Date: 2026-03-07
Status: Approved
Pencil file: pencil-new.pen (frames A1, A2, A1-Dark)
Overview
The Gallery Frame redesign restructures the kiosk layout to: - Show all content panels without hiding anything behind rotation - Keep the family photo always visible (not rotating) - Use a 2-slot rotating stage for supplementary content (Life / World) - Invert the day/night color scheme (bright at night, dark during day)
Layout Structure (top to bottom)
| Section | Height | Content |
|---|---|---|
| Header | 80px | Clock (72px gradient), date, current temp, weather desc |
| Today Card | 280px | “Today” + date + hi/lo + weather icon, up to 6 events (time + people emoji + title), 6px orange left border |
| Next Days Row | fit | Tomorrow + Day After side-by-side, each shows: day, date, weather icon + hi temp, up to 3 events (time + people emoji + title) |
| Compact Days | 56px | 4 pills (days 4-7): day abbrev + hi temp + event count (“3 events” / “Free”) |
| Rotating Stage | 280px | 2-slot rotation: Life Stuff / World Stuff (see below) |
| Photo Frame | fill | Family photo, always visible, 5-minute rotation, dark matte frame (16px padding, rounded corners) |
| News Ticker | 56px | Colored pip + source + headline, 8s rotation |
| Status Bar | 32px | Last refresh + branding |
Rotating Stage (60s cycle, 2 slots)
The stage is a white card (dark mode: #2A2420) with rounded corners and a colored top-border indicating which state is active.
Slot 1: Life Stuff (orange top-border #D4813A)
Three columns side-by-side:
| Column | Content |
|---|---|
| Coming Up | Up to 4 countdowns: emoji + days remaining + label |
| Groceries | Title + count badge, up to 6 unchecked items, “+N more” |
| Chores | Title + progress badge (3/8), up to 5 incomplete items |
Slot 2: World Stuff (teal top-border #56BDB0)
Three columns side-by-side:
| Column | Content |
|---|---|
| Stars | 3 horoscopes: zodiac emoji + sign name + person emoji + 1 sentence |
| Transit | “Senefelderplatz” title, 4 departures: line badge + direction + time + delay |
| Country | Flag image + country name + “Capital - Region” |
Inverted Day/Night Color Scheme
Key insight: When it’s dark outside, a bright warm screen lights the room. When it’s bright outside, a dark screen reduces glare and feels like a picture frame.
Night Mode (bright) – used during: night, dawn, dusk
| Token | Value |
|---|---|
| Page background | #F5F0E8 (warm cream) |
| Card background | #FFFFFF |
| Card secondary | #EDE7DD |
| Text primary | #3D3530 |
| Text secondary | #6B5E52 |
| Text body | #5A5048 |
| Text tertiary | #8A7D72 |
| Text muted | #A89E94 |
| Photo frame | #3D3530 (dark matte) |
| Divider | #E8E0D6 |
| Ticker background | #E8E0D6 |
Day Mode (dark) – used during: day, golden hour
| Token | Value |
|---|---|
| Page background | #1E1A16 |
| Card background | #2A2420 |
| Card secondary | #3D3530 |
| Text primary | #F5F0E8 |
| Text secondary | #C4B8AC |
| Text body | #B0A498 |
| Text tertiary | #8A7D72 |
| Text muted | #6B5E52 |
| Photo frame | #F0EBE3 (light matte) |
| Divider | #3D3530 |
| Ticker background | #3D3530 |
Shared accent colors (both modes)
| Token | Value |
|---|---|
| Accent primary (orange) | #D4813A |
| Accent red | #C4483A |
| Accent teal | #56BDB0 |
| Clock gradient | #E8835A -> #D4A43A -> #56BDB0 -> #7BA4D9 |
| Grocery badge | #D4813A |
| Chore badge | #56BDB0 |
| Transit U-Bahn | #1A5276 |
| Transit Tram | #D4483A |
Timing Changes
| What | Old | New |
|---|---|---|
| Photo rotation | 12 minutes | 5 minutes |
| Stage rotation | 60s (3 slots: photo/life/world) | 60s (2 slots: life/world) |
| Photo crossfade | 1800ms | 1800ms (unchanged) |
| Stage crossfade | 800ms | 800ms (unchanged) |
Key Implementation Notes
- Photo is no longer in the rotating stage. It has its own permanent grid area below the stage.
- Countdowns move from static bar to Life Stuff stage. No longer always-visible.
- useTimeOfDay hook already has 5 phases (night/dawn/day/golden/dusk). Map: night+dawn+dusk = bright mode, day+golden = dark mode.
- Stage has 2 slots instead of 3. Update useStageRotation accordingly.
- 3-column layout inside stage uses flexbox row with equal-width columns.
- Colored top-border on stage card changes based on active slot (orange for life, teal for world).
- Next Day cards show up to 3 events with time + people emoji + title.
- Compact Days show structured text: day + temp + event count.