# Maciej Zadykowicz

> Maciej Zadykowicz — Style Reference

## Prompt Content

```
# Maciej Zadykowicz — Style Reference
> phòng trưng bày nửa đêm với bức tranh kính vạn hoa — một mảng tường studio gần như đen, nơi một tác phẩm typographic đầy màu sắc rực rỡ chiếm trọn sự chú ý, còn mọi thứ khác đều giữ sự yên tĩnh và có chủ đích.

**Theme:** dark

Portfolio của Maciej Zadykowicz vận hành như một studio thiết kế nửa đêm: một canvas gần như đen với slate đậm (#25262d) để một tác phẩm nghệ thuật typographic duy nhất ngoạn mục — bức tranh tường nhiều màu 'I build things' — chiếm trọn ấn tượng đầu tiên. Bên dưới hero, hệ thống rút lui vào sự kiềm chế yên tĩnh: chữ bone-white nhạt (#f2f2f3) trên card tối phẳng, typography Replica chặt chẽ, pill controls, và một màu indigo nhẹ duy nhất (#384270) dành riêng cho indicator trạng thái 'Open' live. Trang đọc như một bức tường gallery — tác phẩm CHÍNH là trang trí, vì vậy chrome được giữ nhỏ gọn, metadata được mono-typed, và điểm nhấn màu duy nhất mang ý nghĩa ngữ nghĩa (availability, live state). Mật độ thông tin cao nhưng vẫn thoáng — các project entry xếp chồng dưới dạng year/title/description/tags với padding trong 24px rộng rãi, và card radius 16px làm mềm bề mặt tối vốn khắc nghiệt.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Bone White | `#f2f2f3` | `--color-bone-white` | Primary text, nav links, button labels, footer copy — ánh sáng duy nhất trên trang, dùng cho mọi thứ cần đọc |
| Slate Dark | `#25262d` | `--color-slate-dark` | Page canvas, bề mặt nền cho tất cả card và section |
| Graphite | `#383a42` | `--color-graphite` | Elevated surface — card lồng nhau, button hover fills, secondary panels nằm trên Slate Dark |
| Fog | `#858893` | `--color-fog` | Secondary text, metadata labels, inactive nav items, mô tả nhẹ |
| Ash | `#54565f` | `--color-ash` | Tertiary text, timestamps, low-priority labels |
| Charcoal | `#0c0c0c` | `--color-charcoal` | Outlined button borders, icon strokes trên bề mặt tối |
| Indigo Dusk | `#384270` | `--color-indigo-dusk` | Điểm nhấn violet hỗ trợ cho chi tiết trang trí và emphasis tần suất thấp |

## Tokens — Typography

### Replica-Regular — Typeface chính cho mọi body text, heading, navigation và hero display. Trọng lượng duy nhất (400) là chữ ký — không bold, không light, chỉ một regular cut tự tin duy nhất. Tracking chặt -0.014em xuyên suốt tạo cho chữ hình học cảm giác hơi condensed và có chủ đích. Được dùng ở mọi kích thước từ caption 14px đến hero mural 120px+. · `--font-replica-regular`
- **Substitute:** Inter, Söhne, hoặc Suisse Int'l ở weight 400
- **Weights:** 400
- **Sizes:** 20px, 36px
- **Line height:** 1.00-1.20
- **Letter spacing:** -0.0140em
- **Vai trò:** Typeface chính cho mọi body text, heading, navigation và hero display. Trọng lượng duy nhất (400) là chữ ký — không bold, không light, chỉ một regular cut tự tin duy nhất. Tracking chặt -0.014em xuyên suốt tạo cho chữ hình học cảm giác hơi condensed và có chủ đích. Được dùng ở mọi kích thước từ caption 14px đến hero mural 120px+.

