№ factory-ai--product-cli

Factory

Obsidian code-cave: stark, geometric typography on deep charcoal, hinting at relentless precision.

Feature Stackminimalism brutalism swiss monochrome futurist ai developer toolslight

The page uses a stark, dark palette with a focus on typography and code snippets. The layout is structured with distinct, visually separated sections, emphasizing functionality and a technical feel. The use of whitespace and clear hierarchy contribute to a sense of precision. · ai developer tools, saas landing page, dark tech website, code interface, minimalist ai, developer platform, factory ai, technical design, monochrome ui, software development

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#ec864e
OKLCHoklch(72.0% 0.144 48)
RoleDominant
find sites →
Hex#77320c
OKLCHoklch(40.7% 0.108 45)
RoleSurface
find sites →
Hex#f2ad87
OKLCHoklch(80.4% 0.096 50)
RoleInk
find sites →
Hex#c2a395
OKLCHoklch(73.9% 0.042 46)
RoleAccent
find sites →
Hex#baaea0
OKLCHoklch(75.7% 0.024 72)
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	Geist	72px	400	1	-2.88px	Aa Bb Cc
h2	Geist	44px	400	1.12	-1.12px	Aa Bb Cc
body	Geist	16px	400	1.5	0	Aa Bb Cc
caption	Geist	14px	500	1.43	0	Aa Bb Cc
button	Geist	16px	400	1.5	0	Aa Bb Cc

Spacing scale

24px

36px

40px

56px

80px

96px

120px

Radius scale

0px

3px

6px

10px

12px

20px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #ec864e;
  --color-surface: #77320c;
  --color-ink: #f2ad87;
  --color-accent: #c2a395;
  --color-detail: #baaea0;
}

/* CSS variables exposed by source */
:root {
  --color-zinc-100: oklch(96.7% .001 286.375);
  --color-amber-400: oklch(82.8% .189 84.429);
  --text-2xl: 1.5rem;
  --color-zinc-200: oklch(92% .004 286.32);
  --color-base-500: #8a8380;
  --color-emerald-300: oklch(84.5% .143 164.978);
  --text-7xl: 4.5rem;
  --color-neutral-600: oklch(43.9% 0 0);
  --text-lg: 1.125rem;
  --text-8xl--line-height: 1;
  --color-neutral-300: oklch(87% 0 0);
  --text-5xl--line-height: 1;
  --text-base--line-height: calc(1.5/1);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-base-300: #b8b3b0;
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-accent-300: #d15010;
  --color-green-500: oklch(72.3% .219 149.579);
  --color-violet-400: oklch(70.2% .183 293.541);
  --text-lg--line-height: calc(1.75/1.125);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-white: #fff;
  --color-base-200: #ccc9c7;
  --color-blue-400: oklch(70.7% .165 254.624);
  --radius-sm: .1875rem;
  --color-base-900: #2e2c2b;
  --font-weight-bold: 700;
  --color-zinc-950: oklch(14.1% .005 285.823);
  --radius: .375rem;
  --color-red-500: oklch(63.7% .237 25.331);
  --accent-100: #ef6f2e;
  --color-background: #020202;
  --color-zinc-300: oklch(87.1% .006 286.286);
  --color-base-700: #4d4947;
  --text-xs--line-height: calc(1/.75);
  --font-weight-light: 300;
  --color-zinc-700: oklch(37% .013 285.805);
  --color-neutral-700: oklch(37.1% 0 0);
  --radius-2xl: .625rem;
  --radius-md: .25rem;
  --color-sky-700: oklch(50% .134 242.749);
  --text-7xl--line-height: 1;
  --radius-lg: .375rem;
  --text-xl: 1.25rem;
  --color-neutral-900: oklch(20.5% 0 0);
  --color-violet-700: oklch(49.1% .27 292.581);
  --color-dark-base-primary: #020202;
  --color-light-base-primary: #eee;
  --color-violet-300: oklch(81.1% .111 293.571);
  --color-zinc-500: oklch(55.2% .016 285.938);
  --color-zinc-900: oklch(21% .006 285.885);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-zinc-800: oklch(27.4% .006 286.033);
  --radius-3xl: .75rem;
  --color-sky-400: oklch(74.6% .16 232.661);
}

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 Factory.
Reference design system (extracted from the live site):
- Palette: #ec864e, #77320c, #f2ad87, #c2a395, #baaea0
- Typefaces: Geist
- 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/factory-ai--product-cli

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

