The Jadeite Field Notes

This is Built by Stephen's constitution. Every design decision in this system should pass through it.

1 — What this brand actually is

Built by Stephen is a neurodivergent-first system. Not a studio, not an agency, not a portfolio. It's a set of tools built by someone who learned late what his own brain was doing, and is now making the things he wishes he'd had.

The brand metaphor is glass and mineral. Jadeite is the anchor: green, quiet, load-bearing, a little magical. Everything else is the light moving through it.

The voice is tender, precise, and late-night honest. We don't do corporate polish. We don't do chest-thumping swagger. We sound like someone who has been through it and is trying to tell you the truth without making it weird.

2 — The three operating principles

Mint-bright

Jadeite is the constant. Not a logo decoration — the anchor. Every page has it somewhere, even if it's just the heart in the footer. If a design can't make room for the heart, the design is wrong.

Glass-clear

We don't hide the machinery. The tokens are named. The weights are labeled. The reasoning is written down. A reader should be able to look at any component and see how it was made — that's the neurodivergent-first part. Opacity is cruelty.

Finally true

Nothing on the page fights the reader. No dark patterns, no fake urgency, no attention hijacks. The design's job is to let the person arrive at what they came for and feel a little more seen on the way.

3 — The named palette

Colors have names because they carry meaning, and meaning carries further than hex codes. The names come from the mineral world — the same glass-and-mineral the brand is built on. A few of the descriptions still carry lines that were playing during the late-night aha-moment hours; they're kept as examples of the voice, not as the names.

The anchor (sacred — do not rename)

Jadeite has two forms because the brand has two moods. Same mineral, different light.

Labradorite — the late-night brain

For dark surfaces. High contrast. The brain when it's running.

Opalite — the glass-clear, soft-morning brain

For light surfaces. Lower contrast. The brain when it's at peace.

Neutrals and text

Gotchas — tokens that aren't what they look like

Two tokens will silently break a rule if you use them where a plain color belongs. CSS drops an invalid declaration without a word, so nothing errors — it just doesn't paint.

The trap: var(--bbs-bg, #000) looks safe, but the fallback never fires — the variable is defined, it's just the wrong type. Silent failure either way.

When you need a solid color that matches the theme's ground, use --bbs-primary-ink. It's a real color in all three themes.

/* wrong — declaration is dropped, no warning */
border: 2px solid var(--bbs-bg);

/* right */
border: 2px solid var(--bbs-primary-ink);

Floats — not colors, but words that carry color

Some things aren't a hex code; they're a posture. These live in the voice, not the tokens.

• Milk Opal — the tender, protective register. Used in copy about family, mom's line, the "I'd do anything for you" moments. Never put this in a swatch. Let it float.
• The Aha Moment — the feeling the whole system is built to produce: something lands for a brain that doesn't usually get that feeling. It conjugates, so use the form the sentence needs: it clicks / it computes (verb), the aha moment (noun), the moment it lands (modifier). Don't hyphenate it into an adjective. Headers and product copy, never a color name.
• Hummingbird — the gradient/glow emblem reserved for Project Jadeite's most precious moments. Small, fast, almost-missed. If you're tempted to use it for decoration, don't.

4 — Voice rules

1. Down-to-earth, bestie energy. Friendly, Gen-Z-meets-millennial, no corporate filler. Write copy as if you're explaining something to a friend at a kitchen table. Lowercase is fine when it suits the vibe — the lockup itself is built by 💚 stephen, all lowercase.
2. Lowercase-first. Headings, labels, lockups. Capital letters feel corporate-loud. Save caps for the eyebrow ALL-CAPS treatment where the letterspacing does the work.
3. Specific over general. "It clicks" over "intuitive." "Late-night" over "dark mode." The specificity is the voice.
4. Name colors for the mineral, not the look. Obsidian, fluorite, celestite — the material the color behaves like, not a description of it. "Deep indigo" is what the hex already says. If you can't name the mineral, you don't need the color.
5. No em-dashes-as-drama. Em dashes are for breath, not for punchlines.
6. Never "simply," "effortlessly," "seamlessly." Those are the filler words of a brand that hasn't decided what it actually thinks.
7. When in doubt, ask: would this make someone newly-diagnosed feel less alone, or more alone? That's the test.

5 — When Claude (or anyone) is working in this system

• Read this file first. Every time.
• Use the named tokens, not the hex codes. If you reach for a hex, stop and ask which token you meant.
• If you invent a new color, give it a named reason. If you can't name it, you don't need it.
• The jadeite heart goes in the lockup. Always. If the design can't hold it, redesign the container, not the lockup.
• preview/ pages are the review surface. tokens/bbs-tokens.css is the source of truth. Everything else is downstream.

Built for the aha moment.