---
type: Design Language
title: TUI monochrome design system
description: How the light-mono-tui design language is implemented in this app's CSS.
resource: frontend/src/styles/tui.css
tags: [frontend, design, css]
timestamp: 2026-08-12T00:00:00Z
---

# TUI monochrome design system

The full design language spec lives outside this bundle at
`~/doc/concepts/ui/light-mono-tui.md` (grey background, black type/borders,
mono font, inverted active/hover states, no accent color, no radius, no
shadow). This doc covers how EatMe implements it.

`frontend/src/styles/tui.css` defines the tokens (`--bg`, `--fg`, `--muted`,
`--hover`, `--empty`, `--panel`, `--font`) and the component classes built on
them: `.tabs`/`.tab`, `.btn`/`.btn-block`/`.btn-ghost`, `.panel`,
`.field-row`, `.list`/`.row`, `.badge` (`-solid`, `-dashed`, `-double`),
`.stat-grid`/`.stat-tile`, `.login-card`.

# App-specific additions

Built for this app, following the same rules (square edges, monochrome,
1px borders) rather than introducing new visual language:

- **`.bar-chart-*`** (`frontend/src/components/BarChart.tsx`) — the
  per-employee daily-hours chart. Y-axis labels + a repeating 1px
  `--empty`-colored gridline background at 25% steps computed from a
  "nice" rounded max (`Math.ceil` to the next whole hour); bars are solid
  `--fg`, `--muted` on hover; day-of-month labels render in a *separate*
  flex row below the fixed-height bar track (not nested inside each bar's
  percentage-height column) specifically to avoid the bars visually
  overlapping the labels.
- **`.month-nav`** (`frontend/src/components/MonthNav.tsx`) — `[<] label [>]`
  bordered strip, styled like the design language's tab strip. Deliberately
  placed *inside* the employee-detail panel next to the chart it controls,
  not as a page-level control — an earlier version put it at the top of the
  whole admin stats page, which tested as confusing ("can't browse history
  on the chart") since it was visually disconnected from what it affected.

# Related

- [Zustand stores](./stores.md)