Skip to main content
Back to Lab

Design System Style Guide

Complete reference for all components, patterns, and design tokens. Use the theme switcher (bottom-right) to see how everything adapts.

Typography#

Zalando Sans for bold fashion-forward headlines, Switzer for readable body text, and JetBrains Mono for code.

Display Font – Heading Levels

Zalando Sans with fluid sizing using clamp()

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Design Tokens

font-family:
Zalando Sans (var(--font-display))
h1-size:
clamp(1.75rem, 4vw + 0.75rem, 4.5rem)
h1-weight:
900, uppercase, tight tracking
h2-size:
clamp(2.25rem, 5vw + 0.5rem, 4rem)
letter-spacing:
-0.03em to 0.35em
tsx

Character Specimen

Full character set showcase

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm

Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789 !@#$%^&*()

tsx

Body Text – Switzer

Self-hosted with multiple weights for optimal readability

Small text (14px) — Used for captions, labels, and metadata

Base text (16-18px) — Primary body copy with optimal readability

Large text (18-20px) — Emphasized body text and introductions

Design Tokens

font-family:
Switzer (var(--font-body))
weights:
300 (Light), 400 (Regular), 500 (Medium), 600 (Semibold)
base-size:
clamp(1rem, 0.95rem + 0.25vw, 1.125rem)
line-height:
1.7
tsx

Monospace – Code

JetBrains Mono for code and technical content

Inline const code = true example

function example() {
  return "Hello, World!";
}

Design Tokens

font-family:
JetBrains Mono, monospace
font-size:
0.875rem (14px)
tsx

Colors#

Five switchable theme palettes with consistent design tokens across all themes.

Cloud Dancer (Default)

2026 Pantone-inspired palette with warm neutrals and earthy accent

brand

light

text

ui

Dusty Jewel

Editorial magazine aesthetic with muted jewel tones

brand

light

text

ui

Wellness Mint

Future-forward clean palette with refreshing mint accent

brand

light

text

ui

Thermal Glow

Atmospheric warmth with terracotta and gold accents

brand

light

text

ui

Midnight (Dark)

Dark mode option with Jeff Green neon green accent

brand

dark

text

ui

Design System Utilities

Theme-aware utility classes that adapt automatically

.bg-ds-primary
.bg-ds-secondary
.bg-ds-accent
.border-ds-strong
tsx
custom-styles.csscss

Spacing#

Consistent spacing scale based on Tailwind's default system.

Spacing Scale

Common spacing values (4px base unit)

10.25rem(4px)
20.5rem(8px)
41rem(16px)
61.5rem(24px)
82rem(32px)
123rem(48px)
164rem(64px)
246rem(96px)

Common Spacing Patterns

Frequently used spacing combinations

p-6 (Card padding)
py-16 (Section spacing)
Item
Item

gap-4 (Flex gap)

tsx

Buttons#

Button component with multiple variants, sizes, and states using shadcn/ui.

Button Variants

All available button styles

ButtonVariants.tsxtsx

Button Sizes

Small, default, large, and icon-only sizes

ButtonSizes.tsxtsx

Button States

Default, disabled, and with icons

ButtonStates.tsxtsx

Forms#

Form inputs, labels, and textarea components with proper accessibility.

Input Field

Text input with label

InputExample.tsxtsx

Textarea

Multi-line text input

TextareaExample.tsxtsx

Complete Form

Form with multiple fields and submit button

FormExample.tsxtsx

Cards#

Card components with various styles and content patterns.

Basic Card

Standard card with border and padding

Card Title

This is a basic card component with consistent padding and styling.

BasicCard.tsxtsx

Interactive Card

Card with hover effects

Interactive Card

Hover over this card to see the lift effect and border color change.

InteractiveCard.tsxtsx

Card with Icon

Featured card with icon header

Featured Card

Card with an icon to draw attention to important content.

IconCard.tsxtsx

Feedback#

Badges, tags, and interactive feedback components.

Copy Button

Button with copy-to-clipboard functionality

tsx

Badges & Tags

Tech stack and status tags

ReactTypeScriptFeaturedDesign System
tsx

Layout Patterns#

Common container, grid, and flexbox patterns.

Container Widths

container mx-auto
max-w-4xl
max-w-6xl
tsx

Grid Layouts

Responsive grid patterns

Col 1
Col 2
Col 1
Col 2
Col 3
tsx

Flex Layouts

Common flexbox arrangements

Left
Right
Centered
Stack 1
Stack 2
tsx

Animations#

Scroll-triggered reveals, transitions, and motion patterns.

Scroll Reveal

Elements animate in as you scroll (refresh to see again)

Fade In
Slide Up
Slide Up (Delayed)
tsx

Transition Utilities

Smooth transitions for hover effects

Fast Color Transition
Scale on Hover
tsx

Special Effects#

Gradient text, glows, and decorative animations.

Gradient Text

Colorful gradient text effects

Lime to Cyan Gradient

Green to Pink Gradient

tsx

Glassmorphism / Liquid Glass

Frosted glass effects with backdrop blur — Apple's 2025 design language

Light Glass (Light Mode)

backdrop-blur-md bg-white/20

Theme Glass

backdrop-blur-xl bg-ds-elevated/50

Glass Panel

Uses glass-panel utility class

Subtle Glass

Lighter blur for performance

Design Tokens

--glass-bg:
rgba(255, 255, 255, 0.7)
--glass-bg-subtle:
rgba(255, 255, 255, 0.4)
--glass-border:
rgba(255, 255, 255, 0.3)
--glass-shadow:
rgba(0, 0, 0, 0.05)
tsx

Neon Glow Effects

Text and box glow with optional pulse

Glowing Text

Box with Glow

Pulsing Glow

tsx

Animated Underline

Underline that animates on hover

Hover for Animated Underline
tsx

Multi-Theme System#

Five switchable color palettes with automatic component adaptation.

Theme Architecture

All components use design system utilities (bg-ds-*, text-ds-*, border-ds-*) that automatically adapt to the selected theme. Switch themes using the switcher at the top of the page to see components update in real-time.

Component Adaptation

The same components rendered in the current theme

Sample Card

This card adapts to all themes

Secondary Surface

Uses secondary background

Building Theme-Aware Components

Use design system utilities or CSS variables

This component works in all themes

tsx

Complete design system reference • Switch themes to see adaptation • Back to Lab