Skip to content

History / Design Conventions

Revisions

  • Design Conventions: restructure state sections by driver and prominence - Rename section headings to 'User/System/Agent Interaction States Visuals' - Move Disabled into System interaction states - Label states as 'State (variant style)' (e.g. Selected (Depressed style)) - Split System status by prominence tier: Muted (inputs + in-flow surfaces), Inverted (badges + high-severity toasts), Temporal (toasts + tooltips) - Add a Temporal row (tooltip + default toast) for brief high-prominence states - One consolidated description per row; rows may show several example images - Capture real selected list/nav items (SideNav, TreeList) and toggle buttons for Selected (Depressed style); fix previously-broken image references

    @ernestt ernestt committed Jul 9, 2026
  • Design Conventions: retitle foundations, fold Generative description column - Foundation headings use 'Title (Category)' format instead of <sub> suffix (e.g. 'Consistent vertical rhythm (Size | Density)') - Generative States table folds its Description column into the State column, matching the Foundation and Async tables

    @ernestt ernestt committed Jul 9, 2026
  • Design Conventions: split state rows by distinct visual treatment - Split Focused into Focused and Focused (Input) - Split Selected into 5 rows by what's being selected: Toggles (checkbox/ radio/switch), Control (segmented), Navigation (tabs/outline/stepper), Container (cards), List (nav item/list row) - Merge Loading and Processing into one row; add input-family loading examples (skeleton placeholder, busy input group) - Fold the status prominence tiers into the Async table (each status row shows its tiers side by side) instead of a separate table - Add the Outline component as a Navigation selection visual

    @ernestt ernestt committed Jul 9, 2026
  • Updated Design Conventions (markdown)

    @ernestt ernestt committed Jul 9, 2026
  • Design Conventions: format foundation Smells as bullet lists Break each foundation's Smells cell from a packed run-on paragraph into a bulleted list (one smell per line, bold term leading) for readability.

    @ernestt ernestt committed Jul 8, 2026
  • Design Conventions: colocate state visuals in the state table; drop gray canvas - Trim state screenshots to the component on its own clean surface (no gray padding canvas, no white bleed) - Merge the separate image tables into the main state table: each state row now holds its own visuals with inline description + API/ARIA reference

    @ernestt ernestt committed Jul 8, 2026
  • Design Conventions: simplify State Representations - Drop the per-archetype columns (action/input/control/container); show one summary row per state with an approved-visuals count - Fold API/ARIA into each state's description - Enlarge the state visuals (width 240) so the image is the main reference - Standardize caption format: backticked token(s) + how it's applied

    @ernestt ernestt committed Jul 8, 2026
  • Design Conventions: foundations as tables; 'minimize visuals per state' Reformat the Design Foundations section from stacked bold-paragraph cards into a label-column table per foundation (Principle / Why / Smells / Got it right) for scannability. Reword the principle to 'minimize visuals per state'.

    @ernestt ernestt committed Jul 8, 2026
  • Add Design Conventions page Design-side sibling of API Conventions: the intention behind token choices (foundations), standard state representations across component archetypes, and how design quality is evaluated. - Wire the Contributing Design Review section and Home index to the new page - Component Auditor gains a Design Conventions dimension for the objectively-checkable rules (spacing grid, concentric radius, contrast, type hierarchy, motion safety, stacking); subjective visual judgment stays in Hardening Layer 3

    @ernestt ernestt committed Jul 8, 2026