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

# Maciej Zadykowicz · Design System

> Oversized type meets layered digital work

**Theme:** light · **Industry:** portfolio · **Source:** https://www.maciej.co/ · **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 restrained portfolio canvas lets a huge typographic statement and a vivid project montage take center stage. Compact navigation and concise introductory copy keep the page focused on the designer’s work.

## North star

Let bold typography and layered project imagery dominate a quiet neutral canvas, using orange only as a precise signal.

## Overview

The page uses a warm, pale grey canvas as a quiet stage for near-black typography and a broad, oversized headline. Die Grotesk carries the entire experience: compact, evenly distributed navigation sits above the display type, while the short introduction and project labels remain crisp and readable. A vivid orange accent marks the contact control and a text link, with additional bright colours appearing mainly within the headline artwork and project previews rather than defining the core interface palette. The composition is editorial but tightly controlled: a single horizontal header, a large typographic hero, concise supporting copy, then a full-width stack of overlapping portfolio previews. Generous visual scale contrasts with compact spacing and dense media. Softly rounded preview layers and restrained shadows create depth without adding decorative framing; the overall effect is direct, graphic, and portfolio-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f5f5f4` | `--color-gallery-white` | surface | Measured light canvas and card surface; the screenshot reads as a closely related warm grey behind the page. |
| Display Ink | `#1e1e1e` | `--color-display-ink` | brand | Primary heading and body text, providing strong contrast against the pale canvas. |
| Stone Grey | `#cbcbc9` | `--color-stone-grey` | surface | Muted section and heading surface tone; supports the screenshot’s softly grey hero field. |
| Carbon | `#191919` | `--color-carbon` | neutral | Dark navigation and inverse surface tone, echoing the headline’s dominant black lettering. |
| Haze Grey | `#d1d1d0` | `--color-haze-grey` | surface | Secondary section band tone, subtly distinct from the main canvas. |
| Signal Orange | `#ff4f00` | `--color-signal-orange` | accent | Contact and navigation accent, intro link, and a bright detail in the oversized headline artwork. |
| Ash Type | `#9d9d9c` | `--color-ash-type` | neutral | Minor muted heading tone; keep secondary to the near-black text. |
| Pale Slate | `#d6d6d5` | `--color-pale-slate` | surface | Occasional light section variation, not a dominant brand colour. |

### Semantic aliases

`--color-canvas` → `#f5f5f4` (Gallery White) · `--color-surface` → `#cbcbc9` (Stone Grey) · `--color-surface-2` → `#d1d1d0` (Haze Grey) · `--color-surface-3` → `#191919` (Carbon) · `--color-text` → `#191919` (Carbon) · `--color-accent` → `#ff4f00` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191919` | `#f5f5f4` | 16.12:1 | AAA |
| `#191919` | `#cbcbc9` | 10.82:1 | AAA |
| `#191919` | `#d1d1d0` | 11.51:1 | AAA |
| `#ff4f00` | `#f5f5f4` | 3.02:1 | AA-large |
| `#ff4f00` | `#cbcbc9` | 2.03:1 | fail |
| `#ff4f00` | `#d1d1d0` | 2.16:1 | fail |
| `#ff4f00` | `#191919` | 5.33:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Die Grotesk | `--font-body` | webfont | 500, 700 | All page typography, from compact navigation and body copy to the oversized display headline. | DM Sans |

- **Die Grotesk:** Measured weights 500 and 700; use bold, enormous display lettering and medium-weight supporting text, with neutral tracking and no forced uppercase.

### Type scale — Custom (ratio ≈ 3.041, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 185px | 700 | normal | 0 | — | Die Grotesk | Oversized opening statement spanning the hero width. |
| h1 | 32px | 700 | 1.1 | 0 | — | Die Grotesk | Primary page heading and prominent section titles. |
| body | 20px | 500 | 1.25 | 0 | — | Die Grotesk | Introductory copy and project descriptions. |
| caption | 16px | 500 | 1.2 | 0 | — | Die Grotesk | Compact project labels and supporting metadata. |
| nav | 20px | 500 | 1.25 | 0 | — | Die Grotesk | Header identity, role, location, and contact control. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 10, 20, 40, 80 px.
- Section rhythm 40px · element gap 4px · card padding 40px · max content width 1400px.

