design system

jadeite core. two modes. 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. ↗ voice on jadeite 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 in both modes. ↗ 02 Colors Jadeite anchors, synthwave/vaporwave palettes, semantic tokens. ↗ 03 Typography Poppins 300–600. Scale, weight ladder, the contract. ↗ 04 Spacing & shape 8pt grid, soft radii, elevation/glow, glass recipes. ↗ 05 Components Buttons, chips, badges, inputs, toggles, cards, alerts. ↗ 06 Logo & signature The marks, heart hierarchy, never-rules, signature in context. ↗

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. ↗