design system

jadeite core. low friction. built with intent. built by stephen.

Docs

readme README Overview, principles, and how to use the system. Start here. ↗ skill SKILL.md Quick invocation for Claude. Recipes, checklist, the three laws. ↗ tokens bbs-tokens.css Single source of truth. Every color, type, spacing, and theme binding. ↗ field notes Jadeite Field Notes The why behind the color. Voice, posture, and the rule that the heart is the signature. ↗

Gallery

01 Cover Brand lockup. Hero treatment. Theme switch across all modes. ↗ 02 Colors Jadeite anchors, labradorite/opalite/jadeite palettes, semantic tokens. ↗ 03 Typography Poppins 300–600. Scale, weight ladder, the contract. ↗ 04 Foundations 8pt grid, radii, elevation, blur, surfaces, focus, motion. ↗ 05 Components Buttons, links, chips, badges, every form control, avatars, progress. ↗ 06 Logo & signature Lockups, clear space, minimums, misuse, app icons, signature. ↗ 07 Patterns Nav, tabs, overlays, menus, tables, empty states, accordion. ↗

Worked examples

ex 01 Splash · home Calling card. Lockup, taglines, three nav pills. The minimal entry point. ↗ ex 02 About · stephen Headshot, pills, what-guides-me / how-i-help cards, seven real socials. ↗

Project Jadeite

mission Project Jadeite The shipped mission statement: showing up with the brain Stephen actually has. ↗