---
name: Stateful Expense System
description: A compact household expense tracker with calm green surfaces and crisp financial controls.
colors:
  forest: "#102923"
  moss: "#9bbfad"
  paper: "#f8fbf8"
  ink: "#142720"
typography:
  display:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontWeight: 700
    lineHeight: 1
  body:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: "6px"
  md: "14px"
  lg: "28px"
---

# Design System: Stateful Expense System

## 1. Overview

This fixture uses quiet household-finance surfaces: deep green page chrome, moss panels, paper controls, and compact readable type.

## 2. Color

Use forest for page backgrounds, moss for large panels, paper for controls, and ink for readable foreground text.

## 3. Typography

Use system UI text with clear weight contrast. Headings should stay compact and operational.

## 4. Components

Primary buttons use paper surfaces, pill geometry, and bold labels. Expense rows use a light translucent card surface.