Brand & design

Mellow's look is calm, low-stimulation, and dark-first, chosen to be easy on the eyes for people managing cognitive and mental-health load. One muted teal-green accent, no gradients, no decorative motion.

Palette

Each swatch pair is light / dark. These map to the --color-fd-* CSS variables in src/app/global.css. HSL is the source of truth; hex is rounded for convenience.

Neutrals

Background

Page ground

#F6F8F7

#11171A

Foreground

Body text

#1F2629

#DBE2E2

Muted

Calm fills, callouts

#EDF1F0

#1D252A

Muted foreground

Secondary text

#5E6B70

#94A6A6

Card

Card surfaces (dark: #192024)

#F4F8F7

#192024

Border

Hairlines

#D5E0DE

#2E383C

Accent (teal-green)

Primary

The single accent. Links, buttons, active state.

#2A6F68

#7CCAC0

Primary foreground

Text on primary

#F7FCFB

#101A1F

Ring

Focus rings

#63B0A8

#4E9F94

Accent

Hover/selected chips

#E4EEEC

#232E33

HSL source: hsl(174 45% 30%) light, hsl(172 42% 64%) dark.

Doc section tints

Kept in the teal family so sections feel related rather than clashing.

Core docs

#2A6F68

#7CCAC0

References

#2E6B7A

#78BCCB

API

#2E7A5F

#6FC4A3

Typography

Family: Inter (via next/font/google), system sans-serif fallback.

Headings: semibold to bold, plain text. No emoji in headings.

Body: regular weight, generous line-height, text-fd-muted-foreground for secondary copy.

Code: monospace on --color-fd-muted.

Logo & assets

Icon: /logo.png — use on transparent or the app background, with a hairline border on light surfaces.

Social banner: /banner.png, 1200×630.

OG images: generated at /og/[...slug]/image.png — near-black ground (#0C0C0C), soft teal corner glow (rgba(45,140,130,0.35)), teal wordmark (rgb(125,211,196)).

Don't: add gradients, drop shadows, glows, or recolor the mark outside the teal family.

Voice & motion

Tone: gentle, plain, non-alarmist. Even crisis copy stays calm — information, not urgency styling.

Motion: none decorative. No hover-scale, no translate, no auto-playing animation. Honour prefers-reduced-motion.

Color use: one accent only. No red/amber/green status palettes — state is shown with the accent or muted tones.