Beetroot Harrow

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

Color

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.

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.

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.

Elevation

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.

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.

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.
• Limit each section to three type levels, for example heading-md title, body-md text and caption metadata.
• 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.
• Cap running text at 68ch. Separate page sections with space.16–space.24 and blocks inside a section with space.8–space.12.
• Open each section with a 2px brand.600 top rule (brand.400 in dark), a caption overline in uppercase, then a heading-md title.
• Pair every success, warning and destructive badge or alert with an icon or text label, so status never depends on color alone.
• Set yields, prices and measurements in Rubik with font-feature-settings: 'tnum', right-aligned in table cells.
• 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 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 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 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 set Familjen Grotesk below 24px or use it for labels, table cells, inputs or button text.
• Don't use success green decoratively. It marks only confirmed, healthy or completed states.
• Don't go below space.6 card padding or below space.12 vertical gaps between sections.