# Icam Inox · Design system migration spec

> Source: https://www.icam-inox.com  ·  Curated by OpenDesign  ·  en

> A masterclass in using extreme scale and high contrast to create a premium industrial feel without relying on color or ornamentation.

## 1. Identity DNA

The design system for Icam Inox is an exercise in precision, built with the stark logic of a high-end industrial catalog for a stainless steel manufacturer. It operates like a well-machined component: its function is evident, its form is deliberate, and any superfluous element has been stripped away. The result is a stark, typography-driven industrial site for stainless steel experts.

**One-liner:** A stark, typography-driven industrial site for stainless steel experts.
**Keywords:** industrial · precision · minimal · expert · metal
**Analogy:** A high-end industrial catalog for a stainless steel manufacturer.

## 2. Color

The palette is a strict, high-contrast monochrome of pure black, white, and neutral greys. It functions not as decoration but as the foundational grid upon which all visual hierarchy is constructed.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#AAAAAA` | secondary text |
| `--muted` | `#333333` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** High-contrast monochrome with no vibrant accents.

The principle is clear: emphasis is achieved solely through scale and contrast, never through vibrant accent.

## 3. Typography

The typographic voice is built on clean, neutral humanist and grotesque sans-serifs, wielded at massive scales. It is a system of extreme contrast, where hero headlines are architectural statements and body text remains a quiet, regular-weight presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 500 | -1.44px | Massive hero headlines like 'Esperti' and 'MWS Marconi' |
| body | 16px | 1.25 | 400 | 0 | Standard UI text and paragraph copy |
| h2 | 32px | 1.5 | 500 | -0.5px | Subheadings and section titles |

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

## 4. Spacing

Spacing follows a loose, architectural rhythm, using generous padding blocks to create vast amounts of breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Loose and spacious, using 40px and 72px padding blocks for breathing room.

## 5. Surfaces

Depth and surface are articulated through high contrast and minimal, functional layering. Thin, precise borders define containers, while shadows are reserved for grounding interactive elements with clear, high-opacity values.

- **Radius:** sm 4px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0,0,0,0.5)
- **Borders:** Thin 1px white borders on dark backgrounds.

## 6. Layout

The layout skeleton is defined by full-bleed, full-width hero sections followed by light content blocks. This creates a clean, two-tone journey through the information, where sections are separated by stark shifts in background value.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is understated and professional, adhering to a philosophy of clear, functional feedback. Subtle fade-ins and smooth, standard-duration transitions are used to guide the user, never to distract.

- **Durations:** micro 220ms · small 375ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle fade-ins on scroll.
  - Smooth transitions on hover states.

- **Hover:** Subtle color shifts or opacity changes.
- **Click:** Immediate feedback with minimal bounce.
- **Transition:** Standard 0.375s transitions on interactive elements.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is authoritative and professional, with headlines that are short, impactful, and extremely large. Interactive cues are understated, relying on typography and minimal form rather than decorative, colorful buttons.

- **Tone:** Authoritative and professional.
- **Headline style:** Short, impactful, and extremely large.
- **CTA style:** Understated, relying on typography rather than colorful buttons.
- **Avoid:** Playful language. / Bright, vibrant colors. / Excessive UI elements. / Rounded, bubbly shapes. / Small, cramped typography.

### Don'ts
- ❌ 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.

The system deliberately avoids playful language, vibrant color, excessive UI elements, and cramped layouts to maintain its uncompromising industrial clarity.

## System Prompt (paste into AI tool)

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