№ exoape-com

Exo Ape - Global Digital Design Studio

Deep twilight blue, clean geometric type, expansive open space, confident serenity.

Split Studiominimalism editorial swiss agency portfoliolight

Exo Ape - Global Digital Design Studio - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Exo Ape - Global Digital Design Studio - full page scroll

Exo Ape - Global Digital Design Studio - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#2c74a4
OKLCHoklch(53.7% 0.103 242)
RoleDominant
find sites →
Hex#9cbcdc
OKLCHoklch(78.3% 0.058 249)
RoleSurface
find sites →
Hex#146494
OKLCHoklch(48.2% 0.105 242)
RoleInk
find sites →
Hex#6197ba
OKLCHoklch(65.2% 0.078 238)
RoleAccent
find sites →
Hex#b1c9d9
OKLCHoklch(82.3% 0.034 237)
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
h2	Lausanne-400	14px	400	2.64	0	Aa Bb Cc
body	Times	16px	400	1.4	0	Aa Bb Cc
button	Lausanne-300	14px	400	1.43	0.1px	Aa Bb Cc

Spacing scale

32px

80px

200px

206px

Radius scale

0px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #2c74a4;
  --color-surface: #9cbcdc;
  --color-ink: #146494;
  --color-accent: #6197ba;
  --color-detail: #b1c9d9;
}

/* CSS variables exposed by source */
:root {
  --color-dark-grey-02: rgba(13,14,19,.2);
  --font-s-cta: 1.1111111111vw;
  --color-white: #fff;
  --font-ls-h0: -0.7986111111vw;
  --font-ls-label: 0vw;
  --color-dark-grey-06: rgba(13,14,19,.6);
  --font-f-lausanne-300: "Lausanne-300";
  --color-light-grey-08: hsla(33,14%,88%,.8);
  --color-light-grey-02: hsla(33,14%,88%,.2);
  --font-ls-h3: -0.0069444444vw;
  --font-lh-p: 1.6666666667vw;
  --color-white-02: hsla(0,0%,100%,.2);
  --font-lh-h1: 10vw;
  --font-f-lausanne-400: "Lausanne-400";
  --color-off-white-06: hsla(0,0%,97%,.6);
  --font-lh-h2: 4.4444444444vw;
  --color-white-08: hsla(0,0%,100%,.8);
  --color-sand-06: hsla(28,37%,81%,.6);
  --color-sand: #e0ccbb;
  --font-lh-h4: 2.2222222222vw;
  --color-dark-grey-04: rgba(13,14,19,.4);
  --font-ls-cta: 0vw;
  --color-dark-grey-08: rgba(13,14,19,.8);
  --font-lh-subtitle: 1.1111111111vw;
  --color-off-white: #f8f8f8;
  --font-ls-h1: -0.3472222222vw;
  --font-s-h3: 2.2222222222vw;
  --font-s-h4: 1.6666666667vw;
  --color-sand-08: hsla(28,37%,81%,.8);
  --font-lh-h0: 15.6944444444vw;
  --font-lh-p-small: 1.4583333333vw;
  --font-s-label: 0.9722222222vw;
  --color-light-grey: #e4e0db;
  --color-light-grey-06: hsla(33,14%,88%,.6);
  --font-ls-subtitle: 0.0069444444vw;
  --font-f-lausanne-500: "Lausanne-500";
  --color-off-white-04: hsla(0,0%,97%,.4);
  --font-s-p: 1.1111111111vw;
  --font-ls-p-small: 0.0069444444vw;
  --font-s-subtitle: 0.8333333333vw;
  --font-lh-label: 0.9722222222vw;
  --font-s-h1: 10vw;
  --font-s-p-small: 0.9722222222vw;
  --color-white-06: hsla(0,0%,100%,.6);
  --font-lh-h3: 2.7777777778vw;
  --color-off-white-02: hsla(0,0%,97%,.2);
  --font-ls-p: 0.0069444444vw;
  --font-lh-cta: 1.1111111111vw;
  --font-s-h2: 3.6111111111vw;
  --color-white-04: hsla(0,0%,100%,.4);
  --font-ls-h4: 0vw;
  --font-s-h0: 17.3611111111vw;
  --color-dark-grey: #0d0e13;
  --font-ls-h2: -0.1041666667vw;
  --color-off-white-08: hsla(0,0%,97%,.8);
  --color-story: #070707;
  --vh: 9px;
}

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 Exo Ape - Global Digital Design Studio.
Reference design system (extracted from the live site):
- Palette: #2c74a4, #9cbcdc, #146494, #6197ba, #b1c9d9
- Typefaces: Lausanne-300, Lausanne-400, Times
- Macrostructure: Split Studio
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/exoape-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Lausanne-400

