Getting Started
Foundations
Components
Search for a command to run...
The Strongtie Design System operates on a collaborative model where the UX Team maintains core packages while product teams retain autonomy over their implementations.
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
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
The @strongtie/styles package offers five modular imports:
| Import | Purpose | Size |
|---|---|---|
/all | Complete system | ~50-80KB |
/reset | CSS normalize | ~5-8KB |
/fonts | Font declarations | ~2-4KB |
/tokens | Design tokens | ~3-5KB |
/components | Component styles | ~25-35KB |
Import Strategy: Start with /all for rapid development, then optimize by importing only what you need as your application matures.
A component is a candidate for the design system when it meets these criteria:
Styles belong in /components when they:
@strongtie/design-system React componentEnsure all values reference tokens from @strongtie/styles/tokens for consistency.
Verify styles work both with and without the React component wrapper.
Provide clear documentation for teams using the styles without React.
Keep styles and components in sync across releases.
The UX Team balances two primary responsibilities:
60-70% of time
30-40% of time
#design-systemClear ownership boundaries ensure teams can move quickly while maintaining consistency.
/all vs modular)className, CSS, wrapping)When UX Team is with your team:
We measure the effectiveness of our governance model through:
Questions? Reach out in Design System or during office hours. The governance model evolves based on team feedback and learnings.