---
version: alpha
name: Monolith Standup
description: "Brutalist project-management UI: square slabs, 2px borders and hard offset shadows, with acid-lime action on olive-tinted concrete neutrals."
colors:
  background: "#f7f8f0"
  foreground: "#14160f"
  card: "#ffffff"
  card-foreground: "#14160f"
  popover: "#ffffff"
  popover-foreground: "#14160f"
  primary: "#5f7000"
  primary-foreground: "#ffffff"
  secondary: "#eceee1"
  secondary-foreground: "#252820"
  muted: "#eceee1"
  muted-foreground: "#4e5342"
  accent: "#d0e555"
  accent-foreground: "#1c2200"
  destructive: "#cc2536"
  destructive-foreground: "#ffffff"
  success: "#0b693a"
  success-foreground: "#ffffff"
  warning: "#ffcc3d"
  warning-foreground: "#433000"
  border: "#252820"
  input: "#4e5342"
  ring: "#5f7000"
  dark-background: "#14160f"
  dark-foreground: "#f7f8f0"
  dark-card: "#252820"
  dark-card-foreground: "#f7f8f0"
  dark-popover: "#252820"
  dark-popover-foreground: "#f7f8f0"
  dark-primary: "#b8cf2a"
  dark-primary-foreground: "#1c2200"
  dark-secondary: "#383c2f"
  dark-secondary-foreground: "#eceee1"
  dark-muted: "#383c2f"
  dark-muted-foreground: "#bfc3ae"
  dark-accent: "#313b00"
  dark-accent-foreground: "#f1f9bd"
  dark-destructive: "#fb6a6d"
  dark-destructive-foreground: "#3a030b"
  dark-success: "#3cc272"
  dark-success-foreground: "#022313"
  dark-warning: "#f2b300"
  dark-warning-foreground: "#281c00"
  dark-border: "#818770"
  dark-input: "#a0a58c"
  dark-ring: "#b8cf2a"
typography:
  display-lg:
    fontFamily: Syne
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.035em
  display-md:
    fontFamily: Syne
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Syne
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.35
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.6
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.55
  body-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.005em
  label:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
  caption:
    fontFamily: Fira Code
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: Fira Code
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: 0px
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: 0px
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: 0px
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: 0px
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
---

# Monolith Standup

## Overview

Monolith Standup is a project tracker where tasks, owners and deadlines are the content and the structure is left visible. It uses 2px borders, radius 0, solid offset shadows with 0 blur, and a single acid-lime signal color. Every text pair in both modes clears 5:1, so the hard look never costs legibility.

