Themes / 05
Ledger
A sober, exact theme for money and reports. Cream paper, pine green, a serif for the big numbers.
npx shadcn@latest add https://strictthemes.com/r/ledger.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.
Overview
The overview screen of a small-business banking and invoicing product, with account balances, money in and out for the month, the things that wait on the user and recent transactions.
35.5k characters · Run 3 times in Claude Code
Strict Check 100%
Transactions
A statement of a business's transactions, with search, an account filter and an in/out filter, a total row that follows the filters, paging and an empty state.
34.6k characters · Run 3 times in Claude Code
Strict Check 100%
Invoice
One invoice set as a document on a white sheet, with who it is from and to, its number and dates, line items with subtotal, tax and total, its state, payment details and a way to mark it as paid.
34.4k characters · Run 3 times in Claude Code
Strict Check 100%
Payment
A form to send a payment from a business account, with checks on every field, a review step that states the amount in words, and a confirmation that says nothing was sent.
35.7k characters · Run 3 times in Claude Code
Strict Check 100%
Report
A yearly report on a small business's money, made for reading, with three very large figures, a short commentary, a table of the year by quarter and notes.
34.5k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#0E5A40 / #5FD3A4
on-primary
#FFFFFF / #062016
secondary
#14211B / #E9EFE9
on-secondary
#FFFFFF / #14211B
tertiary
#B98A2F
on-tertiary
#14211B
neutral
#5A6860 / #93A49A
background
#F6F4EC / #0D1512
surface
#FFFFFF / #15201B
foreground
#14211B / #E9EFE9
border
#D9D6C8 / #26352D
error
#B42318 / #FF7D6E
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Instrument Serif · 64px · weight 400 · line 1
The quick brown fox
h1
Instrument Serif · 42px · weight 400 · line 1.1
The quick brown fox
h2
Instrument Serif · 28px · weight 400 · line 1.2
The quick brown fox
body
Instrument Sans · 15px · weight 400 · line 1.55
The quick brown fox
label
Spline Sans Mono · 12px · weight 500 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
2px
md
3px
lg
6px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
48px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, no full rounds
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Ledger is for interfaces about money: banking, invoicing, accounting, annual reports. It borrows from a bound account book and a private bank's letterhead. The tone is quiet confidence. Nothing shouts, every figure can be found again, and the serif gives the large numbers the weight of something signed.
Colors
- Primary (
#0E5A40) is pine green, for the main action, links and money coming in. - Secondary (
#14211B) is a green-black ink for secondary buttons and headings. - Tertiary (
#B98A2F) is brass. Use it for a badge that marks something to act on: "Due", "Pending", "Review". - Neutral (
#5A6860) sets labels, column headers and notes. - Background (
#F6F4EC) is cream paper. Surface (#FFFFFF) is the white sheet a statement or a table sits on. - Error (
#B42318) is for money going out and for failures. Say which in words: a minus sign, "Overdue", "Declined".
Typography
Instrument Serif sets headings and key figures in one weight, regular. Size does the work, so never fake a bold. Instrument Sans sets body text at 15px, sized for tables. Spline Sans Mono sets labels, amounts in tables, account numbers and dates. Labels are uppercase with wide tracking. Use tabular figures wherever amounts are compared, and align them to the right.
Layout
A 12-column grid, 1200px at its widest, with 24px gutters. Statements and tables sit on white sheets on the cream page. Spacing comes from the scale (4, 8, 12, 16, 24, 48), and it is tight: 12px between a label and its field group, 24px inside a sheet, 48px between sections. Rule lines do the dividing that whitespace does elsewhere.
Elevation & Depth
Flat. A sheet is white on cream with a 1px border. Totals are set off by a double rule, not by a shadow or a fill. Only menus and dialogs float, on one short, neutral shadow.
Shapes
Nearly square, like cut paper: 2px for badges, 3px for buttons and inputs, 6px for sheets. No pills.
Components
- Buttons: pine green for the main action of a view, green-black for the rest. Uppercase mono labels.
- Cards (sheets): white, 6px corners, 24px padding, a 1px border.
- Badges: brass with dark text, for things that wait on someone.
- Tables: mono amounts, right-aligned, a 1px rule under each row, the total row in the heading font.
- Icons: 1.5px stroke line icons. Never emoji.
Do's and Don'ts
- Do right-align amounts and use tabular figures.
- Do show a negative amount with a minus sign and a word, not by color alone.
- Do keep the serif in its one weight and let size set the hierarchy.
- Don't use green and red as decoration: here they mean in and out.
- Don't use gradients, glows or rounded pills.
- Don't introduce a color, size or radius that is not a token above.