Plinth Design System

Style Guide

Tokens, components, and typography — the full system on one page.

Typography

type

H1 — Display heading

H2 — Section heading

H3 — Subsection heading

H4 — Label heading

Body text at sm (14px). Plinth turns a rough project idea into a real, buildable plan with a sourced bill of materials. Engineering is precise — so is the tool.

Muted body — used for descriptions, captions, and secondary content.

Mono regular — MCP3204 · $4.72

Part numbers, prices, units, and numeric data use Geist Mono.

Mono label — section tags, metadata

Color Tokens

color

--primary

--secondary

--muted

--success

--warning

--destructive

--background

--card

--border

Buttons

button

Variants

Sizes

States

Badges

badge

Stock status

In StockLow StockOut of StockPrimaryMutedOutline

Form Inputs

form

Data Table

table
ComponentPart #QtyUnit $Extended $Stock
MicrocontrollerATMEGA328P-PU1$3.45$3.45In Stock
IR Sensor ArrayQTR-8RC1$12.95$12.95Low Stock
Motor DriverDRV8833PWP2$2.18$4.36In Stock
Li-Po BatteryLP8034501$8.99$8.99Out of Stock
Chassis PCBCUSTOM-0011$4.20$4.20In Stock
Total$33.95

Card

card
Line-Following Robot
Robotics Club · $80 budget · 3 months
StatusComplete
Parts12 items
BOM total$63.85