clawdbot-workspace/daswav-cute-v2/layout-guide.md

# DAS Website Layout Guide
*A cozy, personal space for lo-fi beats*

---

## Design Philosophy
This site should feel like stepping into a friend's carefully curated music space. Warm, intimate, uncluttered. Every pixel serves the music.

---

## Spacing System

### Container Padding
- **Desktop:** 80px horizontal, 60px vertical
- **Tablet:** 40px horizontal, 40px vertical  
- **Mobile:** 24px horizontal, 32px vertical

### Section Spacing (vertical)
- **Between major sections:** 120px (desktop), 80px (tablet), 60px (mobile)
- **Between subsections:** 60px (desktop), 40px (tablet), 32px (mobile)
- **Between elements in a group:** 24px (desktop), 20px (tablet), 16px (mobile)

### Track List Item Spacing
- **Gap between tracks:** 16px
- **Internal padding:** 20px (desktop), 16px (mobile)
- **Hover expansion:** Add 4px padding-top and padding-bottom on hover

---

## Typography Hierarchy

### Font Families
- **Headings:** System font stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- **Body:** Same as headings for cohesion
- **Accent/Artist name:** Consider a gentle rounded sans like `'DM Sans', 'Inter', system-ui`

### Font Sizes

#### Desktop (1024px+)
- **Artist Name (H1):** 72px, font-weight: 700, letter-spacing: -0.02em
- **Tagline:** 24px, font-weight: 400, letter-spacing: 0.01em, opacity: 0.85
- **Section Headers (H2):** 36px, font-weight: 600
- **Track Titles:** 20px, font-weight: 500
- **Track Album/Description:** 16px, font-weight: 400, opacity: 0.7
- **About Text:** 18px, font-weight: 400, line-height: 1.7
- **Buttons/Links:** 16px, font-weight: 500, letter-spacing: 0.02em

#### Tablet (768px - 1023px)
- **Artist Name:** 56px
- **Tagline:** 20px
- **Section Headers:** 28px
- **Track Titles:** 18px
- **Track Album/Description:** 15px
- **About Text:** 17px
- **Buttons/Links:** 15px

#### Mobile (<768px)
- **Artist Name:** 40px
- **Tagline:** 18px
- **Section Headers:** 24px
- **Track Titles:** 17px
- **Track Album/Description:** 14px
- **About Text:** 16px, line-height: 1.65
- **Buttons/Links:** 15px

---

## Color Palette

### Primary Colors
```
Background: #FFF8F0 (warm off-white, like aged paper)
Text Primary: #2A2420 (warm dark brown, not pure black)
Text Secondary: rgba(42, 36, 32, 0.65)
```

### Accent Colors
```
Primary Accent: #E85D75 (warm coral pink)
Hover Accent: #D94460 (deeper coral)
Secondary Accent: #FFA07A (light salmon - for subtle highlights)
```

### Interactive States
```
Link Default: #2A2420
Link Hover: #E85D75
Button Background: #E85D75
Button Hover: #D94460
Button Text: #FFF8F0
Track Item Hover Background: rgba(232, 93, 117, 0.08)
```

### Semantic Colors
```
Focus Ring: 2px solid #E85D75, offset 2px
Border/Divider: rgba(42, 36, 32, 0.12)
```

---

## Responsive Breakpoints

```css
/* Mobile-first approach */

/* Small phones */
@media (max-width: 375px) {
  /* Tighter spacing, smaller fonts */
}

/* Standard mobile */
@media (min-width: 376px) and (max-width: 767px) {
  /* Base mobile styles */
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Medium spacing and fonts */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Full spacing and fonts */
}

/* Large desktop */
@media (min-width: 1440px) {
  /* Optional: max-width container, centered */
  /* Max content width: 1200px */
}
```

---

## Component-Specific Guidelines

