---
name: Kaleidografik
description: "This site exemplifies extreme design restraint as a portfolio strategy - by using only one font weight and zero accent colors, Kaleidografik lets the diversity and boldness of client work become the v"
version: alpha

colors:
  background: "#ECEAE5"
  primary: "#000000"
  secondary: "#000000"
  neutral: "#000000"
  bg-soft: "#ECEAE5"
  bg-quiet: "#ECEAE5"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 120px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 8px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 48px
  3xl: 75px

---

## Overview

A minimal, content-first portfolio for an independent creative studio.

*A blank canvas that lets bold client work speak for itself*

## Colors

Strict monochrome canvas with warm off-white background, relying entirely on client work for color.

- **Background (`#ECEAE5`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- All typography uses Suisse Intl Regular at weight 400
- Navigation links use 16px body size with underline for active state
- Massive background watermark text uses extremely large display size

## Layout

Masonry-like grid with varying card sizes, top navigation bar, and large background watermark text

*Rhythm:* Generous whitespace with 20px horizontal padding and 75px bottom padding on containers

## Elevation & Depth

- 0 4px 20px rgba(0,0,0,0.1) on project cards
- Borders: No visible borders on containers, 1px solid black underlines on active nav items

## Shapes

- `sm`: 0px
- `md`: 8px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Minimal text links with underline states, no visible button containers
- **card:** Project preview cards with varying aspect ratios, containing screenshots and case study imagery
- **chip:** Small pill-shaped tags with 1px black border for project metadata
- **input:** Not visible in current view
- **hero:** Scattered project cards over large faded background typography

## Do's and Don'ts

**Don't:**
- Don't use multiple font weights — screenshot shows uniform weight 400 throughout
- Don't add decorative UI elements — screenshot shows purely content-driven layout
- Don't use colorful backgrounds — screenshot shows consistent #ECEAE5 off-white
- Don't create complex button styles — screenshot shows text-only navigation with underlines
- Don't add drop shadows to main containers — screenshot shows flat, clean card presentation
- Don't use brand-colored accents — screenshot shows completely monochromatic scheme

---

## System Prompt (paste into AI agent)

```
Kaleidografik is an independent creative studio portfolio with a minimal, content-first design. The site uses a warm off-white background (#ECEAE5) with pure black text (#000000), creating a monochrome canvas that lets bold client work provide all visual interest. Typography is exclusively Suisse Intl Regular at weight 400, with massive background watermark text as the primary decorative element. Navigation is a simple three-item horizontal bar (Work, Studio, Play) with underline active states. Project cards are displayed in an asymmetric masonry layout with generous whitespace. Key don'ts: never use multiple font weights, never add decorative UI elements, never introduce colored backgrounds or accent colors, never create complex button styles, never add drop shadows to containers, never use brand-colored accents. The design philosophy is extreme restraint - the agency's own site deliberately steps back to showcase client work as the visual centerpiece.
```