# Mobile Admin UI Style Guide (Fotospiel)

Derived from the provided mocks (`fotospiel-tenant-app/all_events_dashboard.png`, `event_details_dashboard.png`, etc.).

## Typography
- **Body**: Montserrat Regular, 13px, color `#4b5563`; line-height ~1.4.
- **Headings**: Montserrat SemiBold/Bold, 18–22px, color `#111827`.
- **Meta/Labels**: 11–13px, weight 500–600; use uppercase sparingly.
- **Pills/Status/Emotions**: 11px, weight 600, compact padding.

## Colors
- Primary: `#007AFF`
- Accent: `#5AD2F4`
- Text main: `#111827`; secondary: `#4b5563`; muted: `#6b7280`
- Background: `#f7f8fb`; Cards: `#ffffff`; Border: `#e5e7eb`
- Status pills: success `#ecfdf3/#047857`; warning `#fffbeb/#92400e`; muted `#f3f4f6/#374151`
- Action tiles palette: blue `#60a5fa`, amber `#fbbf24`, purple `#a855f7`, green `#4ade80`, coral `#fb7185`, cyan `#38bdf8`

## Layout & Spacing
- Screen padding: 16–20px
- Card radius: 14–16px; pill radius: full
- Gaps: 8–12px between items; 16–20px between sections
- Shadows: subtle, opacity 5–10%, soft blur for cards/nav

## Navigation
- Top bar: back on left, title centered, optional right action; height ~56px; bottom border `#e5e7eb`
- Bottom nav: fixed, 4 items (Events, My Tasks, Alerts, Profile); active uses primary; inactive muted gray
- Use press/opacity feedback

## CTAs & FAB
- Primary CTA: 56px height, full-width, solid primary, radius 14–16px, weight 700–800
- Secondary: white surface, border `#e5e7eb`, same sizing
- Prefer a floating action button (FAB) for add/create actions (56px diameter, primary, shadow) instead of inline form buttons

## Cards & Lists
- Event cards: title 18–20px Bold, date/location rows with icons, status pill, light border, soft shadow
- KPI tiles: icon bubble, label 12–14px, value 20–22px Bold
- Featured badge overlay on photos; likes/uploader meta
- Prefer Tamagui list primitives where possible (`List`/`ListItem` with `YGroup`/`Separator`) for settings-style rows instead of custom rows

## Forms
- Inputs: 42–48px height, radius 10–12px, border `#e5e7eb`, padding 12px, placeholder muted
- Segmented controls: pill container; active pill primary
- Toggles: simple checkbox/switch with clear label
- Use FAB for submit/primary action where appropriate

## Icons
- Lucide set; sizes: 16 (meta), 20 (nav), 24 (hero/tiles)
- Active icons use primary; meta icons gray

## State Handling
- Loading: skeleton cards/tiles (faded card shapes)
- Empty: centered card with icon + short copy + CTA/FAB
- Errors: inline card with red text

## Branding/Preview
- Preview frames: light border, soft background, show primary/accent swatches and selected fonts (Montserrat)

## Interaction
- Tap targets ≥44px; press opacity feedback
- Keep forms low-friction; placeholders clear