FRAYT Design System

Download the Theme

Drop the FRAYT theme into any shadcn/ui project to get all design tokens, color modes, and semantic colors instantly.

Replace your existing :root and .dark blocks in globals.css with the contents of this file. The @theme inline block is required for Tailwind CSS v4 only.

1. Clone and Install

git clone <repo-url> frayt-design-system
cd frayt-design-system
pnpm install

2. Start the Dev Server

pnpm dev

Open http://localhost:3000 to see the documentation site.

3. Add a Component

Use the shadcn CLI to add any component to your project:

npx shadcn@latest add button

Then import and use it:

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

export default function Page() {
  return <Button>Get Started</Button>;
}

4. Use Design Tokens

All design tokens are CSS custom properties available through Tailwind utilities:

// Background + text color using semantic tokens
<div className="bg-primary text-primary-foreground">
  FRAYT branded surface
</div>

// Status colors
<Badge className="bg-success text-success-foreground">Delivered</Badge>
<Badge className="bg-warning text-warning-foreground">In Transit</Badge>
<Badge className="bg-danger text-danger-foreground">Failed</Badge>

5. Dark Mode

The system supports dark mode out of the box via next-themes. Toggle between light and dark using the theme switcher in the top nav, or set it programmatically:

import { useTheme } from 'next-themes';

const { setTheme } = useTheme();
setTheme('dark');

Next Steps

Principles

Understand the design pillars and philosophy behind the system.

Usage

Detailed setup, project structure, and configuration guide.

Foundation

Explore colors, typography, spacing, and other design tokens.

Quick Start