Developer handoff.

Copy colors_and_type.css and the /fonts directory into your project. Then link the stylesheet from your HTML head:

<link rel="stylesheet" href="/colors_and_type.css">

That's it. colors_and_type.css declares @font-face for every weight of Tobias, Haffer, and PP Neue Montreal Mono, plus the four hand-rendered display faces used in editorial accents (La Frenchie, Mark My Words, The Secret Things, Miss Confidential). All paths are relative to /fonts.

Reference tokens by name. If a value isn't tokenized, add it to colors_and_type.css rather than hardcoding inline. The table below is the at-a-glance set—the full token list (~60 entries) lives on the foundation pages.

Full list lives in Foundations · Color, Typography, and Spacing & Radii. Print/production reference is on Production Swatches.

These can't be enforced by CSS alone. Reach the visual outcome the system asks for—if a snippet you're using looks like it violates one of these, that's a bug. The full list with rationale lives in the README hard-rules section.

Every component page has a Source tab with the full HTML/CSS. There's no JSX wrapper or framework dependency—drop the markup into whatever you're shipping (Next.js, Liquid, Astro, plain HTML). Listed roughly in order of how often you'll reach for them.

• All componentscomponents/index.html — thumbnail index, 12 entries
• Buttonscomponents/buttons.html — primary, ghost, color CTAs, tags, pills, links
• Section Headercomponents/section-header.html — eyebrow + rule + title pattern
• Product Cardcomponents/product-card.html — SKU tile with Benefit List rollover
• Quick Viewcomponents/quick-view.html — PLP overlay drawer
• Subscribe & Savecomponents/subscribe-save.html — PDP price-variant toggle
• What's Insidecomponents/whats-inside.html — mobile-first ingredient module
• PDP Trust Stripcomponents/pdp-trust-strip.html — four-badge below-the-fold strip
• Benefit Listcomponents/benefits.html — packaging-front benefit column
• Doctor's Notecomponents/doctors-note.html — clinical hairline-grid template
• Prompting Cardscomponents/prompting-cards.html — playing-card chassis (capture + present modes)
• Timeline Carouselcomponents/timeline-carousel.html — LifeArcTimeline (migrated from the retired Web UI Kit)
• Mega Navcomponents/mega-nav.html — top-level navigation panel
• Info Cardscomponents/info-cards.html — clinical / editorial card patterns
• Formscomponents/forms.html — input, select, checkbox, prescription-pad motif

Six families ship as inline SVG with charcoal strokes. Two sizing rules apply across the system:

• PDP / e-comm30 × 30 viewBox at 1.25px stroke — legibility wins over elegance in commerce contexts
• Storytelling / social / email48 × 48 viewBox at 1px stroke — lighter, more editorial

The Benefit Icons page has a live toggle to compare both modes side-by-side. Source SVGs are linked per-tile; right-click to inspect or grab from /assets/<family>/.

• Globaliconography/global.html — UI affordances, arrows, dots
• Benefit Iconsiconography/benefit.html — 87 marks, claim ↔ SKU mapped
• Product Iconsiconography/product-icons.html — 32 SKU-level glyphs
• Trust & Value Badgesiconography/trust.html — 10 commerce badges (PDP minis + compact tag-pills for mobile)
• Standards Iconsiconography/standards.html — six stage-disc markers (OB/GYN-formulated, 3rd-party tested, etc.)
• Ingredient Indicatorsiconography/ingredient.html — 7 allergen / dietary cues
• Instructional Iconsiconography/instructional.html — 11 dose / timing / mode glyphs

Nine canonical chart types live under dataviz/. They share a common stylesheet (dataviz.css) and a small behavior layer (dataviz.js) for hover, count-up, and stage-color swap. Each page has source you can lift.

• Stat Ring · Stack · Splitdataviz/stat-ring.html · stat-stack.html · stat-split.html
• Bar · Line · Radialbar-chart.html · line-chart.html · radial.html
• Venn · Infographic · Spec Tablevenn.html · infographic.html · spec-table.html

Email blocks ship as table-based HTML compatible with major ESPs (Klaviyo, Postscript, Iterable). The Email Overview stitches the system together; the six block libraries below give you per-purpose drop-ins.

• Hero Blockskits/email-heroes.html — full-bleed and split treatments per stage
• Stat Blockskits/email-stats.html — large-numeral RCT callouts
• Editorial Blockskits/email-editorial.html — long-form magazine layouts
• Product Blockskits/email-products.html — SKU cards, comparison rows
• Lifecycle Blockskits/email-lifecycle.html — welcome series, win-back, replenishment
• Utility Blockskits/email-utility.html — order receipts, shipping notifications, footers
• Sample 01 / 02email-sample-01.html · email-sample-02.html — fully-composed reference emails

Composed UI surfaces—useful as a quick reference for how the components stack together on a real page or asset.

• Collection Page UXkits/shop-all.html — PLP / shop-all composition
• Product Page UXkits/pdp.html — full PDP stack, sticky add-to-cart, RCT cards
• Clinicalkits/clinical.html — doctor's-note variants, ID tags, story covers
• Socialkits/social.html — 1:1 and 4:5 frames
• Adskits/ads.html — paid-media frames per stage
• Co-brandkits/campaign.html — partnership campaign layouts
• Presentationkits/presentation.html — slide templates for internal + stakeholder decks

Packaging is documented separately at Packaging (Daily Pill Packs live; Bottles, Gussets, and Jars locked until comps land).

If you're writing UI copy, microcopy, or any string that ships—read the brand-voice pages first. The system carries voice patterns that aren't visible in code but are easy to violate without realizing.

• Brand Housebrand-voice/brand-house.html — values, promise, vocabulary
• Personabrand-voice/persona.html — who Perelel sounds like
• Tone of Voicebrand-voice/tone-of-voice.html — do / don't pairs
• In Practicebrand-voice/in-practice.html — worked examples on real surfaces