### Replica-Mono — Dành riêng cho metadata và structural labels: year markers, project tags (Art Direction, Branding, Design Systems), và các phần tử giống heading nhỏ. Tạo sự phân tách typographic rõ ràng giữa nội dung (Replica-Regular) và khung cấu trúc (Replica-Mono). · `--font-replica-mono`
- **Substitute:** JetBrains Mono, IBM Plex Mono, hoặc Geist Mono
- **Weights:** 400
- **Sizes:** 20px
- **Line height:** 1.20
- **Vai trò:** Dành riêng cho metadata và structural labels: year markers, project tags (Art Direction, Branding, Design Systems), và các phần tử giống heading nhỏ. Tạo sự phân tách typographic rõ ràng giữa nội dung (Replica-Regular) và khung cấu trúc (Replica-Mono).

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.2 | -0.014px | `--text-caption` |
| body-sm | 16px | 1.2 | -0.014px | `--text-body-sm` |
| body | 20px | 1.2 | -0.014px | `--text-body` |
| subheading | 24px | 1.2 | -0.014px | `--text-subheading` |
| heading-sm | 28px | 1.2 | -0.014px | `--text-heading-sm` |
| heading | 36px | 1.2 | -0.014px | `--text-heading` |
| display | 120px | 1 | -0.014px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 12 | 12px | `--spacing-12` |
| 24 | 24px | `--spacing-24` |
| 90 | 90px | `--spacing-90` |

### Border Radius

| Phần tử | Giá trị |
|---------|---------|
| cards | 16px |
| pills | 64px |
| images | 16px |
| buttons | 24px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Hero Typographic Mural
**Vai trò:** Trung tâm màn hình đầu — phần tử trang trí duy nhất trong hệ thống

Display text ở 120px+ bằng Replica-Regular weight 400, line-height 1.00, letter-spacing -0.014em. Các chữ cái được tô đầy bằng hình dạng hữu cơ nhiều màu (đỏ, xanh dương, vàng, xanh lá, hồng — không phải system tokens, mà là illustration art). Trải dài toàn bộ chiều rộng viewport. Đây là chữ ký thương hiệu — không phần tử nào khác trên site sử dụng màu sắc theo cách này.

### Top Navigation Bar
**Vai trò:** Navigation text-link tối giản trải dài trên cùng viewport

