A data-analytics notebook platform taking the editorial-magazine approach — IBM Plex Sans + Plex Mono spine, Cinetype display foil, viridis colourmap ramp accents (#5ec962 lime, #addc30 chartreuse, #fde725 yellow). A peer signal to the typography data scientists already trust in their own tools.
This 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.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Hex’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
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.
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.
Pure black ground with navy-tinted near-black text; viridis colourmap accents (green→lime→chartreuse→yellow) for data signals; deep purple for atmospheric depth.
Mode strategyDark-only for marketing surface — the editorial weight depends on the black ground.
#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
HoverBackground colour shift (viridis accent → adjacent ramp colour), Border opacity bump on cards, Linear-eased background colour change (0.1s linear) on subtle states
Scroll patterns
Framer Motion fade-in + 12px translate on section entry
Inline data-viz illustrations animate once on first viewport entry, no loop
Sticky chapter nav fades in after 200px scroll
Motion is editorial pacing — every transition should feel like a page turn
Respect prefers-reduced-motion
Data-viz animations play once; no infinite loops
Hover shifts colour, never position
Focus rings: 2px viridis-green ring with 2px offset
Active state: 95% opacity
Viridis accents reserved for state signals and data-viz
Approachmobile-first
Tailwind defaults (640/768/1024/1280/1536) — no custom ladder.
<768: 16px gutter, single column, headline 32-40px, code blocks horizontal-scroll on overflow
768-1024: 720px content rail, headline 40-48px
≥1024: 1000px container with code blocks at full width, hero display up to 56px
Body text passes WCAG AAA on black ground (15:1+)
Viridis green #5ec962 on black passes AA at 14px+ (8.6:1)
Code block contrast checked — IBM Plex Mono at 12px on #0a0a14 is AA
Respect prefers-reduced-motion
Next.js (assumed from font preload patterns)IBM Plex Sans + Mono as core webfontsCinetype + PP-Formula + PP-Editorial New as display webfontsFramer Motion for editorial reveals
Typography + data-viz colour palette are the entire visual identity. Inline charts and code blocks substitute for illustration.
IBM Plex Sans/Mono preloaded as woff2
Display webfonts loaded for hero moments only
Framer Motion scoped to section reveals + data-viz one-shot animations
Use IBM Plex Sans + Mono as the typographic spine
Reserve viridis ramp accents (#5ec962/#addc30/#fde725) for data signals
Keep container at 1000px — magazine reading density
Treat code blocks as first-class content surfaces, not screenshots
Don't paint marketing chrome in viridis green — the colour is signal
Don't widen the 1000px container — density is the brand
Don't introduce a humanist sans alongside IBM Plex
Don't loop data-viz animations — single-play only
Dark-only for marketing surface
Typography stack: IBM Plex Sans + Mono + Cinetype + PP display fonts
Viridis ramp coverage under 6% of pixels per viewport
Font-family grep: IBM Plex Sans + IBM Plex Mono + Cinetype present, no humanist sans
Background colour: #000000 dominant, no charcoal substitution
Container width: 1000px maintained on desktop
Viridis accent usage: data signals only, never as fill background
Code block typography: IBM Plex Mono at 11-12px
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 8 nodes across 7 levels, shallow to deep by color.
body1
div1
div1
div1
div2
div1
Header
Main
Accessibility
Contrast matrix
296 combinations - 112 pass AA - 64 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox20.58
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFCFC
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox20.58
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFCFC
bg
#000000
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox20.56
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#01011B
bg
#FFFFFF
APCA Lc
+106
Use
brand on background
AaThe quick brown fox20.56
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#01011B
APCA Lc
-108
Use
background on brand
AaThe quick brown fox20.15
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#01011B
bg
#FFFCFC
APCA Lc
+104
Use
brand on background
AaThe quick brown fox20.15
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFCFC
bg
#01011B
APCA Lc
-106
Use
background on brand
AaThe quick brown fox17.96
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#ECEDF2
APCA Lc
+95
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
