# Buzzusborne · Design system migration spec

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

> This site is a great example of how personal branding can be conveyed through typography, whitespace, and a warm, conversational tone without relying on complex design elements.

## 1. Identity DNA

Buzzusborne operates on the principle of the friendly neighborhood maker—a personal workshop where digital craft is displayed with clarity and warmth. The system's DNA is built on a 'simple' and 'lovable' ethos, turning complex problems into a showcase that feels both confident and approachable.

**One-liner:** A personal maker portfolio that turns complex problems into simple, lovable products.
**Keywords:** maker · simple · lovable · portfolio
**Analogy:** A friendly neighborhood maker showcasing their digital creations.

## 2. Color

The color system establishes a clean white canvas, allowing the dark navy typography to command attention with high contrast and direct readability. This binary palette avoids clutter, creating a focused and friendly foundation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#2A394E` | body text |
| `--line` | `rgba(42, 57, 78, 1)` | divider |

**Color principle:** Clean white canvas with dark navy typography for high contrast and readability.

The governing principle is restraint: color serves communication, not decoration, ensuring the maker's work remains the primary subject.

## 3. Typography

Typographic voice is split between two clear roles: Poetsen One for bold, humanist display headlines and Roboto for clean, geometric body text. This pairing delivers a friendly feel through generous line height and avoids overly tight spacing, even at large display sizes.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 1.1 | 500 | -1px | Hero headline with large, friendly display type |
| body | 15px | 1.6 | 400 | 0px | Standard paragraph text |

**Type rules:**
- Use Roboto for body text and Poetsen One for bold display headlines.
- Keep line heights generous (1.6 for body) for readability.
- Avoid tight letter spacing on large headlines to maintain a friendly feel.

## 4. Spacing

The layout rhythm is defined by generous whitespace and substantial 150px side padding on desktop, which focuses attention on the central content column.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with 150px side padding on desktop to focus attention on central content.

## 5. Surfaces

Surface design is intentionally minimal, using soft, almost imperceptible shadows and solid 2px borders in dark navy. These elements provide just enough structure to define containers without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - 0 4px 20px rgba(42, 57, 78, 0.05)
- **Borders:** Solid 2px borders in dark navy for subtle UI elements.

## 6. Layout

The structural skeleton is a single, centered column with ample vertical spacing between sections. This clean, uncluttered framework prioritizes content flow and breathing room over complex grid systems.

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

**Skeleton:** Single-column centered layout with generous vertical spacing between sections.

## 7. Motion & Interaction

Motion philosophy prioritizes cohesion and calm, using smooth, uniform fade-in and transform transitions. All elements share a consistent 0.4-second ease-out timing, creating a polished feel without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-in and transform transitions for elements entering the viewport.

- **Hover:** Subtle opacity or color shift on interactive elements.
- **Click:** Immediate visual feedback with slight scale or color change.
- **Transition:** All elements transition smoothly (all 0.4s ease-out) for a cohesive feel.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is first-person, conversational, and confident, often punctuated with playful emojis in headlines. It avoids aggressive sales language and cold, corporate jargon in favor of clear, approachable statements.

- **Tone:** Friendly, approachable, and confident.
- **Headline style:** First-person conversational statements with playful emojis.
- **CTA style:** Clear action-oriented text on solid dark buttons.
- **Avoid:** Overly technical jargon / Aggressive sales language / Complex multi-word CTAs / Cold, corporate tone / All-caps shouting

### Don'ts
- ❌ Don't use stark, cold color palettes — screenshot shows warm white with friendly dark navy text.
- ❌ Don't use sharp, angular corners on cards — screenshot shows large 20px rounded corners.
- ❌ Don't use small, cramped typography — screenshot shows large, readable display type at 46px.
- ❌ Don't use complex, multi-column layouts — screenshot shows a clean, single-column centered design.
- ❌ Don't use dense, text-heavy sections — screenshot shows generous whitespace and breathing room.
- ❌ Don't use aggressive, corporate language — screenshot shows friendly, first-person conversational tone.

The system deliberately rejects dense text, complex layouts, and stark, cold aesthetics to maintain its core identity as a friendly maker's portfolio.

## System Prompt (paste into AI tool)

```
This is a personal portfolio site for a maker named Buzz. It positions itself as a friendly, approachable creator who turns complex problems into simple, lovable products. Key hex colors include a clean white background (#FFFFFF) and dark navy text (#2A394E). Typography categories include humanist-sans for display and geometric-sans for body, using Roboto as the primary font family. The layout is centered and spacious with generous padding. Critical donts: don't use sharp corners (use 20px radius), don't use small cramped type (use large 46px headlines), don't use cold corporate language (use friendly conversational tone). The design emphasizes whitespace, rounded elements, and playful emojis to create a warm, inviting feel.
```
