---
version: alpha
name: Midday
description: Near-black financial-OS canvas with crisp white ink, a single warm orange accent reserved for primary action, Geist Sans set tight, and Departure Mono carrying numbers and technical labels — quiet, dense, and engineered like a terminal for running a one-person business.
colors:
  # Canvas + ink
  background: "#0c0c0c"
  surface: "#0c0c0c"
  surface-soft: "#161616"
  surface-raised: "#1c1c1c"
  ink: "#ffffff"
  ink-secondary: "#a1a1a1"   # was rgba(255,255,255,.63) over #0c0c0c
  ink-muted: "#6f6f6f"        # was rgba(255,255,255,.43) over #0c0c0c
  ink-faint: "#3d3d3d"        # was rgba(255,255,255,.20) over #0c0c0c

  # Accent — warm orange, primary action only
  primary: "#ff6900"
  primary-hover: "#ff8124"
  accent-soft: "#3a2310"      # was rgba(255,105,0,.18) over #0c0c0c

  # Borders / hairlines
  border: "#1f1f1f"           # was rgba(255,255,255,.10) over #0c0c0c
  border-strong: "#2e2e2e"    # was rgba(255,255,255,.16) over #0c0c0c

  # Status
  success: "#4ade80"
  warning: "#fbbf24"
  danger: "#f43f5e"

  # On-color
  on-primary: "#0c0c0c"
  on-surface: "#ffffff"

typography:
  display-hero:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -2.24px
  section-heading:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -1.08px
  sub-heading:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.72px
  card-title:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.36px
  body-large:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  mono-body:
    fontFamily: "Departure Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "Departure Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.4px
  mono-figure:
    fontFamily: "Departure Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 14px

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.xs}"
    padding: 3px 8px

  card:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-figure:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-figure}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  table-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 12px 16px
    borderColor: "{colors.border}"

  table-amount:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-body}"
    padding: 12px 16px
---

# Midday Design System

## Overview

Midday is a financial operating system for the modern solo founder — invoicing, reconciliation, time tracking, and insights — and its design system reads like a well-built terminal. The canvas is a near-black `{colors.background}`, just warm enough to avoid the void of pure black, with crisp white `{colors.ink}` text floating on top. Nothing competes for attention. The interface is dense with real data: transaction rows, amounts, categories, dates. The design's whole job is to make that density legible, calm, and trustworthy.

The type system pairs two voices. Geist Sans handles prose and product chrome — headlines, descriptions, labels, buttons — set tight with negative tracking that gives the display sizes a compressed, engineered feel. Departure Mono, a pixel-grid monospace, carries every number, figure, and technical label. This split is the system's signature: words are sans, money is mono. The result is that financial figures always look like data, never like marketing copy.

Color discipline is severe. The entire UI is grayscale — a ladder of white at decreasing opacity over the black canvas (`{colors.ink}` → `{colors.ink-secondary}` → `{colors.ink-muted}` → `{colors.ink-faint}`) — with exactly one accent: a warm orange `{colors.primary}`. That orange is reserved for the primary action and for the smallest status flourishes. It never decorates. When you see orange in Midday, something is asking to be clicked or telling you something matters.

Surfaces are separated by hairline borders rather than heavy shadows. Cards lift off the canvas with a single step of lighter fill (`{colors.surface-soft}`) and a `{colors.border}` outline. Depth is implied through opacity and a one-step lighter surface, never drop shadows. The whole system feels flat, precise, and built for long working sessions in a dark room.

**Key Characteristics:**
- Near-black warm canvas `{colors.background}` with white `{colors.ink}` text — terminal calm, not pure black
- White-at-opacity ink ladder for hierarchy instead of separate gray colors
- A single warm orange accent `{colors.primary}`, reserved for primary action and status
- Geist Sans for words, Departure Mono for numbers — the words/money split
- Negative letter-spacing on Geist at display sizes for compressed, engineered headlines
- Hairline borders `{colors.border}` and one-step lighter surfaces instead of shadows
- Dense, data-first layouts: transaction tables, figures, categories

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background, app shell. Warm near-black, not `#000`.
- **Soft Surface** (`{colors.surface-soft}`): Cards, inputs, raised panels — one step lighter.
- **Raised Surface** (`{colors.surface-raised}`): Menus, popovers, the highest layer.
- **White Ink** (`{colors.ink}`): Primary text, figures, active states.
- **Secondary Ink** (`{colors.ink-secondary}`): Body copy, descriptions, nav links.
- **Muted Ink** (`{colors.ink-muted}`): Metadata, secondary table cells, placeholders.
- **Faint Ink** (`{colors.ink-faint}`): Disabled text, the lightest dividers.