72px

400

-2.88px

Aa Bb Cc

Geist

44px

400

1.12

-1.12px

Aa Bb Cc

body

Geist

16px

400

1.5

Aa Bb Cc

caption

Geist

14px

500

1.43

Aa Bb Cc

button

Geist

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #ec864e; --color-surface: #77320c; --color-ink: #f2ad87; --color-accent: #c2a395; --color-detail: #baaea0; } /* CSS variables exposed by source */ :root { --color-zinc-100: oklch(96.7% .001 286.375); --color-amber-400: oklch(82.8% .189 84.429); --text-2xl: 1.5rem; --color-zinc-200: oklch(92% .004 286.32); --color-base-500: #8a8380; --color-emerald-300: oklch(84.5% .143 164.978); --text-7xl: 4.5rem; --color-neutral-600: oklch(43.9% 0 0); --text-lg: 1.125rem; --text-8xl--line-height: 1; --color-neutral-300: oklch(87% 0 0); --text-5xl--line-height: 1; --text-base--line-height: calc(1.5/1); --color-emerald-700: oklch(50.8% .118 165.612); --color-neutral-200: oklch(92.2% 0 0); --color-yellow-400: oklch(85.2% .199 91.936); --color-base-300: #b8b3b0; --color-amber-300: oklch(87.9% .169 91.605); --color-gray-500: oklch(55.1% .027 264.364); --color-accent-300: #d15010; --color-green-500: oklch(72.3% .219 149.579); --color-violet-400: oklch(70.2% .183 293.541); --text-lg--line-height: calc(1.75/1.125); --color-red-400: oklch(70.4% .191 22.216); --color-white: #fff; --color-base-200: #ccc9c7; --color-blue-400: oklch(70.7% .165 254.624); --radius-sm: .1875rem; --color-base-900: #2e2c2b; --font-weight-bold: 700; --color-zinc-950: oklch(14.1% .005 285.823); --radius: .375rem; --color-red-500: oklch(63.7% .237 25.331); --accent-100: #ef6f2e; --color-background: #020202; --color-zinc-300: oklch(87.1% .006 286.286); --color-base-700: #4d4947; --text-xs--line-height: calc(1/.75); --font-weight-light: 300; --color-zinc-700: oklch(37% .013 285.805); --color-neutral-700: oklch(37.1% 0 0); --radius-2xl: .625rem; --radius-md: .25rem; --color-sky-700: oklch(50% .134 242.749); --text-7xl--line-height: 1; --radius-lg: .375rem; --text-xl: 1.25rem; --color-neutral-900: oklch(20.5% 0 0); --color-violet-700: oklch(49.1% .27 292.581); --color-dark-base-primary: #020202; --color-light-base-primary: #eee; --color-violet-300: oklch(81.1% .111 293.571); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-900: oklch(21% .006 285.885); --color-red-300: oklch(80.8% .114 19.571); --color-sky-300: oklch(82.8% .111 230.318); --color-orange-500: oklch(70.5% .213 47.604); --color-zinc-800: oklch(27.4% .006 286.033); --radius-3xl: .75rem; --color-sky-400: oklch(74.6% .16 232.661); }

Build a landing page in the visual style of Factory. Reference design system (extracted from the live site): - Palette: #ec864e, #77320c, #f2ad87, #c2a395, #baaea0 - Typefaces: Geist - 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/factory-ai--product-cli