Patterns

Primitives composed into the layouts that actually ship: navigation, overlays, data display. The single-element pieces live in components.

Tabs

Jadeite is the anchor. It shows up in three modes — dark, light, and monochrome.

Nav bar

Sidebar shell

Color

Every color has a name and a reason. Use the named token, not the hex.

Breadcrumb & pagination

breadcrumb
pagination

Dropdown menu

attached to trigger

Modal

Tooltip & popover

Copies the hex to your clipboard
Electric jadeite

The neon version of the anchor. Labradorite glow, hover energy, the moment it lands.

Open in field notes →

Table

TokenNameRoleHexStatus
--bbs-jadeiteJadeiteBrand anchor#3bc3a6stable
--obsidianObsidianBackground anchor#120227renamed
--amethystAmethystViolet support#8000ffrenamed
--rose-quartzRose QuartzBackground warmth#ffe2eerenamed
--neon-yellowNeon YellowHighlight#ffff00reserved

Empty state

No projects yet

When you start something, it shows up here — drafts included, half-finished ones especially.

?

Nothing matched "opalight"

Check the spelling, or browse the full token list instead.

Accordion

Why three themes?
Because the brand has three moods. Labradorite is the brain when it's running, opalite is the brain at peace, jadeite is the system turned all the way up.
Can I add a color?
Only if you can name the mineral. If you can't name it, you don't need it.
Where does the heart go?
In the lockup. Always. If the design can't hold it, redesign the container, not the lockup.