Skip to content
Browse
Library

Hex. Literary serif headline over dense data notebook.

  • Developer tools
  • Light theme
  • 12 colors
  • 7 typefaces

Hex treats its marketing site like a research notebook: a warm cream canvas, a near-black violet ink, and a hand-drawn editorial headline floating above crisp sans-serif body copy. The hero pairs PP Editorial New italic at weight 200 with PP Formula's compressed 800-weight — a tension between literary softness and engineered density that recurs throughout. CTAs are intentionally quiet: thin dark outlines and dark text on white, no filled buttons, no drop-shadows that would shout over the product. Violet-tinted borders and shadows (rgba(71,57,130,0.1)) are the only chromatic warmth on the surface, while product screenshots and data visualizations carry the real color — viridis-style purples, teals, greens, and yellows blooming inside the notebook panels. The site reads as compact, technical, and confident: dense info blocks, 3px micro-radii on controls, and generous breathing room only between sections.

Visit hex.tech
Screenshot of Hex
Captured from hex.tech on October 11, 2026

Hex design system

Hex

Brand4

  • Brand-violet accent for focus rings (4px halo at 15% opacity), inset borders on elevated cards, decorative brand tints

  • Mid-tone violet for chart series, illustration fills, and data visualization highlights

  • Light violet for chart backgrounds, soft brand washes, and paired data fills

  • Deep accent violet for dark-mode callouts, gradient endpoints, and badge fills; Gradient start

Neutrals8

  • Primary text, body copy, heavy borders, data labels — the near-black ink with a violet undertone that makes charts and code blocks feel in-brand even at full contrast

  • Heavy borders, icon strokes, secondary text — a warm dark that softens harsh black and gives outlines a violet cast

  • Nav borders, tertiary text, muted headings — sits between Ink Violet and Plum Charcoal for intermediate contrast

  • Muted body text, icon fills, table borders — cool blue-gray for de-emphasized UI elements

  • Placeholder text, disabled labels, subtle icon tints

  • Default 1px border, card outlines, nav separators

  • Subtle dividers, zebra-striped table rows, hairline section separators

  • Page background, card surfaces, input fills — the warm near-white canvas, never pure #fff

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Parchment on Twilight Plum

9.46 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.