Skip to content
Browse
Library

NaN. A pastel type lab where every headline is the product itself.

  • Design tools
  • Light theme
  • 9 colors
  • 13 typefaces

NaN runs its website like a working specimen sheet: the mint-green canvas is the page, and the page is the product. Massive custom display faces (200-336px) are the visual architecture; a monospaced sans (NaN Holo Mono) set in uppercase with 0.075em tracking is the chrome that holds everything together. The palette is ruthlessly tight — one pastel canvas, near-black text (#262626, never pure black), one bright lime accent (#00ff00) for raw typographic flourishes, and a single pink-purple-blue gradient for the lone chromatic CTA. Borders do the work that shadows usually do: 1-2px hairlines define cards, inputs, and the type tester frame with no elevation. The interaction model is a live font tester — sliders for size and leading, dropdowns for family and weight — letting visitors steer the display in real time, which makes the site function as both storefront and demo.

Visit nan.xyz
Screenshot of NaN
Captured from nan.xyz on October 11, 2026

NaN design system

NaN

Brand1

  • Page background, card surfaces — the signature pastel that makes dark type appear sunlit rather than printed

Accent2

  • Decorative typographic flourishes and SVG scribble overlays — a raw signal-green that contrasts the pastel canvas without warming it

  • Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color

Neutrals6

  • Display-type fills at the largest sizes, pure-black SVG fills for the heaviest display specimens

  • Primary text, borders, icon strokes, button outlines — softer than pure black, sits on mint without vibrating

  • Input field borders in resting state — darker than fog to signal interactivity without competing with the canvas

  • Muted helper text, inactive borders, disabled controls — the quietest readable neutral on the mint canvas

  • Light surface for elevated UI bits (button hover, inverted controls) — provides a near-white counterpoint when the canvas needs to recede

  • Input field interior, pure-white text on dark inverted moments

Try a pairing

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

Aa

Obsidian on Mint Canvas

17.98 : 1 contrast

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

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