Sapling Broadside

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

Color

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.

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.

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.

Elevation

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

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.

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.
• Set campaign headlines in Unbounded at heading-lg (30px), display-md (38px) or display-lg (48px), and write them in sentence case.
• 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.
• Pair every success, warning and destructive badge or alert with an icon and a text label, so status never depends on color alone.
• 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.
• 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 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 place body-sm (14px) or smaller text on the accent surface (brand.100 light, brand.900 dark) for more than one line.
• 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 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 put body text directly on success, warning or destructive fills. Use their paired -foreground tokens only for short labels in badges, alerts and buttons.