# shadcn/ui Design Systems Reference

*Captured from ui.shadcn.com/create — 5 Style Variants*

---

## Style 1: NOVA (base=base)

**URL:** `https://ui.shadcn.com/create?base=base`

### Visual Character
Clean, minimal, high-contrast monochrome with warm neutral undertones.

### Color Tokens
```css
--background: 0 0% 100%        /* Pure white */
--foreground: 0 0% 9%          /* Near black */
--primary: 0 0% 9%             /* Black */
--primary-foreground: 0 0% 98% /* Off-white */
--secondary: 0 0% 96%          /* Light gray */
--muted: 0 0% 96%              /* Light gray */
--muted-foreground: 0 0% 45%   /* Medium gray */
--accent: 0 0% 96%             /* Light gray */
--border: 0 0% 90%             /* Border gray */
--input: 0 0% 90%              /* Input border */
--ring: 0 0% 64%               /* Focus ring */
--radius: 0.5rem               /* 8px default */

/* Chart colors - Neutral palette */
--chart-1: 0 0% 22%            /* Dark gray */
--chart-2: 0 0% 45%            /* Medium gray */
--chart-3: 0 0% 64%            /* Light gray */
--chart-4: 0 0% 82%            /* Lighter gray */
--chart-5: 0 0% 96%            /* Lightest gray */
```

### Typography
- **Heading Font:** Inter (Geometric Sans)
- **Body Font:** Inter
- **Weights:** 400 (body), 500 (medium), 600 (semibold), 700 (bold headings)

### Buttons
| Variant | Style |
|---------|-------|
| Primary | Black bg, white text, rounded-lg |
| Secondary | Light gray bg, dark text |
| Outline | Transparent bg, dark border |
| Ghost | Transparent bg, hover gray |

---

## Style 2: VEGA (base=vega)

**URL:** `https://ui.shadcn.com/create?base=vega`

### Visual Character
Warm stone palette with organic, earthy tones. Softer contrast than Nova.

### Color Tokens
```css
--background: 30 6% 98%        /* Warm off-white */
--foreground: 30 6% 10%        /* Dark stone */
--primary: 30 6% 10%           /* Dark stone */
--primary-foreground: 30 6% 98% /* Warm white */
--secondary: 30 6% 94%         /* Light stone */
--muted: 30 6% 94%             /* Light stone */
--muted-foreground: 30 6% 40%  /* Medium stone */
--accent: 30 6% 94%              /* Light stone */
--border: 30 6% 88%              /* Stone border */
--input: 30 6% 88%               /* Stone input */
--ring: 30 6% 62%                /* Stone ring */
--radius: 0.625rem               /* 10px - slightly rounder */

/* Chart colors - Warm stone palette */
--chart-1: 30 6% 20%           /* Dark stone */
--chart-2: 30 6% 40%            /* Medium stone */
--chart-3: 30 6% 60%            /* Light-medium stone */
--chart-4: 30 6% 80%            /* Light stone */
--chart-5: 30 6% 95%            /* Lightest stone */
```

### Typography
- **Heading Font:** Inter
- **Body Font:** Inter
- **Base Character:** Warmer, more organic than Nova

### Buttons
Same variants as Nova but with warm stone backgrounds.

---

## Style 3: ZINC (base=zinc)

**URL:** `https://ui.shadcn.com/create?base=zinc`

### Visual Character
Cool blue-gray palette. Professional, tech-forward aesthetic.

### Color Tokens
```css
--background: 0 0% 100%        /* White */
--foreground: 240 10% 4%       /* Near black with blue undertone */
--primary: 240 10% 4%          /* Dark zinc */
--primary-foreground: 0 0% 98% /* Off-white */
--secondary: 240 5% 96%        /* Light zinc */
--muted: 240 5% 96%            /* Light zinc */
--muted-foreground: 240 4% 46%   /* Medium zinc */
--accent: 240 5% 96%             /* Light zinc */
--border: 240 6% 90%             /* Zinc border */
--input: 240 6% 90%              /* Zinc input */
--ring: 240 5% 65%               /* Zinc ring */
--radius: 0.5rem                 /* 8px default */

/* Chart colors - Cool zinc palette */
--chart-1: 240 10% 15%           /* Dark zinc */
--chart-2: 240 5% 35%            /* Medium-dark zinc */
--chart-3: 240 5% 55%            /* Medium zinc */
--chart-4: 240 5% 75%            /* Light zinc */
--chart-5: 240 5% 95%            /* Lightest zinc */
```

