№ llamaindex-ai

Llamaindex

Cool, geometric grid — icy blues and muted oranges, crisp sans-serif precision.

Feature Stackminimalism brutalism swiss ai developer toolslight

The design prioritizes clarity and functionality with a clean, layered layout. The color palette is a cool gradient, and the typography is straightforward, emphasizing readability over ornamentation. · ai document processing, ocr saas, developer tools, document automation, llamaindex, technical website, minimalist design, cool color palette

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: pastel · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#fc8409
OKLCHoklch(73.4% 0.180 55)
RoleDominant
find sites →
Hex#8a4935
OKLCHoklch(48.0% 0.094 38)
RoleSurface
find sites →
Hex#85abfb
OKLCHoklch(74.6% 0.124 264)
RoleInk
find sites →
Hex#394668
OKLCHoklch(39.8% 0.060 268)
RoleAccent
find sites →
Hex#949cc4
OKLCHoklch(70.0% 0.059 276)
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	OverusedGrotesk	55px	500	1.1	-1.64246px	Aa Bb Cc
h2	OverusedGrotesk	55px	500	1.1	-1.64246px	Aa Bb Cc
h3	OverusedGrotesk	24px	400	1.4	0	Aa Bb Cc
body	OverusedGrotesk	16px	400	1.4	0	Aa Bb Cc
button	OverusedGrotesk	14px	400	1.4	0	Aa Bb Cc

Spacing scale

8px

12px

16px

20px

32px

48px

80px

100px

128px

Radius scale

0px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fc8409;
  --color-surface: #8a4935;
  --color-ink: #85abfb;
  --color-accent: #394668;
  --color-detail: #949cc4;
}

/* CSS variables exposed by source */
:root {
  --font-mono: "IBMPlexMono", ui-monospace;
  --font-primary: "OverusedGrotesk", system-ui, sans-serif;
  --hsf-default-button__background-image: none;
  --hsf-default-navigationrow-buttons__justify-content: space-between;
  --hsf-default-progressbar-trackLine__background-color: rgba(217, 217, 217, 1);
  --hsf-default-field-textarea__font-family: Helvetica;
  --hsf-default-field-label__font-family: Helvetica;
  --hsf-default-field-input__border-style: solid;
  --hsf-default-button__border-radius: 3px;
  --hsf-default-field-footer__color: rgba(81, 99, 131, .87);
  --hsf-default-field-textarea__color: rgb(33, 45, 58);
  --hsf-default-button__font-size: 1em;
  --hsf-default-button__font-weight: 700;
  --hsf-default-progressbar-progressLine__background-color: rgba(1, 129, 132, 1);
  --hsf-default-field-input__border-width: 1px 1px 1px 1px;
  --hsf-default-progressbar-progressLine__border-style: none;
  --hsf-default-heading__color: rgb(33, 45, 58);
  --hsf-default-field-input__placeholder-color: rgb(37, 51, 66);
  --hsf-default-progressbar-progressLine__background-image: none;
  --hsf-default-infoalert__font-size: 1em;
  --hsf-default-field-input__font-family: Helvetica;
  --hsf-default-field-checkbox__color: rgb(33, 45, 58);
  --hsf-default-field-footer__font-size: .8em;
  --hsf-default-field-textarea__border-width: 1px 1px 1px 1px // have to define this or else cssnano will bork it;
  --hsf-default-background__padding: 40px;
  --hsf-default-navigationrow-buttons-single__justify-content: end;
  --hsf-default-field-checkbox__background-color: rgb(245, 248, 250);
  --hsf-default-field-radio__background-color: rgb(245, 248, 250);
  --hsf-default-erroralert__font-family: Helvetica;
  --careers-to-color: rgb(255, 141, 242);
  --hsf-default-erroralert__color: rgb(229, 21, 32);
  --hsf-default-field-textarea__border-color: rgb(149, 148, 148);
  --hsf-default-field-checkbox__border-color: rgb(149, 148, 148);
  --hsf-default-field-input__background-color: rgb(245, 248, 250);
  --hsf-default-button__border-style: none;
  --hsf-default-field-textarea__padding: 10px;
  --hsf-default-button__font-family: Helvetica;
  --hsf-default-button__padding: 12px 24px;
  --hsf-default-field-footer__font-family: Helvetica;
  --to-color: rgb(247, 168, 234);
  --hsf-default-button__border-width: 0px 0px 0px 0px;
  --hsf-default-field-input__padding: 10px;
  --from-color: rgb(81, 219, 247);
  --hsf-default-field-textarea__background-color: rgb(245, 248, 250);
  --hsf-default-field-label__color: rgb(33, 45, 58);
  --hsf-default-richtext__font-size: 1em;
  --hsf-default-module__vertical-spacing: 10px;
  --hsf-default-background__border-width: 1px 1px 1px 1px;
  --hsf-default-field-radio__color: rgb(33, 45, 58);
  --hsf-default-field-label__font-size: 1em;
  --hsf-default-richtext__color: rgb(33, 45, 58);
  --hsf-default-field-radio__border-width: 1px 1px 1px 1px // have to define this or else cssnano will bork it;
  --hsf-default-row__horizontal-spacing: 30px;
  --hsf-default-background__border-style: none;
  --careers-from-color: rgb(255, 135, 5);
  --hsf-default-field-textarea__placeholder-color: rgb(37, 51, 66);
  --hsf-default-button__box-shadow: none;
  --hsf-default-background__border-color: rgba(255, 255, 255, 1);
  --hsf-default-background__border-radius: 0px;
  --hsf-default-richtext__font-family: Helvetica;
}

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 Llamaindex.
Reference design system (extracted from the live site):
- Palette: #fc8409, #8a4935, #85abfb, #394668, #949cc4
- Typefaces: OverusedGrotesk
- 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/llamaindex-ai

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

