---
name: Icam Inox
description: "A masterclass in using extreme scale and high contrast to create a premium industrial feel without relying on color or ornamentation."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#AAAAAA"
  neutral: "#333333"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.44px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "-0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A stark, typography-driven industrial site for stainless steel experts.

*A high-end industrial catalog for a stainless steel manufacturer.*

## Colors

High-contrast monochrome with no vibrant accents.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#AAAAAA`)** — uses `ink-soft` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- Use extremely large font sizes (96px+) for hero statements.
- Tighten letter spacing (tracking) on display text.
- Keep body text regular weight and neutral spacing.

## Layout

Full-width dark hero sections followed by light content blocks.

*Rhythm:* Loose and spacious, using 40px and 72px padding blocks for breathing room.

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.5)
- Borders: Thin 1px white borders on dark backgrounds.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Minimal, often text-based or simple outlined styles.
- **card:** Dark or light containers with subtle borders and rounded corners.
- **input:** Minimal, clean inputs for forms.
- **hero:** Massive typography on a dark background, often overlapping imagery.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```