№ highlight-xyz--about

Part of Highlight Xyz - 4 pages captured →

Highlight Xyz — About

Cool, precise geometry; stark white space, assertive sans-serifs, subdued teal accents.

Bento Gridminimalism swiss brutalism crypto creatorlight

The layout prioritizes clarity and functionality with a grid of distinct blocks, each presenting a key feature or service. The design uses a restrained color palette and ample whitespace to create a sense of calm and professionalism. · saas landing page, developer tools design, minimalist agency, dark bento grid, feature showcase, nft minting platform, technology website, modern design, product showcase, platform design

Highlight Xyz — About - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Highlight Xyz — About - full page scroll

Highlight Xyz — About - mobile full page

Palette

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

Reads as: muted · monochrome · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#dda740
OKLCHoklch(76.1% 0.133 80)
RoleDominant
find sites →
Hex#7d5920
OKLCHoklch(49.1% 0.086 75)
RoleSurface
find sites →
Hex#abecef
OKLCHoklch(90.1% 0.065 200)
RoleInk
find sites →
Hex#5da476
OKLCHoklch(65.9% 0.100 154)
RoleAccent
find sites →
Hex#94ccce
OKLCHoklch(80.7% 0.058 199)
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	Sample
h1	Space Grotesk	44px	500	1.12	Aa Bb Cc
h2	JetBrains Mono	10px	400	1.4	Aa Bb Cc
h3	Space Grotesk	24px	500	1.2	Aa Bb Cc
body	Space Grotesk	14px	400	1.4	Aa Bb Cc
button	Space Grotesk	14px	700	1.2	Aa Bb Cc

Spacing scale

14px

24px

28px

44px

56px

72px

96px

Radius scale

0px

4px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #dda740;
  --color-surface: #7d5920;
  --color-ink: #abecef;
  --color-accent: #5da476;
  --color-detail: #94ccce;
}

/* CSS variables exposed by source */
:root {
  --spacing-12: 48px;
  --text-base--line-height: calc(1.5 / 1);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-accent: #131313;
  --radius-control: 4px;
  --text-xs--line-height: calc(1 / .75);
  --spacing-5: 10px;
  --spacing-4: 8px;
  --spacing-1: 2px;
  --text-xxs: 10px;
  --spacing-6: 12px;
  --border-width-medium: 1.5px;
  --spacing-15: 80px;
  --spacing: .25rem;
  --spacing-0: 0px;
  --border-width-hairline: .5px;
  --text-sm: 14px;
  --color-accent-foreground: #fff;
  --color-surface: #fff;
  --color-border-strong: #131313;
  --color-border: #e6e6e3;
  --color-subtle: #8a8a86;
  --color-foreground: #131313;
  --color-overlay: #1313137a;
  --text-lg: 18px;
  --spacing-8: 20px;
  --text-lg--line-height: calc(1.75 / 1.125);
  --spacing-3: 6px;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-marketing-overlay: #1313137a;
  --color-background: #fff;
  --color-danger: #b42318;
  --spacing-10: 32px;
  --font-editorial: "PP Editorial Old", serif;
  --spacing-9: 24px;
  --spacing-13: 56px;
  --color-surface-muted: #f5f5f2;
  --spacing-14: 64px;
  --color-warning: #ef6820;
  --color-success: #1e9e4c;
  --spacing-2: 4px;
  --color-muted: #6f6f6c;
  --color-surface-hover: #eeeeeb;
  --radius-full: 999px;
  --spacing-11: 40px;
  --text-sm--line-height: calc(1.25 / .875);
  --text-xs: 12px;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --spacing-7: 16px;
  --spacing-16: 120px;
  --text-base: 16px;
  --container-md: 28rem;
  --tw-inset-shadow-alpha: 100%;
  --ds-color-marketing-secondary: #6f6f6c;
  --privy-color-background-interactive-disabled: #F1F2F9;
  --privy-color-icon-default-clicked: #060C23;
  --ds-icon-size-lg: 24px;
  --ds-color-marketing-surface-muted: #f5f5f2;
  --ds-icon-size-sm: 16px;
}

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 Highlight Xyz — About.
Reference design system (extracted from the live site):
- Palette: #dda740, #7d5920, #abecef, #5da476, #94ccce
- Typefaces: Space Grotesk, JetBrains Mono
- 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/highlight-xyz--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Space Grotesk

44px

500

1.12

Aa Bb Cc

JetBrains Mono

10px

400

1.4

Aa Bb Cc

Space Grotesk

24px

500

1.2

Aa Bb Cc

body

Space Grotesk

14px

400

1.4

Aa Bb Cc

button

Space Grotesk

14px

700

1.2

Aa Bb Cc

:root { --color-dominant: #dda740; --color-surface: #7d5920; --color-ink: #abecef; --color-accent: #5da476; --color-detail: #94ccce; } /* CSS variables exposed by source */ :root { --spacing-12: 48px; --text-base--line-height: calc(1.5 / 1); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-accent: #131313; --radius-control: 4px; --text-xs--line-height: calc(1 / .75); --spacing-5: 10px; --spacing-4: 8px; --spacing-1: 2px; --text-xxs: 10px; --spacing-6: 12px; --border-width-medium: 1.5px; --spacing-15: 80px; --spacing: .25rem; --spacing-0: 0px; --border-width-hairline: .5px; --text-sm: 14px; --color-accent-foreground: #fff; --color-surface: #fff; --color-border-strong: #131313; --color-border: #e6e6e3; --color-subtle: #8a8a86; --color-foreground: #131313; --color-overlay: #1313137a; --text-lg: 18px; --spacing-8: 20px; --text-lg--line-height: calc(1.75 / 1.125); --spacing-3: 6px; --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --color-marketing-overlay: #1313137a; --color-background: #fff; --color-danger: #b42318; --spacing-10: 32px; --font-editorial: "PP Editorial Old", serif; --spacing-9: 24px; --spacing-13: 56px; --color-surface-muted: #f5f5f2; --spacing-14: 64px; --color-warning: #ef6820; --color-success: #1e9e4c; --spacing-2: 4px; --color-muted: #6f6f6c; --color-surface-hover: #eeeeeb; --radius-full: 999px; --spacing-11: 40px; --text-sm--line-height: calc(1.25 / .875); --text-xs: 12px; --font-weight-medium: 500; --font-weight-normal: 400; --spacing-7: 16px; --spacing-16: 120px; --text-base: 16px; --container-md: 28rem; --tw-inset-shadow-alpha: 100%; --ds-color-marketing-secondary: #6f6f6c; --privy-color-background-interactive-disabled: #F1F2F9; --privy-color-icon-default-clicked: #060C23; --ds-icon-size-lg: 24px; --ds-color-marketing-surface-muted: #f5f5f2; --ds-icon-size-sm: 16px; }

Build a landing page in the visual style of Highlight Xyz — About. Reference design system (extracted from the live site): - Palette: #dda740, #7d5920, #abecef, #5da476, #94ccce - Typefaces: Space Grotesk, JetBrains Mono - 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/highlight-xyz--about