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

/* 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:

@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

<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)

: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.