name: solo-ledger-design
version: alpha
description: >
  A warm, paper-toned neobrutalist finance dashboard for solopreneurs. Built on a
  cream surface (#F5EFE6) with hard 2px ink-black (#0A0A0A) outlines on every cell,
  a deep teal (#1F4A4E) primary voltage and a clay/peach (#E8C6B8) accent. The
  signature move is a bento grid of bordered, lightly-tinted "cell" cards with inset
  bevel shadows and giant tabular-numeric figures. Display type is Space Grotesk,
  body is Inter, and every number is set in JetBrains Mono with tabular figures. Tiny
  uppercase 11px labels with 0.12em tracking caption each tile; sharp 6-12px radii
  keep the brutalist edge.
colors:
  # Surface
  surface: '#F5EFE6'        # page background (cream), default cell fill, light text on dark
  ink: '#0A0A0A'            # near-black: all borders, primary text, dark buttons/footer
  # Brand / Voltage
  primary: '#1F4A4E'        # deep teal: logo dot, sub-strip bar, expense accents, avatar
  accent: '#E8C6B8'         # clay/peach: active tab, hover states, bevel highlights
  # Semantic
  positive: '#2A7A4A'       # green: income, healthy, up-trends, sparklines
  warn: '#B8862B'           # amber/ochre: tax warnings, overdue dots (label text #8a6818)
  warn-text: '#8a6818'      # darker ochre used for tax label/figure legibility
  # Tints (cell fills)
  tint-green: '#E6F0EA'     # cash-in cell
  tint-teal: '#DCE6E6'      # cash-out cell
  tint-amber: '#ECE0CB'     # taxes cells
  tint-cream: '#F5EFE6'     # neutral cells (invoices, breakdown, projections)
  tint-clay: '#E8C6B8'      # runway left panel, accent fills
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 36px
    fontWeight: 700
    letterSpacing: -0.01em
  heading:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 24px
    fontWeight: 700
    letterSpacing: -0.01em
  label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 11px
    fontWeight: 600
    letterSpacing: 0.12em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 14px
    fontWeight: 400
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 600
  metric:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 48px
    fontWeight: 700
    letterSpacing: -0.01em
rounded:
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  full: 9999px
spacing:                      # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  cell:
    backgroundColor: '{colors.surface}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.lg}'
    elevation: 'inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 8px rgba(10,10,10,0.06)'
    padding: '20px–24px'
  buttonPrimary:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.surface}'
    typography: '{typography.label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.md}'
    padding: '8px 16px'
  buttonSecondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.md}'
    padding: '8px 16px'
    hover: 'background {colors.accent}'
  tab:
    backgroundColor: '{colors.accent}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    border: '2px solid {colors.ink}'
  iconButton:
    backgroundColor: '{colors.surface}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.sm}'
    size: '36px'
    hover: 'background {colors.accent}'
  pill:
    backgroundColor: 'transparent'
    textColor: '{colors.positive}'
    typography: '{typography.mono}'
    border: '2px solid {colors.positive}'
    rounded: '{rounded.full}'
    padding: '2px 8px'
  toggle:
    backgroundColor: '{colors.positive}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    size: '36px x 20px knob'
  ledgerRow:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    border: '1px solid rgba(10,10,10,0.15)'
    hover: 'background rgba(232,198,184,0.30)'
motion:
  cellEnter: 'Motion One: scale 0.92→1, opacity 0→1, spring visualDuration 0.5 bounce 0.4, stagger 0.06'
  rowReveal: 'Motion One inView: opacity 0→1, y 10→0, stagger 0.05, easeOut'
  navHover: 'Motion One hover: set nav-link background to {colors.accent}, revert on leave'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { sm: 14px, md: 16px, lg: 24px }
  color: '{colors.ink}'

Solo Ledger

