Does this skill support light mode?

No, this design system is intentionally dark-mode only to maintain its signature 'premium data terminal' brand identity and authoritative aesthetic.

How does it handle accessibility?

It ensures all color combinations meet WCAG AA contrast ratios, includes ARIA attributes for components, and respects 'prefers-reduced-motion' settings.

Can I customize the default accent colors?

Yes, while amber is the default signature color, the system supports 8 built-in theme presets that allow you to swap accent tokens easily.

What CSS framework does this design system use?

The system is built specifically for Tailwind CSS v4 and integrates seamlessly with shadcn/ui primitives for a production-ready frontend.

Dark Report Design System

Name: Dark Report Design System
Author: reggiechan74

byreggiechan74

•

设计工具

Implements a premium, dark-themed professional visual identity for research report websites using Tailwind CSS v4 and shadcn/ui.

This skill provides comprehensive guidance for applying a sophisticated 'data terminal' aesthetic to report-to-web generated sites. It establishes a complete design system featuring a signature amber-on-dark color palette, refined serif-and-sans typography, and purposeful Framer Motion animations. Developers can use this skill to ensure visual consistency across complex, data-heavy components like interactive calculators, comparison tables, and citation systems while maintaining WCAG AA accessibility standards and full mobile responsiveness.

主要功能

01Pre-configured typography stacks using DM Serif Display and IBM Plex Sans/Mono.

02Professional dark-mode-only visual identity with distinctive amber accent system.

035 GitHub stars

04Tailwind CSS v4 @theme token integration and shadcn/ui semantic mapping.

05Specialized styling for data-rich components including calculators, sliders, and tables.

06Built-in Framer Motion animation patterns for polished transitions and content reveals.

使用场景

01Customizing the visual identity of automated research and data report websites.

02Ensuring high-end editorial aesthetics and accessibility for technical or legal documentation.

03Implementing consistent styling for complex interactive UI components like financial calculators.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add reggiechan74/cc-plugins design-system

For use in Claude.ai and ChatGPT

Download Skill