Brand standards

A design system for exceptional taste.

One accent, warm neutrals and two typefaces. Every page of the House is built from the tokens below, which are defined in src/styles/tokens.css.

Colour

Amber

Built around #E69B00. Use 500 for fills, rules and icons, 700 for accent text on light surfaces, and 400 on dark.

Amber 50 --amber-50

Amber 100 --amber-100

Amber 200 --amber-200

Amber 300 --amber-300

Amber 400 --amber-400

Amber 500 --amber-500

Amber 600 --amber-600

Amber 700 --amber-700

Amber 800 --amber-800

Amber 900 --amber-900

Stone

Warm neutrals for surfaces and text. Never pure grey; nothing here is ordinary.

Stone 0 --stone-0

Stone 25 --stone-25

Stone 50 --stone-50

Stone 100 --stone-100

Stone 200 --stone-200

Stone 300 --stone-300

Stone 400 --stone-400

Stone 500 --stone-500

Stone 600 --stone-600

Stone 700 --stone-700

Stone 800 --stone-800

Stone 900 --stone-900

Stone 950 --stone-950

Semantic

Components use these roles, not raw scale values.

Page --surface

Sunken section --surface-sunken

Raised panel --surface-raised

Inverse --surface-inverse

Text --text

Secondary text --text-secondary

Accent --accent

Accent text --accent-text

Danger --danger

Typography

Manrope & Inter

Manrope sets headlines, labels and buttons, tightly tracked. Inter carries everything people read at length. Bodoni Moda is reserved for the wordmark.

Display --text-display

Exceptional.

Heading 1 --text-5xl

For exceptional people.

Heading 2 --text-4xl

No exceptions.

Statement --text-3xl

We simply have standards.

Heading 3 --text-2xl

Private Email Hosting

Large --text-xl

Membership is a privilege.

Lede --text-lg

Casaguapo provides private infrastructure to remarkable people.

Body --text-base

Reply-all permanently disabled, for your protection.

Small --text-sm

Annual billing is available. It is not cheaper.

Label --text-xs

REQUEST AN INVITATION

Space

4px base.

--space-1

--space-2

--space-3

--space-4

--space-6

--space-8

--space-12

--space-16

--space-24

Radius

Soft, never bubbly.

--radius-xs

--radius-sm

--radius-md

--radius

--radius-lg

--radius-pill

Elevation

Shadows are felt rather than seen.

--shadow-sm

--shadow

--shadow-lg

--shadow-accent

Components

The fittings

Buttons

Primary Accent Ghost

On dark

Light Ghost light

Eyebrow & link

The House

Discover the services

Field

Approximate net worth

Icon

Motion

Ease --ease for everything that arrives. Durations: --duration-fast 0.25s, --duration 0.5s, --duration-slow 0.9s, reveals 1.2s. Respect reduced motion.