magdabutrym.com — Design System

1. Visual Theme & Atmosphere

Magda Butrym’s site embodies luxury fashion minimalism taken to its logical extreme. The palette is an extended family of warm off-whites and parchments — barely perceptible tonal shifts between surface layers — with a single deep crimson red as the only departure. Nothing competes for attention except the photography. Typography splits into two distinct voices: a refined serif for editorial content and a compact sans-serif for UI chrome, with both kept small and unobtrusive. The design philosophy is restraint as aspiration. White space is not merely present; it is the design. The absence of decorative elements, shadows, and rounded corners (the sole radius token is 9999px — exclusively for pill shapes) signals confidence that the garments carry all visual weight.

2. Color Palette & Roles

Warm off-whites (surfaces)

Grays (text hierarchy)

Accents

3. Typography Rules

Philosophy: The dual-font system enforces a strict editorial/UI split. Serif handles content and presence; sans-serif handles interaction and navigation. No font weight variation is used — every element is 400 (regular). Drama comes from size and proportion, not weight.

Absent: Bold headings, tracked uppercase, decorative ligatures.

4. Component Stylings

Navigation

• Compact sans at 13px, transparent backgrounds
• No detected hover/focus states — navigation is intentionally passive

Buttons / Pills

• Border radius: 9999px — the only radius token, meaning all interactive controls use full pills
• No interactive states captured — consistent with a minimal, near-invisible UI layer

Forms

• Inputs use Arial at system size — functional, not designed
• Labels use Times at 22px — larger than body, creating an unusual and refined hierarchy

Spacing tokens (dense and deliberate): 0px → 2px → 4px → 6px → 8px → 10px → 12px → 14px → 16px → 18px → 20px → 24px → 28px → 32px → 36px → 40px → 46px → 48px → 56px → 60px → 64px → 72px → 80px → 96px → 100px → … → 200px → 240px → 288px

A full 8px-base spacing system is available, extending to macro layout values.

5. Layout Principles

The layout uses a Next.js app with a meticulous spacing token vocabulary. Footer padding is 56px 64px 72px — generous, considered margins. Header padding is ~23px 0 — tight top rail.

Breakpoints: 375px, 400px, 420px, 540px, 739px, 740px, 800px, 999px, 1000px, 1300px — a dense responsive system suggesting pixel-perfect breakpoints at every garment gallery format change, not just standard device sizes.

Width tokens: 325px, 468px, 580px, 670px, 900px, 1440px — max-width containers mapped to content zones.

Philosophy: The grid is invisible. Content takes exactly as much space as it needs, no more.

6. Depth & Elevation

No box shadows detected. One shadow token exists in the CSS (--sy5gny10: 0px 2px 1px -1px rgba(0,0,0,.02), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)) — a Material Design elevation-1 shadow, barely perceptible, used internally but not on visible surfaces. Depth is achieved through surface color layering: the warm off-white family provides five to six barely-distinguishable tonal steps that create surface hierarchy without shadows.

7. Do’s and Don’ts

Do:

• Use the warm off-white progression for surface layering: #fcfaf7 → #f5f3ef → #efece7
• Keep all typography at weight 400 — no bold type anywhere
• Reserve #cd3105 / #c9102e exclusively for errors and alerts
• Use 9999px border radius for all interactive pill shapes
• Keep font sizes small (13–22px) — nothing competes with imagery

Don’t:

• Add decorative shadows, gradients, or texture
• Use rounded corners on cards or containers — the design is all right-angles except for pills
• Introduce any color outside the warm neutrals + red/blue pair
• Use large, bold typographic headlines
• Add hover animations — the site’s interactions are deliberately understated

8. Responsive Behavior

Breakpoints span from 375px to 1300px with ten distinct steps — unusually granular. This suggests:

• Gallery layouts reflow at each breakpoint to maintain garment proportions
• At 739px/740px there is a near-identical pair — likely a container-query or sub-layout transition
• Width tokens (580px, 670px, 900px) correspond to image-grid columns
• Transition duration: 300ms (--sy5gny2q) — smooth but not theatrical

Footer collapses from 64px horizontal padding toward minimal mobile gutters. Header remains compact across all sizes.

9. Agent Prompt Guide

Quick reference:

• Background: #fcfaf7 → #f5f3ef (layered warm parchments)
• Brand red: #cd3105
• Text: #212121 (body) / #757575 (secondary)
• Fonts: Custom serif (editorial) + Custom sans (UI) both at weight 400
• Radius: 9999px (pills only)

Prompt starters:

• “Design a fashion product card in the Magda Butrym style: warm #f5f3ef background, no shadows, right-angle corners, serif body text at 20px/27px, small sans UI labels at 13px.”
• “Build a minimal navigation bar: 13px sans-serif links, transparent background, #fcfaf7 top surface, no hover animations.”
• “Create a full-bleed editorial layout: parchment surface layers, only #cd3105 as the accent color, no decorative elements.”

Generated by Sparkbites — extracted from live CSS analysis