Sign up

LedgerIt design system

The foundations and components LedgerIt is built with. A monochrome interface on Vercel's Geist palette where only money has color, and a type scale where every figure lines up. Every example in these pages is the production code.

Principles

Four rules every screen follows. When a design question has no answer elsewhere, it has one here.

  1. 01

    Monochrome

    Geist's grays carry the whole interface. Where you are and what you are touching are drawn in ink, black in light and white in dark. Nothing is colored to be pretty.

  2. 02

    Color means money

    Green is money in, red is money out when flagged, amber needs review. Always with a sign or a word, never by hue alone.

  3. 03

    Borders, not shadows

    Hairlines hold the page. The one shadow is for things that float above it: menus, dialogs, toasts.

  4. 04

    Every figure exact

    Mono, tabular, a true minus sign, never rounded. Columns line up because the digits do.

Foundations

The tokens every screen is built from. Values are read live from the stylesheet, so these pages cannot fall behind it.

Assets