Dense data

Why this scheme exists

Its answers to the reasons

• ProductRuns daily operations, one
• PeopleDaily experts, AA
• ContentNumbers and records, a lot
• TasksScan and compare, constantly
• Human factorsPeople keep their place, they learn it and recognise it
• OutcomeTime on task, acting on the wrong record
• BrandPrecise, quiet
• ScenariosAt a desk, all day
• TeamA small team, every month

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.

• AaAaAaAaTypographySmall body text fits more rows on the screen. Most text sits in table cells and inputs.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 →
• ColorMuted color keeps attention on the data. Color earns its place by marking late and failed records.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 →
• SpacingCompact spacing shows more records. Space is spent inside rows and cells.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 →
• ShapeSmall corners keep dense rows straight. Corners show most on controls in dense rows.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 →
• ElevationSubtle shadows keep the grid crisp. Menus and dialogs are the only layers.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 →
• fastMotionFast feedback keeps up with experts. 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 →
• SavedIconographyIcons match the label so they do not outweigh it. Icons work hardest in toolbars and row actions.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 first, always; dark ships as standard for night shifts. A mode switch changes colors only, so layout never moves.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 →
• targetAccessibilityMouse and keyboard; compact targets are enough. Small text and thin lines in tables need the most care.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 in CSS, JSON and Figma. 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 →
• “12 alerts exported.”Voice and toneExperts want short labels and short messages. Errors and empty tables are where words decide the next action.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 →
• ComponentsRepeated screens stay identical when a component changes only with its meaning. Most work happens in tables and the forms that edit them.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? Dense data carries 40.
  • 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 →