Brand Guidelines
01 — Overview
Presence is a focus and accountability app that combines personal goal tracking with community-driven focus sessions.
Be here now
You're not focusing alone. Thousands are with you.
Real-time community engagement with live focus counts.
02 — Personality
These traits define how Presence looks, feels, and communicates.
03 — Colors
A dark-first palette built around our signature teal accent. Presence is dark mode only.
Background
#0D1117
--background
Background Light
#161B22
--background-light
Accent
#4ECDC4
--accent
Accent Light
#5EEEE0
--accent-light
Accent Dark
#3DBDB5
--accent-dark
Orange
#FF6B35
--accent-orange
Pink
#FF3EA5
--accent-pink
Purple
#7B68EE
--accent-purple
Green
#95E1D3
--accent-green
Primary
#FFFFFF
--text-primary
Secondary
white / 70%
--text-secondary
Muted
white / 50%
--text-muted
Hint
white / 30%
--text-hint
04 — Surfaces & Shadows
Subtle glass effects and shadows create depth without competing with content.
Glass
bg: white 2%
border: white 5%
Glass Hover
bg: white 5%
border: accent 30%
Elevated
bg: background-light
shadow: shadow-lg
Small
--shadow-sm
Medium
--shadow-md
Large
--shadow-lg
Glow
--shadow-glow
Glow Strong
--shadow-glow-strong
05 — Typography
System fonts for performance and native feel. SF Pro on Apple, system defaults elsewhere.
06 — Spacing & Radius
A 4px base unit creates consistent rhythm throughout the interface.
4
--space-4
8
--space-8
12
--space-12
16
--space-16
20
--space-20
24
--space-24
32
--space-32
40
--space-40
48
--space-48
64
--space-64
Small
8px
Medium
12px
Large
16px
XL
20px
2XL
24px
Full
9999px
07 — Logo
Concentric circles representing you at the center, with community rippling outward.
Clear Space
Minimum clear space around logo equals the height of the core dot × 2.
Minimum Size
Mark only: 24px. With wordmark: 120px width.
Animation
Core pulses at 3s intervals. Keep animations calm and breathing—never anxious.
Don'ts
Don't change colors. Don't stretch. Don't add extra effects. Don't place on busy backgrounds.
08 — Icons
SF Symbols for iOS. Stroke weight 2px. Emojis for room identifiers and feature highlights.
Streaks
flame.fill
Friends
person.2.fill
Quick
bolt.fill
Community
globe
Focus
target
Alerts
bell.fill
09 — Rooms
Each focus room has a signature color for quick recognition.
Morning Routine
#FF6B35
Deep Work
#4ECDC4
Creative Time
#FF3EA5
Movement
#95E1D3
Wind Down
#7B68EE
Learning
#4ECDC4
10 — Components
Core building blocks that maintain brand consistency.
Buttons
Input
Card
Morning Routine
Badges & Toggles
11 — States
Consistent patterns for loading, empty, and error states.
Loading
Accent-colored spinner, 1s rotation
Empty State
Emoji + helpful message + action
Error
Clear explanation + retry option
12 — Motion
Calm, breathing animations that reinforce focus—never anxious or jarring.
Breathe
8s ease-in-out
Pulse
3s ease-in-out
Glow
3s ease-in-out
Float
4s ease-in-out
13 — Voice
Direct, warm, confident. Write like a friend, not a brand.
"Focus with thousands"
"Day 14 hits different than day 1"
"Your friend's 23-day streak staring at you works"
"3am can't sleep? 847 others are up too"
"Ready to show up?"
"Unlock your full potential"
"Transform your productivity journey"
"Mindfully cultivate presence"
"Leverage the power of community"
"Sign Up Now!"
14 — Code
Copy-paste CSS variables and SwiftUI colors.
/* Core colors */ --background: #0D1117; --background-light: #161B22; --accent: #4ECDC4; --text-primary: #FFFFFF; --text-muted: rgba(255,255,255,0.5); /* Glass surface */ --glass-bg: rgba(255,255,255,0.02); --glass-border: rgba(255,255,255,0.05); /* Shadows */ --shadow-glow: 0 0 30px rgba(78,205,196,0.4);
// Colors Color.presenceBackground // #0D1117 Color.presenceAccent // #4ECDC4 Color.presenceTextPrimary // white Color.presenceTextMuted // white 50% // Fonts .font(.presenceHero) // 72pt ultralight .font(.presenceCounterLarge) // 48pt monospaced // Animations .animation(PresenceAnimation.breathing) .breathingAnimation() .pulseAnimation()