Brand

You Shouldn't Have is built around consent: invite-only relationships, clear visibility states, and surprise-safe coordination.

Typography

The brand voice uses a warm display serif for personality and a clean sans for readable interface copy.

Display

Fraunces

Gifting, but with grace and intention.

font-family: "Fraunces", serif;

Body

Manrope

Built for clear states, quick scans, and surprise-safe coordination across every screen.

font-family: "Manrope", sans-serif;

Palette

A full reference of color tokens and shade steps, plus a quick visual snapshot of the brand atmosphere.

Brand Glance

Warm

Grounded

Soft

Bold

Primary Scale

Full shade ladder for brand coral, from tint to deep anchor.

Dawn Tint

--primary-50

var(--primary-50)

Soft Blush

--primary-100

var(--primary-100)

Apricot Glow

--primary-200

var(--primary-200)

Sunset Peach

--primary-300

var(--primary-300)

Warm Ember

--primary-400

var(--primary-400)

Signature Coral

--primary-500

var(--primary-500)

Terracotta

--primary-600

var(--primary-600)

Spiced Clay

--primary-700

var(--primary-700)

Burnt Cedar

--primary-800

var(--primary-800)

Redwood Bark

--primary-900

var(--primary-900)

Cocoa Night

--primary-950

var(--primary-950)

Surface & Text Tokens

Canvas

--surface

var(--surface)

Subtle Wash

--surface-subtle

var(--surface-subtle)

Raised Paper

--surface-elevated

var(--surface-elevated)

Warm Stone

--surface-strong

var(--surface-strong)

Brand Umber

--surface-brand

var(--surface-brand)

Ink Night

--surface-inverse

var(--surface-inverse)

Body Ink

--foreground

var(--foreground)

Muted Copy

--foreground-muted

var(--foreground-muted)

Subtle Meta

--foreground-subtle

var(--foreground-subtle)

Inverse Light

--foreground-inverse

var(--foreground-inverse)

Status Tokens

Success

--success

var(--success)

Main

Success Mist

--success-bg

var(--success-bg)

Soft background

Success Ink

--success-foreground

var(--success-foreground)

Readable on soft bg

Warning

--warning

var(--warning)

Main

Warning Mist

--warning-bg

var(--warning-bg)

Soft background

Warning Ink

--warning-foreground

var(--warning-foreground)

Readable on soft bg

Danger

--danger

var(--danger)

Main

Danger Mist

--danger-bg

var(--danger-bg)

Soft background

Danger Ink

--danger-foreground

var(--danger-foreground)

Readable on soft bg

Info

--info

var(--info)

Main

Info Mist

--info-bg

var(--info-bg)

Soft background

Info Ink

--info-foreground

var(--info-foreground)

Readable on soft bg