solo-ledger-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Solo Ledger is a warm neobrutalist finance dashboard for one-person businesses. The entire surface is paper cream #F5EFE6 and everything sits behind crisp 2px ink-black #0A0A0A outlines — borders do the structural work, not shadows. The brand voltage is a deep teal #1F4A4E (logo accent, the inverted sub-strip bar, expense emphasis, avatar chip) paired with a clay/peach accent #E8C6B8 used for the active tab, hover washes, and the inset bevel highlight that gives each card a faint embossed feel. The page is organized as a bento grid of .cell tiles — each 2px-bordered, 12px-rounded, lightly tinted (mint #E6F0EA, sage-teal #DCE6E6, sand #ECE0CB, clay #E8C6B8) and topped with a tiny 11px uppercase Space Grotesk label. The hero gesture is scale: enormous JetBrains Mono numbers (a 108px runway figure, 48px cash-in total) anchored bottom-right with tabular alignment. Semantic green #2A7A4A reads income/health and ochre #B8862B/#8a6818 flags taxes. The type story is three voices — Space Grotesk for display and labels, Inter for prose, JetBrains Mono for every figure.

Colors

Surface. surface #F5EFE6 is the cream page background, the default .cell fill, and the light text color used on dark fills (footer, sub-strip, dark buttons). ink #0A0A0A is the near-black used for every 2px border, all primary text, the "Export Report" button fill, and the footer band.

Brand / Voltage. primary #1F4A4E (deep teal) marks the logo dot, the inverted header sub-strip, the avatar chip, the cash-out accents, and expense category pills. accent #E8C6B8 (clay/peach) is the active-tab fill, the button/icon hover wash, the runway split-panel, and the chip inside the logo mark.

Semantic. positive #2A7A4A (green) carries income amounts, the "HEALTHY" badge, up-trend chips, and the sparkline strokes/fills. warn #B8862B (amber) appears on the overdue dot, expense-mix bar, and tax bar accents; the darker warn-text #8a6818 is used for tax label text and figures where legibility against light tints matters.

Tints (cell fills). Each bento tile is lightly tinted: tint-green #E6F0EA (cash in), tint-teal #DCE6E6 (cash out), tint-amber #ECE0CB (taxes), tint-cream #F5EFE6 (neutral tiles), and tint-clay #E8C6B8 (runway left panel, emphasis fills). Borders, hairlines, and dashed dividers are all ink or ink at reduced opacity (/15, /20).

Typography

Three families, imported from Google Fonts: Space Grotesk (500/600/700) for display, headings, and labels with -0.01em tracking; Inter (400/500/600) for body prose; JetBrains Mono (400–700) for all numerics with font-variant-numeric: tabular-nums. The .label style is the system's connective tissue — 11px, weight 600, 0.12em tracking, uppercase. No bespoke faces; all three are open-source.

Token	Size	Weight	Line-height	Tracking	Usage
display	36px (text-4xl)	700	default	-0.01em	Page H1 ("Financial Health")
heading	24px (text-2xl)	700	default	-0.01em	Section H2/H3 ("Transactions / Ledger")
label	11px	600	default	0.12em	Uppercase captions on every tile/nav
body	14px (text-sm)	400–500	default	normal	Descriptions, ledger descriptions
mono	10–11px	600	default	normal	Stats, chips, ledger figures
metric	48–108px	700	0.85–1.0	-0.01em	Hero figures (runway 108px, totals 48px)

Layout

Base unit is 4px on the Tailwind scale; tiles gap at 16px (gap-4), page padding is 32px horizontal (px-8). The structure is a full-bleed single column: a two-row header (logo + tab nav, then an inverted teal status sub-strip), a title bar with greeting + action buttons, then the signature bento grid — grid-cols-6 with three 180px rows, tiles spanning 1–2 columns and 1–2 rows (cash-in and runway are 2x2, breakdown spans 4 columns). Below: a full-width transactions ledger as a bordered table with a fixed 5-column track [110px 1fr 180px 140px 140px], then a 3-column projections-plus-taxes section (chart 2/3, tax schedule 1/3). A dark footer band closes it. Whitespace is tight and data-dense; the grid is the composition.

Elevation & Depth

