Midnight · Design System · v1.0

The system
behind the calm.

Tokens, motion, and components for an AI-powered home security product that communicates like a 911 dispatcher — precise, calm, and trustworthy.

Fonts Manrope · Inter · Roboto
States Calm · Alert · Intrusion · Resolved
Token format CSS Variables · Tokens Studio JSON
01 · Color

Built for dark. Semantic by design.

Backgrounds
Base
--bg-base
#071327
Card
--bg-card
rgba(41,52,76,0.5)
Pill
--bg-pill
#000000
Text
Primary
--text-primary
#F2F2F7 · Gray 6
Secondary
--text-secondary
#AEAEB2 · Gray 2
Muted
--text-muted
#8E8E93 · Gray
Semantic
Live
--live-dot
#05DF72
Alert
--alert-primary
#FF0308
Cancel
--cancel-bg
#383F4A
Occupant Tracking
Family
--track-family
#72D6D8
Pet
--track-pet
#FFCC00
Intruder
--track-intruder
#FF0308
02 · Typography

Three fonts. One hierarchy.

Alert Headline text-style/alert-headline
Someone just came through the front door
Manrope 800
26px / 33px
Event Title text-style/event-title
Intrusion Detected
Manrope 800
16px / 19.5px
Event Subtitle text-style/event-subtitle
Just now · Front Door
Manrope 300
12px / 19.5px
Body / AI Narration text-style/body
I'm tracking movement in the living room. Your family is all accounted for.
Manrope 400
18px / 28px
Card Label text-style/card-label
Everyone is home except for Lance
Manrope 700
14px / 19.5px
CTA text-style/cta
Call 911 Now
Manrope 700
14px / 13.7px
Caps Label text-style/caps-label
AI Safety Guidance
Inter 400
12px · 1.2px tracking
Timer text-style/timer
00:03 secs ago
Inter 400
12px · alert color
Status Bar text-style/status-bar
6:25
Roboto 500
14px system only
03 · Motion

Orbs that tell you what's happening.

Calm state
Home is breathing normally.
4s slow inhale / exhale.
Communicates safety without drawing attention.
Intrusion detected
Someone just came through the front door.
1.4s aggressive pulse outward.
Rings decay in opacity — urgency without chaos.
Calling 911
Contacting 911. Auto-dial in progress.
1.0s fast filled rings expand outward.
Higher tempo signals active dispatch — not passive alert.
Police en route
Police en route.
2.2s steady sweep.
Blue signals authority in progress — slower tempo means help is coming, stay calm.
04 · Components

The pieces that build the product.

Badges
Live tracking
Intrusion active
Occupant Pills
AD
Amanda & Dylan Master BR
LK
Luke Bedroom
CTA Buttons
Alert Card
00:03 secs ago
Someone just came through the front door
I'm tracking movement in the living room. Your family is all accounted for.
05 · States

Four states. One escalation path.

Calm Home is breathing normally. No events. Slow green pulse.
Intrusion Unknown person detected. Red aggressive pulse. Immediate options surface.
Calling 911 Auto-dial in progress. Red fast-fill rings. Data sent to dispatch.
Police En Route Help is coming. Blue steady sweep. Instructions surface for family.
06 · Token Reference

Every value. Named and purposeful.

Token Value Swatch Usage
--bg-base#071327App background
--text-primary#F2F2F7Headlines, primary body
--text-secondary#AEAEB2Subheadings, AI narration
--text-muted#8E8E93Metadata, timestamps
--live-dot#05DF72Live tracking badge
--alert-primary#FF0308Intrusion, timer, threat
--cancel-bg#383F4ACancel / secondary CTA
--track-family#72D6D8Known occupant dots
--track-pet#FFCC00Pet dots on floor plan
--track-intruder#FF0308Unknown person on floor plan
--font-displayManrope—Headlines, CTAs, alerts
--font-bodyInter—Labels, data, floor plan
--font-systemRoboto—Status bar only