№ algolia-com--de-dev

Algolia

Deep indigo expanse, clean sans-serif precision, a cool, focused digital architecture.

Feature Stackminimalism brutalism dark mode monochrome futurist developer tools saasdark

The page uses a dark, high-contrast palette with bold typography and geometric shapes. The layout is structured around distinct blocks of information, creating a sense of order and technical precision. The overall mood is serious and forward-thinking. · ai search, developer platform, saas interface, dark ui, tech website, generative ai, algolia features, product showcase

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

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

Reads as: neon · muted · high-contrast · cool

SwatchHexOKLCHSuggested roleCopy

Hex#205df9
OKLCHoklch(54.6% 0.240 264)
RoleDominant
find sites →
Hex#040434
OKLCHoklch(16.3% 0.091 270)
RoleSurface
find sites →
Hex#8eabfb
OKLCHoklch(75.1% 0.120 268)
RoleInk
find sites →
Hex#99694d
OKLCHoklch(56.4% 0.074 51)
RoleAccent
find sites →
Hex#a9bbd6
OKLCHoklch(78.7% 0.043 258)
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	Sora	77px	700	1.05	-4px	Aa Bb Cc
h2	Inter	18px	700	1.56	0	Aa Bb Cc
body	Inter	16px	400	1.5	0	Aa Bb Cc
caption	Inter	14px	600	1.43	0	Aa Bb Cc
button	Inter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

8px

10px

16px

32px

64px

112px

Radius scale

0px

3px

6px

8px

10px

50px

Export

:root {
  --color-dominant: #205df9;
  --color-surface: #040434;
  --color-ink: #8eabfb;
  --color-accent: #99694d;
  --color-detail: #a9bbd6;
}

/* CSS variables exposed by source */
:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --aa-muted-color-alpha: 0.6;
  --tw-ring-shadow: 0 0 #0000;
  --aa-panel-shadow: 0 0 0 1px rgba(35,38,59,0.1),0 6px 16px -4px rgba(35,38,59,0.15);
  --aa-font-weight-bold: 700;
  --aa-detached-modal-max-width: 680px;
  --aa-font-size: calc(16*1px);
  --aa-base-z-index: 9999;
  --aa-primary-color-alpha: 0.2;
  --aa-input-border-color-rgb: 128,126,163;
  --aa-panel-border-color-alpha: 0.3;
  --aa-detached-media-query: (max-width:680px);
  --aa-font-weight-medium: 500;
  --aa-description-highlight-background-color-alpha: 0.5;
  --aa-scrollbar-track-background-color-rgb: 234,234,234;
  --aa-detached-modal-media-query: (min-width:680px);
  --tw-border-spacing-x: 0;
  --aa-text-color-alpha: 1;
  --aa-scrollbar-width: 13px;
  --aa-input-icon-size: 20px;
  --tw-scale-y: 1;
  --aa-background-color-alpha: 1;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --aa-icon-color-alpha: 1;
  --aa-selected-color-rgb: 179,173,214;
  --tw-translate-y: 0;
  --aa-overlay-color-alpha: 0.4;
  --aa-detached-modal-max-height: 500px;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
  --aa-panel-max-height: 650px;
  --aa-search-input-height: 44px;
  --aa-icon-color-rgb: 119,119,163;
  --tw-skew-x: 0;
  --aa-muted-color-rgb: 128,126,163;
  --aa-scrollbar-thumb-background-color-alpha: 1;
  --aa-selected-color-alpha: 0.205;
  --aa-scrollbar-track-background-color-alpha: 1;
  --aa-spacing-half: calc(calc(16*1*1px)/2);
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --tw-shadow: 0 0 #0000;
  --aa-description-highlight-background-color-rgb: 245,223,77;
  --aa-text-color-rgb: 38,38,39;
  --aa-primary-color-rgb: 62,52,211;
  --aa-spacing: calc(16*1*1px);
  --aa-input-background-color-alpha: 1;
  --tw-scroll-snap-strictness: proximity;
  --aa-panel-border-color-rgb: 128,126,163;
  --aa-overlay-color-rgb: 115,114,129;
  --aa-icon-size: 20px;
  --aa-background-color-rgb: 255,255,255;
  --tw-scale-x: 1;
  --aa-input-border-color-alpha: 0.8;
  --tw-shadow-colored: 0 0 #0000;
  --aa-font-weight-semibold: 600;
  --tw-border-spacing-y: 0;
  --aa-action-icon-size: 20px;
  --tw-skew-y: 0;
  --aa-icon-stroke-width: 1.6;
}

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 Algolia.
Reference design system (extracted from the live site):
- Palette: #205df9, #040434, #8eabfb, #99694d, #a9bbd6
- Typefaces: Sora, Inter
- Macrostructure: Feature Stack
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/algolia-com--de-dev

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Sora

