62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# 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
|