Decision reference

Take it one answer at a time

This page keeps every decision behind Brand expressive in one place: 78 answers and what each one shaped. It's a reference, not a reading list. Most days you only need one answer.

Three easy ways in

Take a minute with Where it starts. It shows the few first answers the rest grow from.
Open one section when you wonder why. For example, why Brand expressive's spacing is spacious, or why its voice is playful.
Come in from a component page. Each one links here, to the answers that shaped it.

Everything else can wait until you need it.

Question
Answer
Why, and what it came from
Design values
In the UI

Where it starts

The first answers lead to the rest. Each branch is an answer that follows from the one above it.

Sells and converts What does the product do for the business?
- Customers who choose us Who uses it most?
  - AA What accessibility level do we commit to?
  - They see it fresh each time How do people recall the interface?
  - On the move Where do people use it?
    - Touch size accessibility → size.control.default size.52: 3.25rem
  - Light and dark theming →
- Images and campaigns What is the main content?
  - One idea at a time How much is on one screen?
    - Regular typography → type.body.font-size font.size.17: 1.0625rem
    - Spacious spacing → space.gap.tight space.8: 0.5rem
  - Browse and explore What is the main task?
- Rarely How often do people repeat actions?
- Delight What must the interface protect?
  - Fast motion → motion.duration.feedback duration.fast: 120ms
- Engagement Which outcome matters most?
  - A few minutes How long is one visit?
- Looking off-brand What is a costly mistake?
- Bold What should the brand feel like?
  - Loud How visible is the brand in the interface?
    - Vivid color → color.neutral.0 color.taupe.dark.0: #120B09
    - Pronounced elevation → elevation.card shadow.card-dark: [object Object]
  - Pill shape → radius.control radius.999: 9999px
  - Playful voice and tone →
One How many brands or products share the system?
An agency Who maintains the system?
- Every campaign How fast does it change?
  - Also for emphasis and size components →
- Lowercase words in paths naming →

Every question

All 78, by section, in the order every scheme answers them. Each answer shows why, what it came from, and every design decision it made. The menu in the sidebar opens a section; its number is how many decisions that section made.

Reasons

Which outcome matters most?

Engagement
- Why
  Engagement and sign-ups.
- Because of
  - What does the product do for the business? → Sells and converts
- What it decided (13)
  Answers it led to (6)
  - How long is one visit? → A few minutes
  - Color · Where does color carry meaning first? → Brand momentsColor →
  - Motion · Where does motion show? → Hero and launch momentsMotion →
  - Iconography · Where do icons work hardest? → Buttons and calls to actionIconography →
  - Voice and tone · Where do the words matter most? → Headlines and buttonsVoice and tone →
  - Components · How does a component earn its place? → It gives the brand a momentComponents →
  Rules it sets (2)
  - For the action that completes the task, use button primary, large, one per section. Don't use two primaries. One loud call to action per section.Color →
  - For a success message, use celebrate, briefly. Don't use a long thank-you. A short celebration is remembered.Voice →
  Variants it picks (5)
  - Button's primary variant. One loud call to action per section.Button →
  - Button's large size. The one loud call to action per section.Button →
  - Badge's warning tone. Almost gone: few left, act soon.Badge →
  - Toast's success tone. Celebrate, briefly: You're on the list. See you at launch.Toast →
  - Toggle's lg size isn't used. Large is for the one call to action per section, and a toggle is not that action.Toggle →

What is a costly mistake?

Looking off-brand
- Why
  A bland page is the costly mistake.
- Because of
  - What does the product do for the business? → Sells and converts
- What it decided (7)
  Answers it led to (1)
  - Voice and tone · How many tones does it use? → One per momentVoice and tone →
  Rules it sets (2)
  - For an error message, use color.status.danger and a short sentence. Don't use the brand magenta. Errors must not look like the brand.Color →
  - For a delete or remove, use button secondary, then confirm with Button danger. Don't use button primary. Confirm before destroying data.Color →
  Variants it picks (4)
  - Button's secondary variant. The first step of a delete, before the confirm.Button →
  - Button's danger variant. The confirm of a delete. It stays red, apart from the brand's pink.Button →
  - Alert's destructive variant. A sign-up that did not go through: plain first, then how to recover, with a word beside the color.Alert →
  - Item's muted variant isn't used. A quiet fill reads as bland on a loud page; color blocks already mark each section.Item →

What should the brand feel like?

Bold
- Why
  Bold and confident.
- Because of
  - What does the product do for the business? → Sells and converts
