# Kirschberg Co Nz · Design system migration spec

> Source: https://kirschberg.co.nz  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern, minimalist design portfolio that prioritizes content and typography over decorative elements.

## 1. Identity DNA

The Kirschberg system operates like a curated gallery, where the architecture of the space is designed to recede, leaving the work to speak for itself. It establishes a quiet, confident presence through precise restraint, treating each component as a considered element in a larger, cohesive exhibition.

**One-liner:** A refined design portfolio showcasing product and brand work with a clean, editorial aesthetic.
**Keywords:** refined · editorial · minimal · design-led · product
**Analogy:** A curated gallery of high-end design case studies with a quiet, confident presence.

## 2. Color

The color system is built on a high-contrast neutral foundation, using a warm off-white background to create a soft, paper-like surface. This allows the vibrant project imagery to become the primary source of chromatic energy within the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF4F4` | main background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#737373` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgba(23,23,23,0.1)` | divider |

**Color principle:** High-contrast neutral palette with a subtle warm-tinted background to let project imagery stand out.

The core principle is subtractive; the palette provides a neutral stage, not a competing performance.

## 3. Typography

Typography is split between a sharp, geometric grotesque for display headlines and a calmer humanist sans-serif for body copy. This pairing creates a clear hierarchy, with tight tracking on large text for a modern edge and a consistent weight of 400 for sustained readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 500 | -1px | Hero headline |
| body | 16px | 1.5 | 400 | -0.15px | Body copy and project descriptions |

**Type rules:**
- Use tight negative tracking on large display headlines for a sharp, modern feel.
- Maintain a consistent weight of 400 for body text to keep the reading experience calm.
- Project titles should use a slightly larger size or bold weight to distinguish from descriptions.

## 4. Spacing

Spacing follows a generous rhythm, with ample vertical padding and consistent horizontal gutters that give the layout its open, breathable structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Generous vertical padding and consistent horizontal gutters create an open, breathable layout.

## 5. Surfaces

Surface treatment is minimal and functional. A very subtle, soft shadow and a faint, low-opacity border are used sparingly to create gentle structural separation without visual weight.

- **Radius:** sm 4px · md 16px · lg 24px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0,0,0,0.08)
- **Borders:** 1px solid rgba(23,23,23,0.1) for subtle structural separation.

## 6. Layout

The layout skeleton centers on a hero section with a strong typographic statement. Below, a horizontally scrollable grid of large project cards forms the core browsing experience.

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

**Skeleton:** Centered hero section with a horizontally scrollable grid of project cards below.

## 7. Motion & Interaction

Motion is treated as a functional polish rather than a decorative layer. The system employs smooth, consistent transitions for interactive state changes, maintaining the calm and focused atmosphere.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Subtle opacity fades for loading or state changes.

- **Hover:** Subtle color shifts or opacity changes to indicate interactivity.
- **Click:** Immediate visual feedback with a slight scale or color adjustment.
- **Transition:** Consistent 0.3s transition for color, background, and border properties.
- **Keyboard:** Standard focus states with visible outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, understated, and confident. Copy is direct and slightly poetic, focusing on impact while the design avoids loud language, jargon, and cluttered compositions.

- **Tone:** Professional, understated, and confident.
- **Headline style:** Direct and slightly poetic, focusing on the impact and future-oriented nature of the work.
- **CTA style:** Minimal and clear, often integrated into navigation or project links.
- **Avoid:** Loud promotional language / Excessive jargon / Cluttered layouts

### Don'ts
- ❌ Don't use a pure white background — screenshot shows a warm, slightly pink-tinted off-white.
- ❌ Don't use bright, saturated accent colors in the UI — the site relies on project imagery for color.
- ❌ Don't use heavy drop shadows — the design uses very subtle, soft elevation if any.
- ❌ Don't use serif fonts for headlines — the display typography is a clean, geometric grotesque sans.
- ❌ Don't use small, cramped spacing — the layout prioritizes generous white space and padding.
- ❌ Don't use decorative borders or ornaments — the visual language is strictly functional and minimal.

The system deliberately omits bright accent colors and heavy decorative elements, reserving visual drama for the curated project work itself.

## System Prompt (paste into AI tool)

```
This is a refined design portfolio for Kirschberg, showcasing high-level product and brand work. The visual identity is built on a clean, editorial aesthetic with a warm off-white background (#FAF4F4) and dark ink text (#171717). Typography features a grotesque sans-serif for headlines and a humanist sans-serif for body text. The layout is spacious, using generous padding and a horizontally scrollable project grid. Critical constraints: avoid pure white backgrounds, no bright accent colors in the UI, avoid heavy shadows or decorative borders, maintain a minimal and professional tone.
```
