CAMDOM — Design System
Visual identity of the CAMDOM digital consent protection app. Muted teal palette, Skia-rendered ball metaphor, generator-based animations, haptic-first interaction.
CAMDOM — Design System
Overview
The visual language of the world's first digital condom. A dark, minimal, haptic-first interface built for BILLY BOY / Innocean Berlin. Muted teal palette, Skia-rendered ball metaphor, generator-based worklet animations.
Full technical documentation: camdom-design-system
Palette
| Token | Hex | Role |
|---|---|---|
| Primary | #132037 | Navy — text, borders, separators |
| Warning | #b2140c | Red — alarm, error, danger |
| Background | #9DB0B9 | Teal — default canvas, safe state |
| Alarm Background | #06101A | Near-black — consent violation |
Derived Colors
| Value | Usage |
|---|---|
#BCD4DF | Ball border (connected) |
#889AA2 | Ball border (disconnected) |
#D9D9D9 | Alarm mode text/icons |
Typography
- Primary: BasicSans (14 OTF variants, Thin through Black, with italics)
- Secondary: Space Mono Regular (monospace, version display)
- All text is UPPERCASE
- Size range: 10px (buttons) to 16px (menu titles)
- Ball text: Skia Paragraph, SemiBold, 11px default / 14px alarm
Layer System
| Layer | Z-Index | Component |
|---|---|---|
| Background | 0 | Canvas, orbs |
| Menu Bg | 1000 | Menu backdrop |
| Menu | 10001 | Full-screen overlay |
| Lateral Menu | 10002 | Right-edge strip (12px) |
Core Visual Element: The Ball
Skia-rendered circle with ImageShader textures (red-dot.png / black-dot.png), 22px blur, dual-layer pulse animation. Represents the protection state through color, size, and animation behavior.
- Disconnected: static black, small
- Scanning: black with scanning rings
- Synced: breathing 300-360px
- Alarm: red, aggressive 310-360px pulse on dark background
Animation Engine
Custom generator-based worklet system on Reanimated. Not declarative — imperative sequencing via JS generators running as worklets. Primitives: timing, wait, waitUntil, parallel, stagger.
Typical durations: 30-240ms for UI transitions, 1160-2500ms for ambient pulsing.
Sound Design
5 sound types via expo-av, pre-loaded, server-broadcast synchronized:
open— scanning startedpair— protection activeunpair— protection endedalarm— consent violated (loops, full volume, cannot be silenced by one party)ping— proximity sensor (reserved)
Plays in silent mode. Volume forced to maximum. Alarm loops until all parties consent to stop.
Interaction Model
- Gesture-first: swipe to connect, hold to disconnect
- Haptic language: Soft (gesture), Heavy (buttons), Success/Error (resolution/danger)
- Consensus mechanism: alarm stops only when ALL parties hold stop simultaneously
- No navigation bars: 12px lateral strip replaces traditional nav
What to absorb
- The muted teal (#9DB0B9) as identity — not the typical dark mode
- The ball metaphor as the entire interaction model
- Consensus as a design principle (not just a feature)
- Sound as a first-class UI element, not decoration
- The generator animation pattern as an alternative to declarative animation chains
What NOT to absorb
- Generic mobile UI patterns (tab bars, navigation stacks)
- Decorative animations that don't communicate state
- Sound as optional/secondary — in CAMDOM, sound IS the alarm