Trinity Design System

A customizable MUI-based design system with Trinity branding, WCAG 2.1 AA accessible color palette, and reusable navigation components.

� Documentation

| Guide | Description | |-------|-------------| | Quick Start | Get running in 5 minutes | | Developer Guide | Complete integration guide | | Storybook | Interactive component demos |

🚀 Quick Start

Install

npm install @trinitydesign/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled

Optional dependencies (only if using these features):

# For DataTable component
npm install @mui/x-data-grid

# For DatePicker components
npm install @mui/x-date-pickers dayjs

# For Charts components
npm install recharts

Setup

import { ThemeProvider, CssBaseline } from '@mui/material';
import { lightTheme } from '@trinitydesign/design-system';

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      <YourApp />
    </ThemeProvider>
  );
}

Use Components

import { Button, Card } from '@mui/material';
import { StatusIndicator, Modal } from '@trinitydesign/design-system';

<Card sx={{ p: 3 }}>
  <Button variant="contained">Save</Button>
  <StatusIndicator status="success" label="Active" />
</Card>

🎨 Features

• Trinity Branding - Pre-configured colors, typography, and component styles
• Accessible - WCAG 2.1 AA compliant color combinations
• Dark Mode - Light and dark themes included
• TypeScript - Full type definitions
• Tree-Shakeable - Import only what you need

📦 What's Included

Themes

import { lightTheme, darkTheme, createTrinityTheme } from '@trinitydesign/design-system';

Components

import {
  TopNavHeader,       // Navigation header
  TopNavWithSidebar,  // Full layout with sidebar
  StatusIndicator,    // Status badges
  Modal,              // Accessible dialogs
  FileUpload,         // Drag-and-drop upload
  AIChat,             // AI chat interface
  AIPromptInput,      // AI prompt input
} from '@trinitydesign/design-system';

Design Tokens

import { baseTokens, semanticTokens, brandColors } from '@trinitydesign/design-system';

Utilities

import {
  accessibleCombinations,  // Pre-validated color pairs
  getContrastRatio,        // Check color contrast
  validateAccessibility,   // WCAG validation
} from '@trinitydesign/design-system';

🛠 Development

Prerequisites

• Node.js 20.19+ or 22.12+
• npm, yarn, or pnpm

Setup

# Clone and install
git clone <repo-url>
cd trinity-design-system
npm install

# Start development
npm run dev          # App at http://localhost:5173
npm run storybook    # Docs at http://localhost:6006

Scripts

| Command | Description | |---------|-------------| | npm run dev | Start dev server | | npm run storybook | Start Storybook | | npm run build | Build for production | | npm run test | Run tests | | npm run lint | Run linter |

Trinity Design System - Built with ❤️ using MUI and Vite