The architecture is the deliverable. The components are the evidence.
A 6–10 week engineering-architecture engagement: token pipeline, framework adapters, component contract template, AAA-bucket conformance floor, CEM authoring. Signed architecture document under principal-engineer attestation. Anchored on HELiX as the reference implementation.
$75,000–$150,000 Six to ten weeks · T&M with cap
A layered architecture diagram — primitive tokens → semantic tokens → component CSS custom properties → framework adapters (web components / React / Vue / Astro) → consumer apps. Each layer labeled, each interface contract sketched, AAA-bucket criteria threaded through every layer. Reads as "the architecture is the deliverable, not the components."Most 'design systems' are styled components plus a Figma file. That's not an architecture.
Component libraries fail in predictable ways: tokens were chosen for the first brand and never generalized; framework adapters were bolted on after the fact and break SSR; component contracts drift between authors because there’s no template; accessibility was added in retrofit and rots every release; the CEM was never authored, so AI tooling hallucinates props; the next brand requires a 6-month rewrite because the architecture didn’t anticipate it.
None of those failure modes are styling problems. They’re architecture problems — the layered contract that should sit beneath the components was never written down, never signed, never defended. When the team that authored the library leaves, the architecture leaves with them. When a new framework lands (React Server Components, Astro Islands, Vue 3.5), the library doesn’t survive the migration.
The Component Library Architecture engagement is the architecture-first version. Token pipeline authored in W3C DTCG, transformed through Style Dictionary, output as CSS custom properties + JS exports + Tailwind config. Framework adapters designed before any components ship, with SSR + bundle-size + interop tested as architectural invariants. Component contract template authored as the boilerplate every component in the library conforms to. AAA-bucket floor (the 9 + 2) threaded through every layer. CEM authoring as a first-class concern so HELiXiR can serve agent-readable component lookup. The architecture is signed; the reference components are the proof.
Anchored on HELiX — open-source, in production, externally audited. The same architecture pattern, applied to your specific stack.
What ships
-
Architecture document — signed
The deliverable. A 30-to-60-page architecture document covering token pipeline, framework adapter strategy, component contract template, accessibility floor (WCAG 2.2 AA + the 9 AAA-bucket SCs), CI gates, versioning policy, deprecation policy, and CEM (Custom Elements Manifest) authoring. Signed under principal-engineer attestation through Clarity House LLC.
-
Token pipeline — W3C DTCG → Style Dictionary → CSS custom properties
Three-tier token graph: primitive (color scales, type ramps, spacing) → semantic (focus-ring-color, target-touch-min, danger-text) → component (button-padding-block, dialog-backdrop). Authored in <a href="https://www.designtokens.org/tr/drafts/format/">W3C DTCG format</a>, transformed via Style Dictionary, output as CSS custom properties + JS exports + Tailwind config. Rename plan + migration script when an existing library has token-shape regrets.
-
Framework adapter strategy
Web-component core + framework adapters (React, Vue, Angular, Astro, vanilla HTML) — same as <a href="/helixui">HELiX</a>. The architecture document specifies how adapters wrap the web-component primitives, how events / props / slots forward, how SSR works (Astro / Next), and how framework-specific upgrade paths land without breaking the core.
-
Component contract template
Every component in the library implements the same contract template: ARIA role + APG keyboard pattern + slot definitions + CSS parts + lifecycle events + per-criterion AAA-bucket fixtures. Template is the doc, not the implementation — your engineering team uses it to scaffold the next 50 components consistently after the engagement closes.
-
Reference component implementations
Three to five reference components built end-to-end against the new architecture (typically: button, input, dialog, menu, tabs — chosen by complexity coverage). The components are the proof-of-architecture, not the goal — your team builds the rest of the library following the pattern, not paying BST to build all 50.
-
Storybook + per-component a11y fixtures
Storybook configured with the framework adapters; per-component stories include a11y addon, keyboard-walkthrough scenarios, prefers-reduced-motion emulation, forced-colors emulation, focus-not-obscured occlusion fixtures. The fixtures are CI gates — components ship green or they don't ship.
-
CEM authoring + HELiXiR-ready surface
Custom Elements Manifest (CEM) generated for every component — props, attributes, slots, CSS parts, events, framework adapter mappings. CEM-compliant means the library is consumable by <a href="/helixir">HELiXiR</a> as an agent-readable surface — your engineers using Claude Code / Cursor / Copilot get accurate component lookup, not hallucinated props.
-
AAA-bucket conformance floor (the 9 + 2)
Per-criterion conformance for the 9 component-shippable WCAG 2.2 AAA SCs + 2 peer standards (forced-colors, APG-keyboard) — same list <a href="/services/accessibility/aaa-token-pipeline/">D1</a> ships, but here engineered into the architecture from day one. Reference components ship at the AAA-bucket floor; the contract enforces it for every component your team builds after.
How it works
-
Discovery + audit
Week 1Deliverable Architecture audit + decision matrix
Read your existing library (or your existing framework choices, if greenfield), interview design + engineering + accessibility stakeholders, identify the constraints (which frameworks must be supported, which brands must be served, what regulatory exposure exists, what migration window is acceptable). Produce the architecture audit + decision matrix that gates the rest of the engagement.
-
Token pipeline + contract template
Week 2–3Deliverable Token graph, transform pipeline, component contract template
Three-tier token graph authored in W3C DTCG format. Style Dictionary transforms wired. CSS custom properties + JS / TS exports + Tailwind config generated. Component contract template drafted — the boilerplate every component in the library will conform to. AAA-bucket criteria threaded through both layers as enforced contracts.
-
Framework adapter scaffolding
Week 3–5Deliverable Working adapters for the in-scope frameworks
Web-component core scaffolded. Framework adapters built (React + Astro + vanilla HTML for compact tier; add Vue / Angular for standard / complex). SSR strategy implemented and tested. Adapter event / prop / slot forwarding patterns documented. Bundle-size budgets set per adapter. Each adapter ships with one reference component to prove the pattern.
-
Reference components + Storybook + a11y fixtures
Week 4–8Deliverable 3–5 reference components + Storybook + per-component CI fixtures
Reference components built end-to-end: button, text input, dialog, menu, tabs (or a coverage-equivalent set). Each ships with a complete contract — APG keyboard pattern, AAA-bucket conformance, CEM, framework adapters, Storybook story, per-criterion a11y fixtures. The components prove the architecture; your team uses them as the pattern for the rest.
-
Architecture document + signoff
Week 8–10Deliverable Signed architecture document + 60-min walkthrough
Architecture document finalized — 30-to-60 pages, principal-engineer-signed under Clarity House LLC. Walkthrough scheduled with engineering, design, accessibility, and (where present) counsel. Document covers everything: token pipeline, adapters, contract, AAA floor, CI gates, versioning policy, deprecation policy, CEM authoring, HELiXiR-readiness. The document is the deliverable; the components are the evidence.
Pricing
Engagement model Time & materials with not-to-exceed cap
Compact tier ($75K–$95K, 6 weeks): existing library rearchitecture, single brand, single framework adapter, AA + AAA-bucket floor. Standard tier ($95K–$120K, 7–8 weeks): multi-brand token mapping, two framework adapters, Storybook docs, per-component a11y fixtures. Complex tier ($120K–$150K, 8–10 weeks): greenfield architecture with full token pipeline, three+ framework adapters, multi-brand, AAA-bucket conformance matrix, principal-engineer-signed architecture document.
Anchor pricing reflects typical engagement ranges. Actual fees are scoped per engagement under time-and-materials with a not-to-exceed cap. Pricing shown does not constitute a binding offer.
Frequently asked questions
Why not just adopt HELiX directly?
What if my organization is on a framework HELiX doesn't anchor on?
How do I know the architecture will hold up?
How does CEM authoring tie into HELiXiR?
What does 'AAA-bucket floor' mean for buyer-supplied designers?
How does this differ from D1 (AAA Token Pipeline)?
Can I use this for a non-accessibility-anchored library?
Will the architecture document hold up under counsel review?
What happens after the engagement ships?
When architecture-grade isn't the right shape on its own
-
AAA Token Pipeline
When the existing library is brittle and D1's per-criterion remediation wants a clean foundation. Architecture-first lets D1 ship into a library where the contracts are honest.
-
Accessibility Governance Retainer
When the library is the strategic asset and the buyer wants quarterly conformance maintenance from day one. Architecture engagement transitions directly into E1's quarterly cadence on closeout.
-
Accessibility cluster overview
When the buyer is comparing across the cluster and architecture-grade is one of several possible shapes for the engagement.
Ready to put your component library on a defensible architecture?
Six to ten weeks. Token pipeline, framework adapters, component contract, AAA-bucket floor, CEM, signed architecture document. Anchored on the HELiX reference implementation.