A comprehensive React-based design system documentation site built with Next.js, ShadCN UI, and Tailwind CSS. This site serves as a reference for developers building the 412 interface with dark mode-first design.
- Design System Documentation: Complete reference for colors, typography, components, and layouts
- Component Showcase: Interactive examples of all design system components
- Asset Library: Logos, images, and icons library with download functionality
- Icon Libraries: Support for both Lucide React and Heroicons
- Dark Mode First: All components designed for dark backgrounds
- Responsive Design: Mobile, tablet, and desktop breakpoints
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS v4
- ShadCN UI
- Lucide React
- Heroicons
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run buildnpm startdesign-system-site/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with Inter font
│ ├── page.tsx # Home page
│ ├── colors/ # Color palette page
│ ├── typography/ # Typography page
│ ├── components/ # Components showcase page
│ └── assets/ # Asset library pages
│ ├── logos/ # Logo library
│ ├── images/ # Image gallery
│ └── icons/ # Icon browser
├── components/ # React components
│ ├── ui/ # ShadCN UI components
│ ├── showcase/ # Demo components
│ │ ├── ColorPalette.tsx
│ │ ├── TypographyScale.tsx
│ │ ├── ButtonShowcase.tsx
│ │ └── CardShowcase.tsx
│ └── layout/ # Site layout components
│ ├── Navigation.tsx
│ └── Footer.tsx
├── lib/ # Utilities
│ └── utils.ts # cn() helper
├── public/
│ └── assets/
│ ├── logos/
│ │ ├── company/ # Company logos
│ │ └── product/ # Product logos
│ ├── images/
│ │ └── default/ # Default placeholder images
│ └── icons/ # Custom SVG icons
└── styles/
└── globals.css # Tailwind imports + custom styles
- Black:
#000000- Primary background - Dark:
#0A0A0A- Section backgrounds - Surface:
#1A1A1A- Card backgrounds - Subtle:
#2A2A2A- Borders - Primary:
#FFFFFF- Primary text - Secondary:
#A0A0A0- Body text - Muted:
#6B6B6B- Tertiary text - Accent:
#FF6B35- CTAs (use sparingly) - Accent Hover:
#FF8C5A- Accent hover state
- Font: Inter (Google Fonts)
- Headings: 64px, 48px, 32px, 24px
- Body: 20px, 16px, 14px
- Line Height: 1.7 for body text, 1.1 for headings
All components follow the dark mode-first design with minimal color usage. The accent color is used sparingly for CTAs only.
Add company and product logos to:
/public/assets/logos/company//public/assets/logos/product/
Supported formats: SVG, PNG
Add default/placeholder images to:
/public/assets/images/default/
The site includes example images from the design system.
The icon library supports:
- Lucide React: Comprehensive icon set
- Heroicons: Outline and solid variants
Icons can be searched, filtered, and copied with code snippets.
- Create component in
/components/showcase/ - Add to appropriate page in
/app/ - Follow the design system color and spacing guidelines
- Place assets in appropriate
/public/assets/subdirectory - Update the page component to reference the new assets
- Add metadata (name, description, format) as needed
- Dark Mode First: All components designed for dark backgrounds
- Minimal Colors: Use accent color (#FF6B35) sparingly for CTAs only
- Responsive: Test all breakpoints (mobile, tablet, desktop)
- Accessibility: Ensure WCAG AA compliance
- Type Safety: Use TypeScript throughout
© 2023 412. All rights reserved.