№ stability-ai

Stability

Soft, diffused light on stark white, clean geometric forms, and a subtle, tech-forward glow.

Split Studiominimalism editorial monochrome glassmorphism dark mode aidark

The page uses a split screen to juxtapose a large, evocative image with a smaller selection of product previews. The overall feel is clean and sophisticated, emphasizing visual clarity and a sense of curated detail. · ai product showcase, tech product display, minimalist product page, split screen design, modern tech aesthetic, product catalog, stability ai, headphones, creative tools

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 · cool

SwatchHexOKLCHSuggested roleCopy

Hex#f04f0e
OKLCHoklch(64.5% 0.207 38)
RoleDominant
find sites →
Hex#431604
OKLCHoklch(26.9% 0.075 41)
RoleSurface
find sites →
Hex#f7a381
OKLCHoklch(79.1% 0.111 43)
RoleInk
find sites →
Hex#433667
OKLCHoklch(37.1% 0.083 294)
RoleAccent
find sites →
Hex#902f08
OKLCHoklch(44.5% 0.138 39)
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	Archivo	61px	400	0.95	-0.61px	Aa Bb Cc
h3	Archivo	18px	400	0.98	0	Aa Bb Cc
body	sans-serif	16px	400	1.4	0	Aa Bb Cc
button	Archivo	18px	400	1.5	0	Aa Bb Cc

Spacing scale

8px

10px

15px

18px

22px

26px

30px

58px

60px

Radius scale

0px

11px

15px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f04f0e;
  --color-surface: #431604;
  --color-ink: #f7a381;
  --color-accent: #433667;
  --color-detail: #902f08;
}

/* CSS variables exposed by source */
:root {
  --secondary-button-font-font-weight: 600;
  --primary-button-font-font-style: normal;
  --secondary-button-font-font-size-value: 1.1;
  --primary-button-padding-y: 1rem;
  --backgroundOverlayColor: hsla(0,0%,100%,1);
  --primary-button-font-font-size: 1rem;
  --primary-button-font-line-height: 1.2em;
  --secondary-button-font-font-family: "Figtree";
  --secondary-button-font-text-transform: none;
  --primaryButtonPadding: 1.2rem;
  --primary-button-rounded-border-bottom-left-radius: 30px;
  --text-highlight-color-on-background: hsla(150,4%,90.2%,1);
  --secondary-button-rounded-border-bottom-right-radius: 10px;
  --primary-button-rounded-border-top-right-radius: 30px;
  --secondaryButtonBackgroundColor: hsla(150,4%,90.2%,1);
  --primary-button-font-font-weight: 600;
  --secondary-button-font-font-style: normal;
  --secondary-button-padding-y: 1rem;
  --primary-button-padding-x: 1.3rem;
  --primaryButtonTextColor: hsla(0,0%,12%,1);
  --secondary-button-rounded-border-bottom-left-radius: 10px;
  --primaryButtonBackgroundColor: hsla(0,0%,100%,1);
  --primary-button-font-letter-spacing: 0em;
  --secondary-button-padding-x: 1.3rem;
  --accent-hsl: 270,100%,20%;
  --secondary-button-font-line-height: 1.2em;
  --secondaryButtonTextColor: hsla(0,0%,12%,1);
  --primary-button-stroke: 1px;
  --primary-button-font-font-family: "Figtree";
  --primary-button-rounded-border-top-left-radius: 30px;
  --secondary-button-rounded-border-top-left-radius: 10px;
  --secondary-button-stroke: 1px;
  --text-highlight-color: hsla(150,4%,90.2%,1);
  --secondary-button-font-font-size: 1.1rem;
  --primary-button-font-font-size-value: 1;
  --primary-button-rounded-border-bottom-right-radius: 30px;
  --secondary-button-font-letter-spacing: 0em;
  --secondary-button-rounded-border-top-right-radius: 10px;
  --primary-button-font-text-transform: none;
  --tertiary-button-font-font-style: normal;
  --tweak-summary-block-background-color: hsla(150,4%,90.2%,1);
  --tweak-blog-basic-grid-list-meta-color: hsla(150,4%,90.2%,1);
  --course-item-lesson-name-font-letter-spacing: 0em;
  --product-basic-item-restock-notification-wrap-layout-font-font-style: normal;
  --content-link-block-title-font-font-weight: 400;
  --portfolio-grid-overlay-title-font-font-size-value: 1.8;
  --menu-block-item-description-font-letter-spacing: 0em;
  --product-basic-item-title-half-layout-font-font-family: "Archivo";
  --quote-block-text-font-font-family: "Archivo";
  --quote-block-text-font-font-weight: 400;
  --product-basic-item-add-ons-title-half-layout-font-font-weight: 400;
  --tweak-blog-item-title-color: hsla(150,4%,90.2%,1);
  --portfolio-item-pagination-font-font-size-value: 1.5;
  --portfolio-hover-static-title-color: hsla(150,4%,90.2%,1);
  --portfolio-item-pagination-font-font-size: 1.5rem;
  --product-basic-item-description-font-line-height: 1.5em;
  --course-list-grid-layout-chapter-meta-font-font-style: normal;
  --portfolio-index-background-title-font-letter-spacing: 0em;
  --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,12%,1);
  --product-basic-item-restock-notification-wrap-layout-font-text-transform: none;
}

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 Stability.
Reference design system (extracted from the live site):
- Palette: #f04f0e, #431604, #f7a381, #433667, #902f08
- Typefaces: Archivo, sans-serif
- 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/stability-ai

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Archivo

