CURATED · OPEN · FREE

Kevin Tw

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

PlayfulPortfolioExpressiveMobile UI

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://kevin.tw

📦 Browse pack contents →

Identity DNA

hand-drawnnotebooksketchypersonalplayful

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

Color

#D93025Accent

#000000Ink

#FFFFFFBG

#ECECECBG soft

rgba(0,0,0,1.0)Line

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

Typography

humanist-sans

display50px · 700
body20px · 600

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

100px

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

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 50px

2px solid black with slightly irregular, hand-drawn styling.

0px 2px 9px 0px rgba(82, 79, 79, 0.15) · 15px 15px 33px 0px rgba(27, 27, 27, 0.1)

Layout

1280container

1columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions on hover for the interactive link buttons.

Subtle visual feedback on the hand-drawn link buttons, likely a slight color change or translation. · Standard link navigation behavior.

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.

Voice & Don'ts

Tone Playful, personal, and approachable.
Headlines Bold, hand-written, and expressive.
CTAs Casual and conversational, presented as simple links.

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.
Avoid: Formal corporate language
Avoid: Overly complex UI patterns
Avoid: Strict grid layouts

Inside the pack — real screenshots

Kevin Tw — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko