fotospiel-app/docs/mobile-styleguide.md

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