PLW Component Library Handoff · README Vol. 1 · June 2026

Read me first.

One semantic component library, many brand skins. We design it once, then re-token it per customer. This page is the front door: what is here, how it is wired, and how to skin a new customer in three steps.

00

The one-paragraph version

What this is

A vertical-agnostic component library that powers every site PLW delivers. Every component reads tokens and never hardcodes a color, font, size, radius, or shadow. A "skin" is a stack of three independent layers set as attributes on one element: a palette (color), a type pairing (fonts), and a shape (radius + shadow). Set all three, drop in the customer's real brand hex, and the same markup wears their brand.

The math: 20 palettes × 11 type pairings × 5 shapes = 1,100 named combinations before a single custom color, all served by one untouched component layer. Built mobile-first, WCAG 2.1 AA, no runtime dependencies.

01

The whole thesis, in one widget

Try it

Every element below is a real component from the library, reading the live token contract. Tap a vertical: the palette, fonts, radius, and shadow all change at once. The markup never does.

Skin

Established 1994 · Three states

The same component, every brand.

Featured Active

Litigation

Trial-ready from day one, with the preparation to settle on your terms.

Corporate

From formation to exit, a steady hand on every transaction.

02

The whole job, start to finish

Skin a new customer in three steps

Compose the skin

Pick one palette, one type pairing, and one shape from the seeded sets, and set them as attributes on <html> or <body>. That is the closest starting point for the brand.

Drop in their color

Override --color-accent with the customer's real logo hex. The --color-accent-fg on-color is picked for AA contrast automatically. Hand over a full brand guide? Override --color-fg / -bg / -surface too.

Ship

Nothing in the component layer changes. Build the page from the primitives, layout, content, and card pieces, all of which already read the contract. Done.

// 1 · Compose the skin at the root. Three attributes.
<html data-palette="champagne" data-type="playfair" data-shape="refined">

// 2 · Drop in the customer's real brand color. Nothing else moves.
<html ... style="--color-accent:#b89254">
//    Full brand guide? Override the ground too:
//    style="--color-accent:#b89254; --color-fg:#1b2b2a; --color-bg:#f5f2ea"

// 3 · Build with components that already read the contract.
<button class="c-btn c-btn--primary c-btn--md">Request a consultation</button>

In a Tailwind v4 project the shared skeleton (type ramp, spacing, line-heights, border widths) lives in an @theme block so utilities are generated; the three layers are runtime-swappable attribute scopes, so they sit outside @theme. See Tokens (01) for the full file with copy-paste blocks.

03

Every variable a component may read

The token contract

Defined in tokens.css. Layer 1 (palette) sets color, layer 2 (type) sets fonts, layer 3 (shape) fills radius + shadow slots. The rest is the shared skeleton, constant across every skin.

Color · layer 1 (palette)

--color-fg--color-bg--color-surface--color-muted--color-accent--color-accent-fg--color-border--color-ring--color-success--color-warning--color-danger

Type · layer 2 + shared ramp

--font-display--font-body--font-mono--text-xs … --text-7xl--leading-none … -relaxed

Shape · layer 3 + shared

--radius-none--radius-sm--radius-md--radius-lg--radius-pill--shadow-sm--shadow-md--shadow-lg--shadow-inset--border-thin--border-default--border-heavy

Space · shared (4px base)

--space-1 … --space-32
04

What lives where

File map

FileWhat it is
The system (ship these)
tokens.cssThe contract. 20 palettes, 11 type pairings, 5 shapes, plus the shared skeleton. The only file a re-skin touches.
primitives.cssButton, link, badge, tag, divider, input, checkbox, radio, icon, focus ring.
content.cssEyebrow, heading cluster, h1–h6, lede, body, blockquote, callout, lists.
layout.cssContainer, section (tones/density), stack, inline, 12-col grid.
cards.cssHero, feature / service / pricing / stat / testimonial cards, FAQ item.
sections.cssComposed sections: hero variants, services grid, case-study tease, CTA.
Page chrome (per-site)
home.cssSite nav, hamburger drawer, section rhythm, footer, the re-skin dock.
templates.cssInner-page layouts: breadcrumb, article + sidebar, contact split, team grid, timeline, comparison table, 404.
Behavior (vanilla JS, no deps)
home.jsMobile nav drawer + FAQ accordion for assembled pages.
reskin.jsThe floating "Re-skin" control that retints a whole page live.
app.js · *.jsPer-doc-page switchers and demos (Storybook behavior only).
05

Live Storybooks · skin switcher on each

Component documentation

Each page documents its components with a variant gallery, accessibility notes, the token contract it reads, and copyable React/TSX. A skin switcher sits at the top of every one.

01 · FoundationTokensThe contract + mix-and-match playground, brand-guide override, and the full token file.Open → 02 · FoundationPrimitivesButton, link, badge, divider, input, checkbox, radio, icon, focus ring.Open → 03 · FoundationLayoutContainer, section, stack, inline, 12-col grid.Open → 04 · FoundationContentHeading cluster, scale, body, blockquote, callout, lists.Open → 05 · PiecesCards & first piecesHero, feature/service/pricing/stat/testimonial cards, FAQ item.Open → 06 · PiecesComposed sectionsHero variants, services grid, case-study tease, CTA bands.Open →
06

The system, assembled into real sites

Live pages

Whitman & Associates is a complete law-firm site in the champagne / Playfair / refined skin. Apex Roofing is the same component library re-skinned to yellow / Anton / brutalist, the thesis on one screen. Open the Whitman home and tap the floating Re-skin pill to flip the whole site live.

Law · champagneWhitman · HomeEditorial hero, credentials, practice, approach, pricing, testimonials, FAQ. Has the live re-skin dock.Open → Law · templateWhitman · Service detailBreadcrumb, article + sticky sidebar, related services.Open → Law · templateWhitman · AboutStory split, values, five-moment timeline, attorney grid.Open → Law · templateWhitman · PricingThree tiers, full comparison table, pricing FAQ.Open → Law · templateWhitman · ContactIntake form split with contact details and map placeholder.Open → Law · templateWhitman · 404Centered not-found with oversized display code.Open → Dental · coral softBright DentalA photo-forward family-dental site (home + services, about, membership, contact, 404) in the coral / Bricolage / soft skin, with user-fillable image slots and a validating booking form.Open → Trades · yellow brutalistApex RoofingThe same library, different skin. Proof the contract bends to any vertical.Open → Insurance · navy + brassCalderwood InsuranceLocal independent agency, family-run since 1978. Navy / Spectral / refined, with coverage grid, agents, and a quote flow.Open →
07

Keep the system honest

House rules

Tokens drive everythingA component never hardcodes a color, font size, radius, or shadow. Every visual decision reads a var(--*). If you need a value the contract does not have, add a token, do not inline it.
Mobile-firstDesigned at 360px and scaled up. Hit targets ≥ 44px. Test the hamburger drawer and grid collapse before shipping.
WCAG 2.1 AAVisible focus rings via --color-ring. Status is never color-only. --color-accent-fg is tuned per palette; pasted accents auto-pick a readable on-color.
Editorial weightNewspaper and courthouse, not SaaS gradients with floating glass. Real type, real hierarchy, generous rhythm.
No em-dashes in copyPeriods, commas, colons, middots. Anywhere a person reads it.
No runtime dependenciesVanilla JS, no animation libraries, no megapixel heroes. Keep Lighthouse at 95+.