Getting Started
Introduction

Introduction

Ledger UI is a design system built on React 18/19 and Ant Design 5 with Metronic parity. It provides a complete toolkit for building enterprise application interfaces — from low-level design tokens to full page templates.

Goals

  • Speed: Ship platform screens 5-10x faster via reusable templates and components
  • Consistency: Unified look and feel across all consuming applications via token-driven theming
  • Quality: WCAG AA accessibility, 301 tests, automated CI/CD with bundle size budgets
  • Flexibility: Platform-specific visual identity through token overrides, not code forks

Architecture

The system is organized as 8 composable packages:

@gtcx/tokens          Design primitives (colors, spacing, typography)
    |
@gtcx/theme           Ant Design theme bridge (ConfigProvider, createAntdTheme)
    |
@gtcx/utils           Shared utilities (cn, debounce, throttle, formatDate)
    |
@gtcx/ui              53+ React components + 9 hooks
    |
@gtcx/templates       15 page templates (Dashboard, List, Detail, etc.)
    |
@gtcx/i18n            Translation engine (29 languages, RTL)
    |
@gtcx/accessibility   WCAG utilities, tech literacy detection
    |
@gtcx/design-system   Meta-package (tokens + theme convenience re-export)

Design North Star

Sovereign Minimalism: calm, authoritative, proof-forward UI with high legibility and predictable interaction patterns.

Inspired by the clarity of Stripe, the premium calm of Mercury, and the modern tooling aesthetic of Cursor — adapted for enterprise and compliance workflows.

Ethos Commitments

  • Global South first — resilient in low-bandwidth, intermittent connectivity conditions.
  • Inclusion first — accessibility and tech literacy are default, not optional.
  • Trust by design — evidence, audit trails, and transparency are first-class UI surfaces.

What's Included

  • 53+ React components across 7 categories (navigation, data, forms, feedback, layout, effects, AI)
  • 9 custom hooks (useBreakpoint, useResponsive, useBodyClass, useCopyToClipboard, useMounted, useScrollPosition, useMenu, useViewport, useSliderInput)
  • 15 page templates with standardized API (data, actions, filters, audit, layout)
  • 8 layout variants covering all major application shell patterns
  • Design tokens with light and dark themes
  • i18n engine supporting 29 languages and 7 cultural contexts
  • Accessibility utilities including WCAG contrast checking and focus management
IntroductionInstallation