Living reference for every component, token, and pattern in the design system.
--color-text#242424--color-text-secondary#6B6B6B--color-text-muted#757575--color-accent#196EDD--color-accent-hover#1259B8--color-bg#FFFFFF--color-bg-panel#F7F7F7--color-bg-emphasis#EFEFEF--color-bg-inverse#242424--color-border#F2F2F2--color-divider#E6E6E6400 Normal — The quick brown fox jumps over the lazy dog
500 Medium — The quick brown fox jumps over the lazy dog
600 Semibold — The quick brown fox jumps over the lazy dog
700 Bold — The quick brown fox jumps over the lazy dog
--space-2xs4px--space-xs8px--space-sm16px--space-md24px--space-lg40px--space-xl64px--space-2xl96pxHero headlines use the display size. Section headings use H2.
Articles are displayed as a clean list with thin dividers between items.
A straightforward approach to budgeting on irregular income — freelancers, gig workers, commission earners.
You don't need to track every coffee. Once a week, sit down for 15 minutes, enter your totals, and move on.
Pill-shaped buttons with three variants. Used for CTAs and actions.
How long-form article content renders. Applied via the .prose class.
Start with your baseline — the lowest amount you've earned in the past six months. Build your budget around that number, not your average and definitely not your best month.
Rent, utilities, groceries, insurance, minimum debt payments. These get funded before anything else. Write them down with real numbers from last month, not estimates.
The point isn't to predict your income. It's to stop pretending it's predictable and plan around that reality instead.
A paragraph with inline code and an inline link styled naturally within the reading flow.
--radius-sm4px--radius-md8px--radius-full99pxThin 1px lines separate content sections instead of alternating background colors.
Content above divider
Content below divider
Hamburger menu with a slide-out panel from the right. Site title on the left, menu icon on the right.
Minimal footer with a top divider line and muted copyright text.