OverusedGrotesk

55px

500

1.1

-1.64246px

Aa Bb Cc

OverusedGrotesk

55px

500

1.1

-1.64246px

Aa Bb Cc

OverusedGrotesk

24px

400

1.4

Aa Bb Cc

body

OverusedGrotesk

16px

400

1.4

Aa Bb Cc

button

OverusedGrotesk

14px

400

1.4

Aa Bb Cc

:root { --color-dominant: #fc8409; --color-surface: #8a4935; --color-ink: #85abfb; --color-accent: #394668; --color-detail: #949cc4; } /* CSS variables exposed by source */ :root { --font-mono: "IBMPlexMono", ui-monospace; --font-primary: "OverusedGrotesk", system-ui, sans-serif; --hsf-default-button__background-image: none; --hsf-default-navigationrow-buttons__justify-content: space-between; --hsf-default-progressbar-trackLine__background-color: rgba(217, 217, 217, 1); --hsf-default-field-textarea__font-family: Helvetica; --hsf-default-field-label__font-family: Helvetica; --hsf-default-field-input__border-style: solid; --hsf-default-button__border-radius: 3px; --hsf-default-field-footer__color: rgba(81, 99, 131, .87); --hsf-default-field-textarea__color: rgb(33, 45, 58); --hsf-default-button__font-size: 1em; --hsf-default-button__font-weight: 700; --hsf-default-progressbar-progressLine__background-color: rgba(1, 129, 132, 1); --hsf-default-field-input__border-width: 1px 1px 1px 1px; --hsf-default-progressbar-progressLine__border-style: none; --hsf-default-heading__color: rgb(33, 45, 58); --hsf-default-field-input__placeholder-color: rgb(37, 51, 66); --hsf-default-progressbar-progressLine__background-image: none; --hsf-default-infoalert__font-size: 1em; --hsf-default-field-input__font-family: Helvetica; --hsf-default-field-checkbox__color: rgb(33, 45, 58); --hsf-default-field-footer__font-size: .8em; --hsf-default-field-textarea__border-width: 1px 1px 1px 1px // have to define this or else cssnano will bork it; --hsf-default-background__padding: 40px; --hsf-default-navigationrow-buttons-single__justify-content: end; --hsf-default-field-checkbox__background-color: rgb(245, 248, 250); --hsf-default-field-radio__background-color: rgb(245, 248, 250); --hsf-default-erroralert__font-family: Helvetica; --careers-to-color: rgb(255, 141, 242); --hsf-default-erroralert__color: rgb(229, 21, 32); --hsf-default-field-textarea__border-color: rgb(149, 148, 148); --hsf-default-field-checkbox__border-color: rgb(149, 148, 148); --hsf-default-field-input__background-color: rgb(245, 248, 250); --hsf-default-button__border-style: none; --hsf-default-field-textarea__padding: 10px; --hsf-default-button__font-family: Helvetica; --hsf-default-button__padding: 12px 24px; --hsf-default-field-footer__font-family: Helvetica; --to-color: rgb(247, 168, 234); --hsf-default-button__border-width: 0px 0px 0px 0px; --hsf-default-field-input__padding: 10px; --from-color: rgb(81, 219, 247); --hsf-default-field-textarea__background-color: rgb(245, 248, 250); --hsf-default-field-label__color: rgb(33, 45, 58); --hsf-default-richtext__font-size: 1em; --hsf-default-module__vertical-spacing: 10px; --hsf-default-background__border-width: 1px 1px 1px 1px; --hsf-default-field-radio__color: rgb(33, 45, 58); --hsf-default-field-label__font-size: 1em; --hsf-default-richtext__color: rgb(33, 45, 58); --hsf-default-field-radio__border-width: 1px 1px 1px 1px // have to define this or else cssnano will bork it; --hsf-default-row__horizontal-spacing: 30px; --hsf-default-background__border-style: none; --careers-from-color: rgb(255, 135, 5); --hsf-default-field-textarea__placeholder-color: rgb(37, 51, 66); --hsf-default-button__box-shadow: none; --hsf-default-background__border-color: rgba(255, 255, 255, 1); --hsf-default-background__border-radius: 0px; --hsf-default-richtext__font-family: Helvetica; }

Build a landing page in the visual style of Llamaindex. Reference design system (extracted from the live site): - Palette: #fc8409, #8a4935, #85abfb, #394668, #949cc4 - Typefaces: OverusedGrotesk - 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/llamaindex-ai