# Ledger — Gamma DESIGN.md

> Dense and exact. Plex on cool gray, borders over shadows.

Ledger treats every surface as a table. The canvas is a cool gray so white panels read as cells, the deep cyan accent is reserved for the current row and the primary action, and shadows are almost absent because hairlines already separate everything. Radii stay under six pixels, and transitions finish before a person notices them.

Generated from Gamma's design-system contract (`src/design-systems/ledger.ts`). This file describes a design language: no third-party logos, copy, or imagery travel with it.

## Point of view

- Borders, not shadows. Elevation is a hairline; the mid shadow is a whisper.
- Nearly square. Four-pixel controls and six-pixel panels; no pills anywhere.
- Zero tracking. Figures must align across rows, so headings are not tightened.
- Fastest motion, no spring. State changes complete in under 150ms.

## Color — light

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#f4f5f7` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#ffffff` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#e9ebef` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#131722` | Primary text and icons. |
| `--gamma-muted` | `#596270` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#d6dae1` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#0b6e99` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#ffffff` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#e0eff6` | Selected and hovered tints. |
| `--gamma-success` | `#137a4a` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#dff3e8` | Background behind success text. |
| `--gamma-danger` | `#b42b2b` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#f9e3e3` | Background behind danger text. |
| `--gamma-warning` | `#855500` | Attention that is not an error. |
| `--gamma-warning-soft` | `#fbefd6` | Background behind warning text. |

### Depth and focus

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-shadow-low` | `0 1px 0 rgba(19, 23, 34, 0.06)` | Resting depth. |
| `--gamma-shadow-mid` | `0 2px 6px rgba(19, 23, 34, 0.07)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 12px 32px rgba(19, 23, 34, 0.12)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 2px rgba(11, 110, 153, 0.4)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(11, 110, 153, 0.2)` | Text selection. |

## Color — dark

Define these on the same scope under `[data-theme="dark"]`; do not invent a separate scale.

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-bg` | `#0f1218` | Page canvas and the ground behind raised surfaces. |
| `--gamma-surface` | `#151922` | Cards, panels, trays, and list rows. |
| `--gamma-surface-2` | `#1d222c` | Sunken tracks, hover fills, and grouped chrome. |
| `--gamma-ink` | `#e6e9ef` | Primary text and icons. |
| `--gamma-muted` | `#98a1b0` | Secondary text, captions, and quiet metadata. |
| `--gamma-border` | `#29303c` | Hairlines between surfaces and controls. |
| `--gamma-accent` | `#5cb8e0` | Primary action, selection, and focus boundary. |
| `--gamma-accent-ink` | `#06131b` | Text and icons drawn on accent. |
| `--gamma-accent-soft` | `#16303d` | Selected and hovered tints. |
| `--gamma-success` | `#5fcf94` | Confirmed and healthy states. |
| `--gamma-success-soft` | `#153224` | Background behind success text. |
| `--gamma-danger` | `#f07676` | Destructive and rejected states. |
| `--gamma-danger-soft` | `#3a1d1d` | Background behind danger text. |
| `--gamma-warning` | `#e6b95a` | Attention that is not an error. |
| `--gamma-warning-soft` | `#33291a` | Background behind warning text. |
| `--gamma-shadow-low` | `0 1px 0 rgba(0, 0, 0, 0.4)` | Resting depth. |
| `--gamma-shadow-mid` | `0 2px 6px rgba(0, 0, 0, 0.4)` | Raised menus, popovers, and cards. |
| `--gamma-shadow-high` | `0 12px 32px rgba(0, 0, 0, 0.55)` | Modal and top-layer depth. |
| `--gamma-focus-ring` | `0 0 0 2px rgba(92, 184, 224, 0.45)` | Ring around focused controls. |
| `--gamma-selection` | `rgba(92, 184, 224, 0.25)` | Text selection. |

## Type

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-font-ui` | `"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif` | Interface copy, labels, and buttons. |
| `--gamma-font-display` | `"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif` | Headings and the few largest statements. |
| `--gamma-font-code` | `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` | Data, measurements, token names, and code. |
| `--gamma-tracking-display` | `0` | Letter spacing for display headings. |

## Shape

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-radius-small` | `2px` | Chips, tags, and tiny controls. |
| `--gamma-radius-control` | `4px` | Inputs, slots, and menus. |
| `--gamma-radius-button` | `4px` | Primary and secondary buttons. |
| `--gamma-radius-panel` | `6px` | Cards, panels, sheets, and trays. |
| `--gamma-radius-pill` | `4px` | Switches, badges, and fully rounded controls. |
| `--gamma-hairline` | `1px` | Border width for every divider and outline. |

## Motion

| Token | Value | Use |
| --- | --- | --- |
| `--gamma-duration-fast` | `80ms` | Hover and press feedback. |
| `--gamma-duration-base` | `140ms` | Routine state changes and reveals. |
| `--gamma-duration-slow` | `240ms` | Overlays, layout changes, and large arrivals. |
| `--gamma-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | Everyday state changes. |
| `--gamma-ease-emphasized` | `cubic-bezier(0.2, 0, 0, 1)` | Entrances and settles. |
| `--gamma-ease-spring` | `cubic-bezier(0.2, 0, 0, 1)` | Elastic movement and selection trails. |

## Rules for implementation

1. Read every color, font, radius, easing, and shadow from a `--gamma-*` custom property. Do not hardcode a value that a token can express.
2. Use `DesignSystemScope` for an island, or apply `data-design-system` to a region. The nearest scope wins.
3. Native elements own interaction: a button is a `<button>`, a choice is a radio group, and a disclosure exposes `aria-expanded`.
4. Every focused control has a visible `:focus-visible` ring. Do not remove the browser outline without a replacement.
5. Every animation has a `prefers-reduced-motion: reduce` rule that removes movement but keeps the state legible.
6. Numbers that change use `font-variant-numeric: tabular-nums`.
7. Arrivals use `--gamma-ease-emphasized`; routine state changes use `--gamma-ease-standard`; elastic movement uses `--gamma-ease-spring`.
8. Pair `accent` with `accent-ink` for text and icons. Never place `muted` on `surface-2` without checking contrast.

## Apply the system

```tsx
import { DesignSystemScope, GammaButton } from "@/components";

export function Panel() {
  return (
    <DesignSystemScope system="ledger">
      <GammaButton>Save changes</GammaButton>
    </DesignSystemScope>
  );
}
```

Import `tokens.css`, `library.css`, and `design-systems.css` once. Pass `mode` to pin a mode instead of following the page theme.

## Source boundary

This brief is generated from Gamma's own token contract. It does not contain a third-party site's layout, copy, imagery, or code, and it is not a substitute for a license to reuse the sites that informed the library.