There are no drop shadows. Depth comes from (1) the universal 2px ink outline on every cell, button, chip, and divider, and (2) a subtle inset bevel on .cell: inset 0 2px 0 rgba(255,255,255,0.5) (top highlight) plus inset 0 -2px 8px rgba(10,10,10,0.06) (bottom shade), giving tiles a faint embossed, tactile quality. Dark elements (footer, sub-strip, ink buttons) invert to read as recessed bands. Dividers are 2px solid or dashed ink lines and 1px ink/15 hairlines between ledger rows.

Shapes

Rounding is deliberately small and brutalist: chips/swatches at 6px (rounded-[6px]), icon buttons and pills-as-buttons at 8px (rounded-[8px]), action buttons and inset panels at 10px (rounded-[10px]), and the .cell cards at 12px (rounded-[12px]). Status pills and toggle tracks/knobs use rounded-full (9999px). Legend swatches and some borders are fully square. The mix of sharp small radii and the occasional full pill is the shape signature.

Components

• cell — tinted card; fill per tint token, 2px ink border, 12px radius, inset bevel shadow, 20–24px padding. The fundamental bento primitive.
• buttonPrimary — "Export Report"; ink fill, cream text, 2px ink border, 10px radius, label type, px-4 py-2.
• buttonSecondary — "+ Add Transaction"; cream fill, ink text, 2px border, 10px radius, hover wash to accent.
• tab — nav item; active = accent fill with 2px ink left/right borders, Space Grotesk semibold; inactive = ink/60 text.
• iconButton — 36px square, cream fill, 2px border, 8px radius, hover to accent (used for search; the teal "MR" avatar shares the frame).
• pill — status/category chip; transparent fill, colored 2px border + matching mono text, full radius (green for income, teal for expense, ochre for tax).
• toggle — scenario switch; 36x20 track, 2px ink border, full radius; on = positive fill with cream knob right, off = cream with ink knob left.
• ledgerRow — table row; cream fill, 1px ink/15 bottom hairline, mono figures, hover wash to accent/30.
• footer / sub-strip — ink (footer) and primary (sub-strip) bands, cream/ accent text, .label type.

Motion

Powered by Motion One (motion@12 ESM). On load, every .cell springs in — scale 0.92→1, opacity 0→1, spring visualDuration 0.5, bounce 0.4, staggered 0.06s. Ledger rows reveal on scroll via inView — opacity 0→1, y 10→0, stagger 0.05, easeOut. Nav links get a JS hover handler that sets background to accent and reverts on leave (skipping the active tab). CSS hover utilities provide instant wash feedback on buttons and rows.

Iconography

Tabler Icons via webfont (ti ti-* classes). Outline style throughout. Sizes are contextual: ~14px (text-sm) inline in chips, ~16px default, up to 24px (text-2xl) for the receipt-tax spotlight icon. Icons inherit text color — ink by default, warn-text #8a6818 on tax cues, positive on up-trends. Used as UI affordances (search, trends, alerts, checks) rather than decoration.

Do's and Don'ts

• Do outline everything in 2px ink #0A0A0A — borders, not shadows, build the structure.
• Do set every number in JetBrains Mono with tabular figures, large and bottom-right aligned.
• Do caption each tile with the 11px uppercase 0.12em Space Grotesk .label.
• Do keep radii small (6–12px) and reserve rounded-full for pills and toggles.
• Don't add drop shadows or glassmorphism — depth is the inset bevel only.
• Don't introduce new hues; stay within teal/clay/green/ochre on cream.
• Don't mix the type voices — Mono for figures, Inter for prose, Grotesk for display/labels.

Known Gaps

• The .cell enter spring and row reveals are driven by Motion One at runtime; durations/bounce values are read from the script, but the rendered visual timing is inferred, not measured.
• Tint hex values are read directly from class rules; the perceived contrast against the cream surface is approximate.
• warn #B8862B and warn-text #8a6818 are two related ochres used for fill vs. text legibility respectively; treated as one semantic role.
• Tile padding is recorded as a 20–24px range (p-5/p-6) since it varies per cell.