№ generalintelligencecompany-com

See all 3 pages of The General Intelligence Company →

The General Intelligence Company

Golden hour metropolitan haze, frosted glass panels over soft serif typography

Marquee Heroeditorial glassmorphism ailight

A cinematic full-bleed hero featuring a soft-focus cityscape framed by organic foliage. A glassmorphic card provides a semi-transparent anchor for the primary value proposition and CTA. · ai lab landing page, glassmorphism hero, cinematic web design, editorial ai site, soft sunset palette

The General Intelligence Company - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

The General Intelligence Company - full page scroll

The General Intelligence Company - mobile full page

Palette

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

Reads as: warm · muted · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#b4ac54
OKLCHoklch(73.3% 0.111 104)
RoleDominant
find sites →
Hex#e4bd9d
OKLCHoklch(82.4% 0.062 61)
RoleSurface
find sites →
Hex#845c34
OKLCHoklch(50.8% 0.076 65)
RoleInk
find sites →
Hex#998271
OKLCHoklch(62.3% 0.038 58)
RoleAccent
find sites →
Hex#ccab9a
OKLCHoklch(76.6% 0.045 49)
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	ppmondwest	27px	400	1.5	-1.08px	Aa Bb Cc
h2	ppmondwest	40px	500	1.1	-0.8px	Aa Bb Cc
h3	af	18px	500	1.3	-0.18px	Aa Bb Cc
body	af	16px	400	1.5	0	Aa Bb Cc
caption	ppmondwest	14px	500	1.43	-0.96px	Aa Bb Cc
button	af	15px	500	1.4	-0.15px	Aa Bb Cc

Spacing scale

140px

200px

Radius scale

0px

4px

8px

12px

16px

24px

27px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b4ac54;
  --color-surface: #e4bd9d;
  --color-ink: #845c34;
  --color-accent: #998271;
  --color-detail: #ccab9a;
}

/* CSS variables exposed by source */
:root {
  --text-2xl: 1.5rem;
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-green-600: oklch(62.7% .194 149.214);
  --text-9xl: 8rem;
  --text-7xl: 4.5rem;
  --text-lg: 1.125rem;
  --text-8xl--line-height: 1;
  --color-neutral-500: oklch(55.6% 0 0);
  --radius-3xl: 1.5rem;
  --text-5xl--line-height: 1;
  --text-2xl--line-height: calc(2/1.5);
  --text-base--line-height: calc(1.5/1);
  --spacing: .25rem;
  --background: #fff;
  --color-neutral-200: oklch(92.2% 0 0);
  --text-8xl: 6rem;
  --text-xl--line-height: calc(1.75/1.25);
  --font-weight-semibold: 600;
  --color-gray-500: oklch(55.1% .027 264.364);
  --text-sm: .875rem;
  --color-gray-900: oklch(21% .034 264.665);
  --text-9xl--line-height: 1;
  --text-lg--line-height: calc(1.75/1.125);
  --color-white: #fff;
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-600: oklch(44.6% .03 256.802);
  --radius-sm: .25rem;
  --font-weight-extrabold: 800;
  --text-4xl: 2.25rem;
  --font-weight-bold: 700;
  --color-red-600: oklch(57.7% .245 27.325);
  --text-sm--line-height: calc(1.25/.875);
  --color-gray-200: oklch(92.8% .006 264.531);
  --text-3xl--line-height: calc(2.25/1.875);
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-3xl: 1.875rem;
  --color-black: #000;
  --text-xs--line-height: calc(1/.75);
  --text-xs: .75rem;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --text-6xl--line-height: 1;
  --radius-md: .375rem;
  --text-7xl--line-height: 1;
  --text-xl: 1.25rem;
  --radius-lg: .5rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --foreground: #171717;
  --text-base: 1rem;
  --neutral-700: #646464;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 #0000;
  --blur-lg: 16px;
  --neutral-800: #444141;
  --tw-drop-shadow-alpha: 100%;
}

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 The General Intelligence Company.
Reference design system (extracted from the live site):
- Palette: #b4ac54, #e4bd9d, #845c34, #998271, #ccab9a
- Typefaces: ppmondwest, af
- Macrostructure: Marquee Hero
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/generalintelligencecompany-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ppmondwest

27px

400

1.5

-1.08px

Aa Bb Cc

ppmondwest

40px

500

1.1

-0.8px

Aa Bb Cc

18px

500

1.3

-0.18px

Aa Bb Cc

body

16px

400

1.5

Aa Bb Cc

caption

ppmondwest

14px

500

1.43

-0.96px

Aa Bb Cc

button

15px

500

1.4

-0.15px

Aa Bb Cc

:root { --color-dominant: #b4ac54; --color-surface: #e4bd9d; --color-ink: #845c34; --color-accent: #998271; --color-detail: #ccab9a; } /* CSS variables exposed by source */ :root { --text-2xl: 1.5rem; --color-gray-800: oklch(27.8% .033 256.848); --color-green-600: oklch(62.7% .194 149.214); --text-9xl: 8rem; --text-7xl: 4.5rem; --text-lg: 1.125rem; --text-8xl--line-height: 1; --color-neutral-500: oklch(55.6% 0 0); --radius-3xl: 1.5rem; --text-5xl--line-height: 1; --text-2xl--line-height: calc(2/1.5); --text-base--line-height: calc(1.5/1); --spacing: .25rem; --background: #fff; --color-neutral-200: oklch(92.2% 0 0); --text-8xl: 6rem; --text-xl--line-height: calc(1.75/1.25); --font-weight-semibold: 600; --color-gray-500: oklch(55.1% .027 264.364); --text-sm: .875rem; --color-gray-900: oklch(21% .034 264.665); --text-9xl--line-height: 1; --text-lg--line-height: calc(1.75/1.125); --color-white: #fff; --color-gray-400: oklch(70.7% .022 261.325); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-600: oklch(44.6% .03 256.802); --radius-sm: .25rem; --font-weight-extrabold: 800; --text-4xl: 2.25rem; --font-weight-bold: 700; --color-red-600: oklch(57.7% .245 27.325); --text-sm--line-height: calc(1.25/.875); --color-gray-200: oklch(92.8% .006 264.531); --text-3xl--line-height: calc(2.25/1.875); --text-5xl: 3rem; --text-6xl: 3.75rem; --text-3xl: 1.875rem; --color-black: #000; --text-xs--line-height: calc(1/.75); --text-xs: .75rem; --font-weight-medium: 500; --font-weight-normal: 400; --radius-xl: .75rem; --radius-2xl: 1rem; --text-6xl--line-height: 1; --radius-md: .375rem; --text-7xl--line-height: 1; --text-xl: 1.25rem; --radius-lg: .5rem; --text-4xl--line-height: calc(2.5/2.25); --foreground: #171717; --text-base: 1rem; --neutral-700: #646464; --tw-ring-offset-shadow: 0 0 #0000; --tw-inset-shadow-alpha: 100%; --tw-ring-shadow: 0 0 #0000; --blur-lg: 16px; --neutral-800: #444141; --tw-drop-shadow-alpha: 100%; }

Build a landing page in the visual style of The General Intelligence Company. Reference design system (extracted from the live site): - Palette: #b4ac54, #e4bd9d, #845c34, #998271, #ccab9a - Typefaces: ppmondwest, af - Macrostructure: Marquee Hero 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/generalintelligencecompany-com