77px

700

1.05

-4px

Aa Bb Cc

Inter

18px

700

1.56

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

caption

Inter

14px

600

1.43

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #205df9; --color-surface: #040434; --color-ink: #8eabfb; --color-accent: #99694d; --color-detail: #a9bbd6; } /* CSS variables exposed by source */ :root { --tw-ring-offset-shadow: 0 0 #0000; --aa-muted-color-alpha: 0.6; --tw-ring-shadow: 0 0 #0000; --aa-panel-shadow: 0 0 0 1px rgba(35,38,59,0.1),0 6px 16px -4px rgba(35,38,59,0.15); --aa-font-weight-bold: 700; --aa-detached-modal-max-width: 680px; --aa-font-size: calc(16*1px); --aa-base-z-index: 9999; --aa-primary-color-alpha: 0.2; --aa-input-border-color-rgb: 128,126,163; --aa-panel-border-color-alpha: 0.3; --aa-detached-media-query: (max-width:680px); --aa-font-weight-medium: 500; --aa-description-highlight-background-color-alpha: 0.5; --aa-scrollbar-track-background-color-rgb: 234,234,234; --aa-detached-modal-media-query: (min-width:680px); --tw-border-spacing-x: 0; --aa-text-color-alpha: 1; --aa-scrollbar-width: 13px; --aa-input-icon-size: 20px; --tw-scale-y: 1; --aa-background-color-alpha: 1; --tw-ring-color: rgb(59 130 246 / 0.5); --aa-icon-color-alpha: 1; --aa-selected-color-rgb: 179,173,214; --tw-translate-y: 0; --aa-overlay-color-alpha: 0.4; --aa-detached-modal-max-height: 500px; --tw-rotate: 0; --tw-ring-offset-color: #fff; --aa-panel-max-height: 650px; --aa-search-input-height: 44px; --aa-icon-color-rgb: 119,119,163; --tw-skew-x: 0; --aa-muted-color-rgb: 128,126,163; --aa-scrollbar-thumb-background-color-alpha: 1; --aa-selected-color-alpha: 0.205; --aa-scrollbar-track-background-color-alpha: 1; --aa-spacing-half: calc(calc(16*1*1px)/2); --tw-translate-x: 0; --tw-ring-offset-width: 0px; --tw-shadow: 0 0 #0000; --aa-description-highlight-background-color-rgb: 245,223,77; --aa-text-color-rgb: 38,38,39; --aa-primary-color-rgb: 62,52,211; --aa-spacing: calc(16*1*1px); --aa-input-background-color-alpha: 1; --tw-scroll-snap-strictness: proximity; --aa-panel-border-color-rgb: 128,126,163; --aa-overlay-color-rgb: 115,114,129; --aa-icon-size: 20px; --aa-background-color-rgb: 255,255,255; --tw-scale-x: 1; --aa-input-border-color-alpha: 0.8; --tw-shadow-colored: 0 0 #0000; --aa-font-weight-semibold: 600; --tw-border-spacing-y: 0; --aa-action-icon-size: 20px; --tw-skew-y: 0; --aa-icon-stroke-width: 1.6; }

Build a landing page in the visual style of Algolia. Reference design system (extracted from the live site): - Palette: #205df9, #040434, #8eabfb, #99694d, #a9bbd6 - Typefaces: Sora, Inter - Macrostructure: Feature Stack 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/algolia-com--de-dev