# Forner Studio · Design system migration spec

> Source: https://forner.studio  ·  Curated by OpenDesign  ·  en

> Excellent example of refined, premium studio portfolio design that prioritizes visual presentation over UI complexity.

## 1. Identity DNA

Forner Studio's design system is constructed like a gallery: architecture that frames the work, never competes with it. Every choice—from the earthy palette to the generous spacing—exists to give product photography the silence it needs to speak. The result is a minimalist editorial platform with strong typographic presence and a calm, premium character.

**One-liner:** Refined, editorial studio portfolio with a calm, minimalist aesthetic and strong typographic presence.
**Keywords:** minimalist · editorial · product photography · premium · wellness
**Analogy:** A premium design studio portfolio focusing on clean, refined product presentation.

## 2. Color

The color system is built on a desaturated palette of warm neutrals—a deliberate absence of chromatic competition. This approach ensures the studio's product photography remains the sole focal point, with tones like warm off-white, deep ink, and muted accent providing a calm, premium backdrop.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ECECE4` | main background |
| `--bg-quiet` | `#FAF5EB` | quiet area |
| `--ink` | `#484036` | body text |
| `--ink-soft` | `#666E72` | secondary text |
| `--muted` | `#CACAB0` | placeholder |
| `--line` | `rgba(72, 64, 54, 0.15)` | divider |

**Color principle:** Earthy, desaturated warm neutrals create a calm, premium backdrop that lets photography dominate.

Color serves the content; it never initiates the conversation.

## 3. Typography

Typography is handled as two distinct voices in conversation. Geometric sans-serif handles display headlines with tight tracking for impact, while humanist sans-serif provides the legible, readable body copy. Both are set at a regular weight (400) to maintain a calm, refined feel throughout.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 45px | 1.0 | 400 | -1px | Hero headlines and large brand elements |
| heading | 29px | 1.4 | 400 | 0.5px | Section headings and titles |
| body | 28px | 1.5 | 400 | 0px | Main body text and descriptions |

**Type rules:**
- Display text uses geometric sans with tight tracking for dramatic impact
- Body text uses humanist sans for readability with generous line-height
- All text is regular weight (400) for a calm, refined feel

## 4. Spacing

Rhythm is established through generous vertical padding, creating deliberate breathing room between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding (100-300px) creates breathing room between sections

## 5. Surfaces

Surfaces are defined by restraint. The system avoids shadows entirely, opting instead for minimal, thin lines in a muted ink color to create subtle, clean division where needed.

- **Radius:** sm 4px · md 4px · lg 4px · pill 999px
- **Borders:** Minimal, using thin lines in muted ink color for subtle division

## 6. Layout

The layout skeleton is built around full-bleed photographic heroes that command the viewport. Content is centered with ample padding, and generous vertical spacing creates clear, unhurried sections.

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

**Skeleton:** Full-bleed hero images with generous vertical spacing, content centered with ample padding

## 7. Motion & Interaction

Motion philosophy prioritizes consistency and calm. All interactions—from hover states to page transitions—are standardized at 0.4 seconds, using smooth transform and opacity changes to guide attention without disruption.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transform and opacity transitions on interactive elements
  - All transitions standardized at 0.4s for consistency

- **Hover:** Subtle color or transform changes with 0.4s transition
- **Click:** Immediate visual feedback through transform
- **Transition:** All elements use consistent 0.4s transitions for smooth state changes
- **Keyboard:** Standard focus states with subtle visual indicators

## 8. Voice & Don'ts

The editorial voice is refined, understated, and premium. It communicates through large, clean typography with generous spacing and minimal, uppercase text links for calls-to-action.

- **Tone:** Refined, understated, and premium
- **Headline style:** Large, clean typography with generous spacing
- **CTA style:** Minimal, uppercase text links with subtle interactions
- **Avoid:** Loud colors / Cluttered layouts / Heavy shadows / Dense text blocks

### Don'ts
- ❌ don't use saturated accent colors — screenshot shows entirely desaturated earth tones
- ❌ don't add heavy drop shadows — screenshot shows flat, clean surfaces
- ❌ don't use decorative serifs — screenshot shows geometric and humanist sans-serif fonts
- ❌ don't create dense layouts — screenshot shows generous whitespace between elements
- ❌ don't use bright white backgrounds — screenshot shows warm off-white (#ECECE4) as primary
- ❌ don't add complex animations — screenshot shows subtle, smooth transitions

The system deliberately avoids saturated colors, heavy shadows, decorative serifs, dense text blocks, bright white backgrounds, and complex animations.

## System Prompt (paste into AI tool)

```
Forner Studio is a premium design portfolio with refined, editorial aesthetics. Key colors are earthy neutrals: warm off-white (#ECECE4), deep ink (#484036), and muted accent (#CACAB0). Typography combines geometric sans for display with humanist sans for body, all at regular weight. The layout uses full-bleed photography with generous vertical spacing (100-300px). Critical donts: avoid saturated colors, skip heavy shadows, no decorative serifs, maintain spacious layouts, never use bright white backgrounds, and keep animations subtle. The site emphasizes calm, premium product presentation through minimal UI and strong visual hierarchy.
```