Peter Tarka

安静网格,鲜活三维创作Quiet grids, vivid worlds, and uncompromising 3D craft.

浅色主题个人作品集3D design portfolio homepage极简编辑式排版作品集三维插画非对称网格原网页 petertarka.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Peter Tarka 首屏

极简作品索引以大幅三维商业图像呈现视觉冲击。醒目的项目名称、小号作品信息与细微分隔线,在浅色画布上形成编辑式节奏。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

强调色
表层色
中性色
功能色
页面底色 · Gallery Gray主文字 · Carbon Ink次要文字 · Soft White描边 · Pencil Line
文字背景对比度WCAG
#000000 Carbon Ink#f0f0f0 Gallery Gray18.43:1AAA
#ffffff Soft White#f0f0f0 Gallery Gray1.14:1不达标

字体

字号阶梯:Custom(比例约 1.81,正文 21px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

GT America

网络字体 · 字重 300 / 400 / 200 · 占比 100%
免费替代:Inter

Project titles, navigation, captions, years, and links throughout the portfolio.

角色示例字号字重行高字距
一级标题
Large project title and primary portfolio heading treatment.
Peter Tarka
38px4001.310
正文
Project descriptors and supporting copy.
The quick brown fox 敏捷的狐狸
21px3001.310
导航
Prominent navigation labels and section links.
Peter Tarka
38px4001.310
链接
Light-weight project links and footer-style links.
The quick brown fox 敏捷的狐狸
21px20010

间距与布局

基准单位 1px · 密度:适中

—版块间距
—元素间距
—卡片内边距
—内容最大宽度
10px
15px
20px
45px

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.

圆角与层次

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

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

✕ 不该做

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

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Peter Tarka 设计系统 — 配色、字体与 DESIGN.md | Design DNA