download Downloads

Design tokens, theme files, and resources for developers.

css
CSS Tokens
All design tokens as CSS custom properties. Drop into any project.
description trio-tokens.css
content_copy
Copy CSS Tokens
Copy the full CSS token set to your clipboard.
data_object -- tokens
open_in_new
View Raw CSS
Open the raw CSS token file in a new tab for inspection.
visibility Browser view

code MUI Theme (theme.ts)

The MUI theme configuration that consumes design tokens. This is the runtime theme used by all TRIO React components.

data_object theme.ts 
/* Loading... */

table_chart Token Quick Reference

Common tokens at a glance. For full details, see the Colors, Typography, and Spacing pages.

palette Colors
Token Value Usage
--trio-color-primary #2196F3 Save/Update actions only
--trio-color-primary-dark #1976D2 Hover/pressed state for primary
--trio-color-primary-light #E3F2FD Selected/highlight backgrounds
--trio-color-success #4CAF50 Success states, confirmations
--trio-color-error #DB4537 Errors, delete actions
--trio-color-warning #E17109 Warnings, caution states
--trio-color-text-primary #212121 Primary text
--trio-color-text-secondary #757575 Secondary/helper text
--trio-color-bg-default #F5F5F5 Page background
--trio-color-bg-paper #FFFFFF Cards, surfaces
--trio-color-border #E0E0E0 Borders, dividers
space_bar Spacing
Token Value Usage
--trio-spacing-xs 4px Intra-component gaps
--trio-spacing-sm 8px Tight padding, small gaps
--trio-spacing-mid 12px Medium-tight spacing
--trio-spacing-md 16px Standard padding, gutters
--trio-spacing-lg 24px Section padding
--trio-spacing-xl 32px Large section gaps
--trio-spacing-xxl 40px Page-level padding
text_fields Typography
Token Size Weight Usage
--trio-font-family 'Roboto', sans-serif All text
H5 24px 400 Page headers (max level)
H6 20px 500 Section headers
Subtitle 1 16px 500 Card/panel titles
Body 1 14px 400 Default body text
Body 2 13px 400 Secondary body text
Caption 12px 400 Labels, helper text
Overline 11px 500 Uppercase labels
rounded_corner Shape
Token Value Usage
--trio-border-radius 4px Standard radius for all components
--trio-border-radius-pill 999px Chips, pills, status badges