Content first
Large, calm type and generous space, for people who come to read.
- 12 scopes
- 78 answers
- 378 tokens
- 19 components
Why this scheme exists
Its answers to the reasons
Matters most for this schemeOther reasons
- ProductInforms and publishes, one
- PeopleOccasional visitors, AA
- ContentLong-form text, one idea at a time
- TasksRead start to end, rarely
- Human factorsAttention on the content, they see it fresh each time
- OutcomeReading comfort, losing your place
- BrandWarm, present
- ScenariosAnywhere, on any device, one sitting
- TeamA small team, rarely
This scheme, applied
One screen built only from its answers
Your reading list
Guides saved
4
Finished this month
11
Minutes read
186
Next issue
Friday
Planting a winter garden
Home and garden · 12 min read
SavedYou're in. The next issue arrives on Friday.
Scopes
12 scopes, each answered for this scheme
Every scope answers the same five questions: roles, how many, how defined, values, lands in.
- AaAaAaAaTypographyLarge body text is easy on the eyes. Type does its work in articles.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
- ColorA calm, balanced palette. Color marks links inside the text.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
- SpacingRoom around the text helps reading. Space is spent between paragraphs and 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
- ShapeRounded corners feel friendly. Corners show on buttons and article cards.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
- ElevationSoft shadows suit warm paper. Menus and dialogs are the only layers.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
- moderateMotionModerate speed feels calm. State changes and opening panels move.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
- SavedIconographyIcons match the text size. Icons help most in navigation.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; dark helps night reading. 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
- targetAccessibilityReaders are often on phones. Long text needs steady contrast and line length.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. A component API keeps changes local.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 in. The next issue arrives on Friday.”Voice and toneTalk to one reader, like a good editor. Most words are in articles and guides.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
ComponentsPages stay calm when a component changes only with its meaning. Components sit inside and around articles.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 Content first.
You get 378 tokens, the variants of 19 components, and all 78 answers with their reasons. Change any answer later, and see what it moves.
- CLI
open-ds init content-first - Link
/schemes/content-first - Agent
MCP · get_scheme("content-first")