Official Visual Identity & Design System

STEP1ØAPP

Stay honest. Stay connected. Stay clean.

Step 10 is the modern recovery companion designed to turn honest daily inventories into real-time guardian connection, sustained peace of mind, and proactive relapse prevention.

01 — Core Messaging

Brand Voice & Taglines

Our language is compassionate, grounded, and concise. We avoid preachiness and clinical sterility; we speak directly to recovery as an active, daily partnership between self, guardians, and fellowship.

Primary Brand Slogan

“Stay honest. Stay connected. Stay clean.”

Personal Inventory
Guardian Connection
Long-Term Sobriety
Individuals & App Store Subtitle

“2 minutes to daily peace.”

“Accountability in your pocket.”

Highlights low friction, emotional relief, and instantaneous daily habit formation.

Sober Living, Coaches & Safehouses

“Real-time accountability for real-world reintegration.”

Emphasizes compliance, seamless multi-client caseload monitoring, and reliable oversight.

Feature Callout & Analytics

“Spot the drift before the shift.”

Positions trending emotion and crisis monitoring as proactive insight rather than punitive tracking.

Community Ethos & Fellowship

“The opposite of addiction is connection.”

The core psychological and spiritual anchor: isolation breeds relapse, honest connection sustains recovery.

Live Cycling Slogan Showcase
“Stay honest. Stay connected. Stay clean.”
03 — Scale & Platforms

Sizes & Device Contexts

The icon is engineered to remain distinct and crisp from 16px micro-favicons up to 512px hero displays. Here is the official scale and authentic platform mockups.

16px
24px
32px
48px
64px
80px
128px
iOS & Android Mobile Home Screen
Step 10
Lock Screen Push Notification
Step 10
2m ago
Spot the drift before the shift

Take 2 minutes for your evening review. Stay honest, stay connected.

Web Portal & Tab Favicon
Step 10 | Daily Peace
04 — Type System

Typography Architecture

Typography balances warmth and modern precision. Fredoka and Mitr define our distinctive display lockup with the diagonal slashed zero (), while Outfit delivers balanced clarity for mobile interfaces and marketing copy.

Fredoka & Mitr Primary Display Wordmark — Heavyweight & Slashed 1Ø
STEP1ØAPP
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 · Slashed Zero Character: Ø
Regular 400 Step 10
Medium 500 Step 10
Semi Bold 600 Step 10
Bold 700 Step 10
Outfit Taglines, UI Body, Navigation & Labels
Stay honest. Stay connected. Stay clean.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 · ! @ # $ % & * ( ) _ +
Light 300 Mindful Recovery
Regular 400 Mindful Recovery
Medium 500 Mindful Recovery
SemiBold 600 Mindful Recovery
Bold 700 Mindful Recovery

Fredoka (Semi Bold · Wordmark Display)

Spot the drift before the shift

Outfit (Medium · Tagline & Body UI)

Spot the drift before the shift

05 — Chromatic Architecture

Brand Color Tokens

Our chromatic identity uses high-contrast, restorative tones. Click on any color swatch below to copy its HEX value immediately to your clipboard.

Click to Copy

Fresh Mint

Primary Accent & Brand Heart

#5EAC8F 94, 172, 143
Click to Copy

Midnight Indigo

Deep Canvas / Dark UI Base

#161125 22, 17, 37
Click to Copy

Muted Slate

Speech Bubble & Borders

#4B5A71 75, 90, 113
Click to Copy

Sky Blue

Heart Base & Serenity Accent

#70C1EA 112, 193, 234
Click to Copy

Warm Cream

Upper Heart Lobes & Accents

#F3EFDB 243, 239, 219
Click to Copy

Warm Sand

Wordmark & Human Warmth

#E3BD96 227, 189, 150
Click to Copy

Crisp Off-White

High Contrast Typography

#FDFDFD 253, 253, 253

Runtime Theme Token Mapping (ThemeVarsProvider.tsx)

Token ID Role / Semantic Usage Dark Mode (#161125) Light Mode (#F7F5F0)
primary Main action buttons, active highlights #5EAC8F #429377
secondary Sub-navigation, secondary buttons #8A9A86 #5C6E61
bg App body canvas background #161125 #F7F5F0
card Elevated cards, sheet containers #1E1833 #FFFFFF
border Card outlines and group dividers #4B5A71 #D8D2C4
accentSky Feature metrics, streak badges #70C1EA #2E7D9E
accentPeach Wordmark, warm affirmations #E3BD96 #BD7A36
06 — Branded Loader

The Pulsing Heart Loader

The pulsing heart is the sole official animated loader across Step 10 applications. Modeled directly on restorative breathing cycles, its gentle outward expansion creates an atmosphere of presence, calm reassurance, and emotional safety. Generic loading wheels or dual-ring spinners are strictly prohibited. Native platform list-refresh indicators (e.g. pull-to-refresh) remain default OS controls and require no custom styling.

Exclusivity Mandate: The pulsing heart loader is the only custom loading animation permitted in Step 10. Do not implement spinning rings, bars, or rotating dots. Standard list pull-to-refresh interactions utilize native system indicators (iOS UIActivityIndicator / Android SwipeRefresh) and remain unstyled.

Standard Sizing System

80px — Splash & Full Screen

Initial launch screen, session restoration, full-screen transitions.

size={80}

48px — Card & Modal Loader

Journal entry hydration, audio meditation buffering, dialog states.

size={48}

24px — Inline & Action Loader

Inside buttons during save/submit, header sync, status pills.

size={24}

Step 10 Color Set Adaptations

While Fresh Mint is the primary default, the pulsing heart loader can be deployed in each of Step 10's core brand colors to harmoniously match surrounding UI contexts.

Fresh Mint #5EAC8F
Muted Slate #4B5A71
Sky Blue #70C1EA
Warm Peach #E3BD96
Warm Cream #F3EFDB
Midnight Indigo #9B8BA8
Crisp White #FFFFFF
Fresh Mint (48px)
Size:
Color:
07 — Usage Rules

Brand Integrity: Do's & Don'ts

Follow these foundational rules to ensure the Step 10 visual trademark remains pristine, authoritative, and recognizable across all physical and digital applications.

Brand Best Practices
  • Always preserve the 1X clear space surrounding the logo mark (equal to the height of the heart center).
  • Render the wordmark in uppercase STEP1ØAPP with the signature diagonal slashed zero.
  • Pair the icon mark exclusively with Fredoka for headings and Outfit for interface typography.
  • Use high-contrast backgrounds (#161125 Dark Indigo or #F7F5F0 Warm Cream) for maximum visual legibility.
  • Use the monochrome cutout variant whenever printing in single-color or engraving merchandise.
  • Use the Pulsing Heart Loader exclusively for animated branded loading states across any of Step 10's 7 official brand colors.
Strictly Prohibited
  • Do not stretch, distort, skew, or rotate the icon mark or horizontal lockup.
  • Do not alter the relative order or hex values of the tiered heart layers (Cream top, Mint mid, Sky bottom).
  • Do not add heavy raster drop shadows, gradients, or outer glows to the vector paths.
  • Do not replace the primary slogan with unapproved taglines or clinical medical statements.
  • Do not render the mark below 16px digital or 6mm print to avoid loss of path definition.
  • Do not use generic spinners, rotating wheels, dual rings, or custom progress bars (list pull-to-refresh remains default OS native).
08 — Production Code

Vector Assets & Embed Codes

Copy raw SVG code or download vector sources directly for integration into web, iOS, Android, and marketing collateral.


            
Copied to clipboard!