Ledger · design system 0.1
Bone, charcoal and
one warm line.
Flat surfaces with a 1px outline, thin caps for anything small, glass for anything that floats, and a gradient only where the page can afford one. Every component below is the real one from the package.
Foundations
Color
Warm neutrals only. Depth comes from white on bone plus a hairline, never from shadow. Tints are for status and callouts.
Foundations
Type
Manrope for display, DM Sans for body, Geist Mono for numbers. Three styles on a screen: display, body, caps.
Aa
Pay for views that actually happened.
Creators post about your product. You pay per thousand views.
Nothing up front, nothing for posts that go nowhere. Views are counted after a 48 hour check, at the rate you set, and settle once they clear.
- Display
- Manrope 500, -0.01em, 40 / 56 / 72
- Subhead
- Manrope 500, 20 / 24
- Body
- DM Sans 400, 14 / 16, line height 1.5+
- Caps
- 11px, 400, 0.14em, uppercase
- Mono
- Geist Mono, numbers only
Foundations
Caps
One treatment for everything small. Overlines, labels, chips, buttons, table heads and meta all share it, so the eye learns it once.
Overline
Views
1.24M
Meta
Updated 4 min ago
Table head
Foundations
Radius and spacing
Base 8px. Controls sit at 6px, containers at 8px, chips and avatars are pills. Larger containers never get a larger radius.
Control · 6px
Container · 8px
Pill
Foundations
Icons
Phosphor at the light weight, 16px inside controls and 20px standalone. One weight across the product so icons match the thin caps.
Foundations
Gradient and glass
Peach, lilac and cream over bone, drifting slowly. Only on hero-scale surfaces, orbs and avatars. Glass panels sit on top of it with a 1px outline.
Campaign live
Spring launch is dispatching to 12 creators.
Controls
Chips
Pills in caps with room to breathe. Tints carry status; outline is the default for neutral facts.
Badge
Controls
Forms
Labels are overlines. Inputs are white on bone, 40px tall, 6px radius. Helper text sits under the control in body size.
Text
Spent only as views come in.
Choices
Controls
Tabs
Six ways to switch. Segmented and pill for views inside a card, line and caps for page sections, outline for toolbars, and counts when the numbers matter.
Segmented
Pill
Line
Caps line
Outline
With counts
Surfaces
Card
White on bone with a hairline and 28px of padding. A card with three or more metrics takes the full width so the numbers can breathe. The footer is the quiet strip: caps meta left, one outline action right.
Surfaces
Table
Caps heads in muted ink, dividers edge to edge, numbers in mono and right-aligned. When a row leads somewhere, the whole row is the control: no arrow button at the end.
| Creator | Platform | Status | Posts | Views |
|---|---|---|---|---|
Maya Ortiz @maya.makes | TikTok | Live | 4 | 312K |
Jonas Lindqvist @jonaslq | Reels | Live | 3 | 188K |
Priya Raman @priya.r | TikTok | Checking | 2 | 96K |
Tomas Ferreira @tomasf | Shorts | Paused | 1 | 41K |
Surfaces
Overlays
Everything that floats is glass with a 1px outline. Dialogs pad 32px with a 20px Manrope title, so caps buttons have room. Open each one.
Surfaces
Feedback
Alerts, empty states and loading. Calm, with one action.
Loading
Keys