# Petertarka · Design system migration spec

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

> This site is worth including as a prime example of a minimalist, high-end creative portfolio that uses 3D artwork as its primary visual language.

## 1. Identity DNA

The site functions as a curated gallery of bespoke 3D visual worlds, where each portfolio piece is an exhibit in a quiet, Swiss-inspired typographic hall. Its identity is defined by this tension: the detailed complexity of the 3D environments against the stark simplicity of their presentation.

**One-liner:** A high-end creative portfolio showcasing detailed 3D environments with minimalist editorial typography.
**Keywords:** 3D Illustration · Agency Portfolio · Minimalist · High-End
**Analogy:** A curated gallery of bespoke 3D visual worlds presented in a clean, Swiss-inspired typographic layout.

## 2. Color

The color system operates on a principle of absolute high contrast, using a neutral off-white canvas as the stage for bold black typography and isolated, solid color blocks. This palette does not compete with the artwork; it provides a pristine backdrop for it.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0F0F0` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High contrast between a neutral off-white canvas and stark black typography.

The principle is one of subtraction: every color serves a structural purpose, either as ground, type, or a singular visual highlight.

## 3. Typography

The typographic voice is clinical and direct, using a geometric sans-serif category for all text layers. Display weights are kept light (300) to let the 3D artwork dominate, while body text uses a regular (400) weight with tight line-heights for precise, block-like text forms.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 38px | 1.05 | 300 | 0px | Client names and large headlines |
| body | 16px | 1.0 | 400 | 0px | Small descriptive text and dates |

**Type rules:**
- Use geometric sans for all text layers
- Light weights (300) for large display text
- Regular weight (400) for body and smaller elements
- Tight line-height for large display text

## 4. Spacing

Generous padding of 45px establishes a rhythmic, airy cadence throughout the layout, creating a gallery-like sense of space and pause between content elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 45 / 64 / 96 px
- **Rhythm:** Generous padding (45px) creates an airy, gallery-like feel.

## 5. Surfaces

Depth is articulated through negative space and precise division, not shadow. Thin 1px lines in a translucent black are used as sparse, sometimes asymmetric, separators to structure content without adding visual weight.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin 1px lines in rgba(0, 0, 0, 0.1) are used sparingly, sometimes asymmetrically (0px 1px 1px 0px).

## 6. Layout

The layout skeleton is a minimal grid that alternates between solid color blocks and empty space, creating a balanced, editorial rhythm. This structure provides a clean, ordered framework that allows the full-bleed 3D illustrations and sparse typography to breathe.

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

**Skeleton:** A clean grid that alternates between solid color blocks and empty space.

## 7. Motion & Interaction

Motion is treated as utilitarian feedback, not decoration. The philosophy focuses on fast, subtle opacity and color transitions that acknowledge interaction without pulling focus from the primary visual content.

- **Durations:** micro 125ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color and opacity transitions on hover
  - Fast (0.125s) opacity transitions for subtle UI feedback

- **Hover:** Subtle opacity changes and color transitions.
- **Click:** Standard link behavior.
- **Transition:** 0.3s ease-in-out for color and background-color changes.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is minimal, confident, and professional, mirroring the site's visual restraint. Headlines are direct client names, and calls to action are understated text links.

- **Tone:** Minimal, confident, and professional.
- **Headline style:** Direct, concise client names.
- **CTA style:** Understated text links.
- **Avoid:** Excessive decoration / Loud calls to action / Complex layouts

### Don'ts
- ❌ Don't use serif fonts — the screenshot shows a strict geometric sans-serif system.
- ❌ Don't use rounded corners — the screenshot shows sharp, 0px border-radius elements.
- ❌ Don't use complex shadows — the screenshot shows completely flat surface presentation.
- ❌ Don't use dense text blocks — the screenshot shows sparse, large-format typography.
- ❌ Don't use highly saturated UI colors — the screenshot shows a neutral palette with isolated color blocks.
- ❌ Don't use decorative borders — the screenshot shows only minimal, 1px dividing lines.

The system deliberately excludes serif fonts, rounded corners, complex shadows, and dense text blocks, maintaining a strict focus on the 3D artwork as the primary visual language.

## System Prompt (paste into AI tool)

```
This is a high-end creative agency portfolio showcasing detailed 3D isometric illustrations. The design relies on a stark contrast between a neutral off-white (#F0F0F0) background and bold black (#000000) typography. The typography uses a geometric sans-serif category with light weights for display and regular weights for body. Layouts are spacious with generous padding, creating a gallery-like feel. Key colors are #F0F0F0 and #000000. Critical donts: never use serif fonts, avoid rounded corners, and do not use dense text blocks or complex shadows. Keep the focus on the 3D artwork with minimal, precise typographic interventions.
```
