---
version: alpha
name: Beetroot Harrow
description: "Magazine-style agriculture UI: beet-red accents on ink-and-paper neutrals, tall grotesk headlines, and spacious editorial layouts."
colors:
  background: "#faf7f2"
  foreground: "#191715"
  card: "#fffdf9"
  card-foreground: "#191715"
  popover: "#fffdf9"
  popover-foreground: "#191715"
  primary: "#b8283a"
  primary-foreground: "#ffffff"
  secondary: "#f1ede6"
  secondary-foreground: "#2a2723"
  muted: "#f1ede6"
  muted-foreground: "#565049"
  accent: "#ffe2e3"
  accent-foreground: "#550c17"
  destructive: "#a51f7d"
  destructive-foreground: "#ffffff"
  success: "#2d6526"
  success-foreground: "#ffffff"
  warning: "#fbdc8b"
  warning-foreground: "#3d2a00"
  border: "#e0dad1"
  input: "#c8c1b6"
  ring: "#d94455"
  dark-background: "#191715"
  dark-foreground: "#faf7f2"
  dark-card: "#2a2723"
  dark-card-foreground: "#faf7f2"
  dark-popover: "#2a2723"
  dark-popover-foreground: "#faf7f2"
  dark-primary: "#f06a77"
  dark-primary-foreground: "#370509"
  dark-secondary: "#3d3934"
  dark-secondary-foreground: "#f1ede6"
  dark-muted: "#3d3934"
  dark-muted-foreground: "#c8c1b6"
  dark-accent: "#550c17"
  dark-accent-foreground: "#ffe2e3"
  dark-destructive: "#e05cba"
  dark-destructive-foreground: "#2c0120"
  dark-success: "#6bb556"
  dark-success-foreground: "#0b200a"
  dark-warning: "#d9a82c"
  dark-warning-foreground: "#261a00"
  dark-border: "#3d3934"
  dark-input: "#565049"
  dark-ring: "#f06a77"
typography:
  display-lg:
    fontFamily: Familjen Grotesk
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.03em
  display-md:
    fontFamily: Familjen Grotesk
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Familjen Grotesk
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Familjen Grotesk
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.22
    letterSpacing: -0.012em
  heading-sm:
    fontFamily: Rubik
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Rubik
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontFamily: Rubik
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: Rubik
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Rubik
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Rubik
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.04em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  xl: 10px
  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: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    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: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    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: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Beetroot Harrow

## Overview

Beetroot Harrow is for agriculture products that read like a magazine: grower journals, crop-market briefings, co-op newsletters and field-report dashboards. Instead of the usual leaf-green farm palette it uses warm ink on newsprint plus one beetroot-red accent (brand). Hierarchy comes from type size, weight and whitespace, not from fills or icons. A typical screen has one display-lg or display-md headline, body text capped at 68ch, a narrow metadata sidebar, and section gaps of space.16 or more.

Moods: editorial, grounded, confident, calm. Built for: agriculture, publishing, food-systems. Density: spacious.

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

