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

^ [ 0 @ + λ | 0 | ∫

] [ % % % ; ^ ^

1 { 0 [ ∫ + / =

: @ λ | |

∂ } λ *

% $ ? + ) /

- > | $ = ] λ & 0 ∂ =

( { ) 0 } : ~ #

_ < & > &

$ $ & $ > # & %

0 < ∫ & [ & ^ ~ : }

) 1 λ = ^

? ~ * * | λ

> = $ = {

[ > ; {

$ ~ * ) ∫ _ ^

& * ∑ & + | ∫ <

? ; ( ∑ [ ; ^ }

@ ? _ & ] ∫ &

@ ) * @ ∂ ∫ ! # ! |

: 0 $ * 0 ! ∑ [ [ ^

) : ∑ ~ $

+ > ] ∫ ? 1 )

@ & # ~ < < * ^ ] } )

_ { + ^ #

$ | ) * > % { ;

= ] > ] / < ( - > >

/ % + =

! ∂ & ] | ? ∫ ) ]

* : ∫ { = ) ^ - =

Code Rain

PatternCode

Layered Composition

Stack patterns for depth.

Mesh + Grid + Dots layered together

Component Reference

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

Input

With Error Something went wrong

Required Field

Disabled This field is locked.

Message Supports auto-resize.

Utilities

Link Accent Subtle

⌘K

Shadows

soft

medium

elevated

glow

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

⌘⇧P to get started

Design with intention.