№ generalintelligencecompany-com--about

Part of The General Intelligence Company - 3 pages captured →

The General Intelligence Company · About

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

Photographicglassmorphism editorial ailight

A full-bleed AI-generated landscape serves as the backdrop, featuring a semi-transparent glassmorphic card for the mission statement. High-contrast white serif typography creates an editorial feel against the lush green scenery. · ai landing page, glassmorphism card, fullbleed image hero, editorial serif typography, nature background web design

The General Intelligence Company · About - 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 · About - full page scroll

The General Intelligence Company · About - mobile full page

Palette

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

Reads as: earthy · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#9cc464
OKLCHoklch(77.0% 0.132 128)
RoleDominant
find sites →
Hex#bfd397
OKLCHoklch(83.7% 0.083 123)
RoleSurface
find sites →
Hex#165166
OKLCHoklch(40.8% 0.068 226)
RoleInk
find sites →
Hex#519a7c
OKLCHoklch(63.0% 0.087 165)
RoleAccent
find sites →
Hex#a3c4c8
OKLCHoklch(79.7% 0.036 205)
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	54px	400	1.1	-1.08px	Aa Bb Cc
h2	ppmondwest	40px	500	1.1	-0.8px	Aa Bb Cc
body	af	16px	400	1.5	0	Aa Bb Cc
caption	af	14px	500	1.43	-0.15px	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

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #9cc464;
  --color-surface: #bfd397;
  --color-ink: #165166;
  --color-accent: #519a7c;
  --color-detail: #a3c4c8;
}

/* 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-700: oklch(37.3% .034 259.733);
  --color-gray-400: oklch(70.7% .022 261.325);
  --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;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --color-black: #000;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --text-7xl--line-height: 1;
  --text-6xl--line-height: 1;
  --radius-lg: .5rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --text-xl: 1.25rem;
  --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 · About.
Reference design system (extracted from the live site):
- Palette: #9cc464, #bfd397, #165166, #519a7c, #a3c4c8
- Typefaces: ppmondwest, af
- Macrostructure: Photographic
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--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ppmondwest

54px

400

1.1

-1.08px

Aa Bb Cc

ppmondwest

40px

500

1.1

-0.8px

Aa Bb Cc

body

16px

400

1.5

Aa Bb Cc

caption

14px

500

1.43

-0.15px

Aa Bb Cc

button

15px

500

1.4

-0.15px

Aa Bb Cc

:root { --color-dominant: #9cc464; --color-surface: #bfd397; --color-ink: #165166; --color-accent: #519a7c; --color-detail: #a3c4c8; } /* 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-700: oklch(37.3% .034 259.733); --color-gray-400: oklch(70.7% .022 261.325); --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; --text-xs: .75rem; --text-xs--line-height: calc(1/.75); --color-black: #000; --font-weight-medium: 500; --font-weight-normal: 400; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-md: .375rem; --text-7xl--line-height: 1; --text-6xl--line-height: 1; --radius-lg: .5rem; --text-4xl--line-height: calc(2.5/2.25); --text-xl: 1.25rem; --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 · About. Reference design system (extracted from the live site): - Palette: #9cc464, #bfd397, #165166, #519a7c, #a3c4c8 - Typefaces: ppmondwest, af - Macrostructure: Photographic 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--about