All five scales share a warm bias. Neutrals are tinted toward yellow-brown: background is neutral.50 (#faf7f2), text is neutral.950 (#191715), and no flat grey is used. Brand (beet red, hue about 355°) is the only action color. It is used for primary buttons, links, focus rings and the 2px section rule. Light primary is brand.600 with white text (about 6.2:1). Dark primary is brand.400 with brand.950 text (about 6:1). Success is shifted toward a warm field green (success.700 for light fills, about 6.9:1 with white). Warning is wheat ochre, used as a pale fill (warning.200 with warning.900 text). Destructive is a cooler magenta-crimson (danger, hue about 325°). It stays at least ΔE2000 18 from primary in both modes (danger.600 vs brand.600 in light, danger.400 vs brand.400 in dark), so a delete button is never mistaken for the primary action. Every scale darkens monotonically from 50 to 950 with chroma peaking at 400–600.

- **Primary** `#b8283a` / dark `#f06a77`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf7f2` / dark `#191715` on `#191715` / dark `#faf7f2`: page surface and body text.
- **Card** `#fffdf9` / dark `#2a2723`: raised surfaces.
- **Secondary** `#f1ede6` / dark `#3d3934`: secondary buttons and quiet controls.
- **Muted** `#f1ede6` / dark `#3d3934` with **muted-foreground** `#565049` / dark `#c8c1b6`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe2e3` / dark `#550c17`: highlights, selected rows, badges.
- **Destructive** `#a51f7d` / dark `#e05cba`, **Success** `#2d6526` / dark `#6bb556`, **Warning** `#fbdc8b` / dark `#d9a82c`: status only, always paired with an icon or label.
- **Border** `#e0dad1` / dark `#3d3934`, **Input** `#c8c1b6` / dark `#565049`, **Ring** `#d94455` / dark `#f06a77`.

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

## Typography

Familjen Grotesk is the display voice for display-lg through heading-md, at weights 600–700. Rubik handles all functional text: body, forms, tables, buttons, labels and heading-sm. JetBrains Mono is used only for sample IDs, field codes and coordinates (the code style, 14px). The display ladder uses a 1.333 ratio (perfect fourth): 64 / 48 / 36 / 27px. Tracking tightens as size grows: -0.03em at 64px, -0.025em at 48px, -0.02em at 36px and -0.012em at 27px. Body sizes are 18 / 16 / 14px, with line heights of 1.6–1.65 for long reading. Caption (12px, weight 500, +0.04em) works as an uppercase overline.

- Display: **Familjen Grotesk** (fallback system-ui, sans-serif)
- Interface: **Rubik** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Familjen Grotesk | 64px | 1.02 | 700 |
| display-md | Familjen Grotesk | 48px | 1.06 | 700 |
| heading-lg | Familjen Grotesk | 36px | 1.12 | 600 |
| heading-md | Familjen Grotesk | 27px | 1.22 | 600 |
| heading-sm | Rubik | 16px | 1.4 | 600 |
| body-lg | Rubik | 18px | 1.65 | 400 |
| body-md | Rubik | 16px | 1.65 | 400 |
| body-sm | Rubik | 14px | 1.55 | 400 |
| label | Rubik | 14px | 1.25 | 500 |
| caption | Rubik | 12px | 1.45 | 500 |
| code | JetBrains Mono | 14px | 1.55 | 400 |

## Layout

Spacious density on a 4px grid. Within a component, use space.2 to space.6. Between blocks, use space.8 to space.12. Between sections, use space.16 to space.24. Cap reading columns at 68ch and page width at 1280px. Prefer asymmetric two-column layouts: a main column of about 8 of 12 columns plus a sidebar of about 4 of 12 columns for captions, metadata and related figures. Cards use space.8 padding and never go below space.6.

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

## Elevation & Depth

Mostly flat, like paper. Separation comes from 1px border hairlines (neutral.200 in light, neutral.800 in dark) and whitespace. Cards get shadow.sm, which is barely visible. shadow.md is for popovers and menus, and shadow.lg is for dialogs. In dark mode, depth comes from lighter surfaces rather than shadows: background is neutral.950, card and popover are neutral.900, and secondary and muted are neutral.800.

- sm: `0 1px 2px rgba(25, 23, 21, 0.06)`
- md: `0 6px 16px -4px rgba(25, 23, 21, 0.14)`
- lg: `0 20px 48px -10px rgba(25, 23, 21, 0.24)`

## Shapes

Corners are small, like trimmed print stock: radius.md (4px) on buttons and inputs, radius.lg (6px) on cards, radius.xl (10px) only on dialogs. radius.full is reserved for badges and filter chips. Editorial devices are 1px hairline rules between list items and a 2px brand rule above section headings.

Radius scale: sm 2px, md 4px, lg 6px, xl 10px, 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: 32px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use Familjen Grotesk only for display-lg (64px), display-md (48px), heading-lg (36px) and heading-md (27px), with the letterSpacing set in each style. Use Rubik for heading-sm and all functional text.
- **Do:** Limit each section to three type levels, for example heading-md title, body-md text and caption metadata.
- **Do:** Give each view one primary button (primary: brand.600 light, brand.400 dark). Render other actions as secondary (neutral.100 / neutral.800) or ghost buttons.
- **Do:** Cap running text at 68ch. Separate page sections with space.16–space.24 and blocks inside a section with space.8–space.12.
- **Do:** Open each section with a 2px brand.600 top rule (brand.400 in dark), a caption overline in uppercase, then a heading-md title.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label, so status never depends on color alone.
- **Do:** Set yields, prices and measurements in Rubik with font-feature-settings: 'tnum', right-aligned in table cells.
- **Do:** Show focus with a 2px ring outline (brand.500 light, brand.400 dark) offset 2px from buttons, inputs and links.
- **Don't:** Don't use brand red for errors or deletions. Use destructive (danger.600 light, danger.400 dark), which differs from primary by at least ΔE2000 18.
- **Don't:** Don't use #000000 text or #ffffff page backgrounds. Text is neutral.950 on neutral.50 in light mode, and neutral.50 on neutral.950 in dark mode.
- **Don't:** Don't round buttons or inputs beyond radius.md (4px) or cards beyond radius.lg (6px). Use radius.full only for badges and filter chips.
- **Don't:** Don't put anything heavier than shadow.sm on cards. shadow.md is for popovers and menus, shadow.lg for dialogs. In dark mode, rely on the neutral.900 card surface for lift.
- **Don't:** Don't set Familjen Grotesk below 24px or use it for labels, table cells, inputs or button text.
- **Don't:** Don't use success green decoratively. It marks only confirmed, healthy or completed states.
- **Don't:** Don't go below space.6 card padding or below space.12 vertical gaps between sections.