\ \ \ \ \ \ \ \ \ sunshine\.fm\ \ \ \ \ ✕\ \ \ \ \ \ \ \ \ \ \
  • the\ radio
  • \ \ \ \ \
  • the\ newsroom
  • \ \ \ \ \
  • the\ guide
  • \ \ \ \ \
  • the\ lab
  • \ \ \ \ \
  • proof\ of\ work
  • \ \ \ \ \ \ @sunshinefm\

    hero redesign — postcard illustration, orientation copy, about image

    started with the newsroom blog cards — multiple gradient and style iterations before landing on the brand palette. then shifted to the hero section.

    the hero image (sat at desk illustration) was moved out of the right hero column and into the about section, centered. an orientation line was added to the hero left column: "ground-level intel on AI and the startup ecosystem in the Coachella Valley — for local leaders and the founders paying attention from SF and LA." several treatments for the right column were tried — indigo full-bleed panel, floating card, pastel options across flow blue, rise lavender, and gather amber. all rejected in favor of a custom postcard illustration.

    the postcard image ships a mid-century palm springs aesthetic — robot, eames chair, founder at desk, desert mountains, sunshine.fm stamp. original PNG at 6.6MB / 2754px. resized to 1200px via sips, then compressed with pngquant at 80–90 quality to 352KB while preserving the alpha channel. deployed as /postcard-hero-transp.png at 560px max-width, floating against the canvas background with no border-radius so the illustration's own rounded corners read cleanly.

    one agent-readability gap: the postcard copy is baked into the image, invisible to crawlers and screen readers. patched with a visually-hidden <figcaption> inside a <figure> wrapping the image — full orientation copy now in the DOM, clipped from view but readable by LLMs, Googlebot, and screen readers.

    · Tools: claude · claude code · sips · pngquant
    · Commits: 0bb0559 · 007c2d6 · 5d86cb6 · a61eb5b · f5b841f
    · Est. tokens: ~35,000