Design systemPro

RUBRA

A warm, exact system for brand studios and editorial brands, set like a botanical plate on cream paper.

Everything on the bench is live. Hover it, type in it, tab through it, or flip Season.

About the system

Built from: RUBRA website
Components: 38 in 7 groups, every state
Typefaces: Italiana, Libre Franklin
Season: Every page starts as a line. Bare keeps the system in ink with its leaves in outline; In leaf fills every leaf, bud and branch with vermilion, and the traced tree comes into full red leaf over its own drawing.
Format: HTML, CSS and JavaScript with no dependencies, plus DESIGN.md
Version: 1.0

A brand book page for a ceramics studio, built only from the kit. It ships as the starter, ready to rename.

DESIGN.md: Rules for building with the system, written to hand to Claude, Lovable or a developer
tokens/tokens.json: Every colour, size, space and timing as named tokens
tokens/tokens.css: The same tokens as CSS variables, including both seasons
css/rubra.css: All components and their states
js/rubra.js: Season, the growing tree, tabs, dialogs, toasts, the specimen card, clocks and the navigation branch. No dependencies
js/rubra-tree.js: The traced tree, 32 KB, registered to the Specimen photographs
components.html: Every component in every state, side by side
starter/index.html: A brand book page for a client, built only from the system
assets/imagery/: Specimen, daylight and canopy photographs at full resolution
LICENSE.md: Commercial use in your own and client projects

Attach DESIGN.md
Add it to your conversation in Claude, Lovable or any AI builder.
Describe your page
In your own words, with your own brand and content.
Keep the code or port it
Link the token and component CSS, or ask for React. The rules hold either way.

Layout: Twelve-column sheet, Carmine frame, Branch rule, Leader rows, Figure annotations
Actions: Seal button, Ruled button, Leaf link, Icon button, Text link
Input: Text field, Select, Textarea, Checkbox, Radio, Leaf switch, Segmented control, Specimen card
Data: Index tabs, Register table, Studio clock, Counter, Index list
Status: Tag, Note, Branch progress, Steps, Stamp, Toast
Content: Plate, Bloom plate, Traced tree, Service band, Case sheet
Overlay and navigation: Dialog, Navigation bar, Menu sheet, Colophon

See the full website the system comes from.