14px

400

2.64

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

button

Lausanne-300

14px

400

1.43

0.1px

Aa Bb Cc

:root { --color-dominant: #2c74a4; --color-surface: #9cbcdc; --color-ink: #146494; --color-accent: #6197ba; --color-detail: #b1c9d9; } /* CSS variables exposed by source */ :root { --color-dark-grey-02: rgba(13,14,19,.2); --font-s-cta: 1.1111111111vw; --color-white: #fff; --font-ls-h0: -0.7986111111vw; --font-ls-label: 0vw; --color-dark-grey-06: rgba(13,14,19,.6); --font-f-lausanne-300: "Lausanne-300"; --color-light-grey-08: hsla(33,14%,88%,.8); --color-light-grey-02: hsla(33,14%,88%,.2); --font-ls-h3: -0.0069444444vw; --font-lh-p: 1.6666666667vw; --color-white-02: hsla(0,0%,100%,.2); --font-lh-h1: 10vw; --font-f-lausanne-400: "Lausanne-400"; --color-off-white-06: hsla(0,0%,97%,.6); --font-lh-h2: 4.4444444444vw; --color-white-08: hsla(0,0%,100%,.8); --color-sand-06: hsla(28,37%,81%,.6); --color-sand: #e0ccbb; --font-lh-h4: 2.2222222222vw; --color-dark-grey-04: rgba(13,14,19,.4); --font-ls-cta: 0vw; --color-dark-grey-08: rgba(13,14,19,.8); --font-lh-subtitle: 1.1111111111vw; --color-off-white: #f8f8f8; --font-ls-h1: -0.3472222222vw; --font-s-h3: 2.2222222222vw; --font-s-h4: 1.6666666667vw; --color-sand-08: hsla(28,37%,81%,.8); --font-lh-h0: 15.6944444444vw; --font-lh-p-small: 1.4583333333vw; --font-s-label: 0.9722222222vw; --color-light-grey: #e4e0db; --color-light-grey-06: hsla(33,14%,88%,.6); --font-ls-subtitle: 0.0069444444vw; --font-f-lausanne-500: "Lausanne-500"; --color-off-white-04: hsla(0,0%,97%,.4); --font-s-p: 1.1111111111vw; --font-ls-p-small: 0.0069444444vw; --font-s-subtitle: 0.8333333333vw; --font-lh-label: 0.9722222222vw; --font-s-h1: 10vw; --font-s-p-small: 0.9722222222vw; --color-white-06: hsla(0,0%,100%,.6); --font-lh-h3: 2.7777777778vw; --color-off-white-02: hsla(0,0%,97%,.2); --font-ls-p: 0.0069444444vw; --font-lh-cta: 1.1111111111vw; --font-s-h2: 3.6111111111vw; --color-white-04: hsla(0,0%,100%,.4); --font-ls-h4: 0vw; --font-s-h0: 17.3611111111vw; --color-dark-grey: #0d0e13; --font-ls-h2: -0.1041666667vw; --color-off-white-08: hsla(0,0%,97%,.8); --color-story: #070707; --vh: 9px; }

Build a landing page in the visual style of Exo Ape - Global Digital Design Studio. Reference design system (extracted from the live site): - Palette: #2c74a4, #9cbcdc, #146494, #6197ba, #b1c9d9 - Typefaces: Lausanne-300, Lausanne-400, Times - Macrostructure: Split Studio 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/exoape-com