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
  2. Guides
  3. Design Systems at Simpson Strong-Tie

Design Systems at Simpson Strong-Tie

PreviousNext

Understanding which design system to use for your project. The Strong-Tie Design System is the official corporate standard for new web applications.

Design Systems at Simpson Strong-Tie

TL;DR: The Strong-Tie Design System is the official corporate standard for all new web applications at Simpson Strong-Tie. Other design systems exist for legacy or product-specific purposes and should not be used for new projects.

Quick Comparison

Design SystemStatusTechnologyUse For
Strong-Tie Design SystemOfficial StandardReact, shadcn/ui, Tailwind CSSAll new applications
BlueprintLegacyReact, Material UIExisting Blueprint apps only
AtomicUINot RecommendedReact, BaseUIExisting integrations only
Telerik/Kendo UILegacyVariousExisting integrations only

The Official Standard: Strong-Tie Design System

The Strong-Tie Design System is the corporate-approved design system for building web applications at Simpson Strong-Tie. It provides:

  • Modern Stack: Built on shadcn/ui and Tailwind CSS v4
  • Accessible by Default: WCAG 2.1 AA compliant components
  • Consistent Branding: Simpson Strong-Tie brand guidelines built-in
  • Active Development: Continuously maintained and improved
  • Documentation: Comprehensive guides and examples

When to Use

  • All new web applications
  • Modernizing existing applications
  • Any React-based project
  • Platform micro-frontend integrations

Getting Started

Visit our Setup Guide to start using the Strong-Tie Design System in your project.

Legacy & Product-Specific Systems

The following design systems exist at Simpson Strong-Tie but are not recommended for new projects.

Blueprint (Legacy)

Status: Legacy - for existing applications only

Blueprint is the Engineering Technology team's UI framework used by several established applications including PBS, HS, AGPD, RWS, PFD, ACE, ADM, and FD.

  • Technology: React with Material UI
  • Maintained by: Engineering Technology team
  • Recommendation: Continue using for existing Blueprint applications. New applications should use the Strong-Tie Design System.

AtomicUI (Not Recommended)

Status: Not recommended for new projects

AtomicUI is a design system used by a small number of existing projects.

  • Technology: React with BaseUI
  • Recommendation: Only use if you are maintaining an existing AtomicUI project. All new projects should use the Strong-Tie Design System.

Telerik/Kendo UI (Legacy)

Status: Legacy - for existing integrations only

Telerik (also known as Kendo UI) is a commercial component library that has been used in some legacy applications.

  • Technology: Various (jQuery, Angular, React, Vue)
  • Recommendation: Do not use for new projects. Existing integrations should plan migration to the Strong-Tie Design System. See our Telerik Migration Guide for assistance.

Why One Design System Matters

Simpson Strong-Tie's Platform initiative has established clear goals that support a unified design system approach:

Consistent User Experience

"Deliver a consistent and seamless user experience across all products" — Platform Business Outcomes 2025

A unified design system ensures users have the same experience whether they're using one application or many, leading to higher satisfaction and reduced support costs.

Standardized Interface Elements

The Platform has set a key outcome to "improve usability by standardizing design and interface elements." The Strong-Tie Design System directly enables this by providing:

  • Consistent component behavior across applications
  • Shared visual language and interaction patterns
  • Unified accessibility standards

Micro-Frontend Architecture

Simpson Strong-Tie's Platform is building a micro-frontend architecture with a shell container. This architecture requires:

  • Shared designs and implementations coordinated for consistency
  • Common technology stack (React has been chosen as the web technology)
  • Unified theming and branding

The Strong-Tie Design System is purpose-built to support this architecture.

Frequently Asked Questions

Can I use Blueprint for a new application?

No. Blueprint is maintained for existing applications only. New applications should use the Strong-Tie Design System, which offers modern tooling, better accessibility, and alignment with Platform goals.

My team uses AtomicUI. Should we switch?

If you're maintaining an existing AtomicUI project, you may continue using it. However, we encourage evaluating the Strong-Tie Design System for future projects to align with corporate standards and benefit from broader support.

We have Telerik/Kendo UI in our app. What should we do?

For existing functionality, you can continue using Telerik components. However, we recommend:

  1. Not adding new Telerik components
  2. Planning a gradual migration to Strong-Tie Design System components
  3. Reviewing our Telerik Migration Guide for guidance

What if I need a component that doesn't exist in the Strong-Tie Design System?

The Strong-Tie Design System is built on shadcn/ui, which is open-source and has a large ecosystem of components and patterns. If you need something that isn't in our design system:

  1. Check shadcn/ui for additional components you can add directly
  2. Follow shadcn design principles, tokens, and patterns when building custom components
  3. Reach out to your team's designer or the UX team directly for guidance on complex requirements

How do I get help choosing the right approach?

Reach out to the UI/UX team or post in the Strong-Tie Design Systems Teams channel. We're happy to help you evaluate your needs and find the best path forward.

@strongtie/stylesCombobox

On This Page

Design Systems at Simpson Strong-TieQuick ComparisonThe Official Standard: Strong-Tie Design SystemWhen to UseGetting StartedLegacy & Product-Specific SystemsBlueprint (Legacy)AtomicUI (Not Recommended)Telerik/Kendo UI (Legacy)Why One Design System MattersConsistent User ExperienceStandardized Interface ElementsMicro-Frontend ArchitectureFrequently Asked QuestionsCan I use Blueprint for a new application?My team uses AtomicUI. Should we switch?We have Telerik/Kendo UI in our app. What should we do?What if I need a component that doesn't exist in the Strong-Tie Design System?How do I get help choosing the right approach?

Contribute

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