Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Governance Model

Governance Model

PreviousNext

The governance model for the Strongtie Design System.

Strongtie Design System Governance

The Strongtie Design System operates on a collaborative model where the UX Team maintains core packages while product teams retain autonomy over their implementations.

Package Architecture

@strongtie/design-system

React components with built-in accessibility, behavior, and semantic HTML.

UX Team maintains: Component behavior, accessibility requirements, and API design

Teams customize: Via className, props, or component wrapping

@strongtie/styles

Modular CSS design system with flexible import options for optimal bundle sizes.

UX Team maintains: All styles, design tokens, and component styling

Teams choose: Which modules to import based on their needs

Style Import Options

The @strongtie/styles package offers five modular imports:

ImportPurposeSize
/allComplete system~50-80KB
/resetCSS normalize~5-8KB
/fontsFont declarations~2-4KB
/tokensDesign tokens~3-5KB
/componentsComponent styles~25-35KB

Import Strategy: Start with /all for rapid development, then optimize by importing only what you need as your application matures.

Decision Framework

Adding Components to @strongtie/design-system

A component is a candidate for the design system when it meets these criteria:

Adding Styles to @strongtie/styles/components

Styles belong in /components when they:

  • Pair with a @strongtie/design-system React component
  • Provide the complete designed look and feel
  • Work with plain HTML (class-based approach)
  • Are usable across different frameworks
  • Follow the design token system

Build CSS using design tokens

Ensure all values reference tokens from @strongtie/styles/tokens for consistency.

Ensure framework compatibility

Verify styles work both with and without the React component wrapper.

Document class names

Provide clear documentation for teams using the styles without React.

Version alongside React package

Keep styles and components in sync across releases.

UX Team's Role

The UX Team balances two primary responsibilities:

As Embedded Developer

60-70% of time

  • Rotate through teams on 2-8 week cycles
  • Build features alongside product teams
  • Teach design system principles by example
  • Identify patterns worth extracting
  • Help teams choose optimal import strategies

As Package Maintainer

30-40% of time

  • Extract proven patterns into packages
  • Maintain React components and CSS
  • Update documentation based on learnings
  • Provide async support in #design-system
  • Plan quarterly rotation schedules

Team Autonomy

Clear ownership boundaries ensure teams can move quickly while maintaining consistency.

✓Teams Decide
  • Which style modules to import (/all vs modular)
  • How to customize components (className, CSS, wrapping)
  • Application-specific component architecture
  • When to request UX Team's embedded time
✓UX Team Decides
  • What goes into shared packages
  • Breaking changes and versioning strategy
  • Which team to embed with (based on requests + strategy)
  • Component API design and patterns

Support Model

When UX Team is with your team: - Daily standups and pairing sessions - Full sprint participation - Real-time guidance and code reviews - Direct collaboration on features

Success Metrics

We measure the effectiveness of our governance model through:

  • Component reuse across applications
  • Bundle size reduction for teams optimizing imports
  • Team success choosing appropriate import strategies
  • Accessibility compliance across all implementations
  • Developer satisfaction with the embedded model
  • Reduced duplication of common patterns

Questions? Reach out in Design System or during office hours. The governance model evolves based on team feedback and learnings.

Framework RecommendationsMigration Guide

On This Page

Strongtie Design System GovernancePackage ArchitectureStyle Import OptionsDecision FrameworkAdding Components to @strongtie/design-systemAdding Styles to @strongtie/styles/componentsBuild CSS using design tokensEnsure framework compatibilityDocument class namesVersion alongside React packageUX Team's RoleAs Embedded DeveloperAs Package MaintainerTeam AutonomySupport ModelSuccess Metrics

Contribute

  • Report an issue
  • Request a feature
  • Edit this page