№ hex-tech

AI Analytics Platform for Your Whole Team | Hex

Deep indigo expanse, crisp sans-serif clarity, and stark geometric structure.

Bento Gridminimalism swiss brutalism saas developer toolslight

AI Analytics Platform for Your Whole Team | Hex - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

AI Analytics Platform for Your Whole Team | Hex - full page scroll

AI Analytics Platform for Your Whole Team | Hex - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#d49e46
OKLCHoklch(73.4% 0.122 77)
RoleDominant
find sites →
Hex#ecc484
OKLCHoklch(84.1% 0.093 79)
RoleSurface
find sites →
Hex#080720
OKLCHoklch(15.0% 0.052 280)
RoleInk
find sites →
Hex#5c9c4c
OKLCHoklch(63.0% 0.131 140)
RoleAccent
find sites →
Hex#bcb4d4
OKLCHoklch(78.7% 0.046 297)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	PP Formula SemiExtended	51px	700	1.3	-1.57696px	Aa Bb Cc
h2	IBM Plex Sans	16px	600	1.4	-0.4px	Aa Bb Cc
h3	PP Formula	28px	800	1.3	-0.7px	Aa Bb Cc
body	Cinetype	14px	400	1.57	0	Aa Bb Cc
button	Cinetype	14px	400	1	0	Aa Bb Cc

Radius scale

1px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d49e46;
  --color-surface: #ecc484;
  --color-ink: #080720;
  --color-accent: #5c9c4c;
  --color-detail: #bcb4d4;
}

/* CSS variables exposed by source */
:root {
  --fontColorDEFAULT: #F5C0C0;
  --fg800: #4c3e44;
  --fgA1100: rgba(245,192,192,0.592);
  --fgA1000: rgba(245,192,192,0.446);
  --texture-paper-opacity: 0.0625;
  --fgA400: rgba(245,192,192,0.077);
  --fg400: #252128;
  --texture-paper-mixBlendMode: normal;
  --fgA700: rgba(245,192,192,0.172);
  --fg700: #3a3138;
  --bg500: #14141c;
  --fg300: #201d25;
  --font-ibm-plex-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
  --texture-paper-size: 200px 200px;
  --font-ibm-plex-sans: "IBM Plex Sans", "IBM Plex Sans Fallback";
  --fg900: #6a565b;
  --fg1000: #786065;
  --fgA500: rgba(245,192,192,0.103);
  --fg600: #312a31;
  --bg300: #0f0f15;
  --fg1100: #99797d;
  --fgA200: rgba(245,192,192,0.026);
  --fontColorMUTED: #99797d;
  --fgA300: rgba(245,192,192,0.056);
  --texture-paper-img: url('/images/bkg-noise.webp');
  --fgA600: rgba(245,192,192,0.129);
  --fg1200: #e3b2b3;
  --fgA100: rgba(245,192,192,0);
  --fgA800: rgba(245,192,192,0.249);
  --fgA1200: rgba(245,192,192,0.923);
  --bg400: #111118;
  --fg500: #2b252c;
  --fgLoud: #ffffff;
  --fg200: #191820;
  --fg100: #14141C;
  --fontColorLOUD: #ffffff;
  --fgA900: rgba(245,192,192,0.386);
  --opal: #FBF9F9;
  --violetTopaz: #5F509D;
  --black: #01011b;
  --amethyst: #A477B2;
  --grid500: #3a3138;
  --citrine: #CDA849;
  --grid300: #2b252c;
  --grid600: #4c3e44;
  --white: #ffffff;
  --grid700: #6a565b;
  --minsk: #473982;
  --app-focus-outline: 2px solid rgba(245,192,192,0.386);
  --grid400: #312a31;
  --eggplant: #31263B;
  --grid1200: #e3b2b3;
  --app-focus-outline-offset: 2px;
  --highlightColor: #F5C0C0;
  --roseQuartz: #F5C0C0;
  --grid200: #252128;
  --spring-duration: 0.747s;
  --cement: #717A94;
  --jade: #5CB198;
  --obsidian: #14141C;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of AI Analytics Platform for Your Whole Team | Hex.
Reference design system (extracted from the live site):
- Palette: #d49e46, #ecc484, #080720, #5c9c4c, #bcb4d4
- Typefaces: PP Formula SemiExtended, IBM Plex Sans, Cinetype
- Macrostructure: Bento Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/hex-tech

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

PP Formula SemiExtended

51px

700

1.3

-1.57696px

Aa Bb Cc

IBM Plex Sans

16px

600

1.4

-0.4px

Aa Bb Cc

PP Formula

28px

800

1.3

-0.7px

Aa Bb Cc

body

Cinetype

14px

400

1.57

Aa Bb Cc

button

Cinetype

14px

400

Aa Bb Cc

:root { --color-dominant: #d49e46; --color-surface: #ecc484; --color-ink: #080720; --color-accent: #5c9c4c; --color-detail: #bcb4d4; } /* CSS variables exposed by source */ :root { --fontColorDEFAULT: #F5C0C0; --fg800: #4c3e44; --fgA1100: rgba(245,192,192,0.592); --fgA1000: rgba(245,192,192,0.446); --texture-paper-opacity: 0.0625; --fgA400: rgba(245,192,192,0.077); --fg400: #252128; --texture-paper-mixBlendMode: normal; --fgA700: rgba(245,192,192,0.172); --fg700: #3a3138; --bg500: #14141c; --fg300: #201d25; --font-ibm-plex-mono: "IBM Plex Mono", "IBM Plex Mono Fallback"; --texture-paper-size: 200px 200px; --font-ibm-plex-sans: "IBM Plex Sans", "IBM Plex Sans Fallback"; --fg900: #6a565b; --fg1000: #786065; --fgA500: rgba(245,192,192,0.103); --fg600: #312a31; --bg300: #0f0f15; --fg1100: #99797d; --fgA200: rgba(245,192,192,0.026); --fontColorMUTED: #99797d; --fgA300: rgba(245,192,192,0.056); --texture-paper-img: url('/images/bkg-noise.webp'); --fgA600: rgba(245,192,192,0.129); --fg1200: #e3b2b3; --fgA100: rgba(245,192,192,0); --fgA800: rgba(245,192,192,0.249); --fgA1200: rgba(245,192,192,0.923); --bg400: #111118; --fg500: #2b252c; --fgLoud: #ffffff; --fg200: #191820; --fg100: #14141C; --fontColorLOUD: #ffffff; --fgA900: rgba(245,192,192,0.386); --opal: #FBF9F9; --violetTopaz: #5F509D; --black: #01011b; --amethyst: #A477B2; --grid500: #3a3138; --citrine: #CDA849; --grid300: #2b252c; --grid600: #4c3e44; --white: #ffffff; --grid700: #6a565b; --minsk: #473982; --app-focus-outline: 2px solid rgba(245,192,192,0.386); --grid400: #312a31; --eggplant: #31263B; --grid1200: #e3b2b3; --app-focus-outline-offset: 2px; --highlightColor: #F5C0C0; --roseQuartz: #F5C0C0; --grid200: #252128; --spring-duration: 0.747s; --cement: #717A94; --jade: #5CB198; --obsidian: #14141C; }

Build a landing page in the visual style of AI Analytics Platform for Your Whole Team | Hex. Reference design system (extracted from the live site): - Palette: #d49e46, #ecc484, #080720, #5c9c4c, #bcb4d4 - Typefaces: PP Formula SemiExtended, IBM Plex Sans, Cinetype - Macrostructure: Bento Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/hex-tech