- What it decided (7)
  Answers it led to (7)
  - How visible is the brand in the interface? → Loud
  - Color · How is the palette defined? → Neutrals and one brand rampColor →
  - Shape · Which shape roles does it need? → Controls and containersShape →
  - Shape · What should control corners say? → PillShape →
  - Motion · How is easing defined? → A springMotion →
  - Voice and tone · How does it sound? → PlayfulVoice and tone →
  - Components · How does a component earn its place? → It gives the brand a momentComponents →

How visible is the brand in the interface?

Loud
- Why
  The brand is loud everywhere.
- Because of
  - What should the brand feel like? → Bold
- What it decided (16)
  Answers it led to (14)
  - Typography · Which text roles does it need? → Core and expressive displayTypography →
  - Typography · How many steps does the type scale take? → Fine steps, so pages can set their own rhythmTypography →
  - Typography · Where does type do the most work? → Headlines and heroTypography →
  - Color · Which color roles does it need? → Those and brand accentsColor →
  - Color · How saturated is the palette? → VividColor →
  - Spacing · How are spacing steps defined? → Big, even stepsSpacing →
  - Shape · Where does shape show most? → Buttons and badgesShape →
  - Elevation · What rises above the page? → Cards tooElevation →
  - Elevation · How soft are shadows? → PronouncedElevation →
  - Motion · What is motion for? → Feedback and expressionMotion →
  - Iconography · What do icons do? → Those and decorationIconography →
  - Voice and tone · How does it sound? → PlayfulVoice and tone →
  - Components · Which component families does it need? → Core, plus mediaComponents →
  - Components · When does a component get another look? → Also for emphasis and sizeComponents →
  Rules it sets (1)
  - For a page title, use type.display. Don't use type.title. The display role carries the brand in every hero.Typography →
  Variants it picks (1)
  - Item's muted variant isn't used. A quiet fill reads as bland on a loud page; color blocks already mark each section.Item →

Scopes

What do icons do?

Those and decoration
- Why
  Icons also decorate campaign pages.
- Because of
  - How visible is the brand in the interface? → Loud
- What it decided (7)
  Answers it led to (1)
  - Iconography · How many icon sizes exist? → TwoIconography →
  Rules it sets (2)
  - For an icon with no label, use not used: always add a word. Don't use an icon button with a hover hint. On phones, hover hints never show; a word says what will happen.Iconography →
  - For an action on one row or item, use button ghost with a word. Don't use an icon alone. Visitors come rarely, so they never learn an icon. A word says what will happen.Iconography →
  Variants it picks (4)
  - Button's ghost variant. The alternative next to the primary, and row actions with a word.Button →
  - Button's icon size isn't used. Phones first: hover hints never show, so every button has a word.Button →
  - Empty's icon variant. A two-tone icon in a tile, for a small region where a picture would push the words away.Empty →
  - Input group's inline-start align. The search icon before the text.Input group →

How many icon sizes exist?

Two
- Why
  One size next to text, one for decoration.
- Because of
  - Iconography · What do icons do? → Those and decoration
- What it decided
  It sets the values of the iconography tokens: Iconography →

What icon style?

Two-tone
- Why
  Two-tone icons carry the brand color.
- Because of
  - Color · How saturated is the palette? → Vivid
- What it decided (1)
  Variants it picks (1)
  - Empty's icon variant. A two-tone icon in a tile, for a small region where a picture would push the words away.Empty →

How big are icons next to text?

Larger than the text
- Why
  Larger icons hold their own next to big type.
- Because of
  - Typography · Which text roles does it need? → Core and expressive display
- What it decided
  It sets the values of the iconography tokens: Iconography →

Where do icons work hardest?

Buttons and calls to action
- Why
  Icons sit in calls to action.
- Because of
  - Which outcome matters most? → Engagement
- What it decided
  It sets the values of the iconography tokens: Iconography →

Which states get their own visible value?

Those and pressed
- Why
  Pressed for touch.
- Because of
  - Accessibility · What is the smallest target? → Touch size
- What it decided
  It sets the values of the accessibility tokens: Accessibility →

How many signals carry each meaning?

Two: color and word
- Why
  Color and word.
- Because of
  - What accessibility level do we commit to? → AA
- What it decided (6)
  Rules it sets (2)
  - For an error message, use color.status.danger and a short sentence. Don't use the brand magenta. Errors must not look like the brand.Color →
  - For a status, use badge pill with a word. Don't use color alone. A word keeps meaning on vivid backgrounds.Color →
  Variants it picks (4)
  - Badge's neutral tone. New: a label, not a state to fix.Badge →
  - Badge's success tone. On the list: you joined and your place is saved.Badge →
  - Badge's warning tone. Almost gone: few left, act soon.Badge →
  - Alert's destructive variant. A sign-up that did not go through: plain first, then how to recover, with a word beside the color.Alert →