### Accent
- **Midday Orange** (`{colors.primary}`): Primary CTA fill, active accent, key status. The only chromatic color in the chrome.
- **Orange Hover** (`{colors.primary-hover}`): Primary button hover.
- **Accent Soft** (`{colors.accent-soft}`): Tinted badge background behind orange text.

### Borders
- **Hairline** (`{colors.border}`): Card outlines, table row dividers, section separators.
- **Strong Border** (`{colors.border-strong}`): Input outlines, secondary button edges.

### Status
- **Success** (`{colors.success}`): Reconciled / paid states.
- **Warning** (`{colors.warning}`): Pending / attention.
- **Danger** (`{colors.danger}`): Overdue / errors.

## Typography

### Font Family
- **Primary**: `Geist`, with fallbacks `Arial, sans-serif`
- **Monospace**: `Departure Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Rule**: prose, headings, and UI chrome are Geist; all numeric figures, amounts, and technical labels are Departure Mono.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.mono-figure}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px landing headline — compressed, engineered |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group titles |
| `card-title` | Card and panel headings |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading + table text |
| `body-medium` | Emphasized labels, nav, active states |
| `caption` | Metadata, helper text |
| `button-ui` | Buttons and interactive labels |
| `mono-body` | Amounts and figures in tables |
| `mono-label` | Uppercase technical labels, badges |
| `mono-figure` | Large standalone numbers / KPIs |

### Principles
- **Words sans, money mono**: never set a currency figure in Geist — Departure Mono is the figure voice.
- **Compression at display**: Geist headlines use negative tracking (-2.24px at 56px) that relaxes toward zero at body sizes.
- **Weight restraint**: 400 for reading, 500 for UI and headings. The system rarely goes heavier.
- **Opacity, not color, for hierarchy**: secondary and muted text are white at lower opacity, keeping the palette achromatic.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale stays tight at small sizes (2/4/8/12/16) and jumps generously for section rhythm (40/64/96).

### Grid & Container
- Max content width: approximately 1100px
- Hero: centered single column with generous vertical padding
- Feature sections: 2–3 column grids of bordered cards
- Product surfaces: full-width dense tables inside the app shell

### Whitespace Philosophy
- **Dense but breathing**: data rows pack tight; sections separate with `{spacing.3xl}`–`{spacing.4xl}` vertical air.
- **Hairline rhythm**: separation comes from `{colors.border}` lines and a one-step lighter surface, not shadow.
- **Quiet canvas**: the black field does the heavy lifting; elements feel placed, not stacked.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}`, no border | Page shell, text blocks |
| Surface (Level 1) | `{colors.surface-soft}` + `1px {colors.border}` | Cards, inputs, panels |
| Raised (Level 2) | `{colors.surface-raised}` + `1px {colors.border-strong}` | Menus, popovers, dropdowns |
| Focus | `1px {colors.primary}` outline | Keyboard/active focus on inputs |

**Shadow Philosophy**: Midday avoids drop shadows almost entirely. Depth is communicated by stepping the surface one shade lighter and drawing a hairline border. On a black canvas this reads as cleanly as elevation without the haze that shadows add to dark UIs.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, table edges |
| `xs` | 4px | Badges, small chips |
| `sm` | 6px | Buttons, inputs |
| `md` | 8px | List items, small cards |
| `lg` | 12px | Cards, panels |
| `xl` | 16px | Large feature cards, product frames |
| `pill` | 9999px | Status dots, avatars, toggles |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Midday Orange fill, near-black text, `{rounded.sm}`. The single loud element.
- **`button-secondary`** — Soft surface, white text, `{colors.border-strong}` outline.
- **`button-ghost`** — Transparent on canvas, secondary-ink text for low-emphasis actions.