Phẳng, không có background bar — link nằm trực tiếp trên Slate Dark canvas. 14px Replica-Regular, letter-spacing -0.014em. Các mục phân bố: brand name bên trái, role descriptor giữa-trái, contact links (email, twitter, read.cv, so-so.eth) trải rộng bên phải. Fog (#858893) cho inactive, Bone White (#f2f2f3) cho active. Không border, không hamburger, không container.

### Bio Card
**Vai trò:** Khối giới thiệu cá nhân bên dưới hero

Bề mặt Graphite (#383a42), border-radius 16px, padding 24px tất cả các cạnh. Tiền tố 'Hello' bằng Fog (#858893) 14px Replica-Regular. Body text bằng Bone White (#f2f2f3) ở 20px Replica-Regular, line-height 1.20. Không shadow, không border. Một panel tối nhỏ gọn nổi trên canvas tối hơn.

### Availability Status Pill
**Vai trò:** Indicator 'Open' live cho thấy designer đang nhận việc

Hình pill (border-radius 64px) với fill Indigo Dusk (#384270). Chứa một chấm màu nhỏ (8px, cùng Indigo Dusk) và text 'Open' bằng Bone White ở 14px Replica-Regular. Padding 8px 16px. Nằm inline với CTA buttons dưới dạng hàng action ngang.

### CTA Pill Button
**Vai trò:** Primary call-to-action — 'Get in touch →', 'Start a project →'

Fill Graphite (#383a42), border-radius 24px (bo tròn nhẹ, không full pill). Text Bone White (#f2f2f3) ở 14-16px Replica-Regular. Padding 12px 24px. Hậu tố mũi tên (→) cùng màu. Không shadow, không border. Khi hover, bề mặt sáng lên thành #4a4c55.

### Outlined Ghost Button
**Vai trò:** Secondary action hoặc link có sự phân tách thị giác

Nền trong suốt với border 1px Charcoal (#0c0c0c). Border-radius 24px. Text Bone White. Dùng cho các hành động ít nổi bật hơn bên cạnh CTA filled.

### Section Header
**Vai trò:** Label section chính như 'Selected Projects'

36px Replica-Regular weight 400, Bone White (#f2f2f3), line-height 1.20. Không gạch chân, không trang trí — chỉ là chữ sạch sẽ nằm trên canvas. margin-top 64px rộng rãi để phân tách với section trước đó.

### Project Entry Card
**Vai trò:** Mục project riêng lẻ trong danh sách Selected Projects

Bề mặt Graphite (#383a42), border-radius 16px, padding 24px. Cấu trúc: year bằng Fog (#858893) Replica-Mono (trên-trái), tên project bằng Bone White Replica-Regular 36px (cột trái), mô tả bằng Fog 20px (cột giữa), danh sách tag bằng Replica-Mono với bullet '○' (cột phải). Tags: Art Direction, Branding, Design Systems, Product Design. Không có ảnh trong list view — visual work xuất hiện dưới dạng full-bleed embeds bên dưới.

### Project Showcase Embed
**Vai trò:** Visual project full-width — giao diện Metadrop gradient-bordered

Chiều rộng full container, border-radius 16px. Artwork project nằm trên Slate Dark canvas không khung. Thanh tiêu đề project phía trên dùng 14px Replica-Mono với category tags (COINS, NFTS) trong pill badges. Đây là nơi visual identity riêng của project phá vỡ hệ thống.

### Category Tag Pill
**Vai trò:** Badge metadata nhỏ cho phân loại project

Không fill nền, border 1px hairline bằng Fog (#858893), border-radius 64px (full pill). Text bằng Replica-Mono 14px, màu Fog. Padding 2px 12px. Cực kỳ tối giản — chỉ là border và text.

### About/Bio Text Block
**Vai trò:** Tự sự cá nhân mở rộng ở phần dưới trang

Layout hai cột bất đối xứng trên Slate Dark canvas. Tên 'Maciej' bằng 36px Bone White Replica-Regular với phát âm ('pronounced "much-yay"') bằng Fog 14px Replica-Regular căn phải. Đoạn văn body bằng Bone White 20px, line-height 1.20, max-width ~480px mỗi cột. Không có card container — text nằm trực tiếp trên canvas.

### Hairline Divider
**Vai trò:** Phân cách section

Đường 1px solid màu #2e2f37 (tông giữa canvas và card). Chiều rộng full container. Nhiễu thị giác tối thiểu — chỉ đủ để báo hiệu chuyển tiếp mà không thêm trọng lượng.

## Do's and Don'ts

### Do
- Giữ trang ở mức 1% màu sắc — chỉ hero mural và Indigo Dusk status pill mới đưa màu sắc vào
- Chỉ dùng Replica-Regular weight 400 cho nội dung; không bao giờ dùng bold, semibold, hoặc light cuts
- Áp dụng letter-spacing -0.014em cho mọi text Replica ở mọi kích thước — tracking này là bản sắc typographic
- Thể hiện elevation qua bước màu bề mặt (#25262d → #383a42 → #384270), không bao giờ dùng box-shadows
- Dùng radius 16px cho card và image, 24px cho button, 64px cho status pill và tag — ba giá trị này định nghĩa mọi bo tròn trong hệ thống
- Để project artwork và hero mural làm phần nặng về thị giác; giữ mọi chrome phẳng và yên tĩnh
- Đặt section gap là 64px và card padding là 24px — base unit 4px tạo nhịp điệu nhỏ gọn, giàu thông tin

### Don't
- Không thêm box-shadows, glows, hoặc blur effects vào bất kỳ component nào — hệ thống cố tình phẳng
- Không dùng bold hoặc semibold weights — Replica-Regular ở 400 là giọng duy nhất; hierarchy đến từ kích thước
- Không đưa thêm accent colors — Indigo Dusk (#384270) là token màu duy nhất và nó báo hiệu trạng thái live
- Không dùng white (#ffffff) làm text hoặc background — Bone White (#f2f2f3) là off-white ngăn sự khắc nghiệt trên canvas tối
- Không thêm gradient vào interface chrome — gradient chỉ thuộc về project artwork và hero mural
- Không dùng góc 0px sắc ở bất kỳ đâu — mọi bề mặt phải có ít nhất 16px radius để làm mềm canvas tối
- Không dùng generic sans-serif fallback như Helvetica hoặc Arial làm type hiển thị — luôn routing qua Inter hoặc geometric sans substitute ở weight 400

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Canvas | `#25262d` | Page background, lớp nền mọi thứ nằm trên |
| 1 | Card | `#383a42` | Elevated content containers — project cards, bio blocks, nested panels |
| 2 | Highlight | `#384270` | Status pills và active state surfaces |

## Elevation

- **Status pill (Open):** `none — phẳng, không shadow, dựa vào fill Indigo Dusk để nổi bật`
- **Project cards:** `none — bề mặt Graphite phẳng, sự phân tách đến từ bước màu không phải shadow`
- **Bio card:** `none — bề mặt phẳng, hairline 1px border tùy chọn`

## Imagery

Site tuân theo hierarchy thị giác nghiêm ngặt: hero là không gian duy nhất mà màu sắc và illustration tồn tại ở quy mô lớn, được render dưới dạng mural typographic nhiều màu khổng lồ, nơi các hình dạng hữu cơ đỏ, xanh dương, vàng, xanh lá và hồng lấp đầy các chữ cái của 'I build things'. Đây là artwork chữ ký, không phải pattern lặp lại. Project showcases bên dưới dùng full-bleed embeds của UI sản phẩm thực tế (như giao diện rainbow-gradient bordered của Metadrop) — không bao giờ stock photography, không bao giờ lifestyle imagery, không bao giờ đồ họa trang trí trừu tượng. Phần còn lại của trang là typography thuần túy trên bề mặt tối phẳng. Sự tương phản giữa hero sặc sỡ và mọi thứ khác khắc khổ là tension thị giác định nghĩa.

## Layout

Trang là một scroll duy nhất với nội dung căn giữa max-width ~1200px. Navigation là thanh text-link phẳng không có background container, các mục phân bố trên toàn bộ viewport. Hero là mural typographic khổng lồ (display text 120px+) trải dài toàn bộ chiều rộng nội dung. Bên dưới hero, layout xếp chồng nhỏ gọn: bio card, sau đó hàng action ngang gồm các pill (status + CTAs), sau đó section header 'Selected Projects', sau đó project entry cards dưới dạng hàng ngang (year | title | description | tags), sau đó full-bleed project showcase embeds. Layout xen kẽ giữa bề mặt card chứa và visual project full-width, tạo nhịp điệu metadata nén gọn theo sau là artwork mở rộng. Các section được phân cách bằng gap 64px với hairline 1px tinh tế. Không sidebar, không sticky header, không mega-menu.

## Agent Prompt Guide

**Quick Color Reference**
- text: #f2f2f3 (Bone White)
- background: #25262d (Slate Dark)
- card surface: #383a42 (Graphite)
- border: #0c0c0c (Charcoal)
- accent / live status: #384270 (Indigo Dusk)
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. Xây dựng bio card: Nền Graphite (#383a42), border-radius 16px, padding 24px. Tiền tố 'Hello' bằng Fog (#858893) 14px Replica-Regular. Body text bằng Bone White (#f2f2f3) ở 20px Replica-Regular, line-height 1.20, letter-spacing -0.014em. Không shadow, không border.

2. Xây dựng availability status pill: Fill Indigo Dusk (#384270), border-radius 64px, padding 8px 16px. Chấm nhỏ 8px cùng màu Indigo Dusk, sau đó text 'Open' bằng Bone White 14px Replica-Regular. Inline với các action buttons khác trong hàng ngang với gap 12px.

3. Xây dựng project entry card: Bề mặt Graphite (#383a42), border-radius 16px, padding 24px. Layout ngang bốn cột: year (Fog, Replica-Mono, 14px) | tên project (Bone White, Replica-Regular, 36px) | mô tả (Fog, Replica-Regular, 20px) | tags (Replica-Mono, 14px, với bullet '○', mỗi tag trong pill radius 64px với border 1px Fog). Không có ảnh trong list view này.

Không có màu primary action riêng biệt được quan sát; dùng neutral button treatments đã trích xuất thay vì phát minh màu CTA filled.

5. Xây dựng section header: 36px Replica-Regular weight 400, Bone White (#f2f2f3), line-height 1.20, letter-spacing -0.014em. margin-top 64px. Không gạch chân, không accent bar, không trang trí.

## Color Discipline

Hệ thống này được xây dựng trên sự kiềm chế màu sắc triệt để. Trang có 99% achromatic — canvas tối, text sáng, hierarchy xám. Hero mural là nơi DUY NHẤT nhiều màu sắc xuất hiện, và nó là artwork, không phải interface. Trong chính interface, màu sắc duy nhất (Indigo Dusk #384270) mang trọng lượng ngữ nghĩa: nó có nghĩa là 'live', 'available', 'active'. Không bao giờ dùng nó để trang trí, hover states, hoặc emphasis chung chung. Nếu cần thu hút sự chú ý vào thứ gì đó, hãy thay đổi kích thước, weight hoặc vị trí — không phải màu sắc.

## Similar Brands

- **Linear** — Cùng canvas tối với chromatic accent một mục đích dùng cho status/availability indicators, bề mặt phẳng không shadow, layout nhỏ gọn giàu thông tin
- **Rauno Freiberg** — Portfolio cá nhân với canvas tối đơn sắc, display type cỡ lớn làm trung tâm hero, và interface chrome cực kỳ kiềm chế bên dưới
- **Vercel** — Dark mode với canvas gần như đen, accent color duy nhất cho interactive states, bề mặt card phẳng, nhịp điệu typographic chặt chẽ
- **Read.cv** — Nền tảng portfolio với dark mode, chrome tối giản, project entry dạng card nhỏ gọn, navigation text-first
- **Pawel Huć** — Portfolio designer với hero typographic ấn tượng, nền tối, interface phẳng bên dưới, và custom geometric sans-serif xuyên suốt

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-bone-white: #f2f2f3;
  --color-slate-dark: #25262d;
  --color-graphite: #383a42;
  --color-fog: #858893;
  --color-ash: #54565f;
  --color-charcoal: #0c0c0c;
  --color-indigo-dusk: #384270;

  /* Typography — Font Families */
  --font-replica-regular: 'Replica-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-replica-mono: 'Replica-Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --tracking-caption: -0.014px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.014px;
  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.014px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.014px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.014px;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.014px;
  --text-display: 120px;
  --leading-display: 1;
  --tracking-display: -0.014px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-90: 90px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 64px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-pills: 64px;
  --radius-images: 16px;
  --radius-buttons: 24px;

  /* Surfaces */
  --surface-canvas: #25262d;
  --surface-card: #383a42;
  --surface-highlight: #384270;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-bone-white: #f2f2f3;
  --color-slate-dark: #25262d;
  --color-graphite: #383a42;
  --color-fog: #858893;
  --color-ash: #54565f;
  --color-charcoal: #0c0c0c;
  --color-indigo-dusk: #384270;

  /* Typography */
  --font-replica-regular: 'Replica-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-replica-mono: 'Replica-Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --tracking-caption: -0.014px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.014px;
  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.014px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.014px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.014px;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.014px;
  --text-display: 120px;
  --leading-display: 1;
  --tracking-display: -0.014px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-90: 90px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 64px;
}
```