A high-end industrial catalog for a stainless steel manufacturer.
02
Color
#FFFFFFInk
#AAAAAAInk soft
#000000BG
#333333Muted
rgba(255, 255, 255, 0.15)Line
High-contrast monochrome with no vibrant accents.
03
Typography
grotesque-sans · humanist-sans
display96px · 500
body16px · 400
h232px · 500
Use extremely large font sizes (96px+) for hero statements. · Tighten letter spacing (tracking) on display text. · Keep body text regular weight and neutral spacing.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Loose and spacious, using 40px and 72px padding blocks for breathing room.
05
Surfaces
sm · 4px
md · 8px
lg · 20px
pill · 999px
Thin 1px white borders on dark backgrounds.
0 4px 24px rgba(0,0,0,0.5)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width dark hero sections followed by light content blocks.
07
Motion & Interaction
220msmicro
375mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Subtle fade-ins on scroll. · Smooth transitions on hover states.
Subtle color shifts or opacity changes. · Immediate feedback with minimal bounce.
08
Components
buttonMinimal, often text-based or simple outlined styles.
cardDark or light containers with subtle borders and rounded corners.
inputMinimal, clean inputs for forms.
heroMassive typography on a dark background, often overlapping imagery.
09
Voice & Don'ts
ToneAuthoritative and professional.
HeadlinesShort, impactful, and extremely large.
CTAsUnderstated, relying on typography rather than colorful buttons.
Don't use vibrant accent colors — the palette is strictly monochrome (black, white, grey).
Don't set display text below 72px — the site uses massive 96px+ typography for impact.
Don't use decorative or serif fonts — the entire system is built on clean, neutral sans-serifs.
Don't create cluttered layouts — the site uses vast amounts of negative space.
Don't use heavy drop shadows — depth is created through high contrast and layering.
Don't use small, pill-shaped buttons — interactive elements are minimal and often text-only.
Captured from the live site · real computed styles
11
System prompt
A premium industrial site for a stainless steel manufacturer, characterized by a stark monochrome palette (black #000000, white #FFFFFF, grey #333333). The typography is a bold, humanist and grotesque sans-serif system, used at massive scales (96px+) for hero headlines with tight letter-spacing (-1.44px). The layout is extremely spacious, prioritizing clean lines and high contrast over decorative elements. There are no bright accent colors; emphasis is purely through typography and scale. Critical donts: avoid colorful accents, never use small display text, and never introduce decorative serifs or cluttered layouts.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
