Boxwood Ballast

About Boxwood Ballast

Overview

Boxwood Ballast is for agency leadership, account managers and client-facing teams. They need tools that look as dependable as the work they sell. The system relies on restraint. One deep green (brand.600 in light mode, brand.400 in dark) marks every interactive element. Zero-chroma neutral surfaces leave client work unaltered. Comfortable spacing on a 4px grid keeps long briefs and reports readable.

Color

Keel (the brand ramp, hue around 150) is the only action color. It is used for primary buttons, selected states and the focus ring (ring = brand.500 light / brand.400 dark, ≥3.6:1 against background). The neutral ramp has zero chroma by design, so client brand colors shown inside the product are never shifted by the chrome around them. This is the one deliberate exception to tinting. The status ramps share the brand's cool temperature and its chroma curve, which is low at 50–100, peaks at 400–600 and recedes at 900–950. Success sits in teal (hue around 175), so a success badge never reads as a Keel button. Warning is a muted amber. Destructive is a cool crimson with a magenta cast, far from Keel in hue in both modes. Light-mode pairs: primary/white 5.4:1, destructive/white 5.6:1, success/white 7.0:1, muted-foreground/muted 7.2:1. Dark-mode pairs: primary/brand.950 6.4:1, destructive/danger.950 5.4:1, success/success.950 6.3:1, muted-foreground/muted 6.0:1.

Typography

The type scale uses a major third (1.25) on a 16px base, rounded to whole pixels: heading-sm 16, heading-md 20, heading-lg 25, display-md 39, display-lg 49. display-md sits two steps (1.25²) above heading-lg so page titles separate clearly from section titles. Newsreader (500/600) is used only for heading-lg and above, where letterSpacing tightens from -0.012em to -0.022em as size grows. Public Sans (400/500/600) handles navigation, tables, forms and buttons. Its body styles use line heights of 1.55–1.65. IBM Plex Mono (400/500) is reserved for campaign IDs, UTM parameters and code snippets.

Layout

Comfortable density on a 4px base grid with half-steps at 2px and 6px for icon gaps. Content columns cap at 1200px, and long-form reading blocks cap at about 72ch of body-md. Table rows are at least 44px tall so budget and performance figures can be scanned without strain.

Elevation

Mostly flat and structural. Cards separate from the page with a 1px border token and shadow.sm. shadow.md is reserved for popovers and menus, and shadow.lg for dialogs. In dark mode, depth comes from surface steps instead: background is neutral.950 and card/popover are neutral.900, one step lighter.

Shapes

Rounding is measured. Buttons and inputs use radius.md (8px) and cards use radius.lg (12px). radius.full is reserved for status badges, so a pill shape always means status, never action.

Do

• Use one primary button (primary / primary-foreground, 40px, radius.md) per view. Render other actions as secondary or ghost buttons at the same 40px height.
• Set budget and metric figures in body-sm or body-md with font-feature-settings: 'tnum', and right-align them in table columns.
• Use Newsreader only for heading-lg (25px) and above. Use the Public Sans styles for heading-md, heading-sm, body, label and caption.
• Pair every success, warning and destructive badge or alert with an icon or text label, so meaning never relies on color alone.
• Keep table rows at least 44px tall. On tables longer than 10 rows, stripe alternate rows with the muted token and keep row text at foreground, not muted-foreground.
• Show keyboard focus as a 2px ring token outline with a 2px offset on buttons, inputs and selectable rows, in both modes.

Don’t

• Don't use primary for errors, negative variances or destructive confirmations. Use destructive, and confirm in a dialog with shadow.lg.
• Don't use success where primary is meant. The teal success ramp is for completed or positive states, never for calls to action.
• Don't set body text longer than two lines on the accent surface. Accent is for highlighted and selected rows only.
• Don't use shadow.md or shadow.lg on cards. Card separation comes from the 1px border token and shadow.sm.
• Don't tint the neutral ramp or build custom grays. Use neutral.50–950 so client colors displayed in the product stay unaltered.
• Don't set Newsreader below 24px, in all caps, or at weights other than 500 and 600.