# on jadeite *Built by Stephen's constitution. Every design decision passes 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 manifesto-bro 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. Many of these reference *Midnights* (Swift, 2022) — because that record was on repeat for a full year during the late-night operating-system-ON hours, and the songs are already doing the work of naming the feelings we're coloring. ### The anchor (sacred — do not rename) | Token | Hex | What it is | |---|---|---| | `--bbs-jadeite` | `#3bc3a6` | Jadeite. Logo hearts, static brand marks, vaporwave accent. | | `--bbs-electric-jadeite` | `#04ffb2` | The neon version. Synthwave glow, hover energy, "click into place" states. | Jadeite has two forms because the brand has two moods. Same mineral, different light. ### Synthwave — the operating-system-ON, late-night brain For dark surfaces. High contrast. The brain when it's running. | Token | Hex | Song | Use it when... | |---|---|---|---| | `--midnight-rain` | `#120227` (bg anchor) | *Midnight Rain* | You need the deep-indigo backdrop. "It would've been fun, if you would've been the one." | | `--lavender-haze` | `rgba(224, 224, 255, 0.85)` | *Lavender Haze* | Secondary text and the hazy mid-tones. The color of thinking at 2am. | | `--neon-kiss` | `#ff0080` | — | Primary CTA. Hot pink, no apology. | | `--bejeweled` | `#ff00a0` / magenta | *Bejeweled* | State changes, "shimmer back to life" moments, the click-into-place feedback. | | `--karma` | `#8000ff` (purple) | *Karma* | Softer violet support. Karma is a cat purring in your lap. Karma is *your* friend. | | `--anti-hero-cyan` | `#00ffff` | — | Electric cyan accent. Sparingly. | ### Vaporwave — the glass-clear, soft-morning brain For light surfaces. Lower contrast. The brain when it's at peace. | Token | Hex | Song | Use it when... | |---|---|---|---| | `--snow-on-the-beach` | `#ffe2ee` / pale blush | *Snow on the Beach* | Background warmth. Cream-pink. Quiet, tender, unprecedented. | | `--anti-hero` | `#9ac1ff` (powder blue) | *Anti-Hero* | The self-aware morning color. "It's me, hi, I'm the problem it's me." | | `--labyrinth` | `#d4a5ff` (lavender) | *Labyrinth* | Muted violet ground. "Uh oh, I'm falling in love again." The slow-reveal color. | | `--sunwash` | `#ffb5a5` (peach) | — | Warm highlight. Morning light on a kitchen counter. | | `--paper-rings` | reserved | *Paper Rings* | Tender emphasis. Earnest, unpretentious. Use sparingly for "I'd marry you" moments in copy — small joyful highlights. | ### Neutrals and text | Token | Hex | What it is | |---|---|---| | `--glass-clear` | `#ffffff` | Synthwave primary text. Near-white, slightly warmed. | | `--console-whisper` | `rgba(224, 224, 255, 0.60)` | Muted UI text on dark. The monitor glow of an idle terminal. | | `--ink-well` | `#2d1b3d` | Vaporwave primary text. Deep plum-ink. Never flat black — the ink itself is already branded. | | `--mint-bright` | `#eafff7` | Jadeite-tinted off-white. Used for display lockup names so they sit in the brand even when they're "light." | ### 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. - **Sweet Nothing** — 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. - **Operating System** — the brand's *verb*. When something clicks into place for someone whose brain doesn't usually get that feeling, it's the OS working. Use the phrase in headers and product copy, not as a color. - **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. **Lowercase-first.** Headings, labels, lockups. Capital letters feel corporate-loud. Save caps for the eyebrow ALL-CAPS treatment where the letterspacing does the work. 2. **Specific over general.** "Snow on the beach" over "soft pink." "Operating system" over "framework." The specificity *is* the voice. 3. **Song-title cadence.** Short. A little askew. A noun phrase that implies a whole scene. 4. **No em-dashes-as-drama.** Em dashes are for breath, not for punchlines. 5. **Never "simply," "effortlessly," "seamlessly."** Those are the filler words of a brand that hasn't decided what it actually thinks. 6. **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 operating system you didn't know you had.*