[Phase 2] Theme customization and logo design

[afucher]

Customize the Starlight theme colors, add a professional logo, and refine overall visual design.

Deliverable

A polished, branded look for the documentation site that reflects AstroChart's identity. Logo ready for use; theme colors applied throughout.

Acceptance Criteria

• Logo design completed (one of the following):

  • Proposed minimal zodiac wheel SVG created and placed at website/public/img/logo.svg
  • OR community-chosen logo obtained and placed at same path
  • Logo is at least 512px×512px (for favicon generation)
  • Logo works in both dark and light modes (or is monochrome)

• Starlight theme customization:

  • website/src/styles/custom.css created with CSS custom properties
  • Primary accent color: TBD (related to astrological theme)
  • Secondary colors for elements (success, warning, info)
  • Font choices finalized (serif vs sans-serif)

• Favicon and social preview generated:

  • favicon.ico generated from logo, placed in website/public/
  • Open Graph image (social-card.png) created, placed in website/public/img/
  • Test: browser tab shows favicon; link preview shows OG image

• astro.config.mjs updated:

  • logo.src points to /img/logo.svg
  • Theme colors applied via Starlight config (if available) or CSS

• Home page styling refined:

  • Hero section fonts and spacing improved
  • Feature cards have consistent styling
  • Demo chart section styled for visual prominence
  • Sponsorship section looks polished

• Color contrast checked for accessibility:

  • All text meets WCAG AA standards
  • No errors in Chrome DevTools Lighthouse

• Responsive design verified:

  • Mobile (320px), tablet (768px), desktop (1920px) all look good
  • Navigation collapses to mobile menu on small screens

• Site deployed and visually approved by team

Related Plan Section

docs-plan.md §7 (Header/Footer/UI Chrome), §11.Q3 (Logo)