UI Kit

The component system is a combination of geometric-grotesque display type over monospace body with one electric-lime accent, sharp corners and hairline borders.

Colour

Background

--background

Foreground

--foreground

Primary (lime)

--primary

Card

--card

Muted

--muted

Muted fg

--muted-foreground

Border

--border

Destructive

--destructive

Type scale

Display

Heading

Monospace body — the quick brown fox jumps over the lazy dog.

Mono label

Highlight marker

Bold statement. Loud where it counts.

A marker that wraps across every line it covers.

Buttons

Badges & icon badges

OutlineSolidAccent

Cards

Your Profile

A surface with a hairline border and sharp corners.

Open

Quick Help

Cards compose a header, content and an arrow action.

Open

Form fields

Email address

Password

Options

Toggle, radio & progress

Push notifications

Option AOption BOption C

70%