Design System & Theming

Overview

TEIRAC utilizes a high-contrast, professional design system built on a foundation of CSS variables (design tokens) and Tailwind CSS. The interface is intentionally structured into two primary zones:

• The Control Zone: A deep navy sidebar (--sidebar-bg) for navigation and high-level branding.
• The Data Zone: A light, clean workspace (--content-bg) designed to maximize the readability of project metrics, tables, and KPIs.

Design Tokens

The design system is managed via CSS variables defined in the :root of the application. These tokens ensure visual consistency across the dashboard, project pages, and settings.

Color Palette

| Token | Value | Usage | | :--- | :--- | :--- | | --navy | #162032 | Primary branding, buttons, and sidebar background. | | --gold | #f59e0b | Accent color for "elevated" highlights and brand taglines. | | --content-bg | #f0f3f8 | Global application background behind cards. | | --card-bg | #ffffff | Background for all dashboard widgets and data containers. | | --blue-accent | #2563eb | Primary action color and interactive elements. |

Typography

The system uses Sora as the primary typeface for its modern, geometric feel, suitable for both large headings and dense data tables. DM Mono is utilized for specific technical readouts or monospaced data needs.

• Headings: FontWeight 700 or 800 (Sora).
• Body Text: FontWeight 400 (Sora).
• Data Labels: FontWeight 600, often Uppercase with letter-spacing: 0.08em.

Status & Performance Visuals

Project health is communicated through a standardized color-coding system. This system is used across StatusBadges, KPICards, and ProgressBars.

Semantic Status Colors

| Status | Color Token | Visual Meaning | | :--- | :--- | :--- | | On Track | --green | Project is performing within or above parameters (SPI ≥ 1.0). | | At Risk | --orange | Potential delays or minor budget overruns. | | Delayed / Critical | --red | Immediate attention required; high-priority risks. | | Informational | --indigo | Neutral status, often used for general tasks or "In Progress." |

KPI Card Variants

KPI cards feature a top-border accent to categorize metrics. Apply these classes to the card container:

<!-- Example KPI Card Usage -->
<div class="kpi-card blue">...</div>  <!-- Performance Metrics -->
<div class="kpi-card gold">...</div>  <!-- Financial/Budget -->
<div class="kpi-card green">...</div> <!-- Completion/Success -->
<div class="kpi-card red">...</div>   <!-- Risk/Issue Count -->

Component Styling

Tables

TEIRAC uses a "Dense Data" table style. Headers are styled with a dark navy background (--navy-mid) to provide strong visual separation from the white rows.

• Header CSS: background: var(--navy-mid); color: #94a3b8; text-transform: uppercase;
• Row CSS: border-bottom: 1px solid #f0f4fa;

Badges

Badges are used to highlight project status. They are mapped via the StatusBadge component which handles the background/text color pairing automatically based on the status string.

// Standard status mapping used in the UI
'on-track'  => { background: '--green-bg', color: '--green-text' }
'at-risk'   => { background: '--orange-bg', color: '--orange-text' }
'delayed'   => { background: '--red-bg', color: '--red-text' }

Animations

To improve the user experience and perceived performance, the following built-in animations are available:

• animate-fadeIn: Used for page transitions and modal appearances.
• animate-slideDown: Used for expanding form sections and accordions.
• animate-pulse-dot: Used for live status indicators.
• toast-enter / toast-exit: Specifically for the notification system.

Implementation Guidelines

When building new features, follow these rules to maintain the TEIRAC aesthetic:

1. Use Tokens over Hard-coded Hexes: Always prefer var(--navy) or var(--text-muted) to ensure the UI updates correctly if the theme is adjusted.
2. Card-Based Layouts: Every data visualization should live inside a .kpi-card or a white container with var(--card-shadow).
3. Tailwind Integration: You can use Tailwind utility classes (e.g., flex, gap-4, p-6) for layout, but rely on custom CSS variables for colors and borders to ensure brand alignment.
4. Interactive Elements: Buttons and links should include a transition property for transform or background-color to provide tactile feedback (e.g., hover:translate-y-[-2px]).