Felt GIS Platform Landing Page

Overview

Felt’s landing page is a masterclass in high-end B2B SaaS design, effectively blending data-dense GIS concepts with a clean, approachable consumer interface. It serves as an excellent reference for builders because it demonstrates how to showcase complex software features through high-fidelity video embeds, structured grid systems, and a sophisticated dark-to-light thematic transition.

Design System

• Color Palette & Visual Hierarchy: The site uses a grounded, naturalistic palette. It begins with a deep forest green (#3d5229 roughly) hero section featuring cream-colored serif text. As the user scrolls, it transitions into a clean white and light gray interface. Accents include a functional salmon-orange (#e38f4f) for primary CTAs and a vibrant pink for UI indicators within the product preview.
• Typography: The typography system relies on a high-contrast pairing. Headings use a sophisticated serif (Alpina) for a premium, "established" feel, while body copy and technical details use a clean, functional sans-serif and a monospace font (visible in the coordinate marquee and data labels) to reinforce the technical nature of the GIS product.
• Page Structure & Flow: The flow starts with an emotional hook (large serif headline and video), moves to social proof (logo grid), then transitions into a series of "Value Prop" sections. These sections alternate between feature descriptions and large-scale video or image demonstrations. The page concludes with a content-rich gallery and a "Customer Spotlight" testimonial block.
• Reusable Components:
  • The Coordinate Marquee: A technical, animated ticker at the top using monospace text.
  • Feature Grid: A clean 4x2 grid (landing-value-text-grid) with uppercase headers and minimal descriptions.
  • Data Source Icons: A 12-item grid with monochromatic icons and labels, ideal for integration pages.
  • Map Gallery Cards: Image-heavy cards with hover-triggered indicator arrows and truncated text descriptions.
• Interactions & Motion: The design uses heavy scroll-triggered transformations (visible in the transform: translate3d and skew attributes in the HTML). Specifically, the "Customer Spotlight" uses a sticky vertical text container alongside a scrolling quote list. CTAs feature a “triangle” icon that suggests forward momentum.
• Responsive Behavior: The HTML includes hide-on-tablet classes and w-nav-overlay components, indicating a collapse from a horizontal nav to a hamburger menu. The video embeds are wrapped in aspect-ratio-controlled div blocks to maintain scale across devices.

Use Cases

• Who should clone this: Developers of technical platforms, data visualization tools, or complex B2B software that needs to appear "friendly" without losing its professional edge.
• Effective Remixes:
  • BioTech/Environment: Keep the natural green palette and serif typography to signal sustainability or organic research.
  • SaaS Analytics: Swap the map videos for dashboard animations while keeping the "Data Sources" grid to show integrations.
  • Portfolio Gallery: Reuse the map-gallery-home list structure for a project showcase that requires high-impact thumbnails and brief metadata.
• Clone Scope: For a quick win, clone the Integration Grid or the Hero Section with its unique serif-on-dark-green styling. For a comprehensive project, the entire Feature Showcase flow provides a perfect blueprint for explaining complex software mechanics through UI-driven storytelling.