v2.1 Documentation

Design Guidelines

Webui's design system ensures consistency, scalability, and accessibility across all products, marketing materials, and third-party integrations. Use this guide as your source of truth for typography, color, spacing, components, and accessibility standards.

Typography

We use a clean, modern sans-serif typeface optimized for screen readability. All type scales follow a 1.25 modular ratio for visual harmony.

Heading 1
The quick brown fox
Heading 2
The quick brown fox
Heading 3
The quick brown fox
Body
The quick brown fox jumps over the lazy dog. Use this for standard paragraphs and UI text.
Small
Secondary information, captions, and legal text.
Code
const ui = new Webui();

Color System

Our palette is built for clarity, contrast, and brand recognition. Always maintain WCAG AA compliance for text backgrounds.

Primary

#6C3CE1

Primary Light

#8B5CF6

Accent

#00D4AA

Dark

#0F0F1A

Text Primary

#374151

Text Secondary

#6B7280

Success

#10B981

Error

#EF4444

Spacing & Grid

All spacing uses a 4px base grid. Consistent padding and margins create visual rhythm and improve scannability.

4px
8px
12px
16px
24px
32px
48px
64px
96px

UI Components

Components should follow established patterns. Use the provided tokens and never hardcode spacing or colors.

Buttons

✓ Use primary for main CTAs only
✗ Never stack more than 2 buttons per row

Forms & Inputs

All inputs must have 40px touch targets, visible focus rings, and inline validation.

✓ Always label inputs clearly
✗ Avoid placeholders as the only label

Accessibility Standards

Webui adheres to WCAG 2.1 AA standards. All interfaces must be keyboard navigable, screen-reader friendly, and color-independent.

🔍 Contrast Ratios

Text must meet 4.5:1 for normal text and 3:1 for large text. Use our built-in contrast checker before publishing.

⌨️ Keyboard Navigation

All interactive elements must be reachable via Tab/Shift+Tab. Focus states must be clearly visible with a 2px outline.

🖼️ Alt Text & Semantics

Decorative images must have `alt=""`. Informative images require descriptive text. Use proper heading hierarchy (h1→h6).

Implementation Notes

When integrating Webui components into external projects, follow these best practices:

  • Import the core design tokens via CSS variables or our npm package
  • Use the provided utility classes for spacing and layout
  • Run automated a11y audits using `webui-cli audit` before deployment
  • Report bugs or request new components via the developer portal