plants of a particular region or time
react components for binary garden
npm i @binarygarden/flora
import '@binarygarden/flora/styles.css';import { ProductScope } from '@binarygarden/flora/theme';export default function Layout({ children }) { // one hue. that's the whole theme. return <ProductScope hue={330}>{children}</ProductScope>;}
one hue is the whole theme.
every binary garden site and product is built from the same components, type, spacing and motion. our own sites, like the trunk and this one, are black and white. each product we make for others adds one color. the rules below make that work.
color
oklch hue 150 at chroma 0.004 — a trace of chlorophyll, so black and white read as paper and soil rather than #000 and #fff.
data-theme='dark' on <html>. the same hue with inverted lightness; borders replace shadows.
--product-hue is the only thing that changes between products. the trunk sets none, so the accent is just the text colour: black in light mode, white in dark.
status only, never decorative. a semantic colour on a button that isn't reporting state is a bug.
type
hanken grotesk, medium, tracking -0.03em, leading 1.05. text-wrap: balance on headings.
one family. hierarchy comes from size, weight and tracking — never from a second face.
11 → 88 in 11 steps.
| token | px | specimen |
|---|---|---|
--text-2xs | 11 | binary garden |
--text-xs | 12 | binary garden |
--text-sm | 13 | binary garden |
--text-md | 15 | binary garden |
--text-lg | 18 | binary garden |
--text-xl | 22 | binary garden |
--text-2xl | 28 | binary garden |
--text-3xl | 36 | binary garden |
--text-4xl | 48 | binary garden |
--text-5xl | 64 | binary garden |
--text-6xl | 88 | binary garden |
lines of 45–75 characters read best, so headings and paragraphs cap their width in ch. the bigger the text, the shorter the line.
| text | max-width |
|---|---|
| display (hero headline) | 16ch |
| h1 | 24ch |
| hero subtitle | 48ch |
| lead paragraph (lg) | 60ch |
| body and small paragraphs | 68ch |
this paragraph stops at 68ch however wide the window gets. below that it wraps with its container like any other text. code, tables, labels and one-line ui text like buttons and nav are not capped.
labels are lowercase at +0.02em tracking and use --fg-2, not --fg-3, on the page background. code uses the system mono stack.
const hue = 330; // the whole theme
spacing & shape
4px base. components use 1–6; sections use 20–24 of vertical space.
--space-14--space-28--space-312--space-416--space-520--space-624--space-832--space-1040--space-1248--space-1664--space-2080--space-2496--space-3212832 / 40 / 48. every control in the system lands on one of these.
soft, not round — the radius grows with the box. shadows appear only on things that float; resting cards use a border.
| token | px | used for | specimen |
|---|---|---|---|
--radius-xs | 4 | badges, focus | |
--radius-sm | 6 | controls | |
--radius-md | 8 | cards, code | |
--radius-lg | 12 | tiles, dialogs, palette | |
--radius-full | 999 | tags, switches |
motion
ease-out for most things; the spring is for entrances only, because it overshoots. reduced motion zeroes every duration.
| token | curve | used for |
|---|---|---|
--ease-out | cubic-bezier(0.2, 0.8, 0.2, 1) | state changes, 120–200ms |
--ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | symmetric moves |
--ease-spring | cubic-bezier(0.34, 1.4, 0.64, 1) | entrances only — it overshoots |
buttons lift 1px on hover, cards 2px with a shadow. press scales to .98. reveals rise 12px and fade, staggered 60ms.
hover me
lift 1px + shadow
press me
scale .98
revealed
rise 12px + fade
a 2px accent ring offset by the page colour. inputs get a 3px soft-accent halo instead. tab through these.
brand
the five-petal flower: black on light, white on dark, never recoloured or tinted with a product hue. minimum 20px. the name is set beside it in hanken grotesk 500 at -0.01em.
terse, technical, lowercase. say the thing.
| do | not |
|---|---|
| open source, for humans. | Powerful, Seamless Open Source! |
| read the docs | Learn More |
| publish | Get Started Now |
| v1.2 · 14 contributors | Version 1.2 (14 contributors!) |
| published | We published your changes 🎉 |