Style Guide

Comprehensive typography, color, and spacing systems for consistent design across platforms.

🔍 See Design Systems ✨ Submit Your System

Color System

Primary

indigo-500 - #6366F1

indigo-600 - #4F46E5

indigo-700 - #4338CA

Secondary

purple-500 - #8B5CF6

purple-600 - #7C3AED

purple-700 - #6D28D9

Neutral

gray-50 - #F9FAFB

gray-400 - #9CA3AF

gray-700 - #374151

Success

green-500 - #10B981

green-600 - #059669

green-700 - #047857

Typography System

Headings

H1 Heading

font-sans

H2 Heading

font-sans

H3 Heading

font-sans

Body Text

Body Copy

The default text size for paragraphs and labels.

Small Text

Used for captions and footnotes.


                                text-xl

Tailwind classes for consistent typography

Spacing & Sizing

Our spacing system follows the 8px scale for consistent layout patterns.

p-0

p-1

p-3

p-4

p-5

p-6

p-10

UI Components

Buttons

Cards

Standard content container with elevation and background.

Inputs

Nav Pills

Accessibility Standards

Color Contrast

✔️ All text has at least 4.5:1 contrast ratio on standard backgrounds

✔️ WCAG AA compliance for large text elements

✔️ Focus states follow system color preferences

Keyboard Accessibility

Tab Order

Logical navigation sequence for screen readers

ARIA Labels

Descriptive labels for interactive elements

Skip Links

Keyboard shortcut for main content access

Focus States

Visual indicators for tab navigation

Framework Integration

Tailwind CSS

Utility-first classes for rapid prototyping.

Bootstrap

SASS-based responsive grid system.

Alpine.js

Reactive component classes and directives.

Foundation

Advanced responsive framework components.

Ready to implement this style guide?

Share your design system with thousands of developers and designers.

Contribute Your System