# Kevin Tw · Design system migration spec

> Source: https://kevin.tw  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a skeuomorphic, hand-drawn UI that uses deliberate imperfection to create a highly personal and memorable brand identity.

## 1. Identity DNA

Kevin Tw treats its interface as a living artifact rather than a static layout. The system is built on the analogy of a hand-drawn, interactive paper notebook—a personal link-in-bio page where every element carries the slight wobble and tactile weight of a sketch.

**One-liner:** A playful, hand-drawn personal portfolio site that mimics a physical notebook.
**Keywords:** hand-drawn · notebook · sketchy · personal · playful
**Analogy:** A hand-drawn, interactive paper notebook used as a personal link-in-bio page.

## 2. Color

The color system is deliberately restrained, operating almost entirely in a high-contrast monochrome of pure black and white. Small, intentional accents of a single primary color are reserved for moments of emphasis, ensuring the visual language remains focused and graphic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#ECECEC` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#ECECEC` | placeholder |
| `--accent` | `#D93025` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast, monochrome sketch style with minimal, deliberate color accents.

The core principle is that color should feel like a deliberate, singular mark on a page rather than a decorative scheme.

## 3. Typography

Typographic voice is constructed from standard system fonts, but their character is transformed through extreme weight and expansive tracking to mimic the bold, unapologetic strokes of a thick marker. The scale serves two primary functions: a large, expressive name display and clearly legible link text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 700 | 1px | Name display |
| body | 20px | 1.5 | 600 | 1px | Link text |

**Type rules:**
- Text uses standard system fonts but styled with heavy tracking and weights to mimic bold marker strokes.

## 4. Spacing

Spacing follows a simple, rigid vertical rhythm, creating an evenly stacked column that mirrors the linear structure of a notepad.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 100 px
- **Rhythm:** Layout is constrained by a rigid vertical stack of link elements, spaced evenly.

## 5. Surfaces

Depth is achieved not through bevels or complex effects, but through subtle, layered shadows that lift the 'notebook page' card from its background. Borders are rendered as 2px solid lines with an intentionally irregular, hand-drawn character.

- **Radius:** sm 4px · md 8px · lg 12px · pill 50px
- **Shadows:**
  - 0px 2px 9px 0px rgba(82, 79, 79, 0.15)
  - 15px 15px 33px 0px rgba(27, 27, 27, 0.1)
- **Borders:** 2px solid black with slightly irregular, hand-drawn styling.

## 6. Layout

The layout skeleton is a single centered vertical column of interactive elements, positioned on a background that evokes a sheet of lined paper. This structure prioritizes clarity and directness, rejecting complex grids in favor of a focused, linear flow.

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

**Skeleton:** A single centered vertical column of interactive elements, offset on a background that resembles a sheet of lined paper.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional assistance. Smooth CSS transitions on hover and state changes provide subtle feedback, allowing the sketchy visual style itself to remain the primary communicative focus.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on hover for the interactive link buttons.

- **Hover:** Subtle visual feedback on the hand-drawn link buttons, likely a slight color change or translation.
- **Click:** Standard link navigation behavior.
- **Transition:** CSS transitions applied to most elements for smooth state changes.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

Editorial voice is playful, personal, and approachable, with headlines that are bold and expressive. The tone is set by casual, conversational calls to action presented as simple links, avoiding formal corporate language.

- **Tone:** Playful, personal, and approachable.
- **Headline style:** Bold, hand-written, and expressive.
- **CTA style:** Casual and conversational, presented as simple links.
- **Avoid:** Formal corporate language / Overly complex UI patterns / Strict grid layouts

### Don'ts
- ❌ Don't use perfectly straight, geometric lines — the screenshot shows slightly wobbly, hand-drawn borders.
- ❌ Don't use corporate, polished typography — the screenshot shows bold, hand-written style headers.
- ❌ Don't use a complex color palette — the screenshot is primarily monochrome with minimal red/blue accents.
- ❌ Don't use heavy, realistic drop shadows — the screenshot shows a subtle paper lift effect.
- ❌ Don't use standard, uniform icons — the screenshot features custom, sketchy, hand-drawn icons.
- ❌ Don't use standard rounded UI components — the screenshot shows irregular, sketched rectangles.

The system deliberately avoids polished corporate UI, geometric perfection, and complex visual effects to preserve the authenticity of its hand-drawn, notebook aesthetic.

## System Prompt (paste into AI tool)

```
This is a playful personal portfolio site that uses a hand-drawn notebook aesthetic. The design relies on a strict monochrome palette with a bright white background (#FFFFFF) and deep black ink (#000000), accented by a single touch of red (#D93025) for the flag icon. Typography is bold and humanist-sans, using heavy weights and wide letter-spacing to mimic a thick marker. The layout is a simple, centered vertical column of sketchy link buttons. Key constraints: Avoid straight geometric lines in favor of slightly wobbly, hand-drawn borders; avoid polished, corporate UI elements; avoid complex color gradients; avoid realistic 3D effects in favor of subtle paper shadows; avoid perfectly uniform icons; avoid formal, rigid grid layouts.
```