Skip to main content

Design System Demo

Explore the new brand identity with simplified design tokens, integrated shadcn/ui components, and modern typography.

Brand Colors

Primary - Black
#18181B (Zinc 900)

Used for primary text, main navigation, and high-contrast elements.

Secondary - Green
#4ADE80 (Green 400)

Used for CTAs, success states, and interactive elements.

Accent - Purple
#8C72BF

Used for highlights, secondary actions, and special elements.

Typography

Display Font - JetBrains Mono
Used for headings and display text
Heading 1
Heading 2
Heading 3
Heading 4
Body Font - Nunito Sans
Used for body text and UI elements
Heading 5
Heading 6

This is body text using Nunito Sans. It's clean, readable, and perfect for documentation content. The font provides excellent readability across different screen sizes and devices.

Smaller text for captions and secondary information.

shadcn/ui Components

Buttons
Various button styles using brand colors
Cards
Card component variants
Nested Card

This is a card within a card, showing how components can be composed.

Accent Card

Card with brand green accent border.

Code Styling

Code Blocks
Monospace font usage for technical content

Inline code: npm install

Code block:

import { Button } from './components/ui/button';

const App = () => (
  <Button className="bg-brand-green">
    Hello World
  </Button>
);

Design System Status

Implementation Complete
New brand identity successfully integrated

Completed

  • • Brand colors in Tailwind config
  • • Typography (JetBrains Mono + Nunito Sans)
  • • shadcn/ui integration
  • • Simplified CSS with Tailwind
  • • Docusaurus integration
  • • Removed complex design system overhead

Next Steps

  • • Add more shadcn/ui components
  • • Create component documentation
  • • Accessibility testing
  • • Visual regression testing
  • • Dark mode refinements