Design system · built from 78 answered questions

Brand expressive

Big display type, vivid color and springy motion, for launches that must be remembered.

Explore the foundations

47components

178primitives

2themes

Drop 03 line-upSee the line-upJoin the drop

Piece	Color	Left	Status
Night runner jacket	Ink	40	Almost gone
Trail shell	Volt	220	New
Studio hoodie	Chalk	180	On the list
Drift cap	Ember	35	Almost gone
Loop tee	Chalk	300	New
Cargo short	Ember	150	On the list

Why it looks like this

Every decision follows from an answer. These are the answers its components and rules cite most. Follow them all in the Decision reference.

What is the smallest target?

Touch size

Visitors come from social posts on phones.

accessibility.values

Which outcome matters most?

Engagement

Engagement and sign-ups.

outcomes.q1

How many tones does it use?

One per moment

Playful in headlines, plain in errors.

voice.count

Explore the system

PrimitivesAll 178 raw values, and the tokens that point to each.

Aa

FoundationsColor, type, spacing, shape and motion, each with the answer behind it.

Join the dropAlmost gone

Components47 components, each with when to use it and how Brand expressive decided.

Headlines are short and bold. Three to six words.

Voice and tonePlayful and short. Big words, few of them.

Themes2 themes. Only semantic tokens change; components never do.

open-ds why brand-expressive button

For agentsAGENTS.md, the skill and the MCP: an AI builds the way the system would.

Who it is for

• Use it for: Launch sites, campaigns, marketing pages and consumer brands that lead with personality.
• Not for: Tools people use for hours, or forms where calm matters more than character.
• Products like: Product launch, Campaign site, Consumer app landing, Event site
• Themes: light, dark

Use scenarios

• A visitor lands on a launch page from a social post and joins the waiting list.
• An agency swaps the campaign colors for the next drop without changing the components.

Every answer

All 78 answers, and the design decisions each one made: Decision reference.