Design Tokens
All values are CSS custom properties. The sidebar controls override [data-theme] and [data-fonts] on the root element — copy the same pattern for any project.
Switch theme in the sidebar — swatches below update live.
Shadow scale (current intensity: default)Typography
Two fonts per pairing — switch using the sidebar. Headings use the display/serif, body uses the sans. Use italic heading for brand accent moments. Never a third typeface.
Icons — Phosphor
Use Phosphor Icons exclusively. Never emoji or unicode symbols. Load via CDN: unpkg.com/@phosphor-icons/web@2.1.1. Use the ph + ph-[name] class pattern. Default weight is Regular — use ph-bold class for heavier strokes.
Forms & Inputs
Focus ring uses brand color. Error state uses brand color at higher opacity. All interactive states transition at 150ms.
Radio buttons
Inline email form
No spam. Unsubscribe any time.
Badges, Pills & Eyebrows
One badge maximum per section header. Eyebrows open every section heading — always above the H2, never below.
Cards
Rest state: border only, no shadow. Hover state: translateY(-4px) + shadow-lg. Never apply a heavy resting shadow — it flattens the hover effect.
Hero Section
Two-column grid. Text left, media right. Collapses to single column below 900px. The kicker badge, italic H1, subtext, CTA row, and rating strip are all optional but follow this fixed order when present.
Hero — Full Background Image
Content left-aligned over a full-bleed image or gradient. A dark overlay ensures text legibility. Use when the product photo or lifestyle image is the message. Swap .hero-bg-img for a real <img> or background-image.
Hero — Full Video Background
Centered content over an ambient video loop. The play button is optional — use it when the video itself is a key part of the story. Replace .hero-video-bg with a <video autoplay muted loop playsinline> element absolutely positioned to fill the container.
<div class="hero-video">
<video class="hero-video-bg"
autoplay muted loop playsinline
style="object-fit:cover;width:100%;height:100%;position:absolute;inset:0;">
<source src="hero.mp4" type="video/mp4" />
</video>
<div class="hero-video-overlay"></div>
<div class="hero-video-inner">
<!-- content -->
</div>
</div>
Trust Band
Dark background, 5-column grid of proof points. Place immediately after the hero or before a pricing section. Use Phosphor icons above each label.
How It Works / Steps
3-column grid. Large faded number from Newsreader. No icons needed — the numeral is the visual anchor.
Three steps to healthier hair
FAQ Accordion
One open at a time. Border top on each item, border bottom on the last. Icon toggles between ph-plus and ph-minus.
Frequently asked
CTA Section
Full-width dark gradient. Brand color bleeds in from both sides. Centered text, max-width 680px, single primary CTA.
Design Principles
Non-negotiable rules. Every one-pager built from this system must follow these.
clamp(min, vw, max). Body text stays fixed at 15–17px. Never hardcode px for a heading.cubic-bezier(0.16, 1, 0.3, 1). Quick: 150ms. Hover: 200ms. Reveals: 650ms. Always respect prefers-reduced-motion.Architecture & Reuse
How to inherit this design system in any new project — HTML, PHP, or React.
:root + [data-theme] + [data-fonts] blocks. Works in plain HTML, PHP, Svelte, Vue, React — zero dependencies. This is your design contract..btn-warm, .card, .nav, etc. classes are portable. Copy them into any project stylesheet. They reference only Layer 1 tokens — no hardcoded colors.<Button family="warm" size="lg" />). They emit the same HTML + classes. No logic duplication. For plain HTML/PHP: use the classes directly.GET /tokens — returns all CSS custom properties as JSONGET /component/:name — returns the HTML + CSS for a named componentGET /section/:name — returns a full section block ready to pasteClaude can call this server via an MCP connector at session start instead of reading this file. Until then, reading this file is equivalent and has zero infrastructure cost.