# Parker Studio · Design system migration spec

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

> This site is an excellent example of a high-end creative portfolio, demonstrating how to blend playful brand elements with a refined, architectural layout to showcase diverse work effectively.

## 1. Identity DNA

Parker Studio's system operates like a modern gallery: a clean, neutral container where diverse creative work can hold its own voice. The architectural structure—high-contrast palettes, generous whitespace, and strong typographic hierarchy—provides the scaffolding, while playful accents and immersive imagery supply the character.

**One-liner:** A refined design studio portfolio balancing high-contrast imagery with elegant typography and playful accents.
**Keywords:** design studio · curated · architectural · playful · portfolio
**Analogy:** A modern gallery space showcasing diverse creative projects with distinct visual identities.

## 2. Color

The palette is defined by restraint: a distinctive soft mint and pure white provide the primary grounds, with solid black serving as the typographic ink for maximum legibility. This high-contrast foundation ensures content remains the focus, while occasional saturated accents are reserved for the work itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#B7E3B6` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#A5A5A5` | secondary text |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast palette with soft mint and pure white backgrounds, using black ink for maximum legibility.

The principle is one of focused contrast, where a limited set of backgrounds allows the full-color project imagery to command attention.

## 3. Typography

Typography serves two distinct voices. A transitional-serif carries the expressive, editorial weight of project headings, while a clean grotesque-sans handles the functional clarity of navigation and UI.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 43px | 1.09 | 400 | -0.5px | Section headings and large UI labels |
| body | 16px | 1.15 | 400 | normal | Navigation links and small UI text |

**Type rules:**
- Mix transitional-serif for project headings with a clean grotesque-sans for navigation.
- Maintain tight line heights for large display text.
- Use uppercase transforms for consistent navigation styling.

## 4. Spacing

Generous vertical spacing is the system's rhythmic core, creating openness that highlights the visual work.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing creates a sense of openness and highlights the visual work.

## 5. Surfaces

Surface treatment is minimal and purposeful. Subtle shadows are applied sparingly for depth, and borders are thin and solid, maintaining the clean, architectural lines of the layout containers.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 4px 4px rgba(0, 0, 0, 0.25)
- **Borders:** 1px solid rgba(0,0,0,1)

## 6. Layout

The layout skeleton is fundamentally editorial and asymmetric. It uses large, immersive imagery that often spans the full width, balanced by generous whitespace to create a clear, breathable visual hierarchy.

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

**Skeleton:** Asymmetric, editorial layout with large, immersive imagery and generous whitespace.

## 7. Motion & Interaction

Motion is minimal and functional, serving guidance over decoration. Consistent 0.5-second transitions on opacity and position create a smooth, predictable layer of feedback for interactive elements.

- **Durations:** micro 220ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover states.

- **Hover:** Subtle color or position shifts, primarily on text links.
- **Click:** Direct navigation or modal triggers.
- **Transition:** Consistent 0.5s transition applied across most interactive elements.
- **Keyboard:** Standard tab navigation through links and interactive areas.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and slightly playful, delivered through short, punchy headlines. Understated, functional text links handle navigation, maintaining a focus on clarity.

- **Tone:** Confident, professional, and slightly playful.
- **Headline style:** Short, punchy project titles often set in large serif type.
- **CTA style:** Understated, functional text links for navigation.
- **Avoid:** Overly decorative elements that distract from the work. / Cluttered layouts or excessive UI components. / Loud, multi-color gradients. / Heavy drop shadows on flat elements.

### Don'ts
- ❌ Don't use multiple competing background colors — screenshot shows a clean, focused use of soft mint, white, or black per section.
- ❌ Don't apply heavy drop shadows to all elements — screenshot shows them used sparingly, mainly for depth on specific objects.
- ❌ Don't center all text content — screenshot shows left-aligned navigation and headings to create a clear visual hierarchy.
- ❌ Don't use a sans-serif for all headings — screenshot distinctly uses a transitional serif for project titles like 'Architecture'.
- ❌ Don't use low-contrast text for navigation — screenshot shows high-contrast black or white text against its background.
- ❌ Don't use rounded corners universally — screenshot shows primarily sharp edges on images and layout containers.

The system deliberately avoids decorative flourishes, cluttered layouts, competing background colors, and universal application of effects like drop shadows or rounded corners.

## System Prompt (paste into AI tool)

```
Parker Studio is a refined design agency portfolio showcasing diverse, high-quality projects. The design relies on a clean palette of soft mint, pure white, and solid black, creating high contrast and readability. Typography mixes transitional-serif for expressive headings with a clean grotesque-sans for navigation and UI elements. Key hex values include #B7E3B6, #FFFFFF, and #000000. Critical design principles include generous whitespace, high-contrast text, and immersive, image-driven layouts. Important constraints: do not use multiple competing background colors, do not apply heavy drop shadows universally, and do not center all text content. The overall feel is architectural yet playful, emphasizing the quality of the showcased work.
```