Design System Style Guide

A comprehensive showcase of CodeStorm Hub's design system components and patterns.

Typography

Heading 1 - Main page titles

Heading 2 - Section titles

Heading 3 - Subsection titles

Heading 4 - Content titles

Heading 5 - Small titles

Heading 6 - Smallest titles

Lead paragraph - Important introductory text that provides context and draws attention.

Body text - The main content text used throughout the application. It should be readable and comfortable to read in long passages.

Large text - Emphasized body text for important content.

Small text - Used for captions and fine print.

Muted text - Less important information and metadata.

Colors

Primary

var(--primary)

Secondary

var(--secondary)

Muted

var(--muted)

Accent

var(--accent)

Destructive

var(--destructive)

Success

var(--success)

Warning

var(--warning)

Border

var(--border)

Buttons

Variants

Sizes

Icon Buttons

Layout Components

Grid System

3 Column Grid

Item 1

Item 2

Item 3

4 Column Grid

Item 1

Item 2

Item 3

Item 4

Stack Component

Vertical Stack

Item 1

Item 2

Item 3

Horizontal Stack

Item 1

Item 2

Item 3

Spacing Scale

Our spacing system is based on an 8px grid system for consistent and harmonious layouts.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px