LedgerOS
Design System · LedgerOS · v1.0

Every token.
Every state.
Every pattern.

The single source of truth for LedgerOS UI. Interactive playground — edit live, copy tokens, test Motion patterns.

12

Color tokens

8

Type styles

6

Components

◈

Color Tokens

Base

Accents

Semantic

Neutrals

Tints

T

Typography

Type Tester
SIZE72px
Know your burn.

Kliknij tekst żeby edytować ↑

Display / Hero

clamp(40px,5.6vw,88px)

w800 · track -0.05em

Know your burn.

H1 Section

clamp(30px,4.2vw,58px)

w800 · track -0.045em

Cashflow Intelligence

H2 Subsection

clamp(24px,2.8vw,36px)

w800 · track -0.04em

Runway Extended

H3 Card

17px

w800 · track -0.03em

Scenario Engine

Body Base

clamp(13px,1.1vw,16px)

w400 · track 0

Real-time cashflow intelligence for startups.

Body Small

13px

w500 · track 0

Monthly burn rate, from actual transactions.

Mono Data

clamp(22px,2.8vw,36px)

w700 · track -0.02em

$47,320 / mo

Mono Label

9px

w400 · track 0.18em

BURN RATE · LIVE
⊞

Grid & Spacing

Grid Visualizer
col 1
col 2
col 3
col 1
col 2
col 3

grid-template-columns: repeat(3, 1fr) · gap: 12px

Breakpoints — Mobile First

Mobile

< 640px

▬

1 col

SM

640px+

▬▬

2 cols

MD

768px+

▬▬

2 cols

LG

1024px+

▬▬▬

3 cols

XL

1280px+

▬▬▬▬

4 cols

◉

UI Components & States

Buttons — All States<button className='btn'>
Primary
Ghost
Accent
Loading state
Disabled
Danger
Form Elements — All States<input> / <select>
state: default → focus

Invalid format. Expected: $NNN,NNN

Card Variants — Hover to interact
KPI Card

Burn Rate

$47K

↓ −3.2%
Feature Card
◈

Cashflow Forecast

14-day rolling forecast with scenario modeling built in.

Alert Card
ALERT

Burn Spike Detected

Oct spend +18% above 3-month avg.

Badges & Status Indicators
↑ tracking↓ −3.2%stableLIVEBETANEWALERTCORE
Live
Motion Patterns — Framer Motionframer-motion

Stagger reveal

Burn rate→
Runway→
MRR Growth→
Cash on hand→

Spring physics

$47K

Drag → number springs to target

Layout animation

Burn Rate

AnimatePresence

Burn pod kontrolą.

Motion

Motion patterns w sekcji UI Components ↑

Stagger reveal, spring physics, AnimatePresence, layout animation — wszystko w sekcji UI Components → Motion Patterns.

Przejdź do Motion →