The design system of a camera app

Most productivity app design assumes you're sitting at a desk, phone resting in one hand or propped up, with plenty of time to read and interact. The interface can be information-dense, the targets can be reasonably small, the typography can be moderate.

A camera app has completely different constraints. You're standing. You might be in a hurry. The lighting might be bad. You're holding the phone up. You're looking at a viewfinder, not at the UI. And the key interaction — tap to capture — has to be impossible to miss.

Here's how those constraints shaped BoardSnap's design system.

### Constraint 1: Thumb-reach primacy

When you hold a phone up to photograph something, your grip changes. You're holding it with one hand or with a two-hand grip optimized for stability, not for tapping. The natural thumb reach in this position is different from the reach when the phone is at desk level.

Every critical action in BoardSnap's capture interface — the shutter button, the flash toggle, the project selector — is in the bottom third of the screen, centered horizontally. Nothing critical requires reaching to the top.

This sounds obvious until you look at how many iOS apps put important controls at the top of the screen because that's where they are in the standard navigation pattern. For a camera app, that's the wrong hierarchy.

### Constraint 2: High contrast, always

Camera interfaces are used in variable lighting: sunny outdoor rooms with glare, dim basement conference rooms, fluorescent-lit offices, presentation rooms with the lights down. The UI has to be readable in all of these.

BoardSnap uses a dark interface in the camera mode — dark background, white/light UI elements — because dark backgrounds provide better contrast against both bright and dark environments than light backgrounds do. A white UI in a bright room is invisible. A dark UI in a dark room is visible.

This also means we avoid mid-tone grays for anything important. The contrast ratio between our primary text and background in dark mode is 15:1, well above WCAG AA requirements. Accessibility and readability under variable lighting are aligned.

### Constraint 3: Glanceable feedback

The VisionKit viewfinder provides live feedback: a yellow quad appears when a whiteboard is detected. The quad needs to be interpretable at a glance — ideally, a glance away from the subject you're framing.

We added a secondary feedback element: a subtle vibration (haptic) when detection confidence goes high, plus a visual pulse on the shutter button. Users can feel when the app is confident about the detection, not just see it. This allows them to keep their eyes on the board rather than on the phone screen.

### Constraint 4: State clarity in low light

After the snap, the app transitions through states: captured, uploading, analyzing, complete. Each state needs to be immediately recognizable without reading text — icons and colors do the heavy lifting.

• Captured: warm amber ring around the board thumbnail
• Uploading: animated stroke around the ring
• Analyzing: pulsing blue center dot
• Complete: green checkmark, full card appears

The color and animation language is distinct enough that users can recognize the state at a glance in poor lighting. We tested this literally in a dim room with several users and confirmed the states were distinguishable before we shipped.

### The transition to the summary view

When analysis completes, the transition from camera mode to summary view has to feel natural — you're moving from physical world back to digital world. We use a card-expansion transition: the board thumbnail expands from the camera grid into the full summary card.

This transition preserves spatial continuity. The card was in the lower right of the camera view; it expands to fill the screen. There's no jump, no replacement animation. The object you just created becomes the object you're reading.

### What the full design system covers

The BoardSnap design system has two distinct modes:

Camera mode: dark, high-contrast, thumb-first, haptic-led, glanceable Content mode (summary + action items): lighter, information-dense, reading-optimized, navigation-primary

The transition between them is the moment the analysis completes. Two different design contexts, one continuous experience.