Ledger row

Ledger rows are Settld's data-dense history format — the khata brought to the screen. Four columns, monospace throughout, dashed borders between rows. Used in transaction history, expense detail, and the activity feed when you want to show the full receipt.

Variants

Time Description Amount Tag

12 May Farzi Cafe, Cyber Hub −₹1,840

Food

11 May Indigo DEL–GOA −₹4,800

Travel

10 May Goa Airbnb, 3 nights −₹9,600

Stay

10 May Kabir settled up +₹3,200

Settled

09 May Swiggy order, biryani ×4 −₹620

Food

Total ₹13,660

The four-column grid is fixed: time | description | amount | tag. The description column is the only one that grows (1fr). All columns are baseline-aligned.

Credit rows (money coming in — settlements, reimbursements) use --teal with a + prefix. Debit rows (money going out — expenses added by you or your group) use --coral with a − prefix (minus sign, not a hyphen).

The total row uses a 2px solid top border instead of the dashed divider, marking a structural break rather than a content division.

Column sizing

Column	Width	Font	Align	Notes
Time	80px fixed	Mono 11px, muted	Left	Short-form date: "12 May" or "14:32". Never full ISO.
Description	1fr (grows)	Mono 13px, ink	Left	Truncates with ellipsis. Venue name or action description.
Amount	100px fixed	Mono 13px/600	Right	Always has `+` or `−` prefix. Teal or coral.
Tag	72px fixed	Mono 9px/600	Right	One pill. Category or status. Never more than one tag per row.

States

Time Description Amount Tag

12 May Default row — Farzi Cafe −₹1,840

Food

11 May Hover state — Indigo flight −₹4,800

Travel

10 May Pressed — Goa Airbnb −₹9,600

Stay

Pending Auto-split processing… −₹320

...

State	Visual change
Default	Transparent background, dashed border below
Hover	`--s-warm` background, 6px border-radius
Pressed	`scale(0.99)`
Pending / loading	40% opacity — transaction is in-flight

On dark surfaces

Time Description Amount Tag

12 May Farzi Cafe, Cyber Hub −₹1,840

Food

10 May Kabir settled up +₹3,200

Settled

Total ₹5,040

On dark surfaces, the header and total borders use --dark-border. Row dividers shift to dark too. Text uses --dark-text and --dark-text-mute. Credit (teal) and debit (coral) amounts are unchanged — they read clearly on dark.

Anatomy

Time Description Amount Tag

12 May ① Time Farzi Cafe, Cyber Hub ② Description (1fr) −₹1,840 ③ Amount

Food ④ Tag

Part	Token / value	Notes
Container	`display: grid`, `align-items: baseline`	CSS grid — 80px 1fr 100px 72px. Baseline alignment is critical for mono legibility.
Row divider	`border-bottom: 1px dashed --ink-line`	The signature dashed ledger line. Last row has no border.
Time cell	Mono 11px, `--ink-mute`	"12 May" or "14:32". Never "May 12, 2024".
Description	Mono 13px, `--ink`, truncates	Venue name, person name + action, or item list.
Amount cell	Mono 13px/600, right-aligned	`.credit` = teal with `+`. `.debit` = coral with `−`.
Tag pill	Mono 9px/600, category colors	One per row. Right-aligned in the 72px column.

Usage

Do Use the minus sign (−, U+2212) for debits, not a hyphen (-). It's the correct mathematical minus, has correct width in mono fonts, and is unambiguous to screen readers.

Don't Don't mix the ledger row and the list item in the same view. Ledger rows are for history/accounting reads — the data is the point. List items are for actions and navigation — the person is the point.

Do Keep description text to venue/action — not a sentence. "Farzi Cafe, Cyber Hub" works. "Had dinner at Farzi Cafe with Rohan and Kabir" doesn't fit the column and breaks the ledger rhythm.

Don't Don't add more than one tag per row. If a transaction could have multiple tags, pick the most specific one. The 72px column is not wide enough for two pills.

Accessibility

Semantics Use <table>, <thead>, <tbody>, <tr>, <th>, and <td> for the semantic equivalent — the grid CSS is for the visual layout shown here. Screen readers navigate tables with row/column headers, which the CSS grid alone cannot provide.

Amount sign The visual +/− prefix conveys direction. Also ensure the aria-label makes direction explicit: aria-label="expense: ₹1,840" or aria-label="settled: ₹3,200 received".

Color Teal and coral amounts convey credit/debit through color. The +/− prefix is the non-color redundant signal — never remove it.

Code

HTML

<!-- Ledger table with semantic markup -->
<table class="ledger">
  <thead>
    <tr class="ledger-header">
      <th class="ledger-header-cell">Time</th>
      <th class="ledger-header-cell">Description</th>
      <th class="ledger-header-cell right">Amount</th>
      <th class="ledger-header-cell right">Tag</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ledger-row">
      <td class="ledger-cell-time">12 May</td>
      <td class="ledger-cell-label">Farzi Cafe, Cyber Hub</td>
      <td class="ledger-cell-amount debit" aria-label="expense ₹1,840">−₹1,840</td>
      <td class="ledger-cell-tag"><span class="ledger-tag food">Food</span></td>
    </tr>
    <tr class="ledger-row">
      <td class="ledger-cell-time">10 May</td>
      <td class="ledger-cell-label">Kabir settled up</td>
      <td class="ledger-cell-amount credit" aria-label="received ₹3,200">+₹3,200</td>
      <td class="ledger-cell-tag"><span class="ledger-tag util">Settled</span></td>
    </tr>
  </tbody>
</table>

CSS classes

Class	Purpose
`.ledger`	Table container — collapse borders, full width
`.ledger-header`	Column headers — mono 10px uppercase, 2px border-bottom
`.ledger-row`	Data row — grid, baseline alignment, dashed border-bottom
`.ledger-cell-time`	Date/time — mono 11px, muted
`.ledger-cell-label`	Description — mono 13px, truncates
`.ledger-cell-amount`	Amount — mono 13px/600, right-aligned
`.ledger-cell-amount.credit`	Teal, `+` prefix
`.ledger-cell-amount.debit`	Coral, `−` prefix
`.ledger-cell-tag`	Tag column — right-aligned flex container
`.ledger-tag`	Base tag pill — mono 9px/600
`.ledger-tag.food` etc.	Category-specific colors (food / travel / stay / util / fun)
`.ledger-total`	Summary row — 2px solid border-top

Design tokens used

Token	Value	Role
`--font-mono`	JetBrains Mono	All cells — the full row is monospace
`--ink-line`	#DDD2B8	Dashed row border, header/total solid border
`--teal`	#0E7C66	Credit amount color
`--coral`	#E76F51	Debit amount color
`--ink-mute`	#8A8276	Time cell and header text
`--s-warm`	#F1E9D5	Row hover background
`--r-xs`	6px	Row hover border-radius