Hex · Full Page
Hex
Data-analytics notebook platformunun editorial-magazine yaklaşımı — IBM Plex Sans + Plex Mono spine, Cinetype display foil, viridis colourmap ramp accents (#5ec962 lime, #addc30 chartreuse, #fde725 yellow). Data scientists'in kendi araçlarında trust ettiği typography'ye peer signal.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Hex is the rare data-analytics landing that decided its marketing page should read like the inside of a beautifully typeset Jupyter notebook — IBM Plex Sans for body, IBM Plex Mono for code, Cinetype as a display foil, and a dense palette of viridis-adjacent accents (#22863a green, #5ec962 lime, #addc30 chartreuse, #fde725 yellow) that signals 'we know what data scientists actually look at'. We catalogued it because most data-platform marketing botches the brief: either it goes pure enterprise-blue, or it overcompensates with marketing gloss. Hex hits the third path — editorial pacing, code-first authority, and a colour palette pulled from the matplotlib visualisations its users live inside.
Design decisions observed
- IBM Plex stack (Sans + Mono) as the typographic spine — the implicit acknowledgement that data scientists already trust this family from Jupyter and academic publishing.
- Cinetype as a display foil — appears in headline moments to lift the IBM Plex baseline without disrupting its authority.
- Viridis-adjacent accent palette (#22863a → #5ec962 → #addc30 → #fde725) — exact colours a data analyst would generate from matplotlib's default colourmap. This is taste expressed through implicit reference.
- Pure #000000 ground (~508 surface refs) paired with #01011b near-black text — the navy-tinted black gives the page a printed-page feel rather than absolute dark.
- Single 1000px container — tight magazine reading width, perfect for code blocks and inline data visualisations.
- 7 catalogued gradients used for subtle data-viz atmospherics, not decorative chrome.
- Editorial typography stack with PP-Formula and PP-Editorial New preloaded — Hex commissions display fonts most teams wouldn't reach for.
What to study
- How to signal data-scientist credibility through typography alone — IBM Plex isn't a fashion choice, it's a peer signal. Steal the implicit credibility of using fonts your audience already trusts in their own tools.
- Viridis colourmap as brand palette — Hex didn't invent the green-to-yellow ramp; matplotlib did. Choosing to inherit it tells data scientists 'we ship the same defaults you do'.
- Editorial display stack on a technical product — PP-Formula + PP-Editorial New + Cinetype is a magazine typography stack. Most data tools don't bother. Hex's investment in display fonts reads as serious editorial design culture.
What to avoid
- Don't ship IBM Plex without committing to both Sans AND Mono — the relationship between them is the brand. Picking just Sans flattens the editorial-meets-code feel.
- Don't lift the viridis accent ramp without owning the data-viz context — out of context, the green-to-yellow looks like a traffic light palette. The colours work because the audience reads them as colourmap defaults.
- Don't widen the 1000px container — Hex's reading rhythm depends on the magazine-density of code blocks and inline charts at that width.
Taste notes
The page feels like reading a well-edited data-science quarterly — every code block is laid out as if it belonged in a Tufte chapter, every accent colour is recognisable from a matplotlib import, every section is timed at the cadence of a thoughtful tutorial. The brand's secret is that it has no marketing voice — it has an editorial one. Hex sells data work by looking like data work, which is a far harder discipline than it appears.
Lineage & references
- Direct heir to the editorial-technical school that Tufte's Visual Display of Quantitative Information established — Hex is what happens when that visual literacy meets a venture-funded product team.
- Standing shoulder-to-shoulder with the modern data-notebook peer cohort (Observable, Mode, Deepnote) — but Hex has the most assertive editorial display stack.
- Part of the IBM Plex typographic wave that includes Cloudflare, MoMA's digital identity, and the broader 2020+ open-source-corporate aesthetic — Hex carries that genealogy forward in the data space.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Hex's design language is editorial data confidence. IBM Plex Sans + Mono spine, Cinetype display foil, viridis-adjacent accents pulled from matplotlib's defaults, pure #000000 ground with navy-tinted near-black text. The page reads like a data-science quarterly — magazine-density code blocks, editorial pacing, and a colour palette its audience already trusts from their own tools.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure #000000 ground, #01011b navy-tinted near-black for primary text, #31263b deep plum for secondary text, #717a94 mid-grey for tertiary text, viridis ramp accents #22863a green / #5ec962 lime / #addc30 chartreuse / #fde725 yellow used sparingly for data signals, #472d7b deep purple for atmospheric depth, #ecedf2 light hairline border), typography stack (IBM Plex Sans 10-14px body, IBM Plex Mono 11-12px code, Cinetype Light 12-14px for display moments + PP-Formula SemiExtended Bold + PP-Editorial New UltralightItalic for hero display), 4px spacing scale heavy at 1/4/6/8/10/12/14/16/18/20 (tight reading rhythm), single 1000px container, Tailwind-standard 640/768/1024/1280 breakpoints, and Framer Motion + 10 catalogued transitions with cubic-bezier(0.25, 0.1, 0.25, 1) easing at 100-250ms. Treat viridis ramp colours as data-viz signals, not decorative accents — each one earns its appearance by being recognisable from matplotlib defaults. Apply the language, not the source brand's copy.
Overview
- Layout
- Dense single-column editorial reading flow inside a 1000px container; code blocks and inline data-viz break the rhythm at full container width.
- Content width
- 1000px container — magazine reading density.
- Framing
- Data-science quarterly — IBM Plex baseline with Cinetype display lift and viridis-coloured signals.
- Grid strength
- Editorial — 4px base, but rhythm comes from typography ladder and code-block spacing.
Color philosophy
Pure black ground with navy-tinted near-black text; viridis colourmap accents (green→lime→chartreuse→yellow) for data signals; deep purple for atmospheric depth.
- #000000 dominant ground
- #01011b primary text — slight navy warmth on near-black
- #31263b secondary text deep plum
- #717a94 tertiary mid-grey
- #22863a green accent (matplotlib viridis start)
- #5ec962 lime accent
- #addc30 chartreuse accent
- #fde725 yellow accent (viridis end)
- #472d7b deep purple for atmospheric gradient zones
- #ecedf2 light hairline borders
Gradients (paste-ready)
7 gradients catalogued — purple-tinted atmospheric depth zones, viridis ramp samples inside data-viz illustrations
Typography rules
- IBM Plex Sans for body and UI; IBM Plex Mono for code and metadata
- Cinetype Light for display lift in hero/section headers
- PP-Formula SemiExtendedBold + PP-Editorial New UltralightItalic preloaded for display moments
- Body 12-14px, mono 11-12px, display 32-56px
- Letter-spacing 0 across the board — IBM Plex's defaults are correct
- Weight ladder: 400 body, 500 emphasis, 600+ for hero display
- Line-height 1.5-1.6 body, 1.05-1.15 display
Spacing rules
- 4px base unit, tight scale 1/4/6/8/10/12/14/16/18/20
- Section vertical rhythm: 80-120px between major sections (magazine density)
- Code block internal padding: 16-20px
- Card padding: 20-24px
- CTA padding: 10-14px vertical, 16-20px horizontal
Design tokens
Palette, type, and space — all agent-readable.
20 colors · hex / rgb / hsl / oklch
- brandblack33%
- HEX
#01011B - RGB
rgb(1, 1, 27) - HSL
hsl(240, 93%, 5%) - OKLCH
oklch(10.90% 0.0638 269.11)
- HEX
- foregroundeggplant32%
- HEX
#31263B - RGB
rgb(49, 38, 59) - HSL
hsl(271, 22%, 19%) - OKLCH
oklch(29.06% 0.0402 307.97)
- HEX
- foregroundcement15%
- HEX
#717A94 - RGB
rgb(113, 122, 148) - HSL
hsl(225, 14%, 51%) - OKLCH
oklch(58.15% 0.0414 270.09)
- HEX
- foreground10%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- accent2%
- HEX
#22863A - RGB
rgb(34, 134, 58) - HSL
hsl(134, 60%, 33%) - OKLCH
oklch(54.64% 0.1442 147.32)
- HEX
- accent2%
- HEX
#472D7B - RGB
rgb(71, 45, 123) - HSL
hsl(260, 46%, 33%) - OKLCH
oklch(37.27% 0.1267 294.85)
- HEX
- background1%
- HEX
#ECEDF2 - RGB
rgb(236, 237, 242) - HSL
hsl(230, 19%, 94%) - OKLCH
oklch(94.68% 0.0068 277.16)
- HEX
- accent1%
- HEX
#5EC962 - RGB
rgb(94, 201, 98) - HSL
hsl(122, 50%, 58%) - OKLCH
oklch(74.90% 0.1730 144.28)
- HEX
- accent1%
- HEX
#ADDC30 - RGB
rgb(173, 220, 48) - HSL
hsl(76, 71%, 53%) - OKLCH
oklch(83.21% 0.1934 124.46)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 8 nodes captured; depth capped at 6 for readability.
- body
- └─ div
- └─ div
- └─ div
- └─ div
- ├─ div
- │ └─ Header
- └─ Main
Accessibility
WCAG contrast matrix.
296 combinations · 112 pass AA · 64 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FFFCFC | 20.58 | AAA | AAA | +105 | foreground on background |
Aa | #FFFCFC | #000000 | 20.58 | AAA | AAA | -106 | background on foreground |
Aa | #01011B | #FFFFFF | 20.56 | AAA | AAA | +106 | brand on background |
Aa | #FFFFFF | #01011B | 20.56 | AAA | AAA | -108 | background on brand |
Aa | #01011B | #FFFCFC | 20.15 | AAA | AAA | +104 | brand on background |
Aa | #FFFCFC | #01011B | 20.15 | AAA | AAA | -106 | background on brand |
Aa | #000000 | #ECEDF2 | 17.96 | AAA | AAA | +95 | foreground on background |
Aa | #ECEDF2 | #000000 | 17.96 | AAA | AAA | -96 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
- Full Page
- developer-tools
- ai
- dark
- 2026-05-16
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH


