Warm Concrete
#eaeaeaPage canvas — the warm light gray that makes the whole gallery feel architectural rather than digital
Petertarka
petertarka.com
Website preview
The design language
Petertarka presents a curated gallery aesthetic: a warm light gray canvas anchors a two-column grid where every project card feels like a framed print. Typography whispers at weight 200-300 in GT America — ultra-light headlines that gain authority through restraint rather than volume, a deliberate anti-convention against the SaaS standard of bold display type. Color is monastic: the system is almost entirely achromatic, with occasional full-bleed color blocks acting as project identifiers rather than brand expression. The signature move is a colorful 3D illustration that breaks the grid by overlapping card boundaries — one moment of visual exuberance against the quiet monochrome. Sharp corners (zero border-radius), 1px hairline borders, and 45px internal padding create an editorial, almost architectural feel — more museum wall than web page.
Color palette
neutral
Bone
#f0f0f0Card surface — barely distinguishable from the canvas, creating the illusion of cards floating in space
Hairline
#d8d8d81px card borders and dividers — structural, never decorative
Obsidian
#000000All text, heading borders, and the top/bottom hairline rules that frame the page
Paper
#ffffffNav text and link borders — appears in the hamburger menu area and link underlines
Typography
Type scale
Major Second (1.125) · 16px baseheading
38px · 400 · 1The quick brown fox jumps
subheading
21px · 300 · 1.31The quick brown fox jumps
caption
16px · 400 · 2.37 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
GT America
- Weights
- 200, 300, 400
- Sizes
- 16px, 21px, 38px
- Line height
- 1.00, 1.31, 1.32, 2.37
- Fallback
- Inter (weight 200/300/400) or Söhne (weight 200/300/400) — both share GT America's geometric-humanist proportions
Sole typeface across all contexts — nav, body, cards, headings, links. Weight 200 for display headlines is the signature anti-convention: most sites use 600-700 for headlines, this whisper-weight gains authority through restraint. Weight 300 for body and UI text, weight 400 reserved for occasional emphasis.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Card padding
- 45px
- Element gap
- 10-20px
Border radius
tags
0pxcards
0pximages
0pxbuttons
0pxSpacing scale
6px10px12px15px20px45pxGuidelines
Do
- Use GT America weight 200 for all display-level text (38px). The whisper-weight is the brand voice — never substitute 400 or 500 here.
- Set card padding to exactly 45px on all four sides. This generous interior is what makes the grid feel like framed art.
- Use 0px border-radius everywhere. Sharp corners are non-negotiable — they signal editorial, architectural intent over soft SaaS convention.
- Use 1px solid #d8d8d8 for all card borders. Depth comes from hairlines, never from shadows or background contrast.
- Anchor year labels at line-height 2.37 to push them to the visual bottom of cards regardless of content height.
- Keep the system achromatic. If color appears, it is a full-bleed project card or a singular illustration — never a button, badge, or UI accent.
- Let the hamburger menu be the only navigation visible. No logos, no nav bars, no link lists in the default state.
Don’t
- Do not use bold or semibold weights (600+) anywhere — not for headings, not for CTAs, not for emphasis. Weight 200-400 is the system ceiling.
- Do not add box-shadow, drop-shadow, or any elevation effect to cards. Depth is 1px borders only.
- Do not use border-radius greater than 0px on cards, buttons, tags, or images. Sharp edges define the gallery aesthetic.
- Do not introduce a chromatic accent color for buttons, links, or interactive states. Interactive elements inherit #000000 text and #ffffff borders from the monochromatic system.
- Do not use a max-width container. The grid and its hairlines should run edge-to-edge of the viewport at all breakpoints.
- Do not add gradients to UI surfaces. The single detected gradient is a one-off content element, not a design token.
- Do not use color for status indicators (success, error, warning). The system has no semantic color vocabulary — state changes happen through weight, position, or border style only.
Components
Project Card (Neutral)
The structural unit of the gallery — a framed print for each projectBackground #f0f0f0, 1px solid #d8d8d8 border, 0px border-radius, 45px padding on all sides. Contains a category label (16px GT America 300, top-left), project name (38px GT America 200, left-aligned), and year (16px GT America 300, bottom-right, line-height 2.37 to push it to the card's lower edge). Cards butt directly against each other — the 1px borders form a continuous grid lattice.
Project Card (Color Block)
Variant where the card interior is filled with a project-specific color instead of #f0f0f0Same dimensions, padding (45px), and border (1px solid #d8d8d8) as the neutral card. Background is a solid project color (e.g. muted violet, sage green). Text remains #000000. These are the only chromatic elements in the system — each one is a one-off, not a repeating accent.
Year Label
Timestamp anchored to the bottom-right corner of each card16px GT America weight 300, #000000, line-height 2.37. The loose line-height pushes the year to the visual bottom of the 45px-padded card, creating a consistent baseline across the grid regardless of how much content the card holds.
Category Tag
Small descriptor at the top of each card (e.g. 'Print and Digital')16px GT America weight 300, #000000, no background, no border, no padding. Sits at the top-left of the card interior, aligned to the 45px padding edge.
Project Title
The name of the project — the only large text in the system38px GT America weight 200, #000000, line-height 1.00. Left-aligned within the card's 45px padding. The ultra-light weight at 38px is the signature: the type appears to hover rather than sit on the page.
Hamburger Menu
The only navigation element — minimal, almost invisibleTwo thin horizontal black lines (#000000, ~1.5px stroke) in the top-right corner of the page. No background, no border, no padding. Vertically stacked with a small gap. This is the entire navigation — no logo, no links, no visible affordance beyond the lines.
3D Illustration Overlay
Signature layout element — a full-color 3D render that breaks the gridA large, colorful 3D rendered scene (room/space with furniture, plants, objects) positioned to overlap multiple grid cards. Uses vivid pinks, oranges, yellows, greens, and teals — the only place saturated color appears in the system. Sits above the grid (z-index highest), partially obscuring card content. This is not a repeatable component — it is a one-off compositional device for the portfolio's hero moment.
Top/Bottom Page Rules
Horizontal black hairlines that frame the entire page1px solid #000000 horizontal lines running the full viewport width at the very top and very bottom of the page. The page is literally framed like a print.
Surfaces & elevation
Level 0
Warm Concrete
#eaeaeaPage canvas — the warm gray backdrop for the entire gallery
Level 1
Bone
#f0f0f0Card surface — subtle lift from canvas via 1px hairline border rather than contrast shift
Zero shadows. Depth is created exclusively through 1px hairline borders (#d8d8d8) against the canvas. Cards do not float — they are framed. This is an anti-elevation design: flat, architectural, and deliberately resistant to the Material/Fluent card-lift convention.
Layout & imagery
Layout
Full-bleed two-column grid (50/50 split) that runs the entire viewport width with no max-width constraint. Cards in adjacent columns share a 1px #d8d8d8 border that forms a continuous vertical and horizontal lattice. The grid is the primary structural device — no separate sections, no alternating bands, no distinct header/footer areas beyond the 1px black hairlines that frame the page top and bottom. A single 3D illustration overlaps the grid at the top of the page, breaking the lattice for one compositional moment. Navigation is a hamburger icon in the top-right corner. The page reads as a single continuous grid of framed projects, scrolled vertically, with no page-level section breaks.
Imagery
The site uses exactly one type of imagery: highly saturated, colorful 3D renders of interior/exterior spaces with stylized furniture, plants, and objects. These renders are the sole chromatic element in an otherwise achromatic system — they function as a counterpoint, not as decoration. Treatment: overlapping the grid (breaking card boundaries), rounded forms within the render itself but no border-radius on the render container, always positioned to span multiple grid cells. The renders are illustrative/sculptural rather than photographic — they read as designed objects, not captured moments. No photography, no flat illustration, no icons-as-imagery. The rest of the site is pure typography and white space.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #eaeaea - card surface: #f0f0f0 - border: #d8d8d8 - nav/link: #ffffff - primary action: no distinct CTA color **Example Component Prompts** 1. Create a project card: 1px solid #d8d8d8 border, #f0f0f0 background, 0px radius, 45px padding all sides. Category label at 16px GT America weight 300 #000000 at top-left. Project title at 38px GT America weight 200 #000000, line-height 1.0, left-aligned. Year label at 16px GT America weight 300 #000000 with line-height 2.37, bottom-right. 2. Create a color block project card: same dimensions and 45px padding as the neutral card, 0px radius, 1px solid #d8d8d8 border, but fill the background with a single solid project color (e.g. #7ec99a sage green or #806d80 muted violet). All text remains #000000. 3. Create a page frame: 1px solid #000000 horizontal line at the very top and very bottom of the viewport, full-bleed, no margin. The rest of the page is #eaeaea canvas with a two-column grid of bordered cards. 4. Create a hamburger menu: two 1.5px-thick #000000 horizontal lines, ~20px wide, vertically stacked with a 6px gap, positioned top-right with 20px margin. No background, no border, no label. 5. Create a type specimen: 38px GT America weight 200 #000000, line-height 1.0, letter-spacing normal. The text should appear to float — extremely thin strokes, no optical adjustment needed because GT America is already drawn for this weight.
Design Philosophy
Petertarka is a portfolio that behaves like a museum. The system is intentionally constrained: one typeface, three weights, four neutrals, zero shadows, zero radius, zero accent color. Every decision removes something. The result is not minimalism for its own sake — it is curation. The 3D illustration is the only moment the system allows itself to be loud, and that contrast is what makes the rest feel quiet. When building new pages: resist the urge to add. If a component doesn't serve the gallery metaphor (frame, print, wall, hairline, whisper), it probably doesn't belong here.
Similar brands
Pentagram
Same editorial gallery aesthetic — work presented as a grid of bordered cards, monochromatic palette, no decorative chrome, typography as the primary visual element
Tobias van Schneider
Portfolio-as-gallery pattern with generous whitespace, thin borders, and a single type family carrying the entire visual system
Instrument (instrument.com)
Full-bleed grid layouts with sharp corners, hairline dividers, and work presented as framed tiles rather than cards with shadows
DIA Studio
Ultra-light display typography (weight 200-300) and achromatic canvases that let content — illustration, photography, 3D — provide the only color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
