Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Forced Colors and High Contrast Support
High contrast is not dark mode; forced-colors can override many color properties, so components need system colors, real outlines, and non-color redundancy.
Accessible color systems should respect user-agent high contrast rendering instead of forcing brand color. Critical states must remain understandable when system colors take over, shadows are removed, and background images disappear.95%Typography Color Accessibilitycharts / accessibilityChart Accessibility Encoding
Chart Accessibility Encoding turns a frequent interface judgment into an executable constraint before generation.
An accessible chart is not a graphic with one alt sentence; its visual encodings, text summary, interaction states, and data alternative all carry the same evidence.94%Typography Color Accessibilitybackground / textureDecorative Background Readability
Textures, patterns, gradients, noise, and media backgrounds must serve text, controls, semantics, and performance instead of turning content into atmosphere.
A background is a support layer for hierarchy and mood; once it carries meaning, affects reading, or moves, it needs semantic alternatives, contrast evidence, motion fallback, and license records.94%Typography Color Accessibilityoklch / colorOKLCH Perceptual Color Scales
OKLCH lets agents generate more controllable theme scales around lightness, chroma, and hue, but still needs semantic mapping, gamut checks, and contrast matrices.
A color scale is not a hex color linearly tinted and shaded. Healthy theme scales control perceived lightness, saturation, brand tone, and usage semantics together.94%Typography Color Accessibilitycolor / contrastContrast-Generated Color Tokens
Generating color scales from target contrast ratios can improve theme accessibility, but the output must still map to semantic tokens and state roles.
Accessible color systems should not audit contrast only after design. Contrast targets should shape color-scale generation and token naming from the start.92%Typography Color Accessibilityforms / inputTouch Keyboard and Input Purpose
Touch Keyboard and Input Purpose turns a frequent interface judgment into an executable constraint before generation.
Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.86%Typography Color Accessibilitymotion / reduced-motionReduced Motion Accessibility
Reduced Motion Accessibility turns a frequent interface judgment into an executable constraint before generation.
Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.86%Typography Color Accessibilityforms / labelsPersistent Form Labels
Persistent Form Labels turns a frequent interface judgment into an executable constraint before generation.
Form labels should remain visible before and after input so users can confirm meaning and context.86%Typography Color Accessibilitystatus / ariaStatus Message Announcement
Status Message Announcement turns a frequent interface judgment into an executable constraint before generation.
State changes conveyed only by color, toast, or visual movement can be missed by some users.86%Typography Color Accessibilityauthentication / accessibilityAccessible Authentication Flow
Accessible Authentication Flow turns a frequent interface judgment into an executable constraint before generation.
Secure flows still need low cognitive load, helping users complete rather than testing them.86%Typography Color Accessibilityforms / errorsError Summary Pattern
Error Summary Pattern turns a frequent interface judgment into an executable constraint before generation.
Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.86%Typography Color Accessibilitytarget-size / touchTarget Size and Spacing
Target Size and Spacing turns a frequent interface judgment into an executable constraint before generation.
Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.86%Typography Color Accessibilityfocus / keyboardFocus Order and Reading Order
Focus Order and Reading Order turns a frequent interface judgment into an executable constraint before generation.
A mismatch between visible layout and assistive navigation order breaks orientation and comprehension.86%Typography Color Accessibilitylinks / contrastLink Contrast and Affordance
Link Contrast and Affordance turns a frequent interface judgment into an executable constraint before generation.
Links are navigation promises; users must quickly recognize clickable text in reading flows.85%Typography Color Accessibilitycognitive-load / copyCognitive Load Copy
Cognitive Load Copy turns a frequent interface judgment into an executable constraint before generation.
Users should not need to remember system state, previous-screen information, or hidden rules to complete a task.84%Typography Color Accessibilitycontent / plain-languagePlain Language
Plain Language turns a frequent interface judgment into an executable constraint before generation.
Understandability is part of accessibility; complex copy increases cognitive load for everyone.84%Typography Color Accessibilitylocale / languageLanguage and Locale Formatting
Language and Locale Formatting turns a frequent interface judgment into an executable constraint before generation.
Dates, numbers, currency, units, and language direction should match the user's locale and avoid ambiguity.84%Typography Color Accessibilityforms / placeholderPlaceholder Is Not a Label
Placeholder Is Not a Label turns a frequent interface judgment into an executable constraint before generation.
Placeholders are useful for examples, not as the only instruction or critical guidance.84%Typography Color Accessibilityicons / ariaIcon Accessible Names
Icon Accessible Names turns a frequent interface judgment into an executable constraint before generation.
Icon-only buttons and statuses need accessible names, while decorative icons should be hidden from assistive technology.84%Typography Color Accessibilitydark-mode / contrastDark Mode Contrast Tuning
Dark Mode Contrast Tuning turns a frequent interface judgment into an executable constraint before generation.
Dark mode is not color inversion; text, borders, state colors, and elevation need rechecking.84%Typography Color Accessibilitytypography / spacingText Spacing Resilience
Text Spacing Resilience turns a frequent interface judgment into an executable constraint before generation.
Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.84%Typography Color Accessibilityforms / redundant-entryRedundant Entry Reduction
Redundant Entry Reduction turns a frequent interface judgment into an executable constraint before generation.
Redundant entry increases cognitive load, errors, and abandonment, especially for assistive technology users.84%Typography Color Accessibilitytouch-target / mobileAccessible Interactive Targets
Buttons, links, menu items, and icon buttons need sufficient hit area, especially on mobile.
A visually small control does not need a tiny hit area; targets require stable size and clear feedback.82%Typography Color Accessibilityaccessibility / colorColor Must Not Stand Alone
State, risk, category, and selection cannot rely on color alone; text, icon, shape, or position must help.
Color semantics weaken under color blindness, low vision, printing, and poor lighting.82%Typography Color Accessibilitysurface / colorReadable Color on Surfaces
When surfaces change, text, borders, icons, and state colors must be recalibrated.
The same color value has different strength on different backgrounds and should not be reused mechanically.82%Typography Color Accessibilityfocus / keyboardVisible Focus States
Keyboard and assistive technology users need to know where focus is; focus states must not be reset away.
Focus state is part of the interaction path, not a browser default flaw.82%Typography Color Accessibilityforms / accessibilityAccessible Form Feedback
Form feedback should sit near fields, explain why, and remain understandable before and after submission.
Error messages are not punishment; they guide users toward completion.82%Typography Color Accessibilitysemantic-color / stateSemantic and State Colors
Success, warning, error, info, selected, and pending states need clear and stable visual language.
State colors are system feedback and should not be reused casually as decoration or brand emphasis.82%Typography Color Accessibilitycontrast / accessibilityLegibility Contrast
Text contrast must serve reading first, especially for small text, disabled states, notes, and button labels.
Low contrast turns polish into unusability, especially on mobile and in difficult lighting.82%Typography Color Accessibilitycolor / tokensColor Role System
Define color roles before values so one color does not carry too many meanings.
Primary, background, border, text, status, and accent colors need stable responsibilities.82%Typography Color Accessibilitytypography / font-pairingFont Pairing by Function
Font pairing should start from product function: brand voice, long reading, numeric comparison, and controls have different needs.
Typeface differences need a clear purpose; decorative mixing can increase reading cost.82%Typography Color Accessibilitytypography / font-weightFont Weight Emphasis
Font weight creates emphasis; it should not make every label bold.
Too much bold text loses emphasis and makes dense interfaces feel heavy.82%Typography Color Accessibilitytypography / readabilityLine Height and Measure
Long text needs comfortable line height and measure; dense interfaces still need readable text.
Overwide lines lose place, tight line height feels cramped, and loose line height reduces useful density.82%Typography Color Accessibilitytypography / hierarchyType Scale Hierarchy
Type scale should serve page structure and avoid hero-sized text in compact panels.
A clear type scale lets headings, labels, body text, and numbers each do their job.82%