Interface Lab
Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle
6 published principles / 192 in library
Frontend Implementationmaterial / glass

Translucent Material Readability Contract

Glass, acrylic, mica, smoke, and backdrop blur are not just style filters. They need explicit surface role, backdrop variability, hierarchy, contrast, user preferences, forced-colors behavior, and fallback.

The value of translucent material is connecting interface hierarchy with background context. If it weakens reading, state recognition, keyboard focus, or accessibility preferences, it should fall back to an opaque surface.96%
Typography Color Accessibilitybackground / texture

Decorative 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 Accessibilitycolor / contrast

Contrast-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 Accessibilitylinks / contrast

Link 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 Accessibilitydark-mode / contrast

Dark 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 Accessibilitycontrast / accessibility

Legibility 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%