flora
components.
flora components have no colour of their own. on BG sites, like this one, they're black and white. inside a product we build for others, they take on that product's colour. drag the hue above to try it.
components
marketing.
hero · product tile · code block
hero
eyebrow, display headline, subtitle, actions
headlines are at most 8 words, one idea, and end with a period. wrap a phrase in <em> to tint it with the accent. the parts stagger in by 60ms.
binary garden
open source, for humans.
a community of technical creatives building free software that shares one design language.
product tile
where colour shows up on BG sites
each tile carries its product's colour, and everything inside it uses that colour. with no image, the tile shows the product's initials.
sizes
the splash grows: 72 / 120 / 200.
sm
small
md
medium
lg
large
code block
header, line numbers, copy
code uses the system mono stack — code is content, not brand. the copy button flashes the accent.
terminalsh
npm i @binarygarden/flora
Button.tsxtsx
export function Button({ variant = 'primary' }) { // every colour comes from a token return <button className="fl-btn" data-variant={variant} />;}
no header, just a floating copy button