A compact horizontal header distributes the designer name, role, site label, local time, and contact action across the top. The hero aligns to a wide, centered page frame, with a headline spanning nearly the full viewport before the supporting label and introduction form a two-column row. Portfolio media then expands into a full-bleed, tightly stacked composition. The measured page max width is 1400px. The overall rhythm pairs compact gaps with distinct section breaks; the visual density comes from layered project previews rather than crowded text.

## Shape & elevation

- Radius: card `20px` · media `5px` · xs `5px` · sm `20px`
- Shadow `hairline` (card, media): `rgba(0, 0, 0, 0.2) 0px 0px 0.5px 0.5px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 3px 6px 0px`
- Motion: standard transition `0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The page is largely flat, with no heavy panel borders. Portfolio sheets gain depth from overlap, pale surfaces, softly rounded corners, and subtle measured hairline-to-medium shadows. Keep the background calm and let stacked media provide the strongest sense of elevation.

## Imagery

The hero’s oversized lettering incorporates vivid cropped colour details, while the main visual is a dense montage of web and product interface previews. Project sheets overlap in successive horizontal layers, with tab-like project names and small interface details visible within each. The screenshot shows portfolio mockups, not photography or video; colour inside these previews should remain artwork rather than becoming interface palette.

## Components

### Top navigation

A single-line header distributes identity, designer role, site label, local time, and a contact action; labels use medium-weight Die Grotesk.

### Contact action

A compact, pill-like contact control sits at the top right, with a plus symbol and orange used as a restrained accent elsewhere.

### Display headline

A very large, bold typographic statement spans almost the full viewport and includes vivid colour details within the letterforms.

### Introductory copy

A short selected-work prompt sits opposite a concise founder-focused statement, ending with an orange text link.

### Layered project showcase

Full-width portfolio previews stack like overlapping sheets, each with a prominent project label and visible interface imagery.

### Measured component styles

- **Primary button** (“Contact”): transparent background · text #000000 · radius 0px · padding 0px 12px 0px 16px · 500 20px Die Grotesk
- **Card** (“Scope I was the principal designer for t”): background #f5f5f4 · text #000000 · radius 20px · padding 40px · 500 20px Die Grotesk
- **Navigation item** (“Maciej Zadykowicz Designer “Website” 10:”): transparent background · text #000000 · radius 0px · padding 0px · 500 20px Die Grotesk

## Do

- Use a warm pale-grey canvas and near-black type as the foundation.
- Make the opening statement oversized and visually dominant.
- Keep navigation compact and distributed across one horizontal row.
- Reserve orange for concise calls to action and selected emphasis.
- Present portfolio work as overlapping, full-width visual layers.
- Use Die Grotesk or a close geometric sans-serif substitute.

## Don't

- Do not turn project-artwork colours into the general interface palette.
- Do not add gradients or decorative colour fields.
- Do not crowd the hero with lengthy explanatory copy.
- Do not use heavy borders or deep, dramatic shadows.
- Do not make the navigation compete with the headline.
- Do not replace the layered project montage with generic stock photography.

## Agent prompt

Build a portfolio page in the style of Maciej Zadykowicz: editorial, typography-led, and focused on layered digital work. Use Gallery White (#f5f5f4) as the calm canvas with Display Ink (#1e1e1e) and Carbon (#191919) for high-contrast text. Apply Signal Orange (#ff4f00) sparingly to links and contact cues; keep Stone Grey (#cbcbc9), Haze Grey (#d1d1d0), Ash Type (#9d9d9c), and Pale Slate (#d6d6d5) as subtle surface variations. Set all text in Die Grotesk or DM Sans, with a huge bold opening statement, compact medium-weight navigation, and concise supporting copy. Place the intro in a two-column row, then let overlapping, softly rounded portfolio previews fill the width. Keep ornament, borders, and shadows restrained; preserve generous visual scale with compact spacing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact horizontal header above a full-width display headline, two-column intro, and layered project previews. | Contact shortcut, Selected-work prompt, Introductory link | Oversized typography, Distributed navigation, Overlapping project sheets, Orange accent |

## Source CSS custom properties (selected)

```css
--background: hsl(50, 5%, 96%);
--primary: hsla(0, 0%, 0%, 0.88);
--secondary: hsla(0, 0%, 0%, 0.56);
--accent: #FF3800;
--accentP3: color(display-p3 0.991 0.3736 0.109);
--foreground: hsl(0, 0%, 99%);
--gap: 4px;
--radius-card: 20px;
--radius-image: 5px;
--elevation-low: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05);
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

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