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 Maven Clinic

Maven Clinic

strong

Health

a women's and family telehealth brand that wraps clinical credibility in warmth, a deep forest green base lit by an electric mint accent, Helvetica Now Display set huge with Ivar Display serif italics for the emotional words, and warm candid family photography carried full-bleed.
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.