Based on the product requirements, here's my proposed design direction:

**Personality**: [2-3 adjectives that describe the feel]
Examples: "Clean and professional", "Friendly and approachable", "Bold and modern"

**Visual Style**: [Brief description]
Example: "Minimal with generous whitespace, subtle shadows for depth"

**Reference Points**: [1-2 existing products with similar aesthetic]
Example: "Linear's clarity meets Notion's flexibility"

Does this direction feel right for [project] and [target persona]?

## Core Design Tokens

### Colour Palette (OKLCH)

OKLCH provides perceptually uniform colours with predictable lightness and chroma.
Format: `oklch(L% C H)` where L=lightness, C=chroma, H=hue angle.

**Primary**: oklch(55% 0.25 250) — Used for CTAs, key interactive elements
**Primary Hover**: oklch(48% 0.25 250) — Darker for hover states
**Primary Active**: oklch(42% 0.25 250) — Darkest for active states

**Secondary**: oklch(60% 0.15 280) — Used for secondary actions, accents

**Neutrals**:
- Background: oklch(99% 0 0) — Main background colour
- Surface: oklch(100% 0 0) — Cards, elevated elements
- Border: oklch(90% 0.01 250) — Dividers, input borders

**Text**:
- Text Primary: oklch(20% 0.02 250) — Main body text
- Text Secondary: oklch(45% 0.02 250) — Supporting text, labels
- Text Muted: oklch(60% 0.01 250) — Placeholders, disabled

**Semantic Colours**:
- Success: oklch(55% 0.2 145) — Green
- Warning: oklch(70% 0.18 85) — Amber
- Error: oklch(55% 0.22 25) — Red
- Info: oklch(55% 0.2 250) — Blue

**Accessibility Note**: All colour combinations meet WCAG AA (4.5:1 for text).
Use OKLCH lightness values to ensure consistent contrast:
- Text on light bg: L ≤ 45% for body text
- Text on dark bg: L ≥ 85% for body text

### Typography

**Font Stack**: [Font name], -apple-system, BlinkMacSystemFont, sans-serif

| Element | Size | Weight | Usage |
|---------|------|--------|-------|
| H1 | 2.5rem | 700 | Page titles |
| H2 | 1.75rem | 600 | Section headers |
| H3 | 1.25rem | 600 | Card titles |
| Body | 1rem | 400 | Main content |
| Small | 0.875rem | 400 | Captions, metadata |
| Label | 0.75rem | 500 | Form labels |

### Spacing Scale

Base unit: 4px

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Tight spacing within elements |
| sm | 8px | Related element spacing |
| md | 16px | Standard spacing |
| lg | 24px | Section spacing |
| xl | 32px | Major section breaks |
| 2xl | 48px | Page-level spacing |

### Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| sm | 4px | Inputs, small elements |
| md | 8px | Cards, buttons |
| lg | 12px | Modals, large cards |
| full | 9999px | Pills, avatars |

### Shadows

| Token | Value | Usage |
|-------|-------|-------|
| sm | 0 1px 2px oklch(0% 0 0 / 0.05) | Subtle elevation |
| md | 0 4px 6px oklch(0% 0 0 / 0.1) | Cards, dropdowns |
| lg | 0 10px 15px oklch(0% 0 0 / 0.1) | Modals, popovers |

## Component Patterns

### Buttons

**Primary**: Solid background with primary colour, white text
- Hover: Darken 10%
- Active: Darken 15%
- Disabled: 50% opacity, no pointer

**Secondary**: Outlined with border, primary colour text
- Hover: Light primary background (10% opacity)

**Ghost**: No background or border, primary colour text
- Hover: Light background

**Sizes**: 
- sm: 32px height, 12px padding
- md: 40px height, 16px padding (default)
- lg: 48px height, 24px padding

### Form Inputs

- Height: 40px (md), 48px (lg)
- Border: 1px solid [border colour]
- Border radius: sm (4px)
- Focus: Primary colour border, subtle glow
- Error: Error colour border, error message below
- Placeholder: Text secondary colour

### Cards

- Background: Surface colour
- Border radius: md (8px)
- Shadow: sm (default), md (on hover if interactive)
- Padding: lg (24px)

### Navigation

**Top Navigation**:
- Height: 64px
- Sticky on scroll
- Logo left, primary nav center/right, user menu far right

**Mobile**: Hamburger menu at 768px breakpoint

## Screen Layouts

