design-system
Dark Professional Design System for Report Websites
Apply a distinctive dark professional visual identity to generated research report websites using Tailwind CSS v4 + shadcn/ui. This design system creates sites that feel like a premium data terminal crossed with a high-end law publication — dense with information yet elegant and readable.
Design Philosophy
Tone: Sophisticated, authoritative, data-rich. Think Bloomberg Terminal meets The Economist's digital edition.
Differentiation: The signature element is the warm amber accent system against deep cool backgrounds — every interactive element glows with intention. Typography pairs a refined serif display face with a crisp humanist sans-serif body, creating tension between editorial authority and modern clarity.
Theme System: Color accents are swappable via theme presets (8 built-in options) or community registries, while layout, typography, and animations remain consistent.
Color System
Colors are defined as Tailwind @theme tokens in app.css and can be overridden by theme preset CSS files. Use Tailwind utility classes for all color references — never hardcode color values.