Colors

Core

background

--ds-background

surface

--ds-surface

surface-alt

--ds-surface-alt

primary

--ds-primary

secondary

--ds-secondary

border

--ds-border

border-focus

--ds-border-focus

Text

text

--ds-text

text-muted

--ds-text-muted

Semantic

success

--ds-success

warning

--ds-warning

error

--ds-error

info

--ds-info

income

--ds-income

expense

--ds-expense

Chart Palette

1

--ds-chart-1

2

--ds-chart-2

3

--ds-chart-3

4

--ds-chart-4

5

--ds-chart-5

6

--ds-chart-6

7

--ds-chart-7

8

--ds-chart-8

9

--ds-chart-9

10

--ds-chart-10

GitHub Contributions

Typography

h1 — Inter 1.75rem

h2 — Inter 1.375rem

h3 — Inter 1.125rem

h4 — Inter 1rem

h5 — Inter 0.875rem

h6 — Inter 0.8125rem

Body text — Inter 15px. The quick brown fox jumps over the lazy dog.

Muted text — secondary information and labels.

Mono accent (.ds-mono) — JetBrains Mono for code, nav, labels.

Spacing

xs (0.25rem)

sm (0.5rem)

md (0.75rem)

lg (1rem)

xl (1.5rem)

2xl (2rem)

Border Radius

none

sm

md

lg

xl

Shadows

shadow-sm

shadow-md

shadow-lg

shadow-xl

Utility Classes

Panels

.ds-panel

.ds-panel-accent

.ds-glass

Text Effects

Glowing text (.ds-text-glow)

Prefixed text (.ds-prefix)

Bracketed text (.ds-bracket)

CRT glow (.ds-crt-glow)

Indicators

default success warning error primary

Interactive

Keyboard shortcut: Ctrl + K

Row 1 (hover me)

Row 2 (hover me)

Row 3 (hover me)

Loading

Scrollbar

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Forms

Inputs

Label Helper text goes here.

Select Dropdown with custom chevron.

Compact Input

Buttons

Table

Name	Role	Amount
Alice	Guitar	R$ 350,00
Bob	Drums	R$ 350,00
Carol	Vocals	R$ 500,00

Segmented Control

Pixel Waves

.ds-pixel-waves

Bioluminescent

.ds-bioluminescent

Accent dot with glow

Animations

Click a box to replay the animation.

fade-in

slide-up

slide-down

@personal/design-system