PixelPulse Design System

Design System Foundation

PixelPulse is a comprehensive design system built for creating premium, futuristic interfaces with glassmorphism, depth effects, and micro-interactions.

Color System

Adaptive palette with semantic tokens for dark/light modes

Typography

Perfectly balanced type scale with responsive sizing

Components

63+ reusable components with variants and states

Color Palette Core

Primary Gradient

Brand Primary

159, 122, 234 to 255, 107, 165

--color-primary --color-secondary
Accent

Accent

85, 230, 193

--color-accent
Base Dark

Dark

17, 17, 17

--color-dark --color-darker
Light

Light

245, 245, 247

--color-light

Extended Palette

900
800
700
600
500
400
300
200
100
50

Usage Guidelines

Primary Colors

Use the primary gradient for interactive elements like buttons and important CTAs. Reserve solid primary for supporting elements.

Accent Colors

Use accent colors for success states, positive actions, and to draw attention to key information.

Info Alert

Typography Core

Heading 1

var(--text-5xl) • 3rem • 48px

Heading 2

var(--text-4xl) • 2.25rem • 36px

Heading 3

var(--text-3xl) • 1.875rem • 30px

Heading 4

var(--text-2xl) • 1.5rem • 24px

Heading 5

var(--text-xl) • 1.25rem • 20px

Paragraph Large

var(--text-lg) • 1.125rem • 18px

Paragraph Regular

var(--text-base) • 1rem • 16px

Paragraph Small

var(--text-sm) • 0.875rem • 14px

Caption

var(--text-xs) • 0.75rem • 12px

Font Family

System UI Stack

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif

Uses the native system font stack for maximum performance and familiarity across platforms.

Line Height & Spacing

1.6 (Body) • 1.2 (Headings)

Letter-spacing: 0.01em (tight) for headings, normal for body

Optimized for readability in both light and dark modes with subtle letter-spacing adjustments.

Design Tokens Core

Spacing Scale

xxs

var(--space-xxs)

xs

var(--space-xs)

sm

var(--space-sm)

md

var(--space-md)

lg

var(--space-lg)

xl

var(--space-xl)

2xl

var(--space-2xl)

Border Radius

var(--radius-xs) • 4px

var(--radius-sm) • 8px

var(--radius-md) • 12px

var(--radius-lg) • 16px

var(--radius-xl) • 24px

var(--radius-2xl) • 32px

var(--radius-full) • 9999px

Elevation & Shadows

var(--shadow-xs)

var(--shadow-sm)

var(--shadow-md)

var(--shadow-lg)

var(--shadow-xl)

Blur Levels

var(--blur-xs)

var(--blur-sm)

var(--blur-md)

var(--blur-lg)

Components Preview

Buttons

Button Sizes

Icon Buttons

Cards

Glass Card

With subtle blur effect and border

User Card

@username

This is a user profile card with glass effect and hover state.

24 Followers 12 Posts

Premium Card

Exclusive content

Special gradient background with subtle glow effect.

Forms & Inputs

Text Inputs

Select & Checkbox