Pixloop Design.md
Hightouch homepage design, full-page screenshot

Hightouch

A warm, editorial marketing surface for a data/AI marketing platform — near-black ink on white canvas, a large humanist-geometric Nuckle display headline, and the unusual choice of a small monospace (DM Mono) for body copy. Brand voltage comes from gradient hero washes (amber-to-mint), real product-UI cards floated on layered soft shadows, and a strict near-monochrome action layer with black pill buttons. Green accents (deep forest and pale mint) appear sparingly; the system reads confident, technical, and slightly unconventional.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display 64px · 400 · 1.156
The quick brown fox jumps
title 27.37px · 700 · 1.169
The quick brown fox jumps
heading 22.81px · 400 · 1.403
The quick brown fox jumps
button 13.2px · 400 · 1.5
The quick brown fox jumps
body-mono 9.17px · 500 · 1.527
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px
xxl 40px
huge 64px
section 96px
mega 160px

Border Radius

Name Value Preview
xs 4px
sm 6px
md 8px
lg 12px
card 14px
xl 16px
xxl 24px
xxxl 32px
blob 128px
pill 9999px

FAQ

What colors does Hightouch use?
Hightouch's core palette includes #141213, #302d2e, #ffffff, #f5f5f5, #ebebeb. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Hightouch DESIGN.md.
What font does Hightouch use?
Hightouch's primary typeface is Nuckle. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Hightouch design system?
A warm, editorial marketing surface for a data/AI marketing platform — near-black ink on white canvas, a large humanist-geometric Nuckle display headline, and the unusual choice of a small monospace…

More like this