Skip to content
Browse
Library

Maxime Heckel. Blueprint table under a night lamp.

  • Studio
  • Dark theme
  • 11 colors
  • 2 typefaces

Maxime Heckel's portfolio opens as a full-viewport Blueprint Blue #0046b0 WebGL scene, a glass logo floating over a perspective grid with tiny monospaced HUD readouts, before the page cools into a near-black Void Black #060709 canvas. From there the work is the colour: looping shader and raymarching videos fill 12px-radius Card Black #0c0f14 tiles with 1px Hairline Ink #1d212a borders, while text stays in a cool blue-grey ramp from Frost Text #e0ebfd to Steel Mist #8795ad. Inter carries everything at medium weights (500, 510, 560) with slightly negative tracking, and iA Writer Quattro V supplies the dates, labels and coordinate numerals that make the page read like an engineer's lab notebook. A floating glass navigation capsule and a single bevelled Signal Blue #4a80e8 button are the only chrome.

Visit maximeheckel.com
Screenshot of Maxime Heckel
Captured from maximeheckel.com on October 23, 2026

Maxime Heckel design system

Maxime Heckel

Brand1

  • The full-viewport WebGL hero field, page body colour and theme colour — a saturated drafting-table blue that frames everything as a technical drawing

Accent1

  • The one filled button, the focused input border and inline Go-to links — a lighter, bevelled blue that reads as an interactive switch

Neutrals9

  • Page canvas below the hero, intro and contact sections, footer field — a blue-black that lets shader footage glow

  • Work and contribution card backgrounds behind autoplaying demo videos and screenshots

  • The 1px border on every card, input and the footer grid lines — structure without visible weight

  • Translucent navigation capsule, section chip and circular icon-button fills, measured as rgba(103, 119, 149, 0.302)

  • Inspiration tag chips at 70% opacity, faint coordinate numerals and dim inactive article titles

  • Muted links, card dates, footer link list and secondary metadata values

  • Long-form body paragraphs in the intro and section blurbs, a step below the headline white

  • Headings, navigation labels, card titles, emphasised keywords and line icons — a blue-tinted white, never pure

  • Label text on the Signal Blue button and the hero grid strokes; used only where light must read as emitted

Try a pairing

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

Aa

Pure White on Blueprint Blue

8.39 : 1 contrast

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

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