---
version: alpha
name: Sapling Broadside
description: "Retro-modern nonprofit system: leaf-green actions, bold Unbounded headlines and hard-edged print shadows on green-tinted neutrals."
colors:
  background: "#f4f8f5"
  foreground: "#121a15"
  card: "#ffffff"
  card-foreground: "#121a15"
  popover: "#ffffff"
  popover-foreground: "#121a15"
  primary: "#146d3d"
  primary-foreground: "#ffffff"
  secondary: "#e6ede8"
  secondary-foreground: "#212a25"
  muted: "#e6ede8"
  muted-foreground: "#46544c"
  accent: "#dcf6e2"
  accent-foreground: "#093822"
  destructive: "#c02d56"
  destructive-foreground: "#ffffff"
  success: "#0e6b55"
  success-foreground: "#ffffff"
  warning: "#fbe08f"
  warning-foreground: "#3f2c06"
  border: "#d0dbd4"
  input: "#b2c0b7"
  ring: "#1c8a4d"
  dark-background: "#121a15"
  dark-foreground: "#f4f8f5"
  dark-card: "#212a25"
  dark-card-foreground: "#f4f8f5"
  dark-popover: "#212a25"
  dark-popover-foreground: "#f4f8f5"
  dark-primary: "#55c57f"
  dark-primary-foreground: "#04200f"
  dark-secondary: "#323e38"
  dark-secondary-foreground: "#e6ede8"
  dark-muted: "#323e38"
  dark-muted-foreground: "#b2c0b7"
  dark-accent: "#093822"
  dark-accent-foreground: "#dcf6e2"
  dark-destructive: "#f66e89"
  dark-destructive-foreground: "#390011"
  dark-success: "#45bb96"
  dark-success-foreground: "#04231d"
  dark-warning: "#deb036"
  dark-warning-foreground: "#251a03"
  dark-border: "#323e38"
  dark-input: "#46544c"
  dark-ring: "#55c57f"
typography:
  display-lg:
    fontFamily: Unbounded
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.025em
  display-md:
    fontFamily: Unbounded
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Unbounded
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-md:
    fontFamily: Onest
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Onest
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Onest
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Onest
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Onest
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Onest
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Onest
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  xl: 16px
  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 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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: 22px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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: 22px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
---

# Sapling Broadside

## Overview

Sapling Broadside is for nonprofit donation, volunteer sign-up and membership flows. Display headlines use the wide Unbounded face, floating layers use hard offset shadows, and one leaf green marks every action. These details come from 1970s and 1980s printed bulletins and early desktop software. Every text pair in both modes is 5:1 or higher, so the retro styling never reduces legibility.

Moods: optimistic, retro, confident, approachable. Built for: nonprofit, civic-tech, community. 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

