# Kaleidografik · Design system migration spec

> Source: https://kaleidografik.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Kaleidografik operates as a blank canvas, a design system built on extreme restraint. Its strategy is to let the bold, diverse work of its clients provide all visual interest, making the portfolio itself a statement of confident simplicity.

**One-liner:** A minimal, content-first portfolio for an independent creative studio.
**Keywords:** Creative Agency · Digital Studio · Visual Design · Portfolio · Independent
**Analogy:** A blank canvas that lets bold client work speak for itself

## 2. Color

The color system is a study in monochrome discipline. A warm off-white ground of #ECEAE5 provides the sole canvas, with pure black typography creating a stark, neutral field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ECEAE5` | main background |
| `--bg-soft` | `#ECEAE5` | card background |
| `--bg-quiet` | `#ECEAE5` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

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

This strict palette ensures client imagery becomes the primary source of visual variety and energy.

## 3. Typography

Typography is governed by a single voice: Suisse Intl Regular at weight 400. This uniform typographic treatment rejects hierarchy through weight, instead using massive scale for watermark text and standard body size for navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.85 | 400 | -2px | Massive background watermark text |
| h1 | 32px | 1.2 | 400 | -0.5px | Project titles |
| body | 16px | 1.5 | 400 | 0px | Body text and navigation |

**Type rules:**
- 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

## 4. Spacing

Spacing follows a generous, breathing rhythm that frames content rather than constraining it.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 48 / 75 px
- **Rhythm:** Generous whitespace with 20px horizontal padding and 75px bottom padding on containers

## 5. Surfaces

Surface depth is communicated sparingly, using subtle shadows only to lift project cards from the canvas. The system avoids visible borders on containers, relying instead on whitespace and the clean edge of the off-white ground.

- **Radius:** sm 0px · md 8px · lg 0px · pill 0px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is an asymmetric masonry grid of project cards, anchored by a simple top navigation bar. A large, faded background watermark text provides the primary spatial and thematic anchor across the viewport.

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

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

## 7. Motion & Interaction

Motion philosophy is one of subtle, consistent reinforcement. All interactions employ smooth opacity and transform transitions, using a uniform cubic-bezier easing to create a cohesive, understated feel.

- **Durations:** micro 150ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fade transitions on hover states
  - Smooth opacity and transform transitions for navigation
  - Background color transitions on interactive elements

- **Hover:** Opacity reduction on navigation links and project cards
- **Click:** Navigate to project detail pages
- **Transition:** All transitions use cubic-bezier(0.25, 0.1, 0.25, 1) easing with varying durations
- **Keyboard:** Standard tab navigation with visible underline focus states

## 8. Voice & Don'ts

Editorial voice is understated and professional, with headlines often set in minimal, direct uppercase for project categories. CTAs are simple text links without visual emphasis.

- **Tone:** Understated, professional, letting work speak for itself
- **Headline style:** Minimal, direct, uppercase for project categories
- **CTA style:** Simple text links without visual emphasis
- **Avoid:** Avoid decorative elements that compete with client work / Avoid complex gradients or shadows / Avoid multiple font weights

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

The system deliberately avoids decorative UI elements, multiple font weights, colored accents, and complex components that would compete with client work.

## System Prompt (paste into AI tool)

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