Visual Brief

Core Philosophy

A living system built on clarity, breathability, and intentionality. We favor layered surfaces over boxed panels, and airy space over density.

Principle 01

Airy & Open

Generous padding and margin. No forced containers.

Principle 02

Soft Aesthetics

Rounded corners and gentle gradients for a premium feel.

Principle 03

Subtle Accents

Red as a spark, never a background. Neutrals lead the way.

01 — Color Palette

Editorial Red

--f12-color-editorial

Heading Ink

--f12-color-heading

Body Text

--f12-color-text

Muted Grey

--f12-color-muted

Stage Background

--f12-color-bg-subtle

Accent Soft

--f12-color-accent-soft

02 — Typography

.f12-title--hero 32px / Bold / -2%

Hero Statement Title

.f12-title--story 25.6px / Bold / -2%

Editorial Story Headline

.f12-title--card-sm 16px / Bold / -2%

Compact Item Title

.f12-body 16px / Medium / 1.65

Standard body text for readability. Optimized for Quicksand's unique geometry and open counters. This is the primary reading font for the platform.

.f12-eyebrow 12px / Bold / Caps

Category Label

03 — Components

Buttons

Chips & Links

Active Tag Neutral Tag Inline Text Link

Form Elements

Surfaces

Elevated Card

Standard elevated surface with soft shadow.

Flat Card

Border-only surface for subtle groupings.

04 — Rhythm & Spacing

The system uses a 4px scale with 2px micro-steps. This ensures consistent spacing across all components.

4px

8px

16px

32px

48px

Editorial Rhythm

Story 01

Consistent 20px (var--f12-space-5) vertical rhythm.

Story 02

Equalized gap and padding for visual balance.