v1.0 Design System

Design with
intention.

A refined design system built with Svelte 5 and Tailwind CSS v4 featuring dark & light themes. Electric violet accents meet editorial typography for a distinctive developer identity.

Background Patterns

Four developer-themed patterns for atmospheric depth. Layer them for richer compositions.

Dot Grid

PatternDots

Line Grid

PatternGrid

Grid + Crosses

PatternGrid crosses

Gradient Mesh

PatternMesh vivid

Code Rain

PatternCode

Layered Composition

Stack patterns for depth.

Mesh + Grid + Dots layered together

Components & Tokens

Quick reference for all design system primitives.

Color Palette

Canvas canvas
Surface surface
Raised surface-raised
Overlay overlay
Accent
Hover
Muted
Success
Warning
Error
Info

Buttons

Badges

Default Accent Success Warning Error Info

Cards

Default

Raised

Bordered

Hover me

Typography

Display Heading

Sans Heading

Body text in Outfit. Clean, readable, professional.

const code = 'JetBrains Mono';

Form Controls

Something went wrong
This field is locked.
Supports auto-resize.

Utilities

Shadows

soft

medium

elevated

glow

Built with Svelte 5 · Tailwind CSS v4 · Outfit · JetBrains Mono

P to get started