Stylogeny combining Dark Tech Minimalism × Minimalist Graphic Design

Try

Style combination · Pairs well

Dark Tech Minimalism × Minimalist Graphic Design

Invert the palette to near-black and keep the same reduction for a contemporary technology register.

From the research on Minimalist Graphic Design

Mix them and make something Dark Tech Minimalism Minimalist Graphic Design

FormDark Tech Minimalism × Minimalist Graphic
A sample layout drawn from the recipe: shapes from Minimalist Graphic Design, their arrangement from Dark Tech Minimalism, 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 Minimalist Graphic Design

Type from Dark Tech Minimalism
Colour from Minimalist Graphic Design
Form from Minimalist Graphic Design
Composition from Dark Tech Minimalism
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

Form

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 Minimalist Graphic Design, with a counter-accent from Dark Tech Minimalism. The ink reads on the ground at 4.5:1 or more.

Dark Tech Minimalism Minimalist Graphic Design

  • #ffffff ground · 36%
  • #1a1a1a ink · 14%
  • #d9d6d0 accent · 18%
  • #a855f7 accent · 14%
  • #8c8a86 accent · 10%
  • #5e6ad2 accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #1a1a1a;
  --accent-1: #d9d6d0;
  --accent-2: #a855f7;
  --accent-3: #8c8a86;
  --accent-4: #5e6ad2;
  --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 Minimalist Graphic Design

All 33 combinations with Minimalist Graphic Design

Every style combination