---
title: "Peter Tarka design system"
variant: extended
source: https://petertarka.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/petertarka-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Peter Tarka · Design System

> Quiet grids, vivid worlds, and uncompromising 3D craft.

**Theme:** light · **Industry:** portfolio · **Source:** https://petertarka.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A pared-back project index lets large-format 3D campaign imagery carry the visual impact. Oversized project names, small metadata, and subtle dividers create an editorial rhythm across a pale canvas.

## North star

Keep the interface nearly invisible: use a quiet gray canvas and editorial grid so each carefully framed 3D project owns the attention.

## Overview

The page pairs a near-white gray canvas (#f0f0f0) with black typography and restrained light-gray hairlines, keeping the project index quiet and letting each artwork become the focal point. The first project introduces a broad sky-blue field, while most other color comes from the commissioned 3D scenes rather than the site chrome; the measured pale blues should not be promoted into a general UI palette. GT America supplies a consistent, clean sans-serif voice. Project names are large and regular, while captions and years are much smaller, with no decorative tracking or all-caps treatment. The portfolio uses an asymmetrical, two-column sequence of generous project blocks. Names sit near the top, metadata anchors the lower edge, and thin dividers mark transitions without enclosing cards. The featured isometric scene overlaps its blue field and neighboring pale space, creating depth through composition rather than interface shadows. Ample open space and flat surfaces preserve an art-directed, gallery-like presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Gray | `#f0f0f0` | `--color-gallery-gray` | surface | Main canvas across the project index; provides the quiet neutral ground around artwork. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary project titles, navigation, and other high-contrast text. |
| Soft White | `#ffffff` | `--color-soft-white` | neutral | Measured for navigation, text, and links; appears as light text in the sampled styles, not a broad page surface. |
| Pencil Line | `#d8d8d8` | `--color-pencil-line` | semantic | Fine dividers between project areas; keep borders subtle and limited. |
| Sky Field | `#77c1e5` | `--color-sky-field` | accent | Blue background field in the featured Green Mountain Energy artwork; treat as project imagery, not a global CTA color. |
| Pale Sky | `#8ed0ef` | `--color-pale-sky` | accent | Light-blue gradient tone within the featured visual; keep it confined to artwork. |

### Semantic aliases

`--color-canvas` → `#f0f0f0` (Gallery Gray) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Soft White) · `--color-border` → `#d8d8d8` (Pencil Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#ffffff` | `#f0f0f0` | 1.14:1 | fail |

### Gradients

- `linear-gradient(rgb(240, 240, 240) 0%, rgb(240, 240, 240) 100%), none`
- `linear-gradient(rgb(119, 193, 229) 0%, rgb(142, 208, 239) 100%)`
- `linear-gradient(to left top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(216, 216, 216) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America | `--font-body` | webfont | 300, 400, 200 | Project titles, navigation, captions, years, and links throughout the portfolio. | Inter |

- **GT America:** Clean sans serif with measured regular and light weights; use sentence case and neutral tracking.

### Type scale — Custom (ratio ≈ 1.81, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 38px | 400 | 1.31 | 0 | — | GT America | Large project title and primary portfolio heading treatment. |
| body | 21px | 300 | 1.31 | 0 | — | GT America | Project descriptors and supporting copy. |
| nav | 38px | 400 | 1.31 | 0 | — | GT America | Prominent navigation labels and section links. |
| link | 21px | 200 | 1 | 0 | — | GT America | Light-weight project links and footer-style links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 10, 15, 20, 45 px.
- Section rhythm — · element gap — · card padding — · max content width —.

Use a broad, edge-to-edge canvas organized as an asymmetric two-column project grid. The first viewport gives the featured project a large visual field spanning the left side, while the adjacent project occupies a pale block on the right. Continue with alternating project blocks and generous open areas rather than forcing every item into identical cards. Align titles toward the top and compact descriptors and years near block edges. Preserve comfortable breathing room; no measured maximum width or section gap is specified.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat, with no measured shadow system or rounded card treatment. Use thin gray dividers to separate project regions. Let the 3D artwork create its own depth through lighting, perspective, and overlap rather than adding interface shadows or raised containers.

## Imagery

Large, polished 3D campaign illustrations are the defining imagery, with an isometric miniature environment in the opening project. Frame visuals as immersive project-specific scenes that can overlap their colored background fields and neighboring whitespace. Keep the art crisp and richly rendered; the saturated blues, pinks, and object colors belong to the artwork rather than the global interface.

## Components

### Project title

Set a prominent regular-weight GT America title near the top edge of its project block; use black on the pale canvas.

### Project metadata

Place a compact project descriptor and year near the lower edge of the block, separated spatially from the title.

### Project grid

Arrange projects in alternating left and right columns with varied block heights and subtle gray boundary lines.

### Featured artwork

Let a large 3D scene sit over a sky-blue project field and extend into adjacent canvas space.

### Menu toggle

Use a minimal black two-line menu mark at the top-right of the opening project area.

### Project link

Style linked project names as plain text; the first visible project title is underlined rather than presented as a button.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 15px 10px · 400 16px GT America
- **Link** (“Instagram”): transparent background · text #ffffff · radius 0px · padding 0px · 200 21px GT America
- **Navigation item** (“Commercial Work Personal Experiments Abo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px GT America

## Do

- Keep the canvas close to #f0f0f0.
- Use black, regular-weight project titles.
- Build an asymmetrical two-column project rhythm.
- Anchor years and descriptors near project edges.
- Use hairline gray dividers sparingly.
- Let commissioned 3D imagery supply vivid color.

## Don't

- Do not turn project blocks into rounded cards.
- Do not apply blue as a site-wide CTA color.
- Do not add heavy shadows or gradients to the UI.
- Do not crowd captions against project titles.
- Do not use all-caps display typography.
- Do not force artwork into uniform thumbnails.

## Agent prompt

Build a portfolio page that follows Peter Tarka’s quiet editorial style. Use Gallery Gray (#f0f0f0) as the main canvas, Carbon Ink (#000000) for titles and navigation, and Pencil Line (#d8d8d8) for restrained project dividers. Set clean sans-serif type resembling GT America, with large regular project titles and much smaller, lighter descriptors and dates. Organize projects in an asymmetric two-column grid with varied block proportions and generous whitespace. Give a featured 3D artwork room to overlap its project field; reserve Sky Field (#77c1e5) and Pale Sky (#8ed0ef) for artwork-specific backgrounds, not generic interface controls. Keep the UI flat, omit rounded cards and heavy shadows, and let carefully composed imagery provide depth and color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | A long, edge-to-edge asymmetric two-column project grid with varied block heights and open canvas. | browse project index, select project by title, scan year and discipline | oversized project names, small edge-aligned metadata, thin dividers, featured 3D artwork |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/petertarka-com