Handfish Design System

design tokens

Base Palette

1

2

3

4

5

6

7

Accent Palette

1

2

3

4

Semantic Colors

red

green

yellow

blue

typography

Font Sizes

Extra Small (10px)

Small (12px)

Base (14px)

Medium (16px)

Large (18px)

Extra Large (20px)

2X Large (24px)

Font Weights & Styles

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

Monospace font

Text Colors

Muted text

Dim text

Normal text

Bright text

Accent text

Accent bright

Success text

Warning text

Error text

Semantic States

Changes saved successfully

Unsaved changes will be lost

Failed to connect to server

buttons

Variants

With Icons

inputs

Text Input

Project Name

States

form elements

Checkboxes

Enable effect Loop animation Locked

Radio Buttons

Add Multiply Screen

Low quality Medium quality High quality

Number Input

Width

Height

FPS

Text Inputs

Textarea

File Input

Progress Bars

Default (40%)

Gradient (75%)

Indeterminate

Separators

Content above

Default separator

Accent separator

Left

Right

Inline Code & Kbd

Use noise(freq: 4) to generate patterns.

Press Ctrl + S to save.

o0 = noise(freq: 4.0)
render(o0)

Scrollbar

Scroll to see themed scrollbar.

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

toggle switch

States

unchecked

slider value

Variants

Volume

Speed

Opacity

Disabled

50

select dropdown

Inline (few options)

Effect

blur

More Options

With Categories

-

dropdown menu

Basic

Edit

Duplicate

Delete

-

Selectable

Default

Monokai

Dracula

Nord

default

justify button group

States

Align

Disabled

center

color picker

Default (RGB)

Fill

Stroke

#a5b8ff

Color Modes

HSV

OKLCH

color wheel

RGB, HSV, OkLab, OKLCH

#6bffa5

color swatch

Sizes

States

#a5b8ff

gradient stops

Draggable Stops

-

vector 3d picker

Default

[0, 1, 0]

Preset Values

code editor

DSL Tokenizer

Theme

GitHub Dark

Monokai

Dracula

Nord

One Dark

Solarized Dark

Solarized Light

GitHub Light

Plain Text (no tokenizer)

image magnifier

Hover over the canvas

toasts

Notifications

tooltips

Hover for Tooltip

surfaces

Surface

Translucent surface with blur

Panel

Panel with border and blur

Card

Card surface with padding

tags, badges & tabs

Badges

default success warning error muted

design tokens

Base Palette

Accent Palette

Semantic Colors

typography

Font Sizes

Font Weights & Styles

Text Colors

Semantic States

buttons

Variants

With Icons

inputs

Text Input

States

form elements

Checkboxes

Radio Buttons

Number Input

Text Inputs

Textarea

File Input

Progress Bars

Separators

Inline Code & Kbd

Scrollbar

toggle switch

States

slider value

Variants

select dropdown

Inline (few options)

More Options

With Categories

dropdown menu

Basic

Selectable

justify button group

States

color picker

Default (RGB)

Color Modes

color wheel

RGB, HSV, OkLab, OKLCH

color swatch

Sizes

States

gradient stops

Draggable Stops

vector 3d picker

Default

Preset Values

code editor

DSL Tokenizer

Theme

Plain Text (no tokenizer)

image magnifier

Hover over the canvas

toasts

Notifications

tooltips

Hover for Tooltip

surfaces

Surface

Panel

Card

tags, badges & tabs

Tags

Badges

Tabs (underline)

Tabs (pill)

menus & toolbars

Menu Panel

Action Buttons

Icon Buttons

Toolbar