← design system

Color

Jadeite is the anchor. It shows up in three modes — dark, light, and single-hue. Every color has a name and a reason; use the named token, not the hex. Read the field notes →

Jadeite — brand anchor

Jadeite #3bc3a6 Logo hearts · static brand marks · opalite accent
Electric Jadeite #04ffb2 Labradorite glow · hover energy · active state

🌙 Labradorite the aha moment

Cyberpunk neon on deep space. Deep glass (0.03 soft layers, 0.82 cards) over a dramatic gradient. The brain when it's running.

Neon Kiss#ff0080Primary CTA · hot pink, no apology
Spinel#ff00a0State change · shimmer back to life
Electric Jadeite#04ffb2Glow · hover · brand
Apatite#00ffffAccent · sparingly
Lapis Lazuli#303698 + pyriteCalm accent · deep panel tint
Lapis Bright#8a91ecLapis, legible as type on dark
Pyrite#d9b45aThe gold flecks · texture only
Amethyst#8000ffSofter violet support
Fluoritee0e0ff / 85% · crystalFlat: secondary text · Banded: .bbs-fluorite surface
Obsidian#120227Background anchor
Glass Clear#ffffffPrimary text on dark

🌅 Opalite glass clear

80s pastels on a dreamy spectrum. Higher-opacity glass (0.40 soft layers, 0.78 cards) with soft shadows. The brain when it's at peace.

Soft Pink#ff9ac1Primary CTA
Celestite#9ac1ffPowder blue · self-aware morning
Jadeite#3bc3a6Brand anchor
Lepidolite#d4a5ffLavender · the slow-reveal color
Sunwash#ffb5a5Peach · morning light
Lapis Lazuli#303698 + pyriteCalm accent · full depth on light
Rose Quartz#ffe2eeBackground warmth · tender, unprecedented
Mint Bright#eafff7Jadeite-tinted off-white · lockup names
Ink Well#2d1b3dDeep plum-ink · primary text

💚 Jadeite monochrome · dark

One hue, two intensities. Jadeite gradients over a deep jadeite near-black — no second color, just the brand turned all the way up. The brain in single-minded focus.

Deep Jadeite#04150fBase anchor · jadeite at near-black
Jadeite#3bc3a6Primary · the one color
Electric Jadeite#04ffb2Glow · accent · hover · heart
Jadeite Hazecff5eb / 82%Secondary text
Mint Bright#eafff7Primary text · lockup names
Jadeite Glass0b1e1b / 82%Surface card

Semantic tokens (auto-bound per theme)

--bbs-primaryCTA fill
--bbs-accentSecondary
--bbs-glowActive · hover
--bbs-heartSignature
--bbs-accent-calmQuiet accent
--bbs-surface-deepDeep panel
--bbs-voiceItalic / personal copy
--bbs-surfaceGlass card
--bbs-surface-softInset

Stone textures — backgrounds, not colors

--lapis-flecked#303698 + pyrite.bbs-lapis adds a scrim for type
--fluorite-crystalpurple · teal · mint crystal zones.bbs-fluorite · type on a glass panel only

Status colors — universal, not themed

These stay constant across labradorite, opalite and jadeite. Amber means caution, red means stop — same everywhere, so users don't have to relearn the signal when the theme changes.

--bbs-status-warning#ffb454Caution · amber
--bbs-status-danger#ff5a7aStop · coral red
--bbs-status-info#7ab5ffInformational · soft blue

Floats — words that carry color, but aren't swatches

Some things aren't a hex code; they're a posture. These live in the voice, not the tokens. Named so they can't be lost — but never locked to a single color.

Float
Milk Opal
The tender, protective register. Copy about family, mom's line, the “I'd do anything for you” moments. Never a swatch. Let it float.
Float
Moonstone
Tender emphasis. Earnest, unpretentious. Reserved for small joyful highlights — the “I'd marry you with paper rings” moments in copy.
Float
The Aha Moment
The brand's verb. When something lands for someone whose brain doesn't usually get that feeling, that's the aha moment. Lives in headers and product copy, not in a color.
Float
Hummingbird
Project Jadeite's precious-moment emblem. Small, fast, almost-missed. If you're tempted to use it for decoration, don't.