### Badges
- **`badge`** — Tinted `{colors.accent-soft}` background with orange Departure Mono label.

### Cards
- **`card`** — Soft surface, hairline border, 12px radius. The default container.
- **`card-figure`** — Same shell but content leads with a large Departure Mono figure.

### Inputs
- **`input`** — Soft surface, `{colors.border-strong}` outline; focus swaps to a `{colors.primary}` 1px outline.

### Navigation
- **`nav-bar`** — Black, secondary-ink links, hairline bottom border. Orange primary CTA right-aligned.

### Tables
- **`table-row`** — Black row, white primary text, hairline bottom border.
- **`table-amount`** — Amount cell rendered in Departure Mono so figures align and read as data.

## Do's and Don'ts

### Do
- Keep the canvas near-black `{colors.background}`, never pure `#000`
- Render every currency figure and KPI in Departure Mono
- Reserve `{colors.primary}` orange for the primary action and key status only
- Build hierarchy from white-at-opacity ink, not separate gray hexes
- Separate surfaces with hairline `{colors.border}` lines and a one-step lighter fill
- Set Geist headlines tight with negative tracking

### Don't
- Don't set amounts in Geist Sans — money is always mono
- Don't use orange decoratively or on more than one element per view
- Don't add drop shadows to lift cards — step the surface lighter instead
- Don't introduce a second accent color into the chrome
- Don't use pure black as the canvas — the warm near-black is the brand
- Don't go heavier than weight 500 for headings

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tables collapse to stacked cards |
| Tablet | 600–1024px | 2-column grids, app shell sidebar collapses |
| Desktop | 1024–1280px | Full layout, persistent sidebar |
| Large | >1280px | Centered ~1100px content, generous margins |

### Touch Targets
- Buttons keep ~10px vertical padding for comfortable taps
- Table rows expand row height on touch for tap accuracy
- Nav collapses to a drawer below tablet

### Collapsing Strategy
- Hero: 56px headline scales down, negative tracking held proportionally
- Dense tables: reflow to stacked label/value cards on mobile (amount stays mono)
- Feature cards: 3-column → 2 → single
- Section spacing: 96px → 48px on mobile

### Image Behavior
- Product screenshots keep their hairline border and 12–16px radius at all sizes
- Dark-mode dashboards are the default art; light variants swap only in light contexts

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: Midday Orange `{colors.primary}` with `{colors.on-primary}` text
- Border: `1px {colors.border}`
- Figures / amounts: Departure Mono in `{colors.ink}`

### Example Component Prompts
- "Hero on `{colors.background}`. Headline 56px Geist weight 500, line-height 1.05, letter-spacing -2.24px, `{colors.ink}`. Subtitle 18px Geist 400 in `{colors.ink-secondary}`. Primary button: `{colors.primary}` fill, `{colors.on-primary}` text, 6px radius, 10px 18px padding."
- "Transaction table: black rows, hairline `{colors.border}` dividers. Description in 15px Geist `{colors.ink}`; amount cell in 14px Departure Mono, right-aligned, `{colors.ink}`."
- "Card: `{colors.surface-soft}` background, 1px `{colors.border}`, 12px radius, 24px padding. Title 18px Geist weight 500; lead figure 28px Departure Mono."
- "Badge: `{colors.accent-soft}` background, `{colors.primary}` text, 12px Departure Mono uppercase, 4px radius, 3px 8px padding."

### Iteration Guide
1. Words are Geist, money is Departure Mono — never mix
2. One accent only: orange marks the primary action, nothing else
3. Hierarchy comes from white opacity, not new colors
4. Lift surfaces by stepping one shade lighter plus a hairline border, never a shadow
5. Negative tracking on Geist headlines; relax to zero by body size
6. Keep the canvas warm near-black, not pure black

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Midday. Brand names and trademarks belong to their respective owners.