### Hero Section (Artist Name + Tagline)
- **Alignment:** Center
- **Vertical spacing from top:** 80px (desktop), 60px (mobile)
- **Tagline margin-top:** 16px
- **Animation:** Subtle fade-in on load (0.6s ease)

### Track List
- **Max width:** 640px, centered
- **Border radius:** 12px per item
- **Transition:** all 0.2s ease-in-out
- **Hover state:** Lift with subtle shadow `box-shadow: 0 4px 12px rgba(42, 36, 32, 0.08)`
- **Play button (if added):** 40px circle, positioned left or center, accent color

### About Section
- **Max width:** 560px, centered
- **Text alignment:** Center
- **Line height:** 1.7 (desktop), 1.65 (mobile)

### Streaming Links
- **Layout:** Horizontal flex on desktop, vertical stack on mobile (<600px)
- **Button style:** Rounded corners (24px), 16px vertical padding, 32px horizontal padding
- **Gap between buttons:** 16px
- **Icon size (if added):** 20px, positioned left of text with 8px gap
- **Hover effect:** Slight scale (transform: scale(1.02)) + color change

---

## Accessibility Considerations

### Color Contrast
- **Text on background:** Minimum WCAG AA (4.5:1 for body text, 3:1 for large text)
- **Accent color on white:** #E85D75 on #FFF8F0 = ~4.8:1 ✓
- **Dark text on white:** #2A2420 on #FFF8F0 = ~13.5:1 ✓

### Focus States
- **All interactive elements** must have visible focus ring
- **Focus ring:** 2px solid accent color, 2px offset
- **Never remove outline** without replacing with visible alternative

### Keyboard Navigation
- **Tab order:** Logical top-to-bottom flow
- **Skip links:** Consider "Skip to music" link at top
- **Interactive elements:** Minimum 44x44px touch target on mobile

### Screen Reader Support
- **Artist name:** Wrapped in `<h1>` with proper hierarchy
- **Track list:** Semantic `<ul>` with `<li>` items
- **Links:** Descriptive text ("Listen on Spotify" not just "Spotify")
- **Icons:** Include `aria-label` or sr-only text
- **Album art (if added):** Descriptive alt text

### Motion & Animation
- **Respect `prefers-reduced-motion`:**
```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

### Performance
- **Font loading:** Use `font-display: swap` to prevent invisible text
- **Images (if added):** Lazy load, provide width/height to prevent layout shift
- **Animations:** Use `transform` and `opacity` for GPU acceleration

---

## Mobile-Specific Considerations

### Touch Targets
- **Minimum size:** 44x44px (48x48px recommended)
- **Spacing between targets:** At least 8px

### Viewport
```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

### Horizontal Scrolling
- **Never require horizontal scroll**
- **Text:** Must wrap naturally
- **Buttons:** Stack vertically if needed

### Performance
- **Keep total page weight under 500KB** (before images)
- **Critical CSS:** Inline above-the-fold styles
- **Lazy load:** Below-the-fold content

---

## Implementation Notes

### CSS Variables (Recommended)
```css
:root {
  --color-bg: #FFF8F0;
  --color-text: #2A2420;
  --color-text-secondary: rgba(42, 36, 32, 0.65);
  --color-accent: #E85D75;
  --color-accent-hover: #D94460;
  
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 36px;
  --font-size-xxl: 72px;
}
```

### Animation Timing
- **Micro-interactions (hover, focus):** 150-250ms
- **Page transitions:** 400-600ms
- **Ease function:** `cubic-bezier(0.4, 0.0, 0.2, 1)` for smoothness

---

## Final Touch: Personality

This isn't just a website—it's a feeling. Every interaction should whisper, not shout. Think:
- **Gentle hover states** (not aggressive)
- **Breathing room** (generous whitespace)
- **Organic shapes** (rounded corners, soft shadows)
- **Warm tones** (no harsh blues or grays)
- **Handcrafted vibe** (imperfect is perfect)

The goal: visitors should want to *stay*, not just *visit*.