# Majacerar · Design system migration spec

> Source: https://www.majacerar.design  ·  Curated by OpenDesign  ·  en

> Exceptional example of restrained portfolio design that lets work speak through generous whitespace and typographic hierarchy

## 1. Identity DNA

Majacerar operates with the precision of a gallery's curatorial framework, where each design decision serves the work above all else. Its identity DNA is one of disciplined restraint—using minimal means to create maximum impact for a portfolio of high-end brand and product design. The system itself becomes a silent partner to the featured projects, a sophisticated stage built on layout and negative space.

**One-liner:** A refined design portfolio showcasing high-end product and brand design work
**Keywords:** minimalist · editorial · professional · clean
**Analogy:** A sophisticated gallery portfolio with a focus on layout and negative space

## 2. Color

The color system is a deliberate exercise in high-contrast monochrome, using only a stark white background and deep, near-black text. This strict palette eliminates visual competition, ensuring the project imagery remains the sole carrier of chromatic information.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#111111` | body text |
| `--muted` | `#bb1111` | placeholder |
| `--line` | `rgba(17, 17, 17, 0.1)` | divider |

**Color principle:** High-contrast monochrome with strategic use of muted tones

The core principle is absolute: color is reserved for the work, not the system that presents it.

## 3. Typography

Typography carries the full weight of the system's voice, set in a clean geometric sans-serif with a consistent 400 weight. The scale prioritizes generous, tight-set display headings for project titles against a comfortable 19.2px body size, establishing a clear and professional hierarchy without resorting to weight variation.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Primary headings and project titles |
| body | 19.2px | 1.3 | 400 | 0 | Main body text and navigation |

## 4. Spacing

Rhythm is established through a consistent 48px vertical gap between major sections, creating a measured, deliberate pace for scrolling and reading.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm based on 48px gaps between major sections

## 5. Surfaces

Depth is achieved not through shadow, but through crisp division. Horizontal 1px dividers in a translucent dark tone provide the only structural separation, maintaining the system's commitment to a completely flat surface.

- **Radius:** sm 4px · md 8px · lg 64px · pill 999px
- **Borders:** 1px solid rgba(17, 17, 17, 0.1) horizontal dividers

## 6. Layout

The structural skeleton begins with a precise three-column header for navigation and biographical text. This framework then opens dramatically into single-column project sections, where generous whitespace frames each piece of work like a page in an exhibition catalog.

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

**Skeleton:** Three-column header layout, single-column project sections with generous whitespace

## 7. Motion & Interaction

Motion is treated as a functional transition rather than decoration, with all entering elements animated using a smooth 0.9-second ease-out timing. This uniform, unhurried pace reinforces the system's calm professionalism and avoids distracting from the portfolio content.

- **Durations:** micro 220ms · small 400ms · medium 900ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth 0.9s ease-out transitions for elements entering viewport

- **Hover:** Subtle cursor pointer on interactive elements
- **Click:** Immediate response with smooth transitions
- **Transition:** All properties animate with 0.9s ease-out timing
- **Keyboard:** Basic focus states assumed for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, refined, and understated—communicating information directly and without embellishment. It avoids decorative language and loud proclamation, letting the caliber of the work provide the commentary.

- **Tone:** Professional, refined, and understated
- **Headline style:** Clean, direct, and informational without embellishment
- **CTA style:** Minimal text-based links without traditional button styling
- **Avoid:** Loud colors / Complex animations / Decorative elements / Overloaded layouts

### Don'ts
- ❌ Don't use saturated colors — screenshot shows monochrome palette with white background
- ❌ Don't add drop shadows — screenshot shows completely flat design
- ❌ Don't use bold font weights — screenshot shows consistent 400 weight throughout
- ❌ Don't create dense layouts — screenshot shows generous spacing between elements
- ❌ Don't use rounded corners on main elements — screenshot shows 64px radius only on specific elements
- ❌ Don't include multiple accent colors — screenshot shows no dominant accent color

The system deliberately omits saturated colors, drop shadows, bold weights, complex animations, and decorative elements to uphold its gallery-like purity.

## System Prompt (paste into AI tool)

```
This is a refined design portfolio for Maja Cerar, a San Francisco-based designer specializing in brand identity and digital product design. The design features a monochrome palette with #ffffff background and #111111 text, using a geometric sans-serif typeface at 19.2px body size with 400 weight. Key characteristics include generous whitespace, large display typography at 56px with tight letter-spacing, and minimal visual elements. The layout uses a three-column header structure and single-column project sections with horizontal dividers. Critical design rules include avoiding saturated colors, keeping all weights at 400, maintaining large gaps (48px) between sections, and using only text-based navigation without traditional button components. The overall aesthetic is clean, professional, and gallery-like with smooth 0.9s transitions.
```