Style Guide

Design system reference for colors, typography, spacing, and components

Colors

Color palette using OKLCH color space for consistent, accessible colors across light and dark modes.

Primary

Primary

Foreground

Secondary

Secondary

Foreground

Accent

Accent

Foreground

Muted

Muted

Foreground

Destructive

Destructive

Subtle

Chart Colors

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Background

Background

Card

Card

Popover

Typography

Using the Poppins font family with various sizes and weights.

Headings (H1-H6)

H1 - Main page heading (text-4xl = 2.25rem / 36px)

Heading Level 1

H2 - Section heading (text-3xl = 1.875rem / 30px)

Heading Level 2

H3 - Subsection heading (text-2xl = 1.5rem / 24px)

Heading Level 3

H4 - Card/component heading (text-xl = 1.25rem / 20px)

Heading Level 4

H5 - Small heading (text-lg = 1.125rem / 18px)

Heading Level 5

H6 - Smallest heading (text-base = 1rem / 16px)

Heading Level 6

Font Sizes

text-xs (0.75rem)

The quick brown fox jumps over the lazy dog

text-sm (0.875rem)

The quick brown fox jumps over the lazy dog

text-base (1rem)

The quick brown fox jumps over the lazy dog

text-lg (1.125rem)

The quick brown fox jumps over the lazy dog

text-xl (1.25rem)

The quick brown fox jumps over the lazy dog

text-2xl (1.5rem)

The quick brown fox jumps over the lazy dog

text-3xl (1.875rem)

The quick brown fox jumps over the lazy dog

text-4xl (2.25rem)

The quick brown fox jumps over the lazy dog

Font Weights

Thin (100) - The quick brown fox

Extra Light (200) - The quick brown fox

Light (300) - The quick brown fox

Normal (400) - The quick brown fox

Medium (500) - The quick brown fox

Semibold (600) - The quick brown fox

Bold (700) - The quick brown fox

Extra Bold (800) - The quick brown fox

Black (900) - The quick brown fox

Spacing

Consistent spacing scale for padding and margins.

Spacing Scale

space-1

0.25rem (4px)

space-2

0.5rem (8px)

space-3

0.75rem (12px)

space-4

1rem (16px)

space-5

1.25rem (20px)

space-6

1.5rem (24px)

space-8

2rem (32px)

space-10

2.5rem (40px)

space-12

3rem (48px)

space-16

4rem (64px)

Border Radius

Border radius tokens based on the theme radius variable.

Radius Scale

rounded-sm

calc(var(--radius) - 4px)

rounded-md

calc(var(--radius) - 2px)

rounded-lg

var(--radius)

rounded-xl

calc(var(--radius) + 4px)

CSS Variables

Theme variables defined in globals.css using OKLCH color space.

Color Variables

--background

oklch(1 0 0)

--foreground

oklch(0.145 0 0)

--primary

oklch(0.205 0 0)

--secondary

oklch(0.97 0 0)

--accent

oklch(0.97 0 0)

--muted

oklch(0.97 0 0)

--destructive

oklch(0.577 0.245 27.325)

--border

oklch(0.922 0 0)

--input

oklch(0.922 0 0)

--ring

oklch(0.708 0 0)

Layout & Radius Variables

Border Radius

--radius0.625rem (10px)

--radius-smcalc(var(--radius) - 4px)

--radius-mdcalc(var(--radius) - 2px)

--radius-lgvar(--radius)

--radius-xlcalc(var(--radius) + 4px)

Layout

--max-width1533px

Typography

--font-sansPoppins, sans-serif

--font-monovar(--font-geist-mono)

Chart Color Variables

--chart-1

oklch(0.646 0.222 41.116)

--chart-2

oklch(0.6 0.118 184.704)

--chart-3

oklch(0.398 0.07 227.392)

--chart-4

oklch(0.828 0.189 84.429)

--chart-5

oklch(0.769 0.188 70.08)

Sidebar Color Variables

--sidebaroklch(0.985 0 0)

--sidebar-foregroundoklch(0.145 0 0)

--sidebar-primaryoklch(0.205 0 0)

--sidebar-accentoklch(0.97 0 0)

--sidebar-borderoklch(0.922 0 0)

--sidebar-ringoklch(0.708 0 0)

OKLCH Color Space

This design system uses OKLCH (Oklab Lightness Chroma Hue) color space for better perceptual uniformity and accessibility. Colors automatically adapt between light and dark modes with different OKLCH values defined in globals.css.

Components

Shadcn UI components with consistent styling.

Buttons

Badges

DefaultSecondaryDestructiveOutline

Alerts

Information

This is an informational alert with default styling.

Error

This is a destructive alert for errors and warnings.

Form Inputs

Input

Accept terms and conditions

Enable notifications

Slider

Progress

Card Component

This is an example of the Card component with CardHeader, CardTitle, and CardContent. Cards are used throughout the design system for containing related content.

Contact Form

Full name

Email

Subject

Message

Send me product updates

Pricing Card

$29per month

Perfect for growing teams that need advanced analytics and support.

Unlimited projects and dashboards

Advanced collaboration tools

Priority email support

Exportable reports

Testimonial

AJ

Amina Jensen

VP Product, Northwind

“The design system keeps our marketing site and dashboard perfectly aligned. Shipping new pages takes hours instead of days.”

Ready to launch

Design faster. Ship smarter.

Reuse these patterns across landing pages and dashboard experiences to keep your brand cohesive.