Interface Lab
Knowledge RAG

Design Knowledge Base

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

Submit principle
8 published principles / 192 in library
Design Systems Page Patternstokens / settings

Design System Token Settings

Token settings pages must show semantics, aliases, modes, affected components, version diffs, and release risk together, not only color and number inputs.

Design tokens are design decisions that move across design tools, code platforms, and component libraries. A settings page does not only edit values; it explains how a value is referenced, how it changes by mode, and which components and versions it affects.96%
Typography Color Accessibilityoklch / color

OKLCH 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 / 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%
Frontend Implementationshadcn / component-governance

Copy-in Component Governance

Copy-in components such as shadcn/ui become local assets once added, so they need token mapping, a state matrix, upgrade policy, and license records.

The advantage of copied source components is control and adaptability. The cost is that the project owns consistency, upgrades, license notices, and design-system adaptation.91%
Design Systems Page Patternstokens / theme

Semantic Theme Token Scope

Theme tokens should define scope and hierarchy so components consume semantic roles instead of scattered one-off color values.

A design system's theming power comes from a few predictable semantic controls: accent color, gray scale, panel background, scaling, radius, and component variants.90%
Design Systems Page Patternstokens / editor

Token Editor Pattern

Token Editor Pattern turns a frequent interface judgment into an executable constraint before generation.

Token editors need to make design decisions, references, and impact scope visible.87%
Design Systems Page Patternstokens / design-system

Design Token Governance

Tokens should express roles and constraints, not merely store colors, type, and spacing.

Maintainable tokens need names, scope, defaults, and prohibited uses so humans and agents can share them.82%
Typography Color Accessibilitycolor / tokens

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