Color

Settld's palette is warm cream, not cold white. Every surface has a hint of the afternoon sun, every shadow is a warm brown — never gray. The accents are surgical: teal for money moving, coral for danger, butter for joy. One accent per moment.

Surface palette

Surfaces stack from canvas outward. Canvas is the page background, paper is elevated (cards, modals). The warm and deep steps create a layering hierarchy — like actual paper on a table.

Paper #FBF8F0
--s-paper

Cards, modals, elevated surfaces

Canvas #F6F1E6
--s-canvas

Page background

Warm #F1E9D5
--s-warm

Hover fills, inset backgrounds

Deep #E8DEC5
--s-deep

Insets, pressed states

Ink scale

Ink is never pure black. The primary ink (#171513) is a deep warm brown — readable, authoritative, but not harsh. Step down to ink-body for body copy, ink-mute for metadata, ink-line for borders and rules.

Ink #171513
--ink

Headlines, primary text

Ink body #4A443D
--ink-body

Body copy, descriptions

Ink mute #8A8276
--ink-mute

Meta, placeholders, captions

Ink line #DDD2B8
--ink-line

Borders, dividers, rules

Accents

Three accents. Each has a job. Teal is the primary action color — settle, confirm, success. Coral is surgical emphasis and error states. Butter is celebration and joy. Never mix more than one accent in the same visual context.

Teal

Teal #0E7C66
--teal

CTAs, settle action, success

Teal deep #0A5F4F
--teal-deep

Hover/pressed states

Teal pale #D6EAE2
--teal-pale

Background tints, active nav

Wordmark teal #2A9D8F
--wm-teal

Logo only — lighter, don't use in UI

Coral

Coral #E76F51
--coral

Errors, destructive actions, emphasis

Coral pale #FADED4
--coral-pale

Error tint backgrounds

Butter

Butter #F4C94E
--butter

Confetti, celebration, highlights on dark

Butter dark #D4940A
--av-butter

Warning, avatar ring, approaching cap

Dark mode palette

Dark mode in Settld is warm brown — never pure black. The canvas is #1E1A16, a deep toasty brown. Pure black (#000000) would shatter the product's warmth. Elevated dark surfaces step up to #2A2521, borders to #3D3630. Text on dark is the light paper color, stepped down for hierarchy.

Dark canvas #1E1A16
--dark-canvas

Page background — warm brown

Dark elevated #2A2521
--dark-elevated

Cards, sheets on dark

Dark border #3D3630
--dark-border

Borders, dividers

Dark text #FBF8F0
--dark-text

Primary text on dark

Dark text 2 rgba(251,248,240,0.70)
--dark-text-2

Body text on dark

Dark text mute rgba(251,248,240,0.45)
--dark-text-mute

Labels, captions

Semantic colors

Semantic colors map intention to color. Success reuses teal — it's the same feeling as "settled." Warning is a desaturated butter. Error is coral. Info is the lighter wordmark teal. Each has a pale background tint for chips, banners, and toast backgrounds.

Success — --success / --success-bg

Settled, confirmed, green states. #0E7C66 / #D6EAE2

Warning — --warning / --warning-bg

Approaching cap, pending, unresolved. #D4940A / #FAF0D4

Error — --error / --error-bg

Destructive actions, overdue, failed. #E76F51 / #FADED4

Info — --info / --info-bg

Tips, nudges, informational context. #2A9D8F / #DFF0EC

Glass

Glass is for floating nav bars, the sticky settle CTA, and overlays on complex backgrounds. It's a semi-transparent paper — not a frosted dark glass like iOS. On cream backgrounds, it blends. On images or dark surfaces, it gives contrast without hiding what's behind.

Glass bg rgba(251,248,240,0.72)
--glass-bg

Nav bars, floating surfaces

Glass border rgba(255,255,255,0.55)
--glass-border

Edge highlight on glass surfaces

Avatar palette

Avatars in Settld get a ring color from this palette. "You" is always ink — it's distinct at a glance. The other four rotate through coral, teal, butter-dark, and mute. The palette is designed so no two friends in a typical group look the same.

--av-you

--av-coral

--av-teal

--av-butter

--av-mute

Contrast ratios

All text pairings in Settld are checked against WCAG 2.1. Body text (ink-body on canvas) comfortably passes AA. Ink-mute on canvas passes AA for large text only — it's used exclusively for metadata and captions at small sizes, so it's intentional. Disabled states fall below AA, which is acceptable since they're non-interactive.

Foreground	Background	Sample	Ratio	WCAG
`--ink` #171513	`--s-paper` #FBF8F0	Settld	12.5:1	AAA
`--ink` #171513	`--s-canvas` #F6F1E6	Settld	11.6:1	AAA
`--ink-body` #4A443D	`--s-canvas` #F6F1E6	Settld	7.1:1	AAA
`--ink-mute` #8A8276	`--s-canvas` #F6F1E6	Settld	3.2:1	Fail (AA large only)
`--s-paper` #FBF8F0	`--ink` #171513	Settld	12.5:1	AAA
`--s-paper` #FBF8F0	`--teal` #0E7C66	Settle up	4.8:1	AA
`--s-paper` #FBF8F0	`--coral` #E76F51	Remove	3.1:1	Fail (AA large only)
`--dark-text` #FBF8F0	`--dark-canvas` #1E1A16	Settld	12.1:1	AAA
`--teal` #0E7C66	`--teal-pale` #D6EAE2	Active	4.5:1	AA
`--coral` #E76F51	`--coral-pale` #FADED4	Error	2.9:1	Fail (decorative use only)

Note on coral Coral on its pale background falls below WCAG AA. This pairing is only used decoratively (error tint chips, background washes). Actual error text always uses --coral on --s-paper or --s-canvas, where it passes AA for large text. For small error messages, use --ink or --ink-body with the pale background — not coral.

Shadows

All shadows use a warm tint — rgba(23,21,19,…). This is the ink color at low opacity. Never use gray or neutral-black shadows — they flatten and cool the palette. The warm tint makes cards look like they're sitting on the actual cream surface beneath them.

--shadow-sm — Hairline edge, used on inputs and dividers

--shadow-md — Hover, menus, popovers

--shadow-lg — Cards, panels

--shadow-float — Modals, sticky settle CTA

Usage

Do Use warm-tinted shadows (rgba(23,21,19,…)) — they sit in the palette like the surface actually has depth. Use teal surgically — the settle button, active states, confirmed indicators.

Don't Don't use gray shadows (rgba(0,0,0,…)) — they break the warm palette the moment they appear. Don't use teal as a general-purpose theme color or decorative accent.

Do Layer surfaces from canvas → warm → deep → paper. Stack darker insets inside lighter containers. The hierarchy should feel like nested sheets of paper.

Don't Don't put paper (#FBF8F0) as a page background — it reads too light and loses the cream warmth. Canvas (#F6F1E6) is the background, paper is elevated.

Do Use --dark-canvas (#1E1A16) for dark mode. It's a warm brown that keeps the product identity intact at night.

Don't Don't use pure black (#000000 or #111111) in dark mode. It strips the warmth and makes the product look generic. Even #1A1A1A is too cool.

Code

CSS custom properties

/* Surface */
--s-paper:  #FBF8F0;
--s-canvas: #F6F1E6;
--s-warm:   #F1E9D5;
--s-deep:   #E8DEC5;

/* Ink */
--ink:      #171513;
--ink-body: #4A443D;
--ink-mute: #8A8276;
--ink-line: #DDD2B8;

/* Accent */
--teal:      #0E7C66;
--teal-deep: #0A5F4F;
--teal-pale: #D6EAE2;
--coral:      #E76F51;
--coral-pale: #FADED4;
--butter:     #F4C94E;