Stryds Colorful Concentric Hero Landing Page

Overview

Stryds features a minimalist yet high-impact landing page centered around a dynamic concentric ring hero section that visually represents progress and social connectivity. It is an excellent reference for builders looking to implement complex CSS-based radial layouts or gamified progress tracking visualizations. The design effectively uses motion and vibrant colors to command attention with minimal copy.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a dark core (near-black #111) to create depth, contrasted against a high-saturation spectrum involving lime green, orange, pink, and violet. The white sans-serif logo occupies the highest hierarchical position, framed by the bright circular tracks.
• Typography: A clean, modern geometric sans-serif (resembling Inter or similar) is used for the brand logo ("Stryds") in a heavy weight. The subheader and secondary text use a smaller scale in a medium-grey tone to reduce visual noise and emphasize the central brand.
• Page Structure: The layout follows a centered focal point architecture. The primary assets (logo, rings, and call-to-action) are all vertically aligned. A floating action bar at the bottom provides a clear, persistent 'Join' button using a high-contrast lime green pill shape.
• Reusable Components:
  • Concentric Ring System: The layered CSS structures representing progress tracks with rounded end-caps.
  • Floating UI Bar: The compact, bottom-fixed navigation pill that houses the logo and a primary action button.
  • Avatar Markers: Circular profile imagery positioned along the paths of the rings.
• Interaction & Motion: The design implies a dynamic, potentially rotating or loading state for the rings. The user avatars are integrated directly into the progress tracks, suggesting a design pattern for leaderboards or social activity feeds.

Use Cases

• Who should clone this: Developers creating fitness trackers, social productivity tools, or fintech apps where progress and community are core value propositions.
• Effective Remixes: This pattern can be effectively remixed for habit-tracking dashboards, crowdfunding goals (progress toward a total), or waitlist landing pages where user avatars signify social proof.
• Remix Directions:
  • Brand Adaptation: Swap the vibrant rainbow palette for a monochromatic or dual-tone gradient to fit professional SaaS branding.
  • Functional Swap: Replace the user avatars with status icons or data points to turn the hero into a functional analytics visualization.
• Clone Scope: The hero section is the most valuable asset for a quick clone; the bottom navigation pill is a great secondary element for mobile-first utility.