Design system · v0.2

Braain — visual language

01 · Color

Ink on paper. Forest on top.

Two layers: a static ink palette that never re-tints, and a forest ramp (50–950) overridable per focused space.

Paper + ink

canvas / paper

#F5EFE3 · Page background

surface

#FFFFFF · Cards

ink

#25211C · Body text

ink-strong

#1D1A16 · Headings

ink-muted

#6F675E · Eyebrows, meta

ink-soft

#8A8176 · Placeholders

border-paper

#E7E0D6 · Dividers

accent · moss

#5B6F52 · Accent word, link

moss

#D8E2D0 · Plinths

highlight

#FFF2BF · Notebook marker

Forest ramp (per-space overridable)

forest-50 · paper

#F5EFE3

forest-100

#E2F1EB

forest-200

#C5E3D7

forest-300

#A8D5C3

forest-400

#8BC7AF

forest-500

#6EB99B

forest-600

#51AB87

forest-700

#349D73

forest-800 · brand

#1B4332

forest-900

#143125

forest-950

#0D2018

02 · Type

Fraunces for display. Inter for everything else.

Display + h1 + h2 are Fraunces SemiBold. h3, body, captions all Inter. One accent treatment: a moss colour swap, one word per viewport.

display Organise Everyone

h1 Share the load.

h2 Speak. Don't structure.

h3 Voice-first capture

body-lg The last organisation app that your household will ever need.

body Default paragraph copy. Inter Regular at 15px.

caption © Braain · hello@braain.app

03 · Spacing

Air earns trust.

Base unit 4px. Compose in 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.

4px · hairline

8px · inline gap

12px · button gap

16px · card gap

24px · gutter

32px · card padding

48px · block separation

64px · section (mobile)

96px · section (desktop)

04 · Components

Two buttons. One card. That's most of it.

Buttons

Read the changelog

Input

Feature card

Share the load.

Invite your partner, your kids, your team. Everyone sees what Braain just organised.

Accent emphasis

Organise Everyone

One accent per viewport. No exceptions.

05 · Motion

Calm, with a wink.

Motion is how the brand breathes. Mostly still, always smooth — then one small, earned moment of delight.

Calm

Nothing darts. Easing eases both ends; nothing arrives before you're ready for it.

Thoughtful

Every move means something — it shows what just changed. Motion is feedback, never decoration.

Grounded

Things settle. Weight over bounce: a soft landing, then stillness.

The mark is alive

Idle, the brain breathes. On a beat its squiggles gather inward and become a face — two eyes, a nose, a smile — then it blinks, or winks, and settles back to thinking. Notion-grade delight: small, earned, gone before it outstays its welcome.

The squiggles are forest-800 — green ink on the paper canvas. That contrast is the logo. The calm comes from the easing, never from lightening the colour.

Tokens

ease · standard cubic-bezier(.4, 0, .2, 1)

Almost everything

ease · settle cubic-bezier(.34, 1.1, .64, 1)

Joyful beats only — a hair of overshoot

quick 160ms

Taps, toggles

standard 320ms

Cards, reveals

considered 560ms

The logo waking up

06 · Don'ts

What we won't do.

No gradients on type. No drop shadows on type.
No more than one accent element per viewport.
No pure black and no pure white as a page background.
No stock photography. No emoji in product copy.
No marketing intensifiers — "revolutionary", "magical", "powerful". Show, don't claim.
No stacking three buttons in a row. The third becomes a text link.
Don't colour paragraph text in a forest shade — that ramp is for surfaces and chrome.
No bounce on chrome. No motion without a reason. One delight per moment.

Companion spec: DESIGN.md