---
name: Kevin Tw
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#D93025"
  neutral: "#ECECEC"
  bg-soft: "#ECECEC"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 600
    letterSpacing: "1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A playful, hand-drawn personal portfolio site that mimics a physical notebook.

*A hand-drawn, interactive paper notebook used as a personal link-in-bio page.*

## Colors

High-contrast, monochrome sketch style with minimal, deliberate color accents.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#D93025`)** — uses `accent` token
- **Muted (`#ECECEC`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Layout is constrained by a rigid vertical stack of link elements, spaced evenly.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 50px

## Components

- **button:** Hand-drawn rectangular outlines with thick black borders and white/light gray fills, featuring a left-aligned sketchy icon and centered text.
- **card:** The entire notebook page acts as a large card with a subtle paper shadow effect.
- **chip:** None visible.
- **input:** None visible.
- **hero:** A simple layout containing a circular hand-drawn avatar and a large, bold, hand-written name.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```