What contrast floor do we hold?

AA
- Why
  AA, checked on every vivid color.
- Because of
  - What accessibility level do we commit to? → AA
- What it decided
  It sets the values of the accessibility tokens: Accessibility →

What is the smallest target?

Touch size
- Why
  Visitors come from social posts on phones.
- Because of
  - Where do people use it? → On the move
- What it decided (12)
  Answers it led to (1)
  - Accessibility · Which states get their own visible value? → Those and pressedAccessibility →
  Rules it sets (2)
  - For an icon with no label, use not used: always add a word. Don't use an icon button with a hover hint. On phones, hover hints never show; a word says what will happen.Iconography →
  - For the smallest clickable thing, use size.control.default (touch). Don't use a compact control. Most visitors arrive on phones, and a compact control is too small for a thumb.Accessibility →
  Variants it picks (9)
  - Button's default size. Every button, at touch size: phones first.Button →
  - Button's compact size isn't used. Phones first: no compact controls.Button →
  - Button's icon size isn't used. Phones first: hover hints never show, so every button has a word.Button →
  - Field's horizontal orientation isn't used. Phones first: there is no room beside the field.Field →
  - Input group's inline-end align. The unit after the value, or the clear button with a word: hover hints never show on phones.Input group →
  - Item's default size. Every row, at touch size: phones first.Item →
  - Item's sm size isn't used. Phones first: no compact rows.Item →
  - Toggle's default size. Every toggle, at touch size: phones first.Toggle →
  - Toggle's sm size isn't used. Phones first: no compact controls.Toggle →

Where are the floors hardest to hold?

Brand color
- Why
  Vivid brand color is the hardest to keep readable.
- Because of
  - Color · How saturated is the palette? → Vivid
- What it decided
  It sets the values of the accessibility tokens: Accessibility →

Which kinds of copy does it need?

Labels, messages and headlines
- Why
  Headlines carry the campaign.
- Because of
  - What does the product do for the business? → Sells and converts
- What it decided
  It sets the values of the voice and tone tokens: Voice and tone →

How many tones does it use?

One per moment
- Why
  Playful in headlines, plain in errors.
- Because of
  - What is a costly mistake? → Looking off-brand
- What it decided (7)
  Rules it sets (2)
  - For the words of an error, use plain first, a light touch after. Don't use a joke before the fix. Playful copy must never hide what went wrong.Voice →
  - For a confirmation question, use Plain. No jokes when something is lost. Don't use playful copy. Loss is never the moment for a joke.Voice →
  Variants it picks (5)
  - Badge's danger tone isn't used. Nothing on a launch page is labeled as failed; errors are plain sentences.Badge →
  - Toast's neutral tone. A light note that something changed.Toast →
  - Toast's danger tone. Plain first, a light touch after: That didn't go through.Toast →
  - Alert's default variant isn't used. Alerts here only report a sign-up that did not go through; confirmations go in a toast.Alert →
  - Alert's destructive variant. A sign-up that did not go through: plain first, then how to recover, with a word beside the color.Alert →

How is the voice defined?

Principles and examples
- Why
  Principles and examples guide each campaign's writers.
- Because of
  - Who maintains the system? → An agency
- What it decided
  It sets the values of the voice and tone tokens: Voice and tone →

How does it sound?

Playful
- Why
  Big words, few of them.
- Because of
  - What should the brand feel like? → Bold
  - How visible is the brand in the interface? → Loud
- What it decided (6)
  Rules it sets (5)
  - For a paragraph or help text, use type.body, short. Don't use long paragraphs. Short copy keeps the energy.Typography →
  - For a button label, use a short verb that moves: Join, Try, Go. Don't use "Learn more". Big moments need verbs with energy.Voice →
  - For a success message, use celebrate, briefly. Don't use a long thank-you. A short celebration is remembered.Voice →
  - For an empty state, use playful, with a clear next step. Don't use a dead end. Playful words still need a way forward.Voice →
  - For a first visit, use one bold line and one button. Don't use a paragraph of copy. Visitors from a social post give a few seconds.Voice →
  Variants it picks (1)
  - Toast's success tone. Celebrate, briefly: You're on the list. See you at launch.Toast →

Where do the words matter most?

Headlines and buttons
- Why
  Words work hardest in headlines and buttons.
- Because of
  - Which outcome matters most? → Engagement
- What it decided (1)
  Rules it sets (1)
  - For a button label, use a short verb that moves: Join, Try, Go. Don't use "Learn more". Big moments need verbs with energy.Voice →

Take it one answer at a time

Where it starts​

Every question​

Reasons

Scopes

Where it starts

Every question