# DESIGN.md — bychudy.com

## 1. Visual Theme & Atmosphere

Bychudy is an ultra-minimal Polish design portfolio that treats the screen like a blank page. The design philosophy is radical reduction: system fonts, black-and-white, uppercase micro-labels, and almost no decorative surface treatment. The atmosphere is "type-led, brutalist in its honesty." Every design decision here is an act of removal rather than addition. The site communicates confidence through what it refuses to do.

## 2. Color Palette & Roles

| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(255, 255, 255)` | Pure white — no warmth, no tint |
| Primary text | `rgb(0, 0, 0)` | Pure black — no compromise |
| H1 text | `rgb(255, 254, 252)` | Near-white — used on dark/image surfaces |
| Links (default) | `rgb(0, 0, 238)` | Browser default blue — intentionally unstyled |
| Heading on image | `rgb(236, 75, 34)` | Signal orange/red — a single expressive moment |
| Border on heading context | `rgb(207, 203, 201)` | Warm light gray |

The choice to keep browser-default link blue (`rgb(0, 0, 238)`) is a philosophical statement — this site does not style its links. Combined with pure black and white, the effect is reminiscent of early web aesthetics, but intentional rather than neglected.

## 3. Typography Rules

**Typeface**: `SF Pro Text Bold` (Apple system font) for h1, `sans-serif` generic fallback for body and links.

| Selector | Size | Weight | Notes |
|----------|------|--------|-------|
| h1 | 13px | 400 | System font at label scale — with `text-transform: uppercase` |
| body | 12px | 400 | Below standard web body size |
| a | 12px | 400 | Matches body exactly |

- **Uppercase h1 at 13px** is the defining typographic gesture: headings are not large — they are labeled.
- The use of SF Pro Text Bold but `font-weight: 400` is unusual — the "Bold" variant is baked into the font name itself.
- 12px body text is a deliberate low-information-density choice — each line carries weight.
- Line height of 15.6px on h1 creates very tight label-style spacing.
- **What's absent**: no custom web fonts, no large display sizes, no tracking adjustments, no letter-spacing artistry.

## 4. Component Stylings

- **Navigation**: transparent, black text — invisible until needed.
- **Links**: unstyled browser defaults — the site refuses to be branded at the link level.
- **Framer surfaces**: white (`rgb(255,255,255)`) and translucent white (`rgba(255,255,255,0.17)`) — overlays on image sections.
- **No border-radius tokens** — elements are either sharp or inherit browser defaults.
- **No shadows** — the entire depth model is purely planar.

## 5. Layout Principles

- Stripped to bare bones: zero margin, zero padding on structural elements.
- The layout is likely grid-based with large image areas and small label text — a classic editorial/folio pattern.
- The orange heading color (`rgb(236, 75, 34)`) appears on a specific image section, suggesting color is used contextually per project, not globally.
- The warm-gray border (`rgb(207, 203, 201)`) implies divider lines, not component borders.

## 6. Depth & Elevation

No depth mechanism detected. This site is perfectly flat. The only "elevation" is the presence/absence of image content beneath text. White translucent overlays (`rgba(255,255,255,0.17)`) suggest text panels placed over photography — transparency creates a sense of float without a shadow.

## 7. Do's and Don'ts

**Do:**
- Use uppercase 13px SF Pro Text for all label-scale headings.
- Keep body at 12px — the density is intentional.
- Leave links unstyled (browser default blue) if pursuing this aesthetic.
- Introduce color (the orange) only once, at maximum emotional impact.

**Don't:**
- Add web fonts — SF Pro Text and system sans-serif are the design.
- Add hover shadows or card depth — flatness is the statement.
- Increase font sizes — the micro-scale is part of the tension.
- Use rounded corners — sharp or default only.

## 8. Responsive Behavior

- 12–13px text is extremely small on high-DPI mobile — likely restricted to desktop-primary.
- Uppercase labels at 13px hold readability better at small sizes than mixed-case.
- The image-heavy layout requires careful cropping strategy at mobile widths.
- No explicit responsive tokens detected — breakpoints likely defined in JS/styled-components.

## 9. Agent Prompt Guide

> Build a brutalist design portfolio in the style of Bychudy: pure white background, pure black text, system font stack (SF Pro Text / sans-serif), all headings at 13px uppercase, body at 12px, no custom link styling (browser default blue), no shadows, no border-radius, no decorative treatment. One signal color (orange `rgb(236,75,34)`) used once for maximum contrast.

*Generated by Sparkbites — extracted from live CSS analysis*