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

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.

• 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