№ supercommon-systems

See all 2 pages of Supercommon Systems →

Supercommon Systems

Ink-black technical void, stark white geometric sans, clinical midnight precision

Marquee Herominimalism monochrome dark mode saasdark

Ultra-minimalist dark interface featuring centered sans-serif typography and a high-contrast product mockup. The layout relies on vast negative space and a strict monochrome palette to create a focused, tool-like atmosphere. · dark mode saas, minimalist app landing page, monochrome product hero, technical tool design, high contrast dark ui

Supercommon Systems - mobile — Mobile · 375

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 · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#2c5c8c
OKLCHoklch(46.5% 0.094 251)
RoleDominant
find sites →
Hex#9abcdf
OKLCHoklch(78.2% 0.062 249)
RoleSurface
find sites →
Hex#4c140c
OKLCHoklch(28.4% 0.086 31)
RoleInk
find sites →
Hex#7c8484
OKLCHoklch(60.7% 0.009 197)
RoleAccent
find sites →
Hex#c4c4c4
OKLCHoklch(82.0% 0.000 90)
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	Akt Variable Thin	56px	100	1.07	-3.36px	Aa Bb Cc
h3	Akt Variable Thin	30px	100	1.2	-1.2px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #2c5c8c;
  --color-surface: #9abcdf;
  --color-ink: #4c140c;
  --color-accent: #7c8484;
  --color-detail: #c4c4c4;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

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 Supercommon Systems.
Reference design system (extracted from the live site):
- Palette: #2c5c8c, #9abcdf, #4c140c, #7c8484, #c4c4c4
- Typefaces: Akt Variable Thin, sans-serif
- Macrostructure: Marquee Hero
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/supercommon-systems

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Akt Variable Thin

56px

100

1.07

-3.36px

Aa Bb Cc

Akt Variable Thin

30px

100

1.2

-1.2px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #2c5c8c; --color-surface: #9abcdf; --color-ink: #4c140c; --color-accent: #7c8484; --color-detail: #c4c4c4; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Supercommon Systems. Reference design system (extracted from the live site): - Palette: #2c5c8c, #9abcdf, #4c140c, #7c8484, #c4c4c4 - Typefaces: Akt Variable Thin, sans-serif - Macrostructure: Marquee Hero 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/supercommon-systems