61px

400

0.95

-0.61px

Aa Bb Cc

Archivo

18px

400

0.98

Aa Bb Cc

body

sans-serif

16px

400

1.4

Aa Bb Cc

button

Archivo

18px

400

1.5

Aa Bb Cc

:root { --color-dominant: #f04f0e; --color-surface: #431604; --color-ink: #f7a381; --color-accent: #433667; --color-detail: #902f08; } /* CSS variables exposed by source */ :root { --secondary-button-font-font-weight: 600; --primary-button-font-font-style: normal; --secondary-button-font-font-size-value: 1.1; --primary-button-padding-y: 1rem; --backgroundOverlayColor: hsla(0,0%,100%,1); --primary-button-font-font-size: 1rem; --primary-button-font-line-height: 1.2em; --secondary-button-font-font-family: "Figtree"; --secondary-button-font-text-transform: none; --primaryButtonPadding: 1.2rem; --primary-button-rounded-border-bottom-left-radius: 30px; --text-highlight-color-on-background: hsla(150,4%,90.2%,1); --secondary-button-rounded-border-bottom-right-radius: 10px; --primary-button-rounded-border-top-right-radius: 30px; --secondaryButtonBackgroundColor: hsla(150,4%,90.2%,1); --primary-button-font-font-weight: 600; --secondary-button-font-font-style: normal; --secondary-button-padding-y: 1rem; --primary-button-padding-x: 1.3rem; --primaryButtonTextColor: hsla(0,0%,12%,1); --secondary-button-rounded-border-bottom-left-radius: 10px; --primaryButtonBackgroundColor: hsla(0,0%,100%,1); --primary-button-font-letter-spacing: 0em; --secondary-button-padding-x: 1.3rem; --accent-hsl: 270,100%,20%; --secondary-button-font-line-height: 1.2em; --secondaryButtonTextColor: hsla(0,0%,12%,1); --primary-button-stroke: 1px; --primary-button-font-font-family: "Figtree"; --primary-button-rounded-border-top-left-radius: 30px; --secondary-button-rounded-border-top-left-radius: 10px; --secondary-button-stroke: 1px; --text-highlight-color: hsla(150,4%,90.2%,1); --secondary-button-font-font-size: 1.1rem; --primary-button-font-font-size-value: 1; --primary-button-rounded-border-bottom-right-radius: 30px; --secondary-button-font-letter-spacing: 0em; --secondary-button-rounded-border-top-right-radius: 10px; --primary-button-font-text-transform: none; --tertiary-button-font-font-style: normal; --tweak-summary-block-background-color: hsla(150,4%,90.2%,1); --tweak-blog-basic-grid-list-meta-color: hsla(150,4%,90.2%,1); --course-item-lesson-name-font-letter-spacing: 0em; --product-basic-item-restock-notification-wrap-layout-font-font-style: normal; --content-link-block-title-font-font-weight: 400; --portfolio-grid-overlay-title-font-font-size-value: 1.8; --menu-block-item-description-font-letter-spacing: 0em; --product-basic-item-title-half-layout-font-font-family: "Archivo"; --quote-block-text-font-font-family: "Archivo"; --quote-block-text-font-font-weight: 400; --product-basic-item-add-ons-title-half-layout-font-font-weight: 400; --tweak-blog-item-title-color: hsla(150,4%,90.2%,1); --portfolio-item-pagination-font-font-size-value: 1.5; --portfolio-hover-static-title-color: hsla(150,4%,90.2%,1); --portfolio-item-pagination-font-font-size: 1.5rem; --product-basic-item-description-font-line-height: 1.5em; --course-list-grid-layout-chapter-meta-font-font-style: normal; --portfolio-index-background-title-font-letter-spacing: 0em; --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,12%,1); --product-basic-item-restock-notification-wrap-layout-font-text-transform: none; }

Build a landing page in the visual style of Stability. Reference design system (extracted from the live site): - Palette: #f04f0e, #431604, #f7a381, #433667, #902f08 - Typefaces: Archivo, sans-serif - 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/stability-ai