Ludo Design SystemRead the docs

Design system

Components, tokens, and motion for Ludo product surfaces.

48 components on one calm system. Purple #825FFF, Geist, weight capped at 600. Built on shadcn and Tailwind v4 so tokens move cleanly into product surfaces.

Browse componentsRead the docs

Live preview

Revenue
$48,250.00
+12%
vs yesterday
Transactions
3,041,892
Active wallets
12,418
Self-service
89%
+4 pts
unassisted

Foundations

The tokens everything is built on

Colour, type, radius, shadow, and motion. One source of truth, shipped as a theme you install first.

Colour

Palette

Brand

primary

#825FFF

--primary

pink

#F76CAF

--chart-3

yellow

#FFD059

--chart-2

green

#67E8AA

--chart-4

lilac

#C8B6FF

--chart-5

Chart

chart-1

#825FFF

--chart-1

chart-2

#FFD059

--chart-2

chart-3

#F76CAF

--chart-3

chart-4

#67E8AA

--chart-4

chart-5

#C8B6FF

--chart-5

Semantic

success

#10B981

--success

warning

#F59E0B

--warning

error

#EF4444

--error

info

#3B82F6

--info

Neutral

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-500

#71717A

zinc-900

#18181B

zinc-950

#09090B

Type

Typography

Typeface

Operational intelligence under pressure

Geist for interface text, Geist Mono for eyebrows, labels, and figures. One ramp keeps every product surface calm and legible on a packed gate.

Regular 400The quick brown fox
Medium 500The quick brown fox
Semibold 600The quick brown fox

Weight is capped at 600. The theme remaps bold and extrabold down to 600, so nothing ever renders heavier.

Radius

Corners

sm

4px

md

6px

lg

8px

xl

12px

Shadow

Elevation

shadow-sm

table rows, inputs

shadow-md

raised cards

shadow-soft

panels at rest

shadow-hover

lift on hover

Motion

Movement with restraint

Every primitive draws enter and exit from the same duration and easing tokens. Reduced motion is honoured globally.

Hover lift

Hover to raise 2px on the soft hover shadow.

duration-base · ease-standard

Transactions
3,041,892

useCountUp · 600ms ease-out

Gate 4
Pavilion
Rides

stagger 50ms · 280ms ease-out

Live

dot pulse · ambient loop

Components

44 live examples

Every example below is the real component, not a screenshot. Browse, then install the ones you need.

Buttons

Badges

Active
Idle
Outline
Failed

Inputs

Stat card

Revenue
$48,250.00
+12%
than yesterday

Callouts

Gate online
All 400+ terminals reporting healthy.
Self-service
89% of Ekka 2025 transactions ran unassisted.
Watch Pavilion
POS-07 latency rising. No action needed yet.

Pills, badges, chips

LiveDegradedOffline
LiveSampleFallbackSoon

Tabs

900K+ attendance across the season.

Select

Dropdown menu

Checkbox, switch, label

Avatar

BWMLAK

Date picker

Pagination

Breadcrumb

Progress

Settlement reconciled72%

Combobox

Command palette

Textarea + separator

Notes attach to the close-of-day reconciliation.

Data table

Terminal
Gate 4 · POS-12
Txns
18204
Status
Online
Terminal
Pavilion · POS-07
Txns
11980
Status
Degraded
Terminal
Rides · KIO-03
Txns
9412
Status
Offline

Bar list

Token top-up
2,840
Day pass
2,110
Show bag
1,490
Food + bar
980

Donut chart

$8,300,000Total
  • Card$5,200,000
  • Wallet$2,100,000
  • Cash$1,000,000

Bar chart

WedThuFriSatSun

In context

Real product chrome

Drop a live Ludo screen into an aspect-accurate device frame. Phone, POS, handheld, and kiosk.

Balance

$48.50

Top up
Scan
Bar · Gate 4-$6.00
Rides · 12 tokens-$6.00
Food · Pavilion-$6.00

PhoneFrame · 19.5:9

PosFrame · 16:10

HandheldFrame · 18:9

KioskFrame · 9:16

Install

Two steps to ship

Point your components.json at the @ludo registry, then add the theme and the components you want.

components.json

Add the @ludo registry to your project:

{
  "registries": {
    "@ludo": "https://ui.ludo.computer/r/{name}.json"
  }
}

Then install the theme first, followed by any components:

npx shadcn@latest add @ludo/theme
npx shadcn@latest add @ludo/stat-card @ludo/data-table @ludo/callout
Read the docs