Pierce & Co.
Enargea.ai Let's Connect
// Services

Design Systems

A shared language for your product — in Figma, in code, and queryable by AI.

// 01 Overview

A shared language for your product, built to last.

Pierce/Co. builds design systems that give your team a shared language for the product — consistent components, clear rules, and the foundation to move faster as you scale. We work at three levels depending on where you are: a Figma design system, a coded component library, or an integrated Claude Skill that makes your system queryable by AI.

This is one of Pierce/Co.'s most active engagement types. Most teams come to us when the cost of inconsistency has started to outweigh the cost of building the system — when every new feature requires re-deciding the same patterns, when designers and engineers are working from different sources of truth, or when onboarding new team members has become a multi-week tour through legacy decisions no one remembers making.

// 02 What you get

Three levels. Start anywhere.

Design system engagements at Pierce/Co. come in three levels. You can start at any level, and lower levels build naturally into higher ones if you want to extend the system over time.

Overview

A component library, token structure, and documentation your designers and developers can actually use. Built for handoff, built to last — not a one-time deliverable that goes stale.

The right level for teams that need design consistency first and will translate to code in-house.

What we deliver
  • A complete Figma component library with variants, properties, and auto-layout configured for real production use
  • A token system covering color, typography, spacing, radii, elevation, and motion — structured so it can be exported to code without rework
  • Documentation that explains not just what each component is but when and why to use it
  • A governance model so the system can be maintained and extended by your team after the engagement ends
Overview

For teams that want to move from design to production without the gap. We build your system directly in code — React components, Tailwind, or your stack of choice — so your engineers have a working library, not just a reference doc.

This is where AI-assisted tooling lets us move significantly faster than a traditional design shop. What used to take a 4–6 month engagement with a 3-person team can often be delivered in a fraction of the time, with the same level of polish.

The right level for teams that need the system to land in production, not just in Figma.

What we deliver
  • A working component library in your production stack (React, Vue, Svelte, or other) with TypeScript types where applicable
  • Tokens exported as code variables (CSS custom properties, Tailwind config, or design token format) and wired into the components
  • Storybook or equivalent documentation environment with live, interactive component examples
  • Integration guidance for your existing codebase, including migration patterns for replacing legacy components
Overview

We can build a custom Claude Skill trained on your design system — your tokens, component usage rules, naming conventions, and patterns. Your team gets an always-available assistant that knows your system and can answer questions, generate on-brand copy, or help enforce consistency without slowing anyone down.

An add-on to Level 1 or Level 2, not a standalone engagement. The right addition for teams that want the system to be enforceable at scale, not just documented.

What we deliver
  • A Claude Skill packaging your design system as queryable knowledge, deployable to your team's Claude workspace
  • Coverage of component usage rules, naming conventions, accessibility patterns, and your written brand voice
  • Integration patterns so the Skill can be invoked during design reviews, code reviews, or content production
// 03 Who this is for

Done duct-taping it together.

Early-stage and growth-stage teams that are done duct-taping it together and ready to build the right way. Common triggers:

  • Onboarding your first full-time designer. The duct-tape held while one person made every decision in their head. It won't hold once a second person needs to make decisions consistent with the first.
  • Preparing for a funding round. Investors notice product polish, and a coherent design system is one of the most visible signals that the team can execute consistently at scale.
  • Tired of inconsistency slowing you down. Every new feature requires re-deciding patterns the team already debated three times. The team is faster with the system than they are without it.
  • Migrating off a legacy system. Bootstrap or Material UI got you to product-market fit but is now actively constraining what the product can express.
  • Scaling the design team. What three designers held in their shared judgment doesn't survive the fourth, fifth, or sixth hire.

This work is less likely to be the right fit if you're pre-product-market fit, if your product surface is small enough that consistency isn't actually a problem yet, or if your team is unwilling to commit to maintaining the system after we deliver it.

// 04 How we work

How the engagement runs.

Engagements typically start with a short scoping conversation to understand your stack, your team, and what "done" looks like. From there we put together a clear scope and a fixed price — no hourly surprises. Most design system engagements follow this shape:

  1. Week 1
    Audit and architecture

    We review your current product surfaces, existing patterns, and any prior design system work. We identify the token structure, component inventory, and naming conventions that will form the system's foundation.

  2. Weeks 2–4
    Core build

    We build the foundational components — primitives like buttons, inputs, typography, and layout — along with the token system that underlies them. By the end of this phase, your team can start using the system for new work.

  3. Weeks 5–8
    Expansion and documentation

    We extend to the higher-order components your product actually needs, build documentation, and establish governance patterns for ongoing maintenance.

  4. Week 9
    Handoff

    We deliver the complete system with a working session for your team, including governance documentation and a maintenance playbook.

Timelines vary by scope and level. A Figma-only system at Level 1 typically runs 4–6 weeks. A coded component library at Level 2 typically runs 8–12 weeks. The Claude Skill add-on adds 1–2 weeks.

// 05 Previous design systems

Systems built at scale.

Pierce/Co.'s design systems work draws on 16 years of building product systems for teams at scale. Previous design systems include:

Dropbox
Components and patterns for Dropbox.com and marketing properties on Adobe Experience Manager.
Bass Pro Shops
Product and merchandising design system across digital and in-store.
Nestlé Purina
Brand and product system across consumer-facing properties.
// 06 Frequently asked questions

Questions we get asked.

A Figma design system gives your designers a shared library to design from. A coded component library gives your engineers a shared library to build from. Most mature teams need both, and they need to stay in sync. Level 1 delivers the Figma side; Level 2 extends that into code so the two stay aligned by construction rather than by convention.
We work in whatever stack you're already using — React is most common, but we've delivered systems in Vue, Svelte, and SwiftUI as well. We don't have a preferred stack; the right stack is the one your team can maintain after we're gone.
Yes. WCAG 2.1 AA compliance is the baseline for every component we ship, including keyboard navigation, screen reader support, and color contrast. If you have higher accessibility requirements (AAA, specific assistive technology support, regulatory compliance), we scope those explicitly during the kickoff.
You own the system. We deliver governance documentation, a maintenance playbook, and a working session to transfer ownership to your team. Some clients engage us for follow-on work as the system evolves, but the system is built to be maintained without us.
Once the Skill is deployed, your team can invoke it inside Claude to ask questions like "what's the right component for a destructive confirmation?" or "generate a button label for this onboarding step in our voice." The Skill knows your tokens, your components, your naming, and your voice — so the answers are grounded in your system, not generic best practices. It's most useful for teams where design system enforcement is hard to do manually at scale.
Yes. We work most often in Figma, but the system can be authored in or exported to other tools (Sketch, Penpot, Framer) depending on your team's workflow. Token export to design token format (W3C Design Tokens spec) makes the system portable across tools.
We don't lead with maintenance retainers, but we occasionally take on advisory engagements with prior design system clients where there's a clear ongoing need — usually quarterly reviews, governance support, or scoped extensions as the product evolves.
// 07 Start a conversation

From duct tape to a system.

If you're ready to move from duct tape to a system, the next step is a short scoping conversation. We'll understand your stack, your team, and what "done" looks like for you — and put together a clear scope and fixed price from there.

Let's connect →
Pierce & Co.

A new model for strategic decision making

Four weeks. Transparent pricing. Behavior you can track.

Learn more →
Enargea

Customer behavior, made undeniable.

Built by Pierce/Co. to stop static deliverables.

Learn About Enargea ↗