SafePass

Design System — v1.0 · Color tokens, type scale, component library, and motion principles for the SafePass mobile platform.

Brockstar Creative LLC Platform: iOS & Android
Status: In Progress
Version: 1.0 draft
01

Color Tokens

Semantic naming · Eight primary tokens
Neutral — Background & Surface
#0A0E17 Void
#111827 Obsidian
#1C2B3A Surface
#4A6572 Muted
Semantic — Status & Action
#00D4FF Signal
#3DFF9A Safe
#F5A623 Caution
#FF4D6D Alert
02

Typography

Space Grotesk · Inter · JetBrains Mono
Space Grotesk
700 · Display
28px / –0.02em
SafePass
Space Grotesk
600 · Heading
20px / –0.01em
Civil Unrest Index — Medellín
Space Grotesk
500 · Subsection
14px / signal
Nomad Report · Verified Source
Inter
400 · Body
14px / 1.6 leading
Political stability is elevated. Cross-border travel advisories were issued on 14 Mar. Nomad-verified reports from the past 72h confirm limited disruption to central co-working districts.
JetBrains Mono
500 · Data / Score
12px / safe
SAFETY · 7.4 / 10 · LOW RISK · NOMAD VERIFIED
JetBrains Mono
400 · Micro Label
10px / muted
NEWS-VERIFIED · SOURCE TAG · LAST UPDATED 2H AGO
03

Status Badges

Semantic color · always accompanied by text label
SAFE CAUTION ALERT LIVE DATA

NEVER use color alone — every badge includes a text label and dot indicator for accessibility.

04

Buttons

Three variants · space-grotesk 600 · 6px radius
View Report
Primary · Signal fill
Filter
Ghost · Signal outline
Active Alert
Danger · Alert tint
05

Risk Indicator Component

Composite bar chart · score encoded in fill width + badge
Civil Unrest HIGH · 78
Political Stability MED · 45
Nomad Safety LOW · 22

Risk score (0–100) encodes severity in both fill width and badge color. Threshold values: Low 0–33 · Medium 34–66 · High 67–100

06

Iconography

Tabler Outline · 24px · Signal (#00D4FF)
map
safety
alert
cowork
health
filter
profile
alerts
access
family
news
share

All icons sourced from Tabler Outline v3 · 2px stroke · never filled · always 24×24dp at 1× density

07

Motion Principles

Four rules · purposeful · never decorative
01 Heat map zones pulse with a slow 3s breathing glow — amplitude reflects risk intensity. High-risk zones glow at 80% amplitude; low-risk at 20%.
02 Data reveals use a staggered fade-up at 80ms intervals — never simultaneous. List items and score components enter sequentially to guide visual attention.
03 Alert state transitions: 200ms ease-out scale + color shift from Caution (#F5A623) → Alert (#FF4D6D). The shift is always perceptible and always paired with a haptic signal on native devices.
04 Map pan/zoom uses spring physics — 0.8 damping ratio, mimicking native map feel. Risk overlays fade in at 150ms after pan settles to avoid cognitive overload during motion.
08

Hi-Fidelity Screens

Three hero screens — heat map · location detail · onboarding
9:41
Search any city or region...
6.2340° N · 75.5740° W
Medellín · HIGH Bogotá · MED
UNREST
POLITICAL
COWORK
HEALTH
Medellín, Colombia
UPDATED 14 MIN AGO · 38 NOMAD REPORTS
HIGH RISK
HIGH
CAUTION
SAFE
Civil Unrest 78 / 100
Political Stability 45 / 100
Nomad Safety Index 61 / 100
Active alert: General strike reported in El Centro district. Avoid main transit corridors. Source: Reuters Colombia, 3 local nomad reports.
MAP
SAFETY
SPACES
ALERTS
PROFILE

Heat Map Screen — the hero screen. Pulsing risk zone rings with amplitude tied to intensity, bottom sheet with live nomad count and source attribution, filter chips for layer switching, and a real active alert with cited sources.

9:41
Lisbon, Portugal
LIVE · UPDATED 6 MIN AGO
Viewing as
SOLO
FAMILY
ACCESSIBILITY
64
SCORE
FAMILY SAFETY RATING
Moderate — Use Caution
CAUTION
Risk Breakdown
Child Safety Index 72 / 100
Civil Unrest 42 / 100
Political Stability 81 / 100
Pediatric Healthcare 78 / 100
Infrastructure
Co-working
24 verified spaces
FAMILY OK
Healthcare
6 with pediatric
EN AVAILABLE
Schools
3 intl. programs
ENGLISH
Nomad Community
412 active nomads
HIGH DENSITY
Ground Reports · Nomad Verified
Verified Nomad · Family Traveler
2 DAYS AGO · BAIXA DISTRICT
SAFE
Alfama and Belém are genuinely great with kids — wide sidewalks, lots of green space. Trams are packed though, watch bags and keep little ones close on 28E.
FAMILY TRANSIT
Verified Nomad · Solo Female
5 DAYS AGO · PRÍNCIPE REAL
CAUTION
Generally safe but pickpocketing in Rossio is still very active. Recommend money belt. Nighttime in Bairro Alto can get rowdy — not unsafe but chaotic.
PICKPOCKET NIGHTLIFE
MAP
SAFETY
SPACES
ALERTS
PROFILE

Location Detail Screen — persona filter at the top (Family mode active), circular score ring, broken-out risk dimensions, 4-up infrastructure grid, and scrollable nomad ground reports with district-level specificity.

9:41
SafePass
STEP 2 OF 4 · YOUR PROFILE
How do you travel?
Your profile filters every safety score, infrastructure rating, and ground report to match your actual situation — not a generic traveler.
Solo Nomad
I travel alone and make decisions independently
Family Traveler
Traveling with children — need child safety and school data
Accessibility Needs
Require mobility, sensory, or medical accessibility data
First-Time Nomad
New to long-term travel — want guided, plain-language safety info
You can change this anytime. Your profile shapes how data is weighted and displayed — it doesn't hide any information from you.

Onboarding Screen — the profile selector that powers the entire personalization layer, with clear card states (active/inactive) and a micro-note reinforcing user control and data transparency.