F12 Design System

Studio

A modern, light, open showcase for the system. This is where the team can feel how the tokens, components, and patterns come together without heavy framing.

Design Direction

Clean, open, and unmistakably light.

White-first layouts, generous spacing, and subtle layering. Accent red appears sparingly as a signal, never a flood.

Open space Breathing room over boxed grids.
Soft geometry Rounded corners, no hard squares.
Quiet accents Red used for emphasis, not saturation.
Design Brief

The system should feel clean, open, and light. Use white space, gentle gradients, and rounded surfaces. Avoid bold color blocks, sharp squares, or heavy framing.

Light-first palette

Neutrals dominate, red acts as a guide. No light red fills.

Modern clarity

Clean typography, clear hierarchy, simple motion.

System Snapshot
Core values

Clean, open, modern, gentle.

Use red for
Links Accents Highlights
Avoid

Overly bold color blocks, boxed layouts, light red fills, or dark UI treatments.

Foundation Tokens
Color + Surface
Base White --f12-color-bg
Subtle Background --f12-color-bg-subtle
Accent (sparingly) --f12-color-accent
Spacing + Radius
--f12-space-6
--f12-space-10
--f12-space-16
Rounded corners

Favor radius 2-3 for soft geometry.

Motion

Motion should feel gentle and purposeful. Use the standard ease and keep durations short.

Ease
--f12-ease-standard
Fast
--f12-duration-fast
Normal
--f12-duration-normal
Typography Roles
Hero

Design clarity builds trust.

Story

Storytelling feels calm and editorial.

Card title

Supportive, easy to scan.

Type Scale
--f12-text-4xl Display 40px
--f12-text-3xl Headline 32px
--f12-text-2xl Title 24px
--f12-text-lg Body Large
--f12-text-md Body Default
--f12-text-sm Body Small
--f12-text-xs Caption
Components
Buttons
Primary Ghost

Primary actions use accent sparingly. Ghost buttons keep layouts light.

Inputs
Cards + Chips
Editorial

Light surfaces keep content effortless.

Cards should feel soft, not boxed. Use neutral chips for filters.

Filter Category Status
Pattern Samples
Content Stack

Open layouts feel premium.

Pair calm typography with whitespace and subtle borders. Reserve accent for moments of emphasis.

Clear hierarchy

Titles lead, body supports.

Soft edges

Rounded corners reduce sharpness.

CTA Block

Use accent as a signal.

The call-to-action should be clear, not loud. Keep the surface light and let the button do the work.

Guidelines
Do

Keep layouts light, use generous spacing, and emphasize with the brand red in small doses.

Build on the existing tokens and components to stay consistent.

Don't

Use light red fills, boxed layouts, or heavy dark surfaces.

Introduce new colors or bold patterns without updating tokens.