Design Principles

Core guidelines that shape every interaction, component, and visual decision within the Webui ecosystem.

Clarity First

Interfaces should communicate intent instantly. Reduce cognitive load through hierarchy, whitespace, and precise language.

Consistent Patterns

Predictable interactions build trust. Reuse proven components and maintain strict token alignment across all products.

Accessible by Default

Every color contrast, focus state, and touch target meets WCAG 2.1 AA standards without requiring manual overrides.

Color Palette

A semantic, accessible color system built on a primary violet spectrum with neutral grays and functional states.

Primary

Functional

Success#22c55e

Warning#f59e0b

Error#ef4444

Usage Guidelines

Use --primary-500 as the default interactive color. Reserve --primary-600/700 for active/pressed states. Neutral grays handle backgrounds, text, and borders. Always validate contrast ratios before deploying new color combinations.

Typography

Inter for UI, JetBrains Mono for code. A fluid scale optimized for readability across devices.

2xl / 30px

H2 Heading

xl / 20px

H3 Heading

lg / 18px

H4 Subheading

base / 16px

Default body text. Optimized for long-form reading and dense data tables.

sm / 14px

Secondary information, labels, and metadata.

xs / 12px

Captions, badges, and fine print.

Spacing & Grid

A base-4 scale ensures rhythm and alignment across all layouts. All padding/margin values should derive from this scale.

space-1 (4px)

space-2 (8px)

space-3 (12px)

space-4 (16px)

space-6 (24px)

space-8 (32px)

Layout Rules

Use space-4 for component internal padding
Use space-6 for section gaps
Container max-width: 1200px, 12-column grid, 24px gutters

Components

Production-ready UI building blocks with consistent states, variants, and accessibility baked in.

Buttons

Inputs & Forms

Email

Role

Feedback

ℹ️

New features are rolling out gradually. Check the changelog for full details.

✅

Design tokens synced successfully across all connected projects.

Default Primary Success

Surfaces

Content Card

Elevated surface with hover states for data visualization and media.

[data-theme="dark"] .card { background: var(--neutral-800); }

Interaction Patterns

Documented behaviors that ensure predictable, accessible experiences across all touchpoints.

Form Validation

Validate on blur, not on input. Display error messages below the field with --error-700 text and --error-50 background. Never block submission without inline guidance.

Focus Management

All interactive elements must have a visible focus ring. Use outline: 2px solid var(--primary-500) with outline-offset: 2px. Trap focus in modals and dialog flows.

Responsive Behavior

Breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px. Stack columns vertically below 768px. Collapse navigation into drawers. Scale typography fluidly using clamp().