Screenshot of Decodable

Decodable

www.decodable.co

The reference for B2B data-infrastructure: dark navy hero with rainbow data-flow visualization, Inter at four weights, bright Anthropic-blue CTAs over deep #0e0f18.

Data Infrastructure Realtime Streaming Platform strong

Design tokens

white
navyDeep
navyMid
graphite
black
lightSurface
muteLight
blue
mint
white80
announcementPurple
display
Inter, sans-serif
body
Inter, sans-serif
mono
(none on homepage)

Do / Don't

Reference it for

  • Deep navy #0e0f18 page background - cooler and darker than typical near-black, signals serious data infrastructure
  • Bright blue #2f74f9 accent for CTAs and links - the developer-platform-default blue, well-chosen
  • Mint/teal #44e1bc as secondary accent for active-state category tabs
  • Inter at four weights (400/500/600/700) - workhorse free font
  • Rainbow gradient data-flow lines in the hero - multi-coloured horizontal streams converging on a hub, more visceral than abstract diagrams
  • Three category tabs (AI / ETL/ELT / Streaming) with active-state mint background - clean category navigation
  • Purple acquisition announcement banner with em-dash format and CTA link - handles M&A news without restyling
  • Dual-CTA hero pattern: "Start Free" filled-blue pill + "What is Decodable?" outline pill with play-button glyph

Do not copy

  • The Decodable rainbow gradient lines - bespoke illustration
  • The Apache Flink / Debezium tech-stack mentions - Decodable-specific
  • The Redis acquisition announcement - brand-specific event
  • The 3D AI globe illustration - Decodable-specific imagery
  • The Osano cookie consent overlay - replace with lighter consent component

Signature moves

deep-navy data hero with rainbow flow lines

a deep #0e0f18 navy hero (cooler/darker than near-black) hosts multi-coloured horizontal data-flow streams converging on a hub, more visceral than an abstract diagram.

category-tab segmented control with mint active-state

three category tabs (AI / ETL/ELT / Streaming) use a mint/teal #44e1bc active-state background for clean, restrained category navigation.

dual-CTA hero pill pair

a filled-blue 'Start Free' pill plus an outline 'What is X?' pill with a play glyph, the developer-platform default blue #2f74f9 carrying the primary CTA.

Related references

Screenshot of Mercury

Mercury

flagship

Fintech

a banking site that turns scale and aspiration into the brand - bespoke variable Arcadia/ArcadiaDisplay typography at intermediate weights (420/480), a glass-blur dark nav over a 1952px-wide light page, atmospheric mountain/space photography, and one electric-indigo CTA in a sea of refined neutrals.
Screenshot of Method

Method

niche

Saas Product

The reference for QuickBooks-niche B2B CRM - clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.
Screenshot of Slack

Slack

flagship

Saas Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.
Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.