Stylogeny combining Dark Tech Minimalism × Generative

Try

Style combination · Pairs well

Dark Tech Minimalism × Generative

Run a generative shader or particle field behind the hero to replace stock imagery with live, on-brand texture.

From the research on Dark Tech Minimalism

Mix them and make something Dark Tech Minimalism Generative

FutureDark Tech Minimalism × Generative2019 · 2007
A sample layout drawn from the recipe: shapes from Generative, their arrangement from Generative, the finish from Dark Tech Minimalism. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Dark Tech Minimalism Generative & Dynamic Identities

Type from Dark Tech Minimalism
Colour from Dark Tech Minimalism
Form from Generative
Composition from Generative
Surface from Dark Tech Minimalism

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Dark Tech Minimalism

Future

Inter, standing in for Inter

Text · Dark Tech Minimalism

The dark, restrained aesthetic of developer tools and SaaS landing pages since about 2019: near-black grounds, grey type ramps, a neutral grotesque such as Inter, hairline borders, soft radial glows and bento grids of crisp product screenshots. Informally named after Linear's website and shared by Vercel, Raycast and many imitators, it borrows the look of code editors to signal precision and premium engineering.

Inter; Dark Tech Minimalism used Inter and Geist

03

The colours

The ground and leading colours come from Dark Tech Minimalism, with a counter-accent from Generative. The ink reads on the ground at 4.5:1 or more.

Dark Tech Minimalism Generative & Dynamic Identities

  • #08090a ground · 36%
  • #f7f8f8 ink · 14%
  • #a855f7 accent · 18%
  • #0091ff accent · 14%
  • #5e6ad2 accent · 10%
  • #ffd400 accent · 8%

As CSS

:root {
  --ground: #08090a;
  --ink: #f7f8f8;
  --accent-1: #a855f7;
  --accent-2: #0091ff;
  --accent-3: #5e6ad2;
  --accent-4: #ffd400;
  --font-display: "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
}

05

More combinations

With Dark Tech Minimalism

All 13 combinations with Dark Tech Minimalism

With Generative

All 15 combinations with Generative

Every style combination