Moods: brutalist, bold, raw, deliberate. Built for: project-management, developer-tools, software. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Neutrals are concrete greys tinted toward olive (OKLCH hue about 110), the same undertone as the lime brand. Chroma stays low and even across neutral 300–700 so mid-steps never turn muddy. Light mode: primary is brand.700 (#5f7000) with white text (about 5.5:1) on neutral.50 (about 5.1:1), and border is neutral.900. Bright brand.300 is accent only and always carries brand.950 text. Dark mode: primary is brand.400 (#b8cf2a) with brand.950 text, about 10:1 against the neutral.950 background. Destructive is crimson (danger.600 in light, danger.400 in dark), far from lime in hue in both modes. Warning is a warm amber that sits beside the lime's yellow side. Success is a deeper green (success.700 in light, success.400 in dark) placed clearly cooler than the brand so 'done' never reads as 'primary'.

- **Primary** `#5f7000` / dark `#b8cf2a`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f7f8f0` / dark `#14160f` on `#14160f` / dark `#f7f8f0`: page surface and body text.
- **Card** `#ffffff` / dark `#252820`: raised surfaces.
- **Secondary** `#eceee1` / dark `#383c2f`: secondary buttons and quiet controls.
- **Muted** `#eceee1` / dark `#383c2f` with **muted-foreground** `#4e5342` / dark `#bfc3ae`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#d0e555` / dark `#313b00`: highlights, selected rows, badges.
- **Destructive** `#cc2536` / dark `#fb6a6d`, **Success** `#0b693a` / dark `#3cc272`, **Warning** `#ffcc3d` / dark `#f2b300`: status only, always paired with an icon or label.
- **Border** `#252820` / dark `#818770`, **Input** `#4e5342` / dark `#a0a58c`, **Ring** `#5f7000` / dark `#b8cf2a`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The scale runs 12/14/16/18/20 for UI text, then steps by about ×1.4 for display: 20 → 28 → 40 → 56. Syne (700–800) is used only at 28px and above. Tracking tightens with size: -0.015em at 28, -0.025em at 40, -0.035em at 56. Manrope (400–800) carries body text at 500 weight with 1.5–1.6 line height, plus labels at 700 with +0.04em uppercase tracking. Fira Code (400/500/700) sets IDs, branches, estimates and timestamps.

- Display: **Syne** (fallback Impact, sans-serif)
- Interface: **Manrope** (fallback system-ui, sans-serif)
- Mono: **Fira Code** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Syne | 56px | 1 | 800 |
| display-md | Syne | 40px | 1.05 | 800 |
| heading-lg | Syne | 28px | 1.15 | 700 |
| heading-md | Manrope | 20px | 1.3 | 800 |
| heading-sm | Manrope | 16px | 1.35 | 700 |
| body-lg | Manrope | 18px | 1.6 | 500 |
| body-md | Manrope | 16px | 1.55 | 500 |
| body-sm | Manrope | 14px | 1.5 | 500 |
| label | Manrope | 14px | 1.2 | 700 |
| caption | Fira Code | 12px | 1.4 | 500 |
| code | Fira Code | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Cards use 24px padding (space.6), and buttons and inputs are 44px tall. Columns and table cells meet at shared 2px borders instead of being separated by gaps. Align to the grid and don't center loose elements in whitespace.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Depth comes only from solid offset shadows in neutral.950: sm 2px for resting rows and chips, md 4px for cards, lg 8px for popovers and dialogs. In dark mode the shadow color merges with the background, so the 2px border plus the card step (neutral.900 on neutral.950) carry the separation.

- sm: `2px 2px 0 0 #14160f`
- md: `4px 4px 0 0 #14160f`
- lg: `8px 8px 0 0 #14160f`

## Shapes

radius.none (0) applies to buttons, inputs, cards, badges, tables, popovers and dialogs. The only rounded shape is radius.full, for avatars, radio dots and status dots.

Radius scale: sm 0px, md 0px, lg 0px, xl 0px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use radius.none on buttons, inputs, cards, badges, popovers and dialogs. Reserve radius.full for avatars, radio dots and status dots.
- **Do:** Draw cards, inputs and table cells with a 2px solid border. Use the border token for cards and table cells, and the input token for form fields. Give cards shadow.md (4px 4px 0) and popovers and dialogs shadow.lg (8px 8px 0).
- **Do:** Use Syne only through display-lg (56), display-md (40) and heading-lg (28), for page titles and section headers.
- **Do:** Set task IDs, branch names, estimates and timestamps in caption (Fira Code 12/500) or code (Fira Code 14/400).
- **Do:** Use primary for one main action per view. Use accent (brand.300 in light, brand.900 in dark) with accent-foreground text for the current sprint or a selected row.
- **Do:** Set button and label text in the label style (Manrope 14/700), uppercase, with 0.04em tracking.
- **Do:** Show focus as a 2px ring-token outline offset 2px on buttons, inputs and rows, in both modes.
- **Do:** Put every status color (success, warning, destructive) in a square 24px badge, together with a text label or icon.
- **Don't:** Don't set border-radius above 0 on controls, cards or badges, and don't make pill buttons.
- **Don't:** Don't add blur to any shadow. Use only shadow.sm, md and lg, which are solid offsets with 0 blur.
- **Don't:** Don't set Syne below 28px or use it for body text, table cells or buttons; use Manrope instead.
- **Don't:** Don't put white text on brand.300 or brand.400. Use brand.950 (accent-foreground in light, primary-foreground in dark).
- **Don't:** Don't use primary or accent lime for errors or overdue states; use destructive.
- **Don't:** Don't use gradients, translucent glass, or text opacity below 0.6. To de-emphasize text, use muted-foreground instead.
- **Don't:** Don't use pure grey (#808080 family) or #000000. Take every surface and border from the olive-tinted neutral ramp.