name: Shot Coach Camera Design System
description: Dark camera-first mobile UI with soft-film warmth, precise coaching controls, and high-contrast capture feedback.
colors:
background: "#0D1112"
surface: "rgba(13, 17, 18, 0.66)"
surface-strong: "rgba(13, 17, 18, 0.88)"
border: "rgba(255, 255, 255, 0.18)"
border-strong: "rgba(255, 255, 255, 0.34)"
text: "#F7F3EC"
text-muted: "#B9B4AA"
accent: "#E9C46A"
accent-soft: "rgba(233, 196, 106, 0.22)"
success: "#78D7A5"
danger: "#FF7A7A"
white: "#FFFFFF"
black: "#000000"
typography:
body-md: { fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: 14px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
label-sm: { fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: 12px, fontWeight: 700, lineHeight: 1.25, letterSpacing: 0 }
title-lg: { fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: 18px, fontWeight: 700, lineHeight: 1.25, letterSpacing: 0 }
spacing:
xs: 6px
sm: 8px
md: 12px
lg: 16px
xl: 24px
rounded:
chip: 14px
control: 24px
sheet: 18px
full: 9999px
components:
icon-button:
size: 48px
radius: "{rounded.control}"
border: "1px solid {colors.border}"
selectedBorder: "1px solid {colors.accent}"
result-sheet:
topRadius: "{rounded.sheet}"
background: "{colors.background}"
borderTop: "1px solid {colors.border}"Overview
Shot Coach Camera is a full-screen Expo Router camera application. The visual system is intentionally dark, translucent, and control-dense so live camera content remains primary while coaching controls stay legible. The concrete token source is src/shared/theme/colors.ts, with component usage visible in src/shared/ui/icon-button.tsx, src/features/camera/screens/camera-screen.tsx, src/features/shot-coach/ui/camera-controls.tsx, and src/features/photo-editing/ui/edited-result-sheet.tsx.
Colors
Use background as the root app color behind the camera preview and result sheet. Use surface and surface-strong for translucent controls that sit on top of live camera content. accent is the selected-control color and should stay sparse; accent-soft is the selected icon-button fill. success and danger are reserved for save confirmation and capture/save failure states.
Typography
The app currently relies on React Native system typography. Keep control labels compact and bold, as in the result-sheet preview labels and error text. Use 18px bold only for sheet-level titles such as "Result"; do not use large marketing-style headings over the camera.
Layout
The camera screen is full-bleed. Top controls are absolutely positioned below the safe area, centered or horizontally scrollable with 14px side padding and 8px gaps. Bottom feedback uses a centered stack over the preview, followed by the capture bar. Result comparison uses a two-column row with a minimum height of 220px so original and edited previews stay balanced.
Elevation & Depth
Depth is produced through translucency, modal dimming, borders, and sheet placement rather than heavy shadows. The result modal uses a transparent overlay and a bottom sheet with top-only rounded corners. Keep camera controls close to the image plane; avoid card shadows that would make the live view feel secondary.
Shapes
Icon buttons are 48px circular controls with a 24px radius, one-pixel border, and state-specific opacity. Error chips use a 14px radius and compact padding. Bottom sheets use an 18px top radius. Preserve these radii so controls remain touch-safe and visually consistent.
Components
The shared IconButton is the normative button primitive. It sets accessibility role, label, selected and disabled state, fixed dimensions, border color, background fill, pressed opacity, and icon color. CameraControls composes this primitive into horizontal rows for template, shot type, pose guide, composition, and flash choices. EditedResultSheet reuses the same primitive for close, share, and save actions.
Do's and Don'ts
Do keep the camera feed as the primary visual surface. Do use accent only for selected controls and successful save state. Do place readable text on surface-strong when it overlays live imagery. Do keep all file references repo-relative.
Don't introduce light panels that compete with the preview. Don't use unbounded text blocks over the camera. Don't add new button styles when IconButton already covers the interaction. Don't publish local machine paths, simulator identifiers, or private build details in design documentation.