# DataHub — Design Extract (Default)

Source: https://datahub.com/ (captured 2026-09-17).
Build platform: WordPress (Kadence theme + custom `datahub-blocks` plugin), server-rendered with an extensive CSS custom-property design-token system (`--dh-*` tokens, plus per-variant light/dark button tokens).
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

DataHub reads as a mature, enterprise data-infrastructure brand: a warm-neutral paper ground carrying a precise, framed-grid layout system, with a single cobalt-blue brand color doing almost all of the work.

- The canvas is a warm off-white (`#f2f1ee`) and pure white (`#fff`), alternating section-to-section; body text is near-black (`#000`/`#3f3f3f`), never on a dark ground by default.
- One dominant brand hue: cobalt blue (`#006dcd`), with a deep navy (`#0a4170`) for hover/active states and near-black navy (`#002131`) for headline text and dark accents. A brighter cyan (`#3cbbeb`) and pale cyan (`#cff6ff`) round out the blue family for badges/rings.
- A signature layout motif recurs across many sections: a **colored "frame"** (a flat-color rectangle, usually the neutral border tone `#e3e1d6` or the brand ring cyan `#3cbbeb`) holding a **grid of white tiles separated by a 2px gap** — used for stat rows, capability tabs, the FAQ panel and the logo scroller. It reads like a spec sheet or wiring diagram rendered in soft, rounded tiles.
- Corners are consistently small and soft: 2.5px on the outer "frame," 10px on the inner tiles, 6px on buttons/badges — nothing sharp, nothing fully round except icon chips and avatars.
- Two type voices: **Plantin MT Pro**, a classic serif (Adobe/Typekit, licensed) for every headline, set in tight, low-key sentence case; **Lab Grotesque**, a light-weight grotesque sans (licensed, self-hosted) for body copy, nav, labels and buttons, most often at weight 300.
- Extra colors (orange `#d23500`/`#ec9e32`, magenta `#cb3276`/`#7f004b`, green `#008070`/`#004843`) exist as a full parallel button/badge system but are reserved for specific contexts (integration logos, FAQ variants, Slack-branded CTA) rather than general decoration.
- Motion is subtle and mechanical: buttons have a two-layer "sweep" fill that slides in from one edge on hover; a hero background diagram is decorated with slow clockwise/counter-clockwise "orbit" animations; customer/partner logos scroll in an infinite marquee.
- Copy is enterprise/AI-agent-first: "context graph," "MCP-native," lineage/governance/observability, quantified case-study outcomes (Netflix, Pinterest, Trustpilot).
- Hero headline: **"The Context Platform for AI Agents"** — "Your context graph — unified with lineage, quality, and real-time context for every agent to rely on. Trusted by an open source community of 3,000+ organizations and 16,000+ members."


## 2. Color Palette

Real hex values pulled directly from the site's `:root` custom properties.

### Neutrals

| Token | Hex | Role |
|---|---|---|
| `--dh-surface-default` | `#ffffff` | Card/tile fill |
| `--dh-surface-warm` | `#f2f1ee` | Alternate section background |
| `--dh-border-default` / neutral-2 | `#e3e1d6` | Hairlines, frame backgrounds |
| neutral-0 | `#f9f9fb` | Lightest neutral |
| neutral-1 | `#f3f3f6` | Light neutral |
| neutral-4 / `--dh-neutral-04` | `#b2aea7` | Mid neutral (secondary button border) |
| neutral-7 | `#767473` | Quiet text / neutral button fill |
| `--dh-text-secondary` / neutral-9 | `#3f3f3f` | Secondary body text |
| neutral-12 | `#16171c` | Near-black |
| `--dh-text-primary` | `#000000` | Primary body/heading text (non-hero) |

### Brand blue family

