An overdue departure from the expected, where expressive design and thoughtful restraint come together to make innovation feel natural, credible, and assured.
Lekki · Yearly lease
A two-bedroom let to the same tenant since 2023. The first instalment has cleared; the second falls due in March.
Ref LG-0412 · Lease ends 31 Jan 2026
Select a type to highlight it in the card above. Select again to clear.
Instrument Serif (400) gives headings and key financial figures their editorial character. Lora carries body text, labels and controls. Use tabular numerals for aligned amounts; monospace is a registry fallback for code, not the app's financial typeface.
Near-white ground, white cards, cool blue-grey insets and slate ink. The landlord, tenant and admin apps all use ledge-cool. Its 16px panels and 10px inputs supersede the older 4px base styles.
Cards use border-rule with rounded-panel and generous padding. A very faint shadow can lift an interactive card; stronger shadows belong to floating dialogs and menus. Use paper for recessed content.
Primary actions use bg-primary text-primary-foreground and rounded-full; hover deepens the green. Secondary actions are outlined pills. Reserve rounded-inset for inputs and inner surfaces. Links, selected dates and the brand's terminal dot use lead.
Small section eyebrows and field labels may be uppercase with 0.08–0.25em tracking. Headings stay in sentence case with tight leading. Use dim for explanatory copy and faint for quiet labels and furniture.
Green marks collected or paid, gold marks pending or outstanding, and red marks overdue or failed. Pair each colour with a label. Charts distinguish landlord funds in emerald, Ledge revenue in gold and processing fees in clay; avoid decorative rainbow series.
Use a centred reading column (48rem tenant, 56rem landlord, 64rem admin), roughly 24px side gutters and 48px main vertical padding. Separate sections generously; group related ledger rows with fine dividers. Subtle ruled lines and dotted leaders are optional ledger details.
Sections rise and fade in reading order; chart bars grow from their baseline and arcs draw on. Keep hover changes near 200ms and entrances around 700–900ms. Honour reduced motion with useReducedMotionConfig() when implementing registry components.
Ledge's app supplies the light palette only. This entry derives dark slate surfaces, pale ink, lifted green actions and brighter state colours for the gallery's dark mode. Additional contract colours and ranked chart ramps are palette extensions rather than original Ledge tokens.
Calculated from this system’s colours in both modes. These are contrast checks, not an overall accessibility score or certification.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1 (24px regular or approximately 18.67px bold). Non-text indicators: AA ≥ 3:1. Ratios are displayed rounded down; results use full precision.