Accessible first

Why this scheme exists

Its answers to the reasons

• ProductServes the public, one
• PeopleEveryone, including people with disabilities, AAA
• ContentForms and tasks, one idea at a time
• TasksComplete a form, rarely
• Human factorsLow effort to understand, they see it fresh each time
• OutcomeCompletion without errors, a task that fails
• BrandCalm and clear, quiet
• ScenariosAnywhere, on any device, one sitting
• TeamA platform team, rarely

This scheme, applied

One screen built only from its answers

Scopes

12 scopes, each answered for this scheme

Every scope answers the same five questions: roles, how many, how defined, values, lands in.

• AaAaAaAaTypographyLarge text is readable for more people. Type matters most in form labels and hints.Which text roles does it need?
  • Core: heading, body, label
  • Core and data
  • Core and editorial display
  • Core and expressive display
  How many steps does the type scale take?
  • Only the steps the screens need
  • One step per kind of text
  • Fine steps, so pages can set their own rhythm
  How are sizes and line heights defined?
  • A ratio, line heights on the grid
  • A ratio, line heights in proportion
  • Fixed steps
  How large is body text?
  • Small
  • Regular
  • Large
  Where does type do the most work?
  • Tables and inputs
  • Articles and long text
  • Forms and labels
  • Headlines and hero
  Open →
• ColorStrong but not loud color. Links and actions must be found by everyone.Which color roles does it need?
  • Surface, text, action and status
  • Those and brand accents
  How many emphasis levels do actions need?
  • Two
  • Three
  • Four
  How is the palette defined?
  • Neutrals and one brand ramp
  • Shared neutrals, a ramp per brand
  How saturated is the palette?
  • Muted
  • Balanced
  • Vivid
  Where does color carry meaning first?
  • Status in tables
  • Links and actions
  • Brand moments
  Open →
• SpacingSpace lowers effort and mis-taps. Space between fields prevents mis-taps.Which spacing roles does it need?
  • Gaps and insets
  • Gaps, insets and row heights
  How many densities exist?
  • One
  • Two
  How are spacing steps defined?
  • A fine base unit
  • A coarse base unit
  How dense is the layout?
  • Compact
  • Comfortable
  • Spacious
  Where does spacing matter most?
  • Rows and cells
  • Between paragraphs
  • Between fields
  • Between big sections
  Open →
• ShapeClear, slightly rounded controls. Corners show on controls and step cards.Which shape roles does it need?
  • Controls and containers
  • Controls, badges and containers
  How many corner sizes exist?
  • Two
  • Three
  How are corners set?
  • Fixed for the product
  • Set by each brand
  What should control corners say?
  • Sharp
  • Slightly rounded
  • Rounded
  • Pill
  Where does shape show most?
  • Controls in dense rows
  • Controls and cards
  • Buttons and badges
  Open →
• ElevationNo shadows; borders do the work. Only dialogs separate, with a dimmed page and a border.What rises above the page?
  • Only what floats
  • Cards too
  • Nothing
  How many shadow levels exist?
  • None
  • One
  • Two
  What separates groups on the page?
  • Space
  • Lines
  • Cards
  How soft are shadows?
  • No shadows
  • Subtle
  • Soft
  • Pronounced
  Where does elevation show?
  • Menus and dialogs
  • Cards, menus and dialogs
  • Dialogs only
  Open →
• moderateMotionModerate speed is easy to follow. Only state changes move.What is motion for?
  • Feedback only
  • Feedback and guidance
  • Feedback and expression
  How many speeds exist?
  • One
  • Two
  • Three
  How is easing defined?
  • Standard ease-out
  • A spring
  How fast does feedback feel?
  • Fast
  • Moderate
  • Relaxed
  Where does motion show?
  • State changes only
  • State changes and panels
  • Hero and launch moments
  Open →
• SavedIconographyLarger icons are easier to see. Icons work hardest beside status words and errors.What do icons do?
  • Actions and status
  • Actions, status and navigation
  • Those and decoration
  How many icon sizes exist?
  • One
  • Two
  What icon style?
  • Outline
  • Filled
  • Two-tone
  How big are icons next to text?
  • Match the text
  • Larger than the text
  Where do icons work hardest?
  • Toolbars and rows
  • Status and messages
  • Navigation
  • Buttons and calls to action
  Open →
• ThemingLight and dark ship as standard; both hold AAA text. Only colors change.What can a theme change?
  • Mode only
  • Mode and brand
  • Mode and contrast
  How many themes ship?
  • Two
  • Several
  How are brands handled?
  • One brand
  • Brands as modes
  Which modes ship?
  • Light and dark
  • Light, dark and high contrast
  What changes when the theme changes?
  • Colors only
  • Colors, type and shape
  Open →
• targetAccessibilityLarge targets for tremor and touch. Forms are where people are blocked.Which states get their own visible value?
  • Hover, focus, disabled
  • Those and pressed
  • All, including loading
  How many signals carry each meaning?
  • Two: color and word
  • Three: color, icon and word
  What contrast floor do we hold?
  • AA
  • AAA for text
  What is the smallest target?
  • Compact, for a pointer
  • Touch size
  • Large
  Where are the floors hardest to hold?
  • Dense tables
  • Long text
  • Forms
  • Brand color
  Open →
• button/primary/backgroundNamingLowercase paths read the same everywhere. A component API keeps changes local.What gets a name?
  • Tokens
  • Tokens and component keys
  How many token tiers?
  • Two
  • Three
  How are decisions named?
  • By role
  • By component
  How are names written?
  • Lowercase words in paths
  • camelCase
  What do components read?
  • Component keys
  • Semantic tokens
  Open →
• “We have your application. We will email you within 5 working days.”Voice and toneEvery sentence is easy to read on the first try. Words decide whether a form gets finished.Which kinds of copy does it need?
  • Labels and messages
  • Labels, messages and help
  • Labels, messages and articles
  • Labels, messages and headlines
  How many tones does it use?
  • One
  • One per moment
  • One per brand
  How is the voice defined?
  • Rules and a word list
  • Principles and examples
  • A shared core, brand tone on top
  How does it sound?
  • Terse
  • Plain and direct
  • Conversational
  • Playful
  Where do the words matter most?
  • Errors and empty states
  • Articles and guides
  • Form steps and errors
  • Headlines and buttons
  Open →
• ComponentsOne clear way to do each thing. Components do their work in forms and steps.Which component families does it need?
  • Actions, forms, feedback, overlays, layout and navigation
  • Core, plus data
  • Core, plus content and media
  • Core, plus media
  How far does the inventory reach? Accessible first carries 16.
  • 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
  How does a component earn its place?
  • 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
  When does a component get another look?
  • Only when the meaning changes
  • Also for emphasis and size
  • Also so each brand or page can look its own way
  Where do components do the most work?
  • Tables and forms
  • Articles
  • Forms and steps
  • Sign-up and account pages
  • Campaign sections
  Open →