Design System

Evo

The living reference for the Evo visual system. All values are rendered directly from the design token source files.

Principles

Clean & Restrained

Generous whitespace, minimal UI chrome. Let content breathe.

Function-led Aspiration

The design should feel competent and premium, not flashy. Think Oura, not Noom.

Credible by Default

Typography, spacing, and color convey intelligence through craft — no gradients, no gimmicks.

Colors

Neutral, warm neutral palette. Restrained by design — Electric Red accent with neutral backgrounds.

Background

primary

#FBF8F5

secondary

#F5F1ED

inverse

#1A1A1A

Text

The quick brown fox

primary

#1A1A1A

The quick brown fox

secondary

#4A4A4A

The quick brown fox

tertiary

#8A8A8A

The quick brown fox

inverse

#FFFFFF

Border

default

#E8E3DC

strong

#8A8A8A

Accent

primary

#E63946

primaryHover

#CF2F3C

tint

#FDE8EA

Full Palette

Typography

Font family: Geist. Currently the Next.js default — final type selection should support both web and iOS.

Type Scale

xs
12px

The quick brown fox jumps over the lazy dog

sm
14px

The quick brown fox jumps over the lazy dog

base
16px

The quick brown fox jumps over the lazy dog

lg
18px

The quick brown fox jumps over the lazy dog

xl
20px

The quick brown fox jumps over the lazy dog

2xl
24px

The quick brown fox jumps over the lazy dog

3xl
30px

The quick brown fox jumps over the lazy dog

4xl
36px

The quick brown fox jumps over the lazy dog

Weights

normal
400

The quick brown fox jumps over the lazy dog

medium
500

The quick brown fox jumps over the lazy dog

semibold
600

The quick brown fox jumps over the lazy dog

bold
700

The quick brown fox jumps over the lazy dog

Font Families

Sans

Geist, -apple-system, system-ui, sans-serif

Aa Bb Cc 0123

Mono

Geist Mono, ui-monospace, monospace

Aa Bb Cc 0123

Spacing

4px base unit. Consistent padding scale used across all layouts.

0
0px
1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
10
40px
12
48px
16
64px
24
96px

Border Radius

Corner rounding scale from sharp to pill.

none

0px

sm

4px

md

8px

lg

12px

xl

16px

full

9999px

Layout

Prose Content

max-width: 768px

Tools & Dashboards

max-width: 1024px

Cross-Platform

The iOS app and website should feel like the same brand without being pixel-identical.

Shared

Color palette, typography feel, spacing rhythm, tone

Platform-native

Interaction patterns, navigation, system conventions. SwiftUI components, SF Symbols, dynamic type on iOS.

All token values on this page are rendered directly from shared/tokens/*.json. Edit the source files to update this page.