# Magdareyman · Design system migration spec

> Source: https://magdareyman.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies a premium, restrained portfolio design that uses typography and whitespace to create a strong, confident identity.

## 1. Identity DNA

The Magdareyman portfolio functions as a curated gallery, where the architecture of the space is designed to frame the work with refined, confident minimalism. It is a sophisticated bridge between branding and user interface, built on a foundation of restraint.

**One-liner:** A sophisticated design portfolio bridging branding and user interface.
**Keywords:** Designer · Portfolio · UI · Branding · Magda Reyman
**Analogy:** A curated gallery of design work presented with refined, confident minimalism.

## 2. Color

A deliberate monochromatic palette of neutral grays and deep blacks forms the visual foundation, ensuring the showcased work remains the sole focal point. This approach creates a sophisticated, focused environment.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#C0C0C0` | main background |
| `--ink` | `#282828` | body text |
| `--muted` | `#090909` | placeholder |
| `--line` | `rgba(40, 40, 40, 0.2)` | divider |

**Color principle:** Monochromatic palette using neutral grays and deep blacks to let the work speak.

The principle is one of visual deference; color exists only to support content, never to compete with it.

## 3. Typography

Typographic voice is established through a humanist sans-serif for clear UI communication and a clean transitional serif for refined display moments. This pairing creates a hierarchy that is both professional and subtly distinctive.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.15 | 400 | normal | Headings and navigation |
| body | 16px | 1.0 | 400 | normal | Base text |
| caption | 8px | 1.25 | 400 | 0.2px | Contact details |

**Type rules:**
- Use system sans-serif stack for primary UI and body text.
- Use a clean transitional serif for display and emphasis.
- Maintain tight line heights for display text.

## 4. Spacing

Generous whitespace establishes the rhythm, crafting a relaxed, editorial feel that allows the layout to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace creating a relaxed, editorial feel.

## 5. Surfaces

Surfaces are flat and defined by minimal, subtle shadows and fine, precise borders. The treatment prioritizes clarity and a sense of physical precision over depth.

- **Radius:** sm 6px · md 16px · lg 32px · pill 162px
- **Shadows:**
  - 0 4px 20px rgba(0,0,0,0.1)
- **Borders:** 1.4px solid #282828

## 6. Layout

The structural skeleton is a simple, open grid with a prominent hero area for a typographic statement. This framework is then populated with scattered project showcases, creating an engaging, non-linear browsing experience.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A simple grid layout with a prominent hero area and scattered project showcases.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose, using opacity and transform transitions to guide attention. All interactions are marked by smooth, short durations that add polish without introducing distraction.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity and transform transitions for interactive elements.

- **Hover:** Subtle color change or opacity shift.
- **Click:** Immediate response with minimal feedback.
- **Transition:** Smooth, short transitions for UI state changes.
- **Keyboard:** Standard focus indicators.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and slightly playful, expressed through large, clean typography and text-based calls to action. It communicates with precision and avoids decorative excess.

- **Tone:** Confident, minimalist, slightly playful but professional.
- **Headline style:** Large, clean serif or sans-serif with tight spacing.
- **CTA style:** Text-based links or simple pill buttons.
- **Avoid:** Overly decorative elements / Dense paragraphs / Bright, saturated colors

### Don'ts
- ❌ don't use bright, saturated colors — the screenshot shows a strictly monochromatic, gray-scale palette.
- ❌ don't use ornate display fonts — the display text uses a clean, refined transitional serif.
- ❌ don't create dense layouts — the screenshot shows generous whitespace and a relaxed, open structure.
- ❌ don't use complex shadows or gradients — the screenshot shows flat surfaces with minimal, subtle shadows.
- ❌ don't use rounded rectangles with sharp corners — the screenshot shows pill-shaped buttons and elements with high border-radius.
- ❌ don't use heavy font weights — the screenshot shows predominantly regular (400) weight typography.

The system deliberately omits bright, saturated colors and ornate display typography to maintain its focused, premium character.

## System Prompt (paste into AI tool)

```
This is a minimalist design portfolio for Magda Reyman. The design DNA features a sophisticated, monochromatic palette centered around a neutral gray background (#C0C0C0) and deep, dark gray/black text (#282828, #090909). Typography is refined, utilizing a humanist sans-serif for body text and a transitional serif for display headings, often with tight line heights and generous spacing. Layouts are open and airy, emphasizing the showcased work. Critical donts: avoid bright, saturated colors; avoid ornate or overly decorative typography; avoid dense, cluttered layouts. The overall feel is confident, premium, and focused on high-quality UI and branding work.
```