UI Design System & Theming
Relevant source files
The following files were used as context for generating this wiki page:
The UI Design System of the RDM Digital platform is built on a modern stack comprising React, Tailwind CSS, and Radix UI primitives. It follows a "Sovereign Urban Operating System" aesthetic, characterized by high-contrast borders, monochromatic scales with accent colors, and a technical, information-dense layout. The system is designed to be responsive, accessible, and performant, utilizing a utility-first approach for styling and a component-driven architecture for the interface.
This design system supports the broader project mission of providing a "Smart Territory" infrastructure by offering consistent UI patterns across modules like the Command Center, Territory Map, and Tourism Platform.
System Architecture & Configuration
The design system is configured through a centralized components.json file and managed via Tailwind CSS. It utilizes CSS variables for theme flexibility and class-variance-authority (CVA) for managing complex component states and variants.
Configuration Overview
The project uses the "New York" style from the shadcn/ui ecosystem, optimized for React Server Components (RSC) and TypeScript.
| Option | Value | Description |
|---|---|---|
| Style | new-york | Specific design aesthetic and component set. |
| Tailwind Base Color | neutral | The default color palette for structural elements. |
| CSS Variables | true | Enables the use of dynamic CSS variables for colors and spacing. |
| Icon Library | lucide | The standard library used for iconography. |
Sources: components.json:2-12, package.json:65-74
Visual Identity Tokens
The visual language is defined by specific CSS classes and attributes found across functional components:
- Typography: Mix of Serif for headings and Mono for technical data and eyebrow text. Sources: src/components/rdm/hero.tsx:32-40, src/components/rdm/territory.tsx:28-32
- Borders: Extensive use of
border-borderand high-contrast grids (grid-paper,grid-paper-fine). Sources: src/components/rdm/isabella.tsx:7-8, src/components/rdm/territory.tsx:25-30 - Color Palette: Primarily neutral (background/foreground) with a specific
accentcolor (often used for verification states and active highlights). Sources: src/components/ui/sidebar.tsx:300-310, src/components/rdm/architect.tsx:103
Core Component Library
The system relies on a set of highly modular UI components built on Radix UI primitives. These components use clsx and tailwind-merge to allow for flexible style overrides while maintaining consistency.
Navigation & Layout Components
The system provides robust navigation through sidebars and sheets, particularly useful for mobile-responsive dashboard interfaces.
This diagram shows the hierarchical relationship and responsive behavior of the Sidebar system.
Sidebar Features:
- Persistence: Uses a cookie (
sidebar_state) to save the expanded/collapsed state across sessions. Sources: src/components/ui/sidebar.tsx:21-25 - Shortcuts: Supports a keyboard shortcut (
Cmd/Ctrl + B) to toggle visibility. Sources: src/components/ui/sidebar.tsx:29 - Collapsible States: Supports
expanded,collapsed,offcanvas, andiconmodes. Sources: src/components/ui/sidebar.tsx:128-135
Base Elements: Buttons & Items
Buttons and list items are the primary interactive elements, defined with multiple variants and sizes.
| Component | Variants | Sizes | Key Implementation Detail |
|---|---|---|---|
| Button | default, destructive, outline, secondary, ghost, link | default, sm, lg, icon | Uses Slot from Radix for polymorphic asChild behavior. |
| Item | default, outline, muted | default, sm | Designed for list-based data representation with ItemMedia and ItemContent. |
Sources: src/components/ui/button.tsx:7-35, src/components/ui/item.tsx:39-65
Theming & Interactive States
The system handles interactive states (hover, focus, active, open/closed) primarily through Tailwind's data-attribute selectors, ensuring that visual feedback is synchronized with the underlying component state.
State-Driven Styling
Components use Radix's state attributes to trigger animations and color changes:
- Sheet/Dialog Animations: Transitions are managed via
data-[state=open]anddata-[state=closed]for fade and slide effects. Sources: src/components/ui/sheet.tsx:44-50 - Sidebar Active States: Sidebar menu buttons utilize
data-activeto highlight the current route. Sources: src/components/ui/sidebar.tsx:340-345 - Tabs: Active tabs are styled using
data-[state=active]. Sources: src/components/ui/tabs.tsx:43-48
Component State Flow
This diagram illustrates how user interactions translate into visual theme changes through data attributes.
Implementation Guidelines
Utility Functions
The design system relies on a central utility function cn (typically found in lib/utils.ts) which combines clsx and twMerge. This is used in virtually every component to allow dynamic class merging.
Polymorphism
Most core components support the asChild prop. When asChild is true, the component will not render its own default HTML element (like a button or div) but will instead clone its child and pass the necessary props/styles to it. This is critical for integrating with react-router-dom's Link component.
Sources: src/components/ui/button.tsx:39, src/components/ui/sidebar.tsx:337, src/components/ui/item.tsx:71
Conclusion
The RDM Digital UI Design System is a robust, configuration-driven architecture that prioritizes consistency and responsive operation. By leveraging Radix UI for accessibility and Tailwind CSS for flexible theming, it provides the "Sovereign Urban OS" with a highly professional and technical interface capable of handling complex territorial and operational data.