№ frame-io

Frame

Deep, charcoal expanse – stark, geometric type floats on cool, digital stone.

Feature Stackminimalism dark mode monochrome brutalism saasdark

The page prioritizes a clean, functional layout with a dark color palette and strong typography. The left sidebar acts as a persistent navigation hub, contrasting with the main content area showcasing asset management. Visual density is moderate, focusing on clarity and ease of access. · dark saas, asset management, creative workflow, developer tools, project management, file organization, minimal dark, technical interface, frame io, digital asset

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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#6760fb
OKLCHoklch(58.6% 0.223 279)
RoleDominant
find sites →
Hex#6e3a1b
OKLCHoklch(40.8% 0.085 49)
RoleSurface
find sites →
Hex#9a96d1
OKLCHoklch(69.8% 0.086 287)
RoleInk
find sites →
Hex#9e785e
OKLCHoklch(60.3% 0.061 56)
RoleAccent
find sites →
Hex#d5d4de
OKLCHoklch(87.4% 0.014 291)
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	FrameGothic	80px	600	1.04	-3.6px	Aa Bb Cc
h2	FrameGothic	48px	600	1.02	-1.92px	Aa Bb Cc
h3	NeueMachinaInktrap	12px	400	0.9	0.72px	Aa Bb Cc
body	Times	10px	400	1	0	Aa Bb Cc
button	Arial	13px	400	1.4	0	Aa Bb Cc

Spacing scale

24px

32px

48px

62px

80px

96px

124px

144px

160px

228px

240px

Radius scale

0px

10px

24px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #6760fb;
  --color-surface: #6e3a1b;
  --color-ink: #9a96d1;
  --color-accent: #9e785e;
  --color-detail: #d5d4de;
}

/* CSS variables exposed by source */
:root {
  --border-radius-20: 2rem;
  --color-grey-20: rgba(46,47,64,1);
  --color-grey-88: rgba(213,214,234,1);
  --color-alpha-perano-10: rgba(189,189,244,0.1);
  --color-alpha-dark-10: rgba(13,13,24,0.1);
  --color-alpha-black-10: rgba(0,0,0,0.1);
  --spacer-192: 19.2rem;
  --color-cobalt-20: rgba(91,83,255,0.2);
  --border-radius-6: 0.6rem;
  --color-alpha-black-100: rgba(0,0,0,1);
  --color-alpha-black-90: rgba(0,0,0,0.9);
  --spacer-480: 48rem;
  --color-grey-100: rgba(252,252,252,1);
  --color-alpha-grey-30: rgba(54,56,74,0.2);
  --color-iris-light: rgba(159,117,249,1);
  --color-grey-50: rgba(106,107,131,1);
  --color-grey-97: rgba(245,245,248,1);
  --font-secondary: "NeueMachinaInktrap","NeueMachinaInktrap Fallback";
  --color-coral: rgba(252,133,109,1);
  --color-alpha-dark-40: rgba(13,13,24,0.4);
  --spacer-24: 2.4rem;
  --color-grey-10: rgba(22,23,34,1);
  --color-grey-05: rgba(13,13,24,1);
  --color-alpha-dark-80: rgba(13,13,24,0.8);
  --color-cobalt-light: rgba(99,105,255,1);
  --spacer-16: 1.6rem;
  --color-alpha-light-80: rgba(240,240,255,0.8);
  --color-alpha-light-30: rgba(220,220,255,0.3);
  --spacer-10: 1rem;
  --color-grey-30: rgba(54,56,74,1);
  --border-radius-40: 4rem;
  --color-accent-default: rgba(245,245,248,1);
  --color-coral-light: rgba(252,164,147,1);
  --spacer-124: 12.4rem;
  --font-size-base: 1.6rem;
  --color-alpha-black-50: rgba(0,0,0,0.5);
  --color-accent: rgba(245,245,248,1);
  --color-alpha-black-80: rgba(0,0,0,0.8);
  --spacer-6: 0.6rem;
  --color-turquoise-triumph: rgba(97,153,246,1);
  --border-radius-8: 0.8rem;
  --color-alpha-dark-60: rgba(13,13,24,0.6);
  --spacer-40: 4rem;
  --color-electric-light: rgba(135,255,255,1);
  --spacer-54: 5.4rem;
  --spacer-0: 0rem;
  --border-radius-2: 0.2rem;
  --color-iris-dark: rgba(99,44,218,1);
  --color-electric-dark: rgba(0,184,185,1);
  --color-alpha-light-20: rgba(209,209,251,0.2);
  --color-grey-90: rgba(222,223,238,1);
  --color-grey-93: rgba(232,233,243,1);
  --color-alpha-black-30: rgba(0,0,0,0.3);
  --border-radius-12: 1.2rem;
  --color-coral-dark: rgba(227,107,82,1);
  --color-alpha-black-60: rgba(0,0,0,0.6);
  --color-alpha-dark-20: rgba(13,13,24,0.2);
  --color-grey-12: rgba(29,31,44,1);
  --color-alpha-black-40: rgba(0,0,0,0.4);
  --color-alpha-light-50: rgba(234,234,255,0.5);
}

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 Frame.
Reference design system (extracted from the live site):
- Palette: #6760fb, #6e3a1b, #9a96d1, #9e785e, #d5d4de
- Typefaces: FrameGothic, Times, Arial
- 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/frame-io

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