| Token | Hex | Role |
|---|---|---|
| `--dh-cta-primary` / `--primary` / blue-6 | `#006dcd` | Primary CTA fill, brand blue |
| `--dh-cta-primary-hover` / blue-9 | `#0a4170` | CTA hover/active, hero headline color, dark navy accents |
| blue-10 / neutral-10 | `#002131` | Deepest navy — near-black text, capability-tab background |
| `--dh-surface-bold` / `--dh-blue-04` / blue-4 | `#3cbbeb` | Bright cyan ring/accent (frames, active rings, dark-mode CTAs) |
| `--dh-surface-subtle` / blue-2 | `#cff6ff` | Pale cyan badge/tile fill |
| blue-1 | `#e8f4ff` | Faintest blue tint |

### Secondary accents (reserved for badges / variant CTAs)

| Token | Hex | Role |
|---|---|---|
| `--dh-orange-03` | `#d23500` | Orange CTA fill / active |
| `--dh-orange-04` / `--primary-yellow` | `#ec9e32` | Orange hover / badge |
| `--dh-green-03` / `--green` | `#008070` | Green CTA fill |
| green (dark variant) | `#004843` | Deep green |
| `--dh-magenta-03` | `#cb3276` | Magenta hover |
| `--dh-magenta-banner` | `#c22882` | Magenta banner accent |
| `--DH-Scarlett` | `#f36165` | Red accent (legacy token, rarely used) |
| `--DH-leaf-green` | `#96aa56` | Olive accent (legacy token, rarely used) |
| slack fill | `#4a154b` | Slack-branded button only |

Selection/link colors are not globally overridden; interactive text defaults to the brand blue (`#006dcd`) with the deep navy (`#0a4170`) as its hover state throughout the site (buttons, nav, links).


## 3. Typography

### Fonts

| Family | Style | Weight(s) used | Use | Licensed? |
|---|---|---|---|---|
| **Plantin MT Pro** | Classic old-style serif | 400 (regular), 700 (bold, rare) | All headings — hero H1, section H2s, capability/FAQ titles | Yes — Adobe/Typekit, loaded via `use.typekit.net` |
| **Lab Grotesque** | Light grotesque sans | 300 (default body weight — notably light) | Body copy, nav, subheads, buttons, badges, captions | Yes — commercial, self-hosted (`LabGrotesque-Light.woff2`) |

### Type scale (desktop, from `--global-font-size-*` tokens)

| Token | Size | Px | Use |
|---|---|---|---|
| `--global-font-size-xxlarge` | 3.75rem | 60px | Hero H1 (`.home-hero__headline`) |
| `--global-font-size-xlarge` | 3rem | 48px | Large section H2 (e.g. capability-tabs heading) |
| `--global-font-size-larger` | 2.5rem | 40px | — |
| `--global-font-size-large` | 2.125rem | 34px | Section H2 (mobile-scaled variant) |
| `--global-font-size-medium` | 1.875rem | 30px | Sub-section heading |
| `--global-font-size-small` | 1.25rem | 20px | Hero subhead, card subtitle, logo-scroller caption |
| `--global-font-size-xsmall` | 0.875rem | 14px | Eyebrow/label text |

### Line-height, tracking, headline pattern

- Hero H1: `font-weight:400`, `line-height:1`, `letter-spacing:-0.01em`, capped at `max-width:580px` so the serif wraps to 2–3 short lines; color is the deep navy `#002131`, not black.
- Hero subhead: Lab Grotesque 300, 20px, `line-height:1.2`, color `#3f3f3f`, max-width 846px.
- Section headings echo the hero pattern at a smaller size: Plantin MT Pro 400, `letter-spacing:-0.01em`, `line-height:1`–`1.06`.
- Eyebrow/badge pattern: a small pill (`#cff6ff` fill, `#0a4170` 1px border, 6px radius) holding an uppercase Lab Grotesque 300 label at 13px, tight tracking (`0.1em`) — e.g. "NEW CONTEXT MANAGEMENT PLATFORM."
- Stat numbers (community/cloud metrics) are large Plantin figures paired with a small uppercase Lab Grotesque label underneath (mirrors the hero-badge/heading relationship at tile scale).


## 4. Layout

