Monolith Standup

About 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.

Color

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'.

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.

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.

Elevation

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.

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.

Do

• Use radius.none on buttons, inputs, cards, badges, popovers and dialogs. Reserve radius.full for avatars, radio dots and status dots.
• 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).
• Use Syne only through display-lg (56), display-md (40) and heading-lg (28), for page titles and section headers.
• Set task IDs, branch names, estimates and timestamps in caption (Fira Code 12/500) or code (Fira Code 14/400).
• 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.
• Set button and label text in the label style (Manrope 14/700), uppercase, with 0.04em tracking.
• Show focus as a 2px ring-token outline offset 2px on buttons, inputs and rows, in both modes.
• 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 add blur to any shadow. Use only shadow.sm, md and lg, which are solid offsets with 0 blur.
• Don't set Syne below 28px or use it for body text, table cells or buttons; use Manrope instead.
• Don't put white text on brand.300 or brand.400. Use brand.950 (accent-foreground in light, primary-foreground in dark).
• Don't use primary or accent lime for errors or overdue states; use destructive.
• Don't use gradients, translucent glass, or text opacity below 0.6. To de-emphasize text, use muted-foreground instead.
• Don't use pure grey (#808080 family) or #000000. Take every surface and border from the olive-tinted neutral ramp.