FrameGothic

80px

600

1.04

-3.6px

Aa Bb Cc

FrameGothic

48px

600

1.02

-1.92px

Aa Bb Cc

NeueMachinaInktrap

12px

400

0.9

0.72px

Aa Bb Cc

body

Times

10px

400

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #6760fb; --color-surface: #6e3a1b; --color-ink: #9a96d1; --color-accent: #9e785e; --color-detail: #d5d4de; } /* CSS variables exposed by source */ :root { --border-radius-20: 2rem; --color-grey-20: rgba(46,47,64,1); --color-grey-88: rgba(213,214,234,1); --color-alpha-perano-10: rgba(189,189,244,0.1); --color-alpha-dark-10: rgba(13,13,24,0.1); --color-alpha-black-10: rgba(0,0,0,0.1); --spacer-192: 19.2rem; --color-cobalt-20: rgba(91,83,255,0.2); --border-radius-6: 0.6rem; --color-alpha-black-100: rgba(0,0,0,1); --color-alpha-black-90: rgba(0,0,0,0.9); --spacer-480: 48rem; --color-grey-100: rgba(252,252,252,1); --color-alpha-grey-30: rgba(54,56,74,0.2); --color-iris-light: rgba(159,117,249,1); --color-grey-50: rgba(106,107,131,1); --color-grey-97: rgba(245,245,248,1); --font-secondary: "NeueMachinaInktrap","NeueMachinaInktrap Fallback"; --color-coral: rgba(252,133,109,1); --color-alpha-dark-40: rgba(13,13,24,0.4); --spacer-24: 2.4rem; --color-grey-10: rgba(22,23,34,1); --color-grey-05: rgba(13,13,24,1); --color-alpha-dark-80: rgba(13,13,24,0.8); --color-cobalt-light: rgba(99,105,255,1); --spacer-16: 1.6rem; --color-alpha-light-80: rgba(240,240,255,0.8); --color-alpha-light-30: rgba(220,220,255,0.3); --spacer-10: 1rem; --color-grey-30: rgba(54,56,74,1); --border-radius-40: 4rem; --color-accent-default: rgba(245,245,248,1); --color-coral-light: rgba(252,164,147,1); --spacer-124: 12.4rem; --font-size-base: 1.6rem; --color-alpha-black-50: rgba(0,0,0,0.5); --color-accent: rgba(245,245,248,1); --color-alpha-black-80: rgba(0,0,0,0.8); --spacer-6: 0.6rem; --color-turquoise-triumph: rgba(97,153,246,1); --border-radius-8: 0.8rem; --color-alpha-dark-60: rgba(13,13,24,0.6); --spacer-40: 4rem; --color-electric-light: rgba(135,255,255,1); --spacer-54: 5.4rem; --spacer-0: 0rem; --border-radius-2: 0.2rem; --color-iris-dark: rgba(99,44,218,1); --color-electric-dark: rgba(0,184,185,1); --color-alpha-light-20: rgba(209,209,251,0.2); --color-grey-90: rgba(222,223,238,1); --color-grey-93: rgba(232,233,243,1); --color-alpha-black-30: rgba(0,0,0,0.3); --border-radius-12: 1.2rem; --color-coral-dark: rgba(227,107,82,1); --color-alpha-black-60: rgba(0,0,0,0.6); --color-alpha-dark-20: rgba(13,13,24,0.2); --color-grey-12: rgba(29,31,44,1); --color-alpha-black-40: rgba(0,0,0,0.4); --color-alpha-light-50: rgba(234,234,255,0.5); }

Build a landing page in the visual style of Frame. Reference design system (extracted from the live site): - Palette: #6760fb, #6e3a1b, #9a96d1, #9e785e, #d5d4de - Typefaces: FrameGothic, Times, Arial - 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/frame-io