Design Foundations

The core visual elements of the TCM design system. These foundations ensure a consistent brand experience across all enterprise applications.

Color System

Primary brand colors. Use 600 for primary actions, 50-100 for backgrounds.

Brand 50#f0f7ff

Brand 200#bae0fd

Brand 400#36abf9

Brand 600#006ebf

Brand 900#083f6a

Success

emerald-500

Warning

amber-500

Danger

red-500

Neutral

slate-500

Typography

text-4xl

Display Large

text-2xl

Heading Primary

text-lg

Subheading / Lead Text

text-base

The quick brown fox jumps over the lazy dog. Standard body text for paragraphs and generic content.

text-sm

Small text used for secondary labels, hints, and metadata.

Elevations & Shadows

Cardshadow-sm

Dropdownshadow-md

Modalshadow-lg

Popovershadow-2xl

Forms & Inputs

Interactive controls to collect data from users. Designed for clarity, accessibility, and fast data entry.

Buttons

Variants

Sizes

States

Inputs & Textareas

Email Address

Password *

Amount (with adornment)

$

Username (Error State)

Username cannot contain special characters.

Disabled Input

Notes (Textarea)

Selects & Selection Controls

Standard Select

Toggles / Switches

Enable feature (Active) Disable notifications

Checkboxes

I accept the terms and conditions Subscribe to newsletter

Radio Buttons

Enterprise Plan Startup Plan

Advanced Controls

Date Picker (Native)

Volume Level (Slider)

File Upload

Upload a file

or drag and drop

PNG, JPG, GIF up to 10MB

Navigation

Components that help users move through the application and understand their current location.

Tabs

Tab content goes here...

Breadcrumbs & Pagination

Stepper

Feedback & Status

Inform users about the state of the system, success or failure of actions, and ongoing processes.

Alerts

A new software update is available. See what's new in version 2.4.

Details

Order completed successfully

There were 2 errors with your submission

Your password must be at least 8 characters
Your password must include at least one pro wrestling finishing move

Toasts & Notifications

Loaders & Empty States

Uploading database...45%

No projects

Get started by creating a new project.

Data Display

Displaying complex information in organized, scannable formats.

Badges & Avatars

Badges

Default New Feature Active Error Pending

Avatars

TW

Data Table

Name	Title	Status	Role	Edit
Lindsay Walton [email protected]	Front-end Developer Optimization	Active	Member	Edit, Lindsay Walton
CW Courtney Henry [email protected]	Designer Brand	Away	Admin	Edit

Overlays

Components that overlay on top of the main content to focus the user's attention or provide contextual actions.

TCM Design System

Foundations