- **Max width**: 1320px (`--dh-content-max-w`) for standard sections; several components narrow this locally — 1096px (capability tabs, comparison tables, FAQ), 1120px, or 660px (`--dh-faq--w660`) for narrow FAQ blocks.
- **Content gutter**: responsive — `1rem`/`16px` on mobile widening to `1.5rem`/`24–26px` on desktop, exposed as `--dh-content-gutter`, `--dh-content-pad-l/r`.
- **Section rhythm**: large vertical gaps between major sections — `--dh-section-gap: 180px` (desktop) down to a tighter `--dh-section-gap-tight: 120px` for closely related blocks; both compress further on smaller viewports (150px/90px, then smaller still under the theme defaults).
- **Breakpoints**: a wide, WordPress/Kadence-typical set rather than a clean scale — 440px, 580/599/600px, 640px, 700px, 767/768px, 900px, 991px, 1023/1024/1025px, 1199px, 1280px, 1301–1400px, 1440px. Effectively: mobile (<600), tablet (600–1024), desktop (1024–1440), wide (≥1440).
- **Radius scale**: 2px, 2.5px (frame/outer-button radius — the site's signature "almost square" corner), 3–6px (badges, inner buttons, small chips), 8px, 10px (the dominant tile/card radius, used everywhere in the frame-grid pattern), 12px, 16px, 50%/round (avatars, icon chips).
- **Signature "frame + tiles" pattern**: a solid-color rectangle (`--dh-border-default #e3e1d6` neutral, or `--dh-surface-bold #3cbbeb` cyan for emphasis) at 2.5px radius, padded 2px, containing a grid of white 10px-radius tiles with only a 2px gap between them — so the frame color reads as a hairline grid of "mortar" between tiles. Used for the community/cloud stat rows, the six-capability tabbed panel, the FAQ accordion frame, and the horizontal logo-scroller marquee.
- **Shadow**: minimal — depth comes from the frame/tile contrast above, not drop shadows; shadows are reserved for floating menus/dropdowns.


## 5. Components

- **Header/nav** — transparent over the hero, Lab Grotesque 300 links at 16px/24px line-height, `#3f3f3f` text; five primary items (Product, Community, Resources, Learn, Company) each opening a mega-menu dropdown; primary CTA button pinned right.
- **Primary button (`.dh-btn`)** — a two-layer construction: an outer wrapper carrying the border/background color at `border-radius: 2.5px` with a `2px` padding (the "frame"), and an inner `.dh-btn__tile` at `border-radius: 6px` holding the label. A `.dh-btn__fill` layer sits absolutely positioned inside, translated off-screen (`translateX(-100%)`) and slides to `translateX(0)` on hover over `.25s ease` — a sweep-fill hover rather than a simple color swap. Height 36px (primary) / 30px (secondary). Available in primary/secondary/tertiary/text styles, each themeable across blue (default), magenta, orange, green, neutral and Slack-brand variants, with parallel "dark-mode" (`--dm`) token sets for use on dark-tinted panels.
- **Eyebrow badge** — pale cyan pill (`#cff6ff` fill, `#0a4170` 1px border, 6px radius), uppercase Lab Grotesque label, used above the hero H1 and other section intros.
- **Frame-grid stat row** — see Layout §4; e.g. the four community stats (16,000+ Members / 3,000+ Companies / 3M+ Downloads/Month / 10,000+ GitHub Users), each in its own 240px-tall white tile inside a neutral frame.
- **Capability tabs (`.dh-cap-tabs`)** — a two-column framed component: a cyan-ringed (`#3cbbeb`) frame containing a left column of dark-navy (`#002131`) tab buttons (10px radius, 48px min-height) and a right white content panel; the active tab lightens to pale cyan (`#b0eafc`) with darker label text.
- **Logo scroller** — an infinite horizontal marquee (`dh-logo-scroll` keyframe, ~30s linear loop) of customer/partner logos inside the same frame-grid treatment (120px-tall neutral frame, 10px-radius crop window).
- **Customer story card** — challenge / solution / impact copy blocks per named customer (Netflix, Trustpilot, Pinterest, Optum, Super Technologies), each ending in a "Read Customer Story" link.
- **FAQ accordion** — themeable frame (`.dh-faq--blue/magenta/orange/green`) with a tinted background per theme and matching text-secondary color; supports a narrow (1096px) or extra-narrow (660px) content width.
- **Platform architecture diagram** — a three-layer labelled stack (Context Activation / Context Layer / Context Store) rendered as a diagram rather than prose, with slow orbiting decorative animation behind the hero.
- **Footer** — light background, multi-column link grid (Product, Community, Resources, Company), legal row and social icons (LinkedIn, GitHub, X, Slack), copyright "© 2026 Acryl Data, Inc."


## 6. Page Structure and Content

1. **Header/nav** — Product, Community, Resources, Learn, Company (each a mega-menu); CTA "Get a Demo."
2. **Hero** — badge "NEW CONTEXT MANAGEMENT PLATFORM"; H1 "The Context Platform for AI Agents"; subhead "Your context graph — unified with lineage, quality, and real-time context for every agent to rely on. Trusted by an open source community of 3,000+ organizations and 16,000+ members."; CTA "Get a Demo"; integration logos: Claude, Cursor, Cortex, Genie, CrewAI, LangChain, Agent Development Kit.
3. **Platform architecture** — three-layer diagram: Context Activation (MCP, Context Kit, APIs/SDKs, Skills, User Experience) → Context Layer (Context Intelligence, Context Hub, Metrics, Lineage, Impact Analysis, Data Contracts, Data Quality, Access & Policy) → Context Store (Metadata, Knowledge, Embeddings, Memory).
4. **Data source integrations** — Structured (Microsoft Fabric, Databricks, Snowflake, Dataplex); Unstructured (Slack, Google Drive, Notion, Confluence); Business Apps (Salesforce, Workday, HubSpot); Semantic Knowledge (Power BI, Model Context Protocol, PDF).
5. **Customer trust strip** — "Trusted by enterprise data teams around the world" + scrolling logo marquee.
6. **Six core capabilities** — "Built for agents. Trusted by experts." / "Six capabilities that make DataHub the context platform your AI stack is missing — and the foundation your data team already knows how to run." Tabs: (01) Your context graph, unified; (02) Trusted lineage, from pipeline to prompt; (03) Data quality agents can act on; (04) Always current governance; (05) Context that writes itself; (06) Every agent, one source of truth. CTA "Get the Guide."
7. **Customer success stories** — "Real results from DataHub customers": Netflix (discovery/governance at scale), Trustpilot (19 years of data, five-pillar governance), Pinterest (#1 AI agent powered by DataHub context), Optum (Data Forge data mesh), Super Technologies (600+ quality checks, live P/L incident caught). Section CTA "View all stories."
8. **DataHub Core (open source)** — "The #1 open source metadata platform." Stats: 16,000+ Members, 3,000+ Companies, 3M+ Downloads/Month, 10,000+ GitHub Users. CTAs "Join Community," "View Docs."
9. **DataHub Cloud** — "The enterprise context platform built on DataHub Core." / "Keeps context relevant, reliable, and refreshed across your entire data estate." Metrics: 119% more AI models in production, 91% faster data searches, 48% fewer data-related outages, 24% lower AI/ML project failure rate. CTAs "Book a Demo," "Product Tour."
10. **Recommended resources** — Context Management Learning Center; The ROI of DataHub Cloud (IDC study); Building Reliable Data Foundations for AI.
11. **Final CTA** — "Ready to see DataHub Cloud in action?" / "See how DataHub Cloud transforms enterprise data management with AI-powered discovery, intelligent observability, and automated governance for the AI era."
12. **Footer** — Product (Product Overview, Discovery, Observability, Governance, Lineage, AI Data Management, Context Management, The ROI of DataHub Cloud, Product Demos); Community (Join the Community, Docs, Champions, Town Halls, Office Hours, Slack, Youtube); Resources (Customer Stories, Blog, Guides, Articles, Webinars, Get Support); Company (About Us, Leadership, News, Careers); legal (Privacy Policy, Terms of Service, Security) and social (LinkedIn, GitHub, X, Slack); copyright "© 2026 Acryl Data, Inc."


## 7. Assets

- Wordmark and integration/partner logos as monochrome/brand SVGs, run through the logo-scroller marquee component.
- Diagram-style illustration for the "platform architecture" section (labelled boxes/lines rather than photography).
- Decorative animated background behind the hero (`.home-hero__bg-decor`, ~1497px wide fixed element) paired with slow `orbitClockwise` / `orbitClockwiseSlow` / `orbitCounterClockwise` keyframe animations.
- Fonts: Plantin MT Pro served from Adobe/Typekit (`use.typekit.net`); Lab Grotesque self-hosted from the theme's `/dist/fonts/` directory.
- Analytics/marketing scripts typical of a WordPress marketing stack (cache/minify plugin evident in asset URLs: `wp-content/cache/min/1/...`).


## 8. Motion

- Named keyframes: `dh-fade-in`, `dh-nav-slide-in`, `dh-logo-scroll` (marquee), `orbitClockwise` / `orbitClockwiseSlow` / `orbitCounterClockwise` (hero background), `arrowFlowUp` / `arrowFlowDown` (diagram flow lines), `linePulse`, `risePulse`, `gradient-pulse`, `right-corner-glow`, and a family of `dh-cp-cta-*` fade/slide keyframes for a CTA "lockup" reveal.
- Button hover: `.dh-btn__fill` slides from `translateX(-100%)` to `translateX(0)` over `.25s ease` — a sweep rather than a fade.
- General transitions: short, snappy — `.12s`–`.2s ease` for background/color changes; `.25s`–`.3s ease`/`ease-in-out` for larger UI reveals; two named easing curves in use, `cubic-bezier(.25,.46,.45,.94)` and `cubic-bezier(.4,0,.2,1)`.
- Reduced-motion is explicitly handled (`@media (prefers-reduced-motion: reduce)` override present at the 767px breakpoint).


## 9. Quick Token Summary

```css
:root {
  /* neutrals */
  --dh-surface-default: #ffffff;
  --dh-surface-warm:    #f2f1ee;
  --dh-border-default:  #e3e1d6;
  --dh-text-primary:    #000000;
  --dh-text-secondary:  #3f3f3f;
  --dh-text-tertiary:   #767473;

  /* brand blue family */
  --dh-cta-primary:       #006dcd;  /* primary CTA fill */
  --dh-cta-primary-hover: #0a4170;  /* hover / hero headline color */
  --dh-navy-deep:         #002131;  /* deepest navy, near-black text */
  --dh-surface-bold:      #3cbbeb;  /* bright cyan ring/accent */
  --dh-surface-subtle:    #cff6ff;  /* pale cyan badge/tile fill */

  /* secondary accents (variant CTAs / badges only) */
  --dh-orange:   #d23500;
  --dh-orange-hover: #ec9e32;
  --dh-green:    #008070;
  --dh-magenta:  #cb3276;

  /* type */
  --dh-font-primary:   "Plantin MT Pro", Georgia, "Times New Roman", serif;   /* headings, licensed */
  --dh-font-secondary: "Lab Grotesque", "Helvetica Neue", Arial, sans-serif;  /* body/nav/buttons, licensed */

  /* type scale */
  --global-font-size-xxlarge: 3.75rem;  /* 60px hero H1 */
  --global-font-size-xlarge:  3rem;     /* 48px section H2 */
  --global-font-size-small:   1.25rem;  /* 20px hero sub / captions */
  --global-font-size-xsmall:  0.875rem; /* 14px eyebrow */

  /* geometry */
  --dh-content-max-w:     1320px;
  --dh-content-gutter:    1.5rem;
  --dh-section-gap:       180px;
  --dh-section-gap-tight: 120px;
  --btn-outer-radius:     2.5px;  /* signature "almost square" frame corner */
  --btn-inner-radius:     6px;
  --radius-tile:          10px;   /* dominant tile/card radius */

  /* motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-soft:     cubic-bezier(.25, .46, .45, .94);
  --dur-hover:     .16s;
  --dur-sweep:     .25s;
}
```