# Perkybros · Design system migration spec

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

> This site is a perfect example of a modern, typography-focused agency portfolio that relies on craft and restraint rather than flashy effects.

## 1. Identity DNA

Perky Bros' design system operates like a well-constructed building frame, where every element has a clear, load-bearing purpose. It establishes a modern, craft-focused identity through deliberate restraint and bold typographic choices, prioritizing clarity over ornament.

**One-liner:** A clean, typography-driven agency portfolio with a warm, neutral background.
**Keywords:** branding · design · craft · ambitious · conventions
**Analogy:** A modern, craft-focused design studio portfolio that emphasizes clarity and bold typography.

## 2. Color

The palette is a study in controlled contrast, built around a warm, off-white foundation and a deep, dark ink. This monochromatic core ensures visual focus remains on the portfolio's content and typography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F1E7` | main background |
| `--ink` | `#1E1F20` | body text |
| `--muted` | `#9E9A91` | placeholder |
| `--line` | `rgba(30,31,32,0.2)` | divider |

**Color principle:** High-contrast monochromatic core with a warm, off-white background.

Every color choice serves the principle of clarity and high contrast.

## 3. Typography

The typographic voice is split between two deliberate roles: a geometric sans-serif commands headlines with uppercase authority, while a transitional serif provides a grounded, readable presence for body copy. This dichotomy creates a clear hierarchy and a sense of editorial polish.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 500 | -0.5px | Primary navigation and project titles |
| headline | 40px | 1.2 | 400 | 0 | Main descriptive copy |
| body | 18px | 1.3 | 400 | 0 | Standard readable text |

**Type rules:**
- Headlines use a geometric sans in uppercase.
- Body text uses a transitional serif.
- Small labels use a geometric sans in uppercase.

## 4. Spacing

A consistent base-4 scaling establishes a deliberate, almost architectural rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent base-4 scaling for tight, deliberate spatial relationships.

## 5. Surfaces

Surfaces are defined by flat color and sharp, unrounded edges. Depth is conveyed through minimal 1px borders rather than shadows, maintaining a clean, constructivist aesthetic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Subtle 1px bottom borders for interactive elements and dividers.

## 6. Layout

The layout skeleton is a flexible grid that accommodates large, unstructured photographic areas, allowing visual work to dominate. Generous white space and structured containers ensure each element has room to breathe.

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

**Skeleton:** Flexible grid with large, unstructured image areas.

## 7. Motion & Interaction

Motion is a subtle craft, used to confirm interaction rather than to decorate. All transitions are smooth and deliberate, operating over a consistent 300-400ms duration.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle color and background transitions on hover.
  - Smooth border color transitions.

- **Hover:** Standard color/background transitions for links and buttons.
- **Click:** No visible custom click animations.
- **Transition:** All properties transition smoothly over 300-400ms.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct, mirroring the project's craft-oriented ethos. Communication is stripped to essentials, avoiding any decorative excess.

- **Tone:** Professional, confident, and craft-oriented.
- **Headline style:** Direct and uppercase.
- **CTA style:** Minimalist text-only.
- **Avoid:** Decorative patterns / Rounded corners / Drop shadows / Gradients / Vibrant neon colors / Dense text blocks

### Don'ts
- ❌ don't use drop shadows — screenshot shows completely flat design.
- ❌ don't use rounded corners — screenshot shows all edges are sharp.
- ❌ don't use complex gradients — screenshot shows solid, flat color fills.
- ❌ don't use dense text blocks — screenshot shows wide margins and large typography.
- ❌ don't use vibrant neon colors — screenshot shows muted earth tones and high-contrast monochrome.
- ❌ don't use generic sans-serif body text — screenshot shows a transitional serif for descriptions.

This system deliberately avoids decorative patterns, rounded corners, drop shadows, gradients, and any visual effects that would distract from the work itself.

## System Prompt (paste into AI tool)

```
Perky Bros is a branding and design agency portfolio. It uses a warm off-white background (#F5F1E7) and high-contrast dark ink (#1E1F20) for a clean, sophisticated look. The typography combines a geometric sans for uppercase headlines and navigation with a transitional serif for body copy. Layouts are spacious and grid-based, featuring large photographic content. Critical donts: 1) Do not use rounded corners; the design uses sharp, 0-radius edges. 2) Do not use drop shadows; the surfaces are completely flat. 3) Do not use complex gradients; stick to solid color fills. 4) Do not use dense text layouts; maintain generous padding and margins.
```