Skip to main content

​
What Happened

The smo1.io landing page had multiple dark mode visibility failures: the Sign In button and See Features button were completely invisible until hovered. The hero headline was static text with misaligned wrapping, and gradients used generic two-stop linear fills that read as default/algorithmic rather than intentional. These issues were present since the dark mode implementation but went unnoticed because development primarily happens in light mode.

​
Business Impact

The landing page is the single most important conversion surface. Users who can’t see navigation buttons can’t sign up. A static, misaligned hero section signals “weekend project” rather than “reliable SaaS platform.” Dark mode is the default for the majority of developer and creator audiences — the exact target demographic.

​
Resolution

  • Buttons given explicit dark mode text colors for permanent visibility
  • Hero headline rebuilt with a typewriter animation that cycles through value propositions, creating visual interest and communicating product breadth
  • Gradients upgraded from two-stop to three-stop diagonal for a more crafted, intentional look
  • Typography refined with weight contrast (bold headline vs. light subtitle) and uppercase tracking on stats

​
Takeaway

Dark mode isn’t a theme toggle — it’s the primary experience for most technical users. Every interactive element needs to be manually verified in dark mode, not just assumed correct because the light mode works. Animation and typography details are what separate “functional” from “premium” in a competitive SaaS market.