№ hardwareoperations-com

Hardware Operations — Product Visualization & Animation

Cool, stark geometry—crisp sans, deep charcoal, and soft, diffused digital light.

Bento Gridminimalism brutalism swiss monochrome editorial playful futurist glassmorphism agencylight

Hardware Operations — Product Visualization & Animation - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Hardware Operations — Product Visualization & Animation - full page scroll

Hardware Operations — Product Visualization & Animation - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#d04d44
OKLCHoklch(59.6% 0.168 27)
RoleDominant
find sites →
Hex#f3d5bc
OKLCHoklch(89.2% 0.047 62)
RoleSurface
find sites →
Hex#7d0e12
OKLCHoklch(37.9% 0.143 26)
RoleInk
find sites →
Hex#8c5c5c
OKLCHoklch(52.7% 0.063 19)
RoleAccent
find sites →
Hex#cdb49e
OKLCHoklch(78.6% 0.042 64)
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	GT Pressura Extended	52px	400	1.02	-1.5552px	Aa Bb Cc
body	Geist Mono	13px	400	1.45	0	Aa Bb Cc

Spacing scale

14px

16px

24px

28px

36px

44px

60px

Container

Max content width 1720px

Export

:root {
  --color-dominant: #d04d44;
  --color-surface: #f3d5bc;
  --color-ink: #7d0e12;
  --color-accent: #8c5c5c;
  --color-detail: #cdb49e;
}

/* CSS variables exposed by source */
:root {
  --bg-2: #DDD9D3;
  --accent: oklch(0.68 0.22 42);
  --ink: #0E0E0E;
  --bg: rgb(228, 226, 222);
  --ink-2: #1a1a1a;
  --muted: #6A6862;
  --rule-2: rgba(14, 14, 14, 0.08);
  --display: "GT Pressura Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --meta-h: 60px;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --rule: rgba(14, 14, 14, 0.14);
}

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 Hardware Operations — Product Visualization & Animation.
Reference design system (extracted from the live site):
- Palette: #d04d44, #f3d5bc, #7d0e12, #8c5c5c, #cdb49e
- Typefaces: GT Pressura Extended, Geist Mono
- Macrostructure: Bento Grid
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/hardwareoperations-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GT Pressura Extended

52px

400

1.02

-1.5552px

Aa Bb Cc

body

Geist Mono

13px

400

1.45

Aa Bb Cc

:root { --color-dominant: #d04d44; --color-surface: #f3d5bc; --color-ink: #7d0e12; --color-accent: #8c5c5c; --color-detail: #cdb49e; } /* CSS variables exposed by source */ :root { --bg-2: #DDD9D3; --accent: oklch(0.68 0.22 42); --ink: #0E0E0E; --bg: rgb(228, 226, 222); --ink-2: #1a1a1a; --muted: #6A6862; --rule-2: rgba(14, 14, 14, 0.08); --display: "GT Pressura Extended", "Helvetica Neue", Helvetica, Arial, sans-serif; --meta-h: 60px; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --rule: rgba(14, 14, 14, 0.14); }

Build a landing page in the visual style of Hardware Operations — Product Visualization & Animation. Reference design system (extracted from the live site): - Palette: #d04d44, #f3d5bc, #7d0e12, #8c5c5c, #cdb49e - Typefaces: GT Pressura Extended, Geist Mono - Macrostructure: Bento Grid 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/hardwareoperations-com