### Layout: Dashboard

**Responsive Behaviour**:
- Desktop (1024px+): Full layout as shown
- Tablet (768-1023px): Metrics stack to 2 columns
- Mobile (<768px): Single column, hamburger nav

## Interaction Patterns

### Loading States

- **Page load**: Skeleton screens matching layout shape
- **Button action**: Button shows spinner, disabled during load
- **Data fetch**: Inline spinner or skeleton, preserve layout

### Empty States

- Centered illustration (optional) + message + primary CTA
- Message format: "[What would be here] + [How to add it]"
- Example: "No projects yet. Create your first project to get started."

### Error States

- Inline errors: Red border + error message below field
- Toast notifications: Top-right, auto-dismiss after 5s
- Page errors: Centered message with retry action

### Success Feedback

- Form submission: Green toast "Changes saved" + subtle checkmark
- Destructive actions: Confirmation modal before, success toast after

### Transitions

- Duration: 150ms for micro-interactions, 300ms for layout changes
- Easing: ease-out for entering, ease-in for exiting
- Prefer opacity + transform over layout shifts

## Accessibility Requirements

### Must Have (WCAG AA)

- [ ] Colour contrast: 4.5:1 for normal text, 3:1 for large text
- [ ] Focus indicators: Visible on all interactive elements
- [ ] Keyboard navigation: All actions reachable via keyboard
- [ ] Form labels: Every input has associated label
- [ ] Alt text: All meaningful images have descriptions
- [ ] Touch targets: Minimum 44x44px on mobile

### Semantic HTML

- Use `<button>` for actions, `<a>` for navigation
- Use heading hierarchy (h1 → h2 → h3)
- Use `<main>`, `<nav>`, `<aside>` landmarks
- Use `aria-label` when visual context isn't available

### Motion

- Respect `prefers-reduced-motion` — disable non-essential animations
- No auto-playing animations that can't be paused

---
document_type: design_brief
version: "1.0.0"
status: draft
created_by: ux_ui_designer
created_at: "[timestamp]"
last_updated: "[timestamp]"
project: "[project-slug]"

phase: 2a
depends_on:
  - document: "01-requirements/product-requirements.md"
    version: ">=1.0.0"
    status: approved
blocks:
  - "04-implementation/frontend/implementation-notes.md"

requires_human_approval: false
approval_status: pending

stack:
  frontend: [from bootstrap]
  backend: [from bootstrap]
  database: [from bootstrap]
  deployment: [from bootstrap]

security_considerations:
  - id: "SEC-UX-001"
    category: input_validation
    consideration: "Form inputs must validate and sanitise on client and server"
    status: identified
    mitigation: "Use controlled inputs with validation feedback"
    owner: frontend_engineer
  - id: "SEC-UX-002"
    category: data_protection
    consideration: "Sensitive data (passwords, tokens) must not be visible or logged"
    status: identified
    mitigation: "Use password input types, mask sensitive data in UI"
    owner: frontend_engineer
---

# Design Brief: [Project Name]

## Design Direction

**Personality**: [2-3 adjectives]
**Visual Style**: [Brief description]
**Reference Points**: [Similar products]

---

## Design Tokens

[Colour palette, typography, spacing, etc. from Step 2]

---

## Component Patterns

[Button, input, card patterns from Step 3]

---

## Screen Layouts

[Key screens from Step 4]

---

## Interaction Patterns

[Loading, empty, error states from Step 5]

---

## Accessibility Requirements

[Checklist from Step 6]

---

## Implementation Notes

### For Frontend Engineer

- Reference `/mnt/skills/public/frontend-design/SKILL.md` for implementation patterns
- OKLCH colours work in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+)
- Use Tailwind classes that map to design tokens
- Component library recommendation: [shadcn/ui | Radix | custom]
- Icon set: [Lucide | Heroicons | custom]

### OKLCH in Tailwind

```javascript
// Helper function for tailwind.config.ts
const oklch = (l, c, h) => `oklch(${l}% ${c} ${h})`;

## Security Considerations (Embedded)

| ID | Category | Consideration | Status |
|----|----------|---------------|--------|
| SEC-UX-001 | input_validation | Client-side validation with clear error messaging | Identified |
| SEC-UX-002 | data_protection | Mask passwords and sensitive inputs | Identified |
| SEC-UX-003 | data_protection | Don't expose sensitive data in URLs | Identified |

## Handoff