Fernfield (brand) is the only action hue. Primary is brand.700 (#146d3d) in light mode, which gives 6.4:1 against primary-foreground white. In dark mode primary is brand.400 (#55c57f) with brand.950 text, which gives 7.9:1. Ring is brand.600 in light mode and brand.400 in dark mode, and both clear 3:1 against background. All neutral steps share one hue near 145° at low chroma. The 700 step was corrected so it no longer drifts blue, and muted-foreground (neutral.700) now reaches 6.7:1 on muted. Destructive is crimson, danger.600 in light mode and danger.400 in dark mode, and sits nearly opposite the brand on the hue wheel. Success has been pulled back from cyan to a cool green-teal, with success.700 (#0e6b55) giving 6.5:1 with white. It stays separate from Fernfield, but both share the same temperature. Warning is a warm mustard that matches the yellow undertone of the brand greens.

- **Primary** `#146d3d` / dark `#55c57f`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f8f5` / dark `#121a15` on `#121a15` / dark `#f4f8f5`: page surface and body text.
- **Card** `#ffffff` / dark `#212a25`: raised surfaces.
- **Secondary** `#e6ede8` / dark `#323e38`: secondary buttons and quiet controls.
- **Muted** `#e6ede8` / dark `#323e38` with **muted-foreground** `#46544c` / dark `#b2c0b7`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#dcf6e2` / dark `#093822`: highlights, selected rows, badges.
- **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#0e6b55` / dark `#45bb96`, **Warning** `#fbe08f` / dark `#deb036`: status only, always paired with an icon or label.
- **Border** `#d0dbd4` / dark `#323e38`, **Input** `#b2c0b7` / dark `#46544c`, **Ring** `#1c8a4d` / dark `#55c57f`.

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

## Typography

Display and heading sizes step up by about 1.25: 18, 24, 30, 38, 48. Unbounded at 600/700 is used only for display-lg, display-md and heading-lg (30px and up). Because the face is wide, its letterSpacing tightens from -0.01em at 30px to -0.025em at 48px. Onest at 400/500/600 sets heading-md and below, body text, labels, buttons and form fields. Body line height is 1.6 at body-lg, 1.55 at body-md and 1.5 at body-sm. JetBrains Mono at 400/500 is used only for receipt IDs, transaction references and code.

- Display: **Unbounded** (fallback Arial Black, sans-serif)
- Interface: **Onest** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Unbounded | 48px | 1.08 | 700 |
| display-md | Unbounded | 38px | 1.12 | 700 |
| heading-lg | Unbounded | 30px | 1.2 | 600 |
| heading-md | Onest | 24px | 1.3 | 600 |
| heading-sm | Onest | 18px | 1.4 | 600 |
| body-lg | Onest | 18px | 1.6 | 400 |
| body-md | Onest | 16px | 1.55 | 400 |
| body-sm | Onest | 14px | 1.5 | 400 |
| label | Onest | 14px | 1.25 | 500 |
| caption | Onest | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid using the space tokens. Content columns cap at 1152px. Campaign sections are separated by 48px (space.12) to 80px (space.20) of vertical spacing, so each block reads as its own printed panel. Buttons and inputs share a 40px height so they align when placed side by side in forms.

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

## Elevation & Depth

Surfaces are mostly flat and separated by 1px border (neutral.200 light, neutral.800 dark) lines. Cards use shadow.sm. The hard offset shadows, shadow.md (3px) and shadow.lg (6px), are the signature print detail and are used only on popovers, dialogs and toasts. In dark mode the offset shadow barely shows against neutral.950, so floating layers depend on their 1px border and the lifted popover surface (neutral.900).

- sm: `0 1px 2px rgba(18, 26, 21, 0.08)`
- md: `3px 3px 0 rgba(18, 26, 21, 0.85)`
- lg: `6px 6px 0 rgba(18, 26, 21, 1)`

## Shapes

Rounding is tight, close to print-era corners: radius.md (6px) on buttons and inputs, radius.lg (10px) on cards and radius.xl (16px) on dialogs. radius.full is used only for badges and avatar chips.

Radius scale: sm 2px, md 6px, lg 10px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px 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:** Give each view one primary button for its main action, such as Donate or Join. Set every other action to the secondary or ghost variant.
- **Do:** Set campaign headlines in Unbounded at heading-lg (30px), display-md (38px) or display-lg (48px), and write them in sentence case.
- **Do:** Use shadow.md or shadow.lg only on popovers, dialogs and toasts. In dark mode, keep their 1px border, because the offset shadow barely shows on neutral.950.
- **Do:** Pair every success, warning and destructive badge or alert with an icon and a text label, so status never depends on color alone.
- **Do:** Use muted-foreground only for captions, helper text and placeholder text at 12px or larger. Long text belongs in foreground at body-md (16px) or larger.
- **Do:** Show keyboard focus on every button, input and link with a 2px ring outline offset 2px from the element.
- **Don't:** Don't use primary green for errors, failed payments or validation messages. Use destructive with an error icon.
- **Don't:** Don't set Unbounded below 30px, and don't use it for form labels, table cells, badges or button text. Use Onest at label or heading-md instead.
- **Don't:** Don't place body-sm (14px) or smaller text on the accent surface (brand.100 light, brand.900 dark) for more than one line.
- **Don't:** Don't introduce pure black, #000 or neutral grey hex values. Every surface, border and text color must come from the green-tinted neutral ramp.
- **Don't:** Don't show more than one element with shadow.md or shadow.lg in the same view, such as a dialog over an open popover.
- **Don't:** Don't put body text directly on success, warning or destructive fills. Use their paired -foreground tokens only for short labels in badges, alerts and buttons.