Overview
Copper Hill’s platform was growing quickly, but our teams kept running into the same issues: inconsistent UI, duplicated work, and slow alignment between design and development. We needed a system that could scale with the product and bring everyone onto the same page.
The result was the Manifest Design System — a unified foundation spanning tokens, components, theming, and developer frameworks. It provides designers, engineers, and PMs with shared tools to move faster together.
Its architecture includes a Design Token Library, Figma Component Library, Angular Component Library, Storybook Sandbox, and centralized Zeroheight Documentation — all working in sync to deliver consistency and speed across the platform.
Token Architecture
To create a scalable foundation, we established a three-tiered token architecture:
- Primitive tokens — the raw values (e.g., colors, spacing, typography) that serve as the design language baseline.
- Semantic tokens — meaningful roles (e.g., background-brand, text-error) that abstract usage from specific values.
- Component-specific tokens — final mappings applied to individual components (e.g., button-container-background-primary).
This layering made it possible to update values globally without breaking features, while still providing the flexibility to fine-tune specific components.
To ensure smooth collaboration with developers, we aligned our primitive tokens with Tailwind CSS utility classes. This created a shared vocabulary between design and engineering, reducing translation gaps and making implementation more efficient.
We maintained the entire token library in Figma Variables, which allowed designers to apply tokens directly to components and enabled us to manage themes consistently (light, dark, and future brand variations) from a single source of truth.
Components - Atoms
Following the Atomic Design methodology, we began at the smallest level with atom components — buttons, inputs, labels, and icons. These atoms form the foundation of the system and were built in Figma using design tokens, ensuring consistency and easy updates.
We used Figma’s component properties and variables to make atoms robust and flexible. For example, a button can toggle icons, adjust labels, or swap states without duplicating components.
Atoms were also designed with built-in states (rest, hover, disabled), allowing designers to demonstrate interactions directly in Figma and giving developers a clear model to translate into code.
Components - Molecules & Organisms
Building on our atom-level foundations, we combined buttons, inputs, labels, and icons into larger components with more defined purpose. These molecules and organisms included common patterns like dialogs, tables, filters, pagination, and file uploaders.
We used Figma’s Auto Layout extensively to ensure components were responsive by default. Whether resizing a dialog, adding rows to a table, or adjusting padding within a card, the layout adapted automatically. This reduced rework for designers and gave developers a clear blueprint for flexible, production-ready components.
By assembling atoms into higher-order components, we gave the team tools that reflected real application use cases — accelerating design work while ensuring consistency at every level of the system.
Patterns & Templates
With a solid component library in place, we moved into assembling patterns and templates that reflected real workflows in the Copper Hill platform. These included screen-level templates for workload views, key grid screens, and BI dashboards, which gave designers and developers a consistent starting point for new features.
We also standardized system patterns like loading states, empty states, and error states. These ensured that every part of the platform — even the edge cases — felt consistent and intentional.
By combining components into ready-to-use templates, we dramatically reduced design and development time for new features. Instead of reinventing screens, teams could start from proven patterns and focus their energy on solving product problems.
Theming
We built our design tokens to work with Figma Variables and variable modes, allowing us to switch between light and dark themes instantly. Semantic tokens acted as the bridge, so roles like background-brand or text-primary automatically resolved to the correct value in each mode without duplicating designs or code.
We also set the foundation to support custom client themes in the future. By abstracting styles through semantic tokens, we can introduce new brand palettes or client-specific themes that cascade globally — without breaking components or workflows.
This approach gave us immediate flexibility with light/dark mode and future scalability for brand and customer needs, ensuring the system grows alongside the Copper Hill platform.
Angular Components
I jump‑started the code side by partnering with ChatGPT to prototype our first Angular components. Those samples let us validate tokens, states, and inputs end‑to‑end.
As the system matured, ownership of the Angular library moved to our front‑end developer and the design system working group. We keep Figma and Angular in lockstep—every component has the same tokens, states, and properties across both libraries.
This collaboration keeps design and engineering aligned and ensures a library that’s scalable, maintainable, and production‑ready.
Storybook Sandbox
To validate our components in code, I partnered with ChatGPT to set up a Storybook proof of concept. This gave us a place to test accessibility, tokens, and states in isolation before pushing into production.
As the system matured, ownership of the sandbox transitioned to development, where it now serves as the single source of truth for coded components. Storybook allows the team to review, test, and document components in isolation, ensuring each one works independently and integrates smoothly.
One of its biggest benefits is accessibility for non-technical team members. Designers, PMs, and QA testers can explore the component library without needing Angular expertise. By adjusting controls and toggles in Storybook, they can see exactly how properties like size, color, or state behave in real time.
Documentation
We used Zeroheight as the hub for documenting the Manifest Design System. This included foundational details like colors, spacing, and typography, as well as complete documentation for each component.
Every component page covered anatomy, properties, usage guidelines, and best practices. We also included do/don’t examples to help designers and developers make informed decisions without guesswork.
Zeroheight integrates directly with Figma and Storybook, allowing us to show design and code side by side. This gave the team a single source of truth that connected visual design, coded components, and usage guidance — reducing ambiguity and making the system accessible across disciplines.
Impact
The Manifest Design System quickly became a cornerstone of the Copper Hill platform. By providing reusable components, shared foundations, and clear documentation, it reduced design debt, sped up delivery, and created alignment across teams. What started as a proof of concept grew into a system adopted by designers and developers company-wide, with measurable results:
Reusable Angular components shared across 3 development teams.
Reduction in design and tech debt tickets added to the dev backlog per sprint.
Increase in delivery speed across design and development after adoption.