### Visual Notes
- Cool undertones throughout
- More "tech" feeling than warm stone
- Slightly harsher contrast than stone

---

## Style 4: SLATE (base=slate)

**URL:** `https://ui.shadcn.com/create?base=slate`

### Visual Character
Blue-leaning grays with a modern, software aesthetic.

### Color Tokens
```css
--background: 0 0% 100%          /* White */
--foreground: 222 47% 4%         /* Very dark slate blue */
--primary: 222 47% 4%            /* Dark slate */
--primary-foreground: 210 40% 98% /* Light slate white */
--secondary: 210 40% 96%         /* Light slate */
--muted: 210 40% 96%             /* Light slate */
--muted-foreground: 215 16% 47%  /* Medium slate */
--accent: 210 40% 96%             /* Light slate */
--border: 214 32% 91%             /* Slate border */
--input: 214 32% 91%               /* Slate input */
--ring: 215 20% 65%                /* Slate ring */
--radius: 0.5rem                   /* 8px default */

/* Chart colors - Blue slate palette */
--chart-1: 222 47% 11%             /* Dark slate blue */
--chart-2: 217 33% 30%             /* Medium-dark slate */
--chart-3: 217 33% 50%             /* Medium slate */
--chart-4: 213 27% 70%             /* Light slate */
--chart-5: 210 40% 96%             /* Lightest slate */
```

### Visual Notes
- Noticeable blue undertone in dark colors
- Traditional "slate" software look
- Professional, enterprise feeling

---

## Style 5: STONE (base=stone)

**URL:** `https://ui.shadcn.com/create?base=stone`

### Visual Character
Warm, earthy stone tones. Most organic and "paper-like" of the variants.

### Color Tokens
```css
--background: 0 0% 100%          /* White */
--foreground: 24 10% 4%          /* Dark warm stone */
--primary: 24 10% 4%               /* Dark stone */
--primary-foreground: 60 9% 98%      /* Warm white */
--secondary: 60 5% 96%             /* Light stone */
--muted: 60 5% 96%                 /* Light stone */
--muted-foreground: 25 6% 45%        /* Medium stone */
--accent: 60 5% 96%                  /* Light stone */
--border: 20 6% 90%                  /* Stone border */
--input: 20 6% 90%                   /* Stone input */
--ring: 24 6% 65%                    /* Stone ring */
--radius: 0.5rem                     /* 8px default */

/* Chart colors - Warm stone */
--chart-1: 24 10% 12%                /* Dark stone */
--chart-2: 24 6% 35%                 /* Medium-dark stone */
--chart-3: 24 6% 55%                 /* Medium stone */
--chart-4: 24 6% 75%                 /* Light stone */
--chart-5: 60 5% 96%                 /* Lightest stone */
```

### Visual Notes
- Warmest of the neutral variants
- Feels like paper/cardboard texture
- Most readable for long-form content

---

## Common Component Patterns (All Variants)

### Buttons
```
Primary:   bg-primary text-primary-foreground
Secondary: bg-secondary text-secondary-foreground
Outline:   border border-input bg-background
Ghost:     hover:bg-accent
```

### Cards
```
Card:      bg-card text-card-foreground border border-border rounded-lg
```

### Form Elements
```
Input:     border border-input bg-background rounded-md
Focus:     ring-2 ring-ring
```

### Spacing Scale
- xs: 0.5rem (8px)
- sm: 0.75rem (12px)
- md: 1rem (16px)
- lg: 1.5rem (24px)
- xl: 2rem (32px)

### Border Radius Scale
- sm: 0.375rem (6px)
- md: 0.5rem (8px) [default]
- lg: 0.625rem (10px)
- xl: 0.75rem (12px)
- full: 9999px

---

## Quick Reference: Choosing a Variant

| Variant | Best For | Mood |
|---------|----------|------|
| **Nova** | General purpose, modern apps | Clean, sharp, contemporary |
| **Vega** | Lifestyle, content-heavy | Warm, organic, approachable |
| **Zinc** | Tech/developer tools | Cool, professional, precise |
| **Slate** | Enterprise, B2B software | Traditional, trustworthy |
| **Stone** | Editorial, reading apps | Warm, paper-like, comfortable |

---

*Last captured: March 23, 2026*
*Source: https://ui.shadcn.com/create*

## Installation Command

```bash
npx shadcn@latest init --yes --template next --base-color [base]
```

Where `[base]` is one of: `neutral` (nova), `stone` (stone/vega), `zinc`, `slate`, `gray`