Design Tokens

Core Surfer design system tokens and foundations

Custom Fonts

Premium Typography

Carefully selected fonts for optimal readability and aesthetics

DM Sans

Primary font for body text and UI elements

font-sans

Lato

Distinctive font for headings and emphasis

font-heading

JetBrains Mono

Monospace font for code and technical content

font-mono

Tailwind & shadcn/ui Integration

Built on Solid Foundations

Surfer extends Tailwind and shadcn/ui without replacing them

Tailwind 4.1 Defaults

• Spacing: 25rem increments

• Typography: xs, sm, base, lg, xl...

• Shadows: sm, md, lg, xl, 2xl

• Border radius: sm, md, lg, xl

shadcn/ui Neutrals

• Standard grays: 50, 100, 20..950

• Semantic colors: primary, secondary

• Card, border, input, ring variables

Complete OKLCH Color Palette

12 Complete Color Palettes

All colors use OKLCH for perceptual uniformity and enhanced gradients

red

red-50

bg-red-50

red-100

bg-red-100

red-200

bg-red-200

red-300

bg-red-300

red-400

bg-red-400

red-500

bg-red-500

red-600

bg-red-600

red-700

bg-red-700

red-800

bg-red-800

red-900

bg-red-900

red-950

bg-red-950

orange

orange-50

bg-orange-50

orange-100

bg-orange-100

orange-200

bg-orange-200

orange-300

bg-orange-300

orange-400

bg-orange-400

orange-500

bg-orange-500

orange-600

bg-orange-600

orange-700

bg-orange-700

orange-800

bg-orange-800

orange-900

bg-orange-900

orange-950

bg-orange-950

yellow

yellow-50

bg-yellow-50

yellow-100

bg-yellow-100

yellow-200

bg-yellow-200

yellow-300

bg-yellow-300

yellow-400

bg-yellow-400

yellow-500

bg-yellow-500

yellow-600

bg-yellow-600

yellow-700

bg-yellow-700

yellow-800

bg-yellow-800

yellow-900

bg-yellow-900

yellow-950

bg-yellow-950

green

green-50

bg-green-50

green-100

bg-green-100

green-200

bg-green-200

green-300

bg-green-300

green-400

bg-green-400

green-500

bg-green-500

green-600

bg-green-600

green-700

bg-green-700

green-800

bg-green-800

green-900

bg-green-900

green-950

bg-green-950

mint

mint-50

bg-mint-50

mint-100

bg-mint-100

mint-200

bg-mint-200

mint-300

bg-mint-300

mint-400

bg-mint-400

mint-500

bg-mint-500

mint-600

bg-mint-600

mint-700

bg-mint-700

mint-800

bg-mint-800

mint-900

bg-mint-900

mint-950

bg-mint-950

teal

teal-50

bg-teal-50

teal-100

bg-teal-100

teal-200

bg-teal-200

teal-300

bg-teal-300

teal-400

bg-teal-400

teal-500

bg-teal-500

teal-600

bg-teal-600

teal-700

bg-teal-700

teal-800

bg-teal-800

teal-900

bg-teal-900

teal-950

bg-teal-950

cyan

cyan-50

bg-cyan-50

cyan-100

bg-cyan-100

cyan-200

bg-cyan-200

cyan-300

bg-cyan-300

cyan-400

bg-cyan-400

cyan-500

bg-cyan-500

cyan-600

bg-cyan-600

cyan-700

bg-cyan-700

cyan-800

bg-cyan-800

cyan-900

bg-cyan-900

cyan-950

bg-cyan-950

blue

blue-50

bg-blue-50

blue-100

bg-blue-100

blue-200

bg-blue-200

blue-300

bg-blue-300

blue-400

bg-blue-400

blue-500

bg-blue-500

blue-600

bg-blue-600

blue-700

bg-blue-700

blue-800

bg-blue-800

blue-900

bg-blue-900

blue-950

bg-blue-950

indigo

indigo-50

bg-indigo-50

indigo-100

bg-indigo-100

indigo-200

bg-indigo-200

indigo-300

bg-indigo-300

indigo-400

bg-indigo-400

indigo-500

bg-indigo-500

indigo-600

bg-indigo-600

indigo-700

bg-indigo-700

indigo-800

bg-indigo-800

indigo-900

bg-indigo-900

indigo-950

bg-indigo-950

purple

purple-50

bg-purple-50

purple-100

bg-purple-100

purple-200

bg-purple-200

purple-300

bg-purple-300

purple-400

bg-purple-400

purple-500

bg-purple-500

purple-600

bg-purple-600

purple-700

bg-purple-700

purple-800

bg-purple-800

purple-900

bg-purple-900

purple-950

bg-purple-950

pink

pink-50

bg-pink-50

pink-100

bg-pink-100

pink-200

bg-pink-200

pink-300

bg-pink-300

pink-400

bg-pink-400

pink-500

bg-pink-500

pink-600

bg-pink-600

pink-700

bg-pink-700

pink-800

bg-pink-800

pink-900

bg-pink-900

pink-950

bg-pink-950

brown

brown-50

bg-brown-50

brown-100

bg-brown-100

brown-200

bg-brown-200

brown-300

bg-brown-300

brown-400

bg-brown-400

brown-500

bg-brown-500

brown-600

bg-brown-600

brown-700

bg-brown-700

brown-800

bg-brown-800

brown-900

bg-brown-900

brown-950

bg-brown-950

Warm Gradients

Red → Orange

Cool Gradients

Teal → Cyan

Vibrant Gradients

Purple → Pink

CSS-First Design Philosophy

Minimal Extension, Maximum Impact

Surfer is an add-on layer for shadcn/ui, not a replacement

CSS-First: @theme inline directive, no JavaScript tokens

Custom: OKLCH colors (mint, teal, brown), DM Sans & Lato fonts

Leveraged: Tailwind spacing, typography, shadows, breakpoints

Result: Zero runtime overhead, 92% smaller bundle

What Surfer Provides

Custom Fonts

DM Sans, JetBrains Mono, Lato

OKLCH Colors

Mint, Teal, Brown color scales

Zero Runtime

CSS-only, no JavaScript tokens

Minimal

Only adds what Tailwind doesn't have

Pill Component System

Professional Pill Components

New pill-shaped buttons and badges following Surfer design principles

Pill Buttons

Button Variants

Status Buttons

Button Sizes

Pill Badges

Badge Variants

PrimarySuccessWarningDanger

Badge Sizes

XSSMMDLG

Special Features

With DotRemovable

Usage Examples

<button className="surfer-btn-pill surfer-btn-pill-md surfer-btn-pill-primary">Primary</button>

<span className="surfer-badge-pill surfer-badge-pill-sm surfer-badge-pill-success">Active</span>