Universal Design System

Derived from 100 production websites. 9 structural palettes. 43 components. Built for WCAG 2.2 AA compliance.

100
Sites Analyzed
9
Structural Palettes
43
Components
AA
WCAG Compliant

Color Tokens

Semantic color system with WCAG AA contrast ratios on all themes.

Brand

brand-primary
--color-brand-primary
brand-secondary
--color-brand-secondary
brand-accent
--color-brand-accent
brand-muted
--color-brand-muted

Neutral

bg-primary
--color-bg-primary
bg-secondary
--color-bg-secondary
bg-tertiary
--color-bg-tertiary
bg-inverse
--color-bg-inverse
text-primary
--color-text-primary
text-secondary
--color-text-secondary
text-tertiary
--color-text-tertiary

Semantic

success
--color-success
warning
--color-warning
error
--color-error
info
--color-info

Typography

Fluid type scale using CSS clamp(). No breakpoint jumps.

Display XL
--text-display-xl · clamp(2.5rem, 5vw + 1rem, 4.5rem) · weight 800
Display Large
--text-display-lg · clamp(2.25rem, 4vw + 1rem, 3.75rem) · weight 800
Display Medium
--text-display-md · clamp(1.875rem, 3vw + 0.75rem, 3rem) · weight 800
Heading Large
--text-heading-lg · clamp(1.5rem, 2vw + 0.5rem, 2.25rem) · weight 700
Heading Medium
--text-heading-md · clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem) · weight 600
Heading Small
--text-heading-sm · clamp(1.125rem, 1vw + 0.5rem, 1.375rem) · weight 600
Body Large — for lead paragraphs and featured text passages.
--text-body-lg · clamp(1.125rem, 0.5vw + 0.875rem, 1.25rem) · weight 400
Body Medium — default body text size for paragraphs, lists, and content.
--text-body-md · 1rem · weight 400
Body Small — captions, metadata, helper text
--text-body-sm · 0.875rem · weight 400
Label / Overline
--text-label · 0.75rem · weight 600 · uppercase
const monospace = "JetBrains Mono";
--font-mono · Code, terminals, technical

Spacing Scale

4px base grid. Intentional gaps enforce consistency.

1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px

Shadows & Radius

Theme-aware elevation. Dark mode uses glow-borders instead of black shadows.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-glow

Border Radius

sm
md
lg
xl
2xl
full

Buttons

6 variants, 4 sizes. All meet 44px minimum touch target.

Variants

Sizes

Form Components

Accessible form controls with proper label association, error states, and 44px touch targets.

Text Input

As it appears on your ID.

Select & Textarea

Checkbox & Toggle

Dark mode
Notifications

Alerts

Feedback components for success, warning, error, and info states.

Navigation Bar

Sticky nav with backdrop blur. 64px desktop, 56px mobile.

Hero Sections

Three core variants: light, gradient, and dark.

Build faster, together.

The platform teams love for shipping products that delight customers.

The future is here.

AI-powered workflows that transform how your team creates and collaborates.

Code at the speed of thought.

Intelligent development tools that understand your intent.

Feature Cards

Icon-top card pattern with hover lift. Used by 88% of analyzed sites.

⚡

Lightning Fast

Sub-second response times with edge computing and smart caching layers.

🔒

Enterprise Security

SOC 2 Type II certified with end-to-end encryption and role-based access.

⚙

API First

RESTful and GraphQL APIs with comprehensive SDKs in 12 languages.

📊

Real-time Analytics

Live dashboards, custom metrics, and automated reporting out of the box.

🌐

Global Scale

Multi-region deployment with 99.99% uptime SLA and automatic failover.

🤖

AI-Powered

Built-in machine learning models that improve with every interaction.

Social Proof

Logo strips and trust signals. Grayscale at rest, color on hover.

Trusted by industry leaders
GoogleMicrosoftStripe ShopifyNotionLinear

Pricing Table

3-column with highlighted recommendation. Toggle-ready for monthly/annual.

Starter
$0
per month
For individuals and small projects.
  • Up to 3 projects
  • 1GB storage
  • Community support
  • Basic analytics
Popular
Pro
$29
per month
For growing teams that need more.
  • Unlimited projects
  • 50GB storage
  • Priority support
  • Advanced analytics
  • Custom integrations
Enterprise
Custom
contact sales
For organizations with advanced needs.
  • Everything in Pro
  • Unlimited storage
  • Dedicated support
  • SSO & SCIM
  • Custom SLA
  • On-premise option

Testimonial

Quote card with avatar, name, and role.

“This platform completely transformed our workflow. We shipped 3x faster in the first quarter and our team actually enjoys the development experience.”
Sarah Kim
VP Engineering, TechCorp

Code Block

Syntax-highlighted code with token-driven colors. No hardcoded hex.

typescript
// Initialize the design system
import { createTheme, applyTokens } from '@acme/design-system';

const theme = createTheme({
  name: 'minimal-saas',
  tokens: {
    brand: '#2563EB',
    radius: '8px',
  },
});

applyTokens(document.documentElement, theme);

Animation Patterns

Hover and scroll-triggered effects. Disabled when prefers-reduced-motion is set.

Hover Lift

Scale

Glow

Fade In

Multi-column with newsletter CTA, using inverse background tokens.