Brand expressive
Big display type, vivid color and springy motion, for launches that must be remembered.
- 12 scopes
- 78 answers
- 381 tokens
- 16 components
Why this scheme exists
Its answers to the reasons
Matters most for this schemeOther reasons
- ProductSells and converts, one
- PeopleCustomers who choose us, AA
- ContentImages and campaigns, one idea at a time
- TasksBrowse and explore, rarely
- Human factorsDelight, they see it fresh each time
- OutcomeEngagement, looking off-brand
- BrandBold, loud
- ScenariosOn the move, a few minutes
- TeamAn agency, every campaign
This scheme, applied
One screen built only from its answers
The drop is coming
Days to launch
6
On the list
2,400
Pieces in the drop
12
Colours
4
Night runner jacket
Drop 03 · four colours
Almost goneYou're on the list. See you at launch.
Scopes
12 scopes, each answered for this scheme
Every scope answers the same five questions: roles, how many, how defined, values, lands in.
- AaAaAaAaTypographyRegular body; the display does the shouting. Type does its work in headlines.Which text roles does it need?
- Core: heading, body, label
- Core and data
- Core and editorial display
- Core and expressive display
- Only the steps the screens need
- One step per kind of text
- Fine steps, so pages can set their own rhythm
- A ratio, line heights on the grid
- A ratio, line heights in proportion
- Fixed steps
- Small
- Regular
- Large
- Tables and inputs
- Articles and long text
- Forms and labels
- Headlines and hero
- ColorVivid color is the brand. Color makes the launch moment.Which color roles does it need?
- Surface, text, action and status
- Those and brand accents
- Two
- Three
- Four
- Neutrals and one brand ramp
- Shared neutrals, a ramp per brand
- Muted
- Balanced
- Vivid
- Status in tables
- Links and actions
- Brand moments
- SpacingBig space makes big moments. Space works between big sections.Which spacing roles does it need?
- Gaps and insets
- Gaps, insets and row heights
- One
- Two
- A fine base unit
- A coarse base unit
- Compact
- Comfortable
- Spacious
- Rows and cells
- Between paragraphs
- Between fields
- Between big sections
- ShapePill controls feel playful. Pill buttons are the signature shape.Which shape roles does it need?
- Controls and containers
- Controls, badges and containers
- Two
- Three
- Fixed for the product
- Set by each brand
- Sharp
- Slightly rounded
- Rounded
- Pill
- Controls in dense rows
- Controls and cards
- Buttons and badges
- ElevationPronounced shadows add depth. Cards, menus and dialogs rise.What rises above the page?
- Only what floats
- Cards too
- Nothing
- None
- One
- Two
- Space
- Lines
- Cards
- No shadows
- Subtle
- Soft
- Pronounced
- Menus and dialogs
- Cards, menus and dialogs
- Dialogs only
- relaxedMotionRelaxed, springy motion. Motion shows in hero and launch moments.What is motion for?
- Feedback only
- Feedback and guidance
- Feedback and expression
- One
- Two
- Three
- Standard ease-out
- A spring
- Fast
- Moderate
- Relaxed
- State changes only
- State changes and panels
- Hero and launch moments
- SavedIconographyLarger icons hold their own next to big type. Icons sit in calls to action.What do icons do?
- Actions and status
- Actions, status and navigation
- Those and decoration
- One
- Two
- Outline
- Filled
- Two-tone
- Match the text
- Larger than the text
- Toolbars and rows
- Status and messages
- Navigation
- Buttons and calls to action
- ThemingLight and dark ship as standard. Only colors change.What can a theme change?
- Mode only
- Mode and brand
- Mode and contrast
- Two
- Several
- One brand
- Brands as modes
- Light and dark
- Light, dark and high contrast
- Colors only
- Colors, type and shape
- targetAccessibilityVisitors come from social posts on phones. Vivid brand color is the hardest to keep readable.Which states get their own visible value?
- Hover, focus, disabled
- Those and pressed
- All, including loading
- Two: color and word
- Three: color, icon and word
- AA
- AAA for text
- Compact, for a pointer
- Touch size
- Large
- Dense tables
- Long text
- Forms
- Brand color
- button/primary/backgroundNamingLowercase paths read the same everywhere. Campaigns change primitives, never components.What gets a name?
- Tokens
- Tokens and component keys
- Two
- Three
- By role
- By component
- Lowercase words in paths
- camelCase
- Component keys
- Semantic tokens
- “You're on the list. See you at launch.”Voice and toneBig words, few of them. Words work hardest in headlines and buttons.Which kinds of copy does it need?
- Labels and messages
- Labels, messages and help
- Labels, messages and articles
- Labels, messages and headlines
- One
- One per moment
- One per brand
- Rules and a word list
- Principles and examples
- A shared core, brand tone on top
- Terse
- Plain and direct
- Conversational
- Playful
- Errors and empty states
- Articles and guides
- Form steps and errors
- Headlines and buttons
ComponentsVariants for emphasis and size let each campaign look a little different. Components sit inside big campaign sections.Which component families does it need?- Actions, forms, feedback, overlays, layout and navigation
- Core, plus data
- Core, plus content and media
- Core, plus media
- Only what today's screens use
- What today's screens use, plus what the next ones will likely need
- Everything its families offer, ready before it's asked for
- A use scenario needs it
- Its family is in the roles, so product teams find it ready
- It works for everyone, with any device and assistive technology
- It gives the brand a moment
- Only when the meaning changes
- Also for emphasis and size
- Also so each brand or page can look its own way
- Tables and forms
- Articles
- Forms and steps
- Sign-up and account pages
- Campaign sections
Take this scheme
Start from Brand expressive.
You get 381 tokens, the variants of 16 components, and all 78 answers with their reasons. Change any answer later, and see what it moves.
- CLI
open-ds init brand-expressive - Link
/schemes/brand-expressive - Agent
MCP · get_scheme("brand-expressive")