Ebb Design System

ebb

An anti-calendar that works around your real life. This is its design system — mark, color, type, and the components built so far.

v1 · October 2026

Mark

01

Static mark on the left, the loading state on the right — each layer bobs 7px, staggered 0.22s, 2.6s per cycle. This is the only motion the mark gets; it doesn't lean or rotate anywhere in the product.

Shape3 isometric rhombi, 2:1 ratio
Stroke5px, round joins, no fill
Layer spacing28px vertical
Minimum size24px

Color

02

Night — the default surface

Page#000000
Surface#121419
Foreground#eef1f5
Foreground, dim#8b94a3
Accent#9fb4ff

Day — the inverted onboarding screens

Background / CTA#e9efec
Surface#d7ded9
Foreground#10140f
Foreground, dim#5b6058

Accent only ever shows at 14–22% opacity as a tint behind a chip or tag — it never fills a shape solid.

Type

03
A quieter frequency.
Hanken Grotesk 400 · 50px · headlines only
Connect your calendar.
Hanken Grotesk 500 · 34px · step titles
We ask in the moment because it's truer than guessing ahead of time.
IBM Plex Sans 300 · 15px · body copy
Continue
IBM Plex Sans 600 · 15px · buttons
Tuesday · 9:40 AM
IBM Plex Mono 400 · 11–12px · meta, timestamps, captions

Mono is for structure — timestamps, state labels, progress — never for anything a person is meant to read as a sentence.

Components

04
CTA — primary
CTA — secondary (row)
Chip — connected state
Your calendarConnected
Tag — protected time
Protected
Progress — step indicator
Slider — mood / energy
Energy40%
LowHigh
Energy strip
Low energyLighter day — we held more open space than usual.
Event row
10:30
Protected Read 10:30 – 11:15 AM

Voice

05
Plain, short sentences.

One idea per screen. No exclamation points, no hype.

Lowercase "ebb."

Never capitalized as a wordmark, in copy, or in the app name.

Say why, briefly.

When something unusual is being asked, one short clause explains it — then stop.

Mono carries structure, not voice.

Timestamps and state labels are mono. Anything a person is meant to feel spoken to by is set in Plex Sans or Hanken Grotesk.

WelcomeEbb is an anti-calendar. It works around your real life, and helps guide you back offline.
Energy check-inWe ask in the moment because it's truer than guessing ahead of time.
Loading stateJust a moment — we're getting everything ready.