---
name: Kirschberg Co Nz
description: "Worth including as a prime example of a modern, minimalist design portfolio that prioritizes content and typography over decorative elements."
version: alpha

colors:
  background: "#FAF4F4"
  primary: "#171717"
  secondary: "#737373"
  neutral: "#737373"
  line: "rgba(23,23,23,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.15px"

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  pill: 999px

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

---

## Overview

A refined design portfolio showcasing product and brand work with a clean, editorial aesthetic.

*A curated gallery of high-end design case studies with a quiet, confident presence.*

## Colors

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

- **Background (`#FAF4F4`)** — uses `bg` token
- **Primary text (`#171717`)** — uses `ink` token
- **Secondary text (`#737373`)** — uses `ink-soft` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(23,23,23,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous vertical padding and consistent horizontal gutters create an open, breathable layout.

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.08)
- Borders: 1px solid rgba(23,23,23,0.1) for subtle structural separation.

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with minimal borders and rounded corners.
- **card:** Large rectangular cards with generous rounded corners and high-quality project imagery.
- **chip:** N/A
- **input:** N/A
- **hero:** Centered text block with a large headline and descriptive subtext, positioned above the project grid.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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