---
name: frontend-design
description: Tailwind CSS v4 syntax and project design system. Use when writing frontend styles. Covers v4 syntax changes, custom color palette, and utility classes.
---

# Frontend Design

This project uses Tailwind CSS v4 with a custom color palette.

## Tailwind v4 Syntax

### CSS Variables

Use parentheses, not square brackets:

```html
<!-- WRONG: v3 syntax -->
<div class="bg-[--background]"></div>

<!-- CORRECT: v4 syntax -->
<div class="bg-(--background)"></div>
```

### Renamed Utilities

| v3 (WRONG) | v4 (CORRECT) |
|------------|--------------|
| `shadow-sm` | `shadow-xs` |
| `rounded-sm` | `rounded-xs` |
| `ring` | `ring-3` |

### Important Modifier

Important marker goes at the end:

```html
<!-- WRONG -->
<div class="!bg-red-500"></div>

<!-- CORRECT -->
<div class="bg-red-500!"></div>
```

## Color Palette

Defined in `src/styles/global.css`.

### Brand Colors

| Color | Variable | Usage |
|-------|----------|-------|
| Volcanic Pearl | `--color-volcanic-pearl` | Light mode background |
| Dark Slate Blue | `--color-dark-slate-blue` | Accent color |
| Lunar Blue | `--color-lunar-blue` | Secondary accent |

### Semantic Colors

Use these instead of raw values:

| Class | Light Mode | Dark Mode |
|-------|------------|-----------|
| `bg-background` | Volcanic Pearl | Zinc 900 |
| `text-foreground` | Zinc 900 | Volcanic Pearl |
| `bg-muted` | Zinc 300 | Zinc 600 |
| `text-muted-foreground` | Zinc 600 | Zinc 300 |

### Usage

```html
<!-- CORRECT: semantic colors -->
<div class="bg-background text-foreground"></div>
<span class="text-muted-foreground"></span>

<!-- AVOID: raw colors unless intentional -->
<div class="bg-zinc-900"></div>
```

## Custom Utilities

### article-link

Styled link for article content:

```html
<a href="/about" class="article-link">About</a>
```

Applies: `underline underline-offset-4`

## Fonts

| Class | Font |
|-------|------|
| `font-brand` | Archivo |
| `font-sans` | IBM Plex Sans |
| `font-serif` | Crimson Pro |