TRIO/UI

Design System

A comprehensive design system for desktop SaaS applications. Built on Material Design principles with customized components, design tokens, and patterns for consistency across all TRIO products.

–
Components Built
100%
Figma Accuracy
Desktop
Platform
8px
Base Grid

layers Tech Stack

React TypeScript MUI v5 AG Grid AG Charts sx Emotion Storybook Figma Code Connect

Custom MUI theme with TRIO design tokens. All components are React + TypeScript, styled via sx prop and styled(). AG Grid for all data tables, AG Charts for visualization. Figma Code Connect keeps design and code in sync.

update Recent Updates

View full changelog arrow_forward
Date Update Type

stars Design Principles

Core principles that guide every decision, from component design to implementation patterns.

verified
Figma as Source of Truth
Every component is built by extracting actual values from Figma. No assumptions, no interpretations — just pixel-perfect accuracy.
desktop_windows
Desktop-First
Designed exclusively for desktop SaaS. No responsive breakpoints, no mobile. Focused on optimal desktop experiences.
accessibility
Accessibility Built-In
WCAG 2.1 AA with proper focus states, keyboard navigation, screen reader support, and 32px minimum touch targets.
speed
Consistency & Efficiency
8px spacing system, semantic color rules, and predictable component behavior reduce decision fatigue across products.

architecture System Architecture

Organized in layers — from foundational design tokens to complex patterns and templates.

category
Foundation Layer
Design Tokens
Colors, typography, spacing, and shapes extracted from Figma Variables. The atomic building blocks.
widgets
Component Layer
– components built
Atomic to organism-level, each extracting values directly from Figma.
view_quilt
Pattern Layer
Workflows & Templates
Forms, navigation, search, and data display patterns that combine components.

download Design Tokens for Developers

All tokens as CSS custom properties — colors, typography, spacing, radius, shadows, z-index, and layout. Drop into any project.

css
Download CSS Tokens
trio-tokens.css — all design tokens as CSS custom properties. Import or link in your project.
content_copy
Copy to Clipboard
Copy the full CSS token set to your clipboard. Paste into your project's variables file.
data_object trio-tokens.css
— tokens 

      

    


    

      

        rule
        Core Rules
      

      

        

          
grid_on

          
Spacing System

          

            8px base grid for all layout. 4px exception within components. Never break the grid.
          

        

        

          
text_fields

          
Typography

          

            Roboto only, max H5 for page headers. 11px–24px scale. Desktop-optimized line heights.
          

        

        

          
palette

          
Color Semantics

          

            Primary blue (#2196F3) = Save/Update only. Secondary = Edit. Error = Delete. #F5F5F5 canvas, white containers.
          

        

        

          
emoji_symbols

          
Icons

          

            Material Icons only. No custom sets. Icons reinforce meaning but never replace text labels.
          

        

        

          
table_chart

          
Data Tables

          

            AG Grid for all tables. No custom implementations. Consistent sorting, filtering, pagination.
          

        

        

          
grid_view

          
Layout

          

            12-column grid, 16px gutters. Modals: 6–8 columns, 40px internal padding.
          

        

      

    


    

      

        build
        Implementation Workflow
      

      

        Every component follows a mandatory 4-step extraction workflow to ensure Figma accuracy.
      

      

        

          
looks_one

          
Extract Properties

          

            Read componentPropertyDefinitions from Figma. Extract VARIANT, BOOLEAN, and TEXT properties. Map to TypeScript interfaces.
          

        

        

          
looks_two

          
Load Design Tokens

          

            Import design tokens for available colors, spacing, typography, and shapes.
          

        

        

          
looks_3

          
Extract Actual Values

          

            Extract padding, dimensions, fills, strokes from actual Figma instances. Never assume from tokens alone.
          

        

        

          
looks_4

          
Implement

          

            Build using extracted values. Reference tokens for colors/typography, use actual measurements for sizing.
          

        

      

    


    

      

        widgets
        Built Components
      

      

        All components currently in the library. Updates automatically as new components are added.
      

      
    


    

      

        rocket_launch
        Getting Started
      

      

        

          
palette

          
Explore Design Tokens

          

            Start with Colors, Typography, and Spacing to understand the foundational building blocks.
          

        

        

          
download

          
Downloads for Developers

          

            Grab CSS tokens, theme.ts, and token reference tables to integrate into your project.
          

        

        

          
science

          
Prototypes

          

            Browse design explorations and interaction demos built with TRIO/UI components.