Design System v1.0

Style Guide

A comprehensive design system built with modern tools. Tailwind CSS v4, Framer Motion, and cutting-edge techniques for exceptional user experiences.

ColorsTypographyButtonsCardsEffectsInteractions
Colors

Colors

A carefully crafted color palette that adapts seamlessly between light and dark themes.

Base Colors

Background

--color-background

Foreground

--color-foreground

Card

--color-card

Surface

--color-surface

Accent Colors

Primary

--color-primary

Secondary

--color-secondary

Success

--color-success

Warning

--color-warning

Error

--color-error

Gradients & Effects

Animated Gradient

Smooth color transition

Mesh Gradient

Dynamic blob animation

Glass Morphism

Frosted glass effect

Noise Texture

Grain overlay effect

Typography

Typography

A modern type scale using Geist font family for optimal readability and aesthetic appeal.

Type Scale

Display

72px

The quick brown fox

H1

48px

The quick brown fox

H2

36px

The quick brown fox

H3

24px

The quick brown fox

H4

20px

The quick brown fox

Body

16px

The quick brown fox

Small

14px

The quick brown fox

Caption

12px

The quick brown fox

Gradient Text

Beautiful gradient text

Monospace

const design = {
  font: "Geist",
  style: "modern",
  quality: "exceptional"
};
Buttons

Buttons

Interactive button components with multiple variants and sizes.

<Button variant="default">Click me</Button>
Cards

Cards

3D perspective cards with smooth tilt effects and hover states.

Performance

Lightning fast

Security

Enterprise grade

Global

Edge deployed

Badges

Badges

Status indicators and labels for categorization.

default
secondary
success
warning
error
outline
Micro-interactions

Micro-interactions

Delightful animations and feedback patterns that enhance user experience.

Magnetic Hover

Spring Toggle

Number Morph

0