# Sketch / Hand-Drawn

> Wobbly pencil outlines, handwriting fonts, ruled notebook paper, highlighter marks and doodled arrows — UI that looks drawn by hand in class.

- Nickname: Notebook doodles
- Also called: Hand-drawn UI, Sketchy, Doodle style, Notebook UI
- Category: Organic & Natural
- Moods: Playful, Friendly, Nostalgic
- Industries: Education, Kids & Family, Creative & Portfolio, Startup & Tech, SaaS
- Style page: https://uilingo.dev/styles/sketch-hand-drawn/

Sketch style makes the interface look like it was drawn in a school notebook. Every box has a wobbly 2px graphite outline made with irregular elliptical border radii, cards sit a degree off-straight, and the page is ruled with pale blue lines and a red margin. Headlines and labels use handwriting fonts, key words get a yellow highlighter swipe, sticky notes carry quotes and calls to action, and doodles — arrows, stars, squiggles, scribbled circles — point at what matters. It feels approachable, playful and unfinished on purpose.

## Best for
- Learning platforms, tutoring and study tools
- Wireframe and brainstorming apps
- Friendly onboarding and empty states
- Indie products, personal blogs and workshops

## Avoid for
- Banking, insurance and legal products
- Luxury and premium brands
- Dense, long-session data tools

## Do
- Use irregular border-radius (e.g. 255px 15px 225px 15px / 15px 225px 15px 255px) on every outlined element
- Keep body copy in a legible handwriting face (Patrick Hand / Mali) at 17px+
- Tilt only decorative cards (±0.5–1.5°), never inputs or tables

## Don't
- Don’t mix in perfect geometric icons at heavy weights — keep strokes thin and round
- Don’t set long paragraphs in a messy script
- Avoid hard black offset shadows (that is Neubrutalism)

## Audit
Passed after 1 round · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Sketch / Hand-Drawn" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
Wobbly pencil outlines, handwriting fonts, ruled notebook paper, highlighter marks and doodled arrows — UI that looks drawn by hand in class.
Design keywords: wobbly hand-drawn borders, handwriting fonts, ruled notebook paper, red margin line, highlighter swipe, doodled arrows and stars, sticky notes, hatched pencil fills.

## Visual language
The interface looks drawn in a school notebook. The page is ruled paper (#FBF8EF with pale blue lines every 32px and a red margin line), every box is outlined with a 2px graphite pencil line whose corners wobble, decorative cards sit a degree off-straight, and headings and labels are handwritten. Ballpoint blue is the action colour, highlighter yellow marks what matters, red pen draws arrows, stars and scribbled circles. Yellow sticky notes carry quotes and calls to action. It is friendly, playful and deliberately unfinished — but tidy, never grungy.

## Signature details (must be visible)
- Wobbly outlines: border 2px solid #2A2A2E with irregular elliptical radii, e.g. 255px 15px 225px 15px / 15px 225px 15px 255px, alternated with mirrored variants so neighbouring boxes differ
- Ruled notebook background: repeating-linear-gradient(transparent 0 31px, rgba(36,87,197,.16) 31px 32px) plus a 2px rgba(217,64,47,.5) red margin line near the left edge
- Highlighter swipe behind hero headlines and active nav/tab labels: yellow #FFE36E band covering the lower ~36% of each line, slightly slanted at the ends
- Doodles as inline SVG: red-pen curved arrow next to the hero buttons, yellow-filled pencil star before eyebrows, blue wavy squiggle under section headings, red scribbled ellipse around the active tab
- Hand-drawn wavy rules (SVG path) replace straight separators: under the nav, between sections, table headers, FAQ items, tab bar top
- Tilted decorative cards (−0.8° / +0.9° alternating) with a soft pencil-shading shadow 3px 4px 0 -1px rgba(42,42,46,.16) — never a hard black offset
- Hatched pencil fills (repeating-linear-gradient 45°, 3px ink / 4px gap) for bars, progress and art panels
- Handwriting type: Kalam 700 headings, Patrick Hand 17.5px body; Thai uses Playpen Sans Thai headings and Mali body

## Design tokens — use these exact values
Colours (light mode):
  - background #FBF8EF
  - surface #FFFEF9
  - surface-2 #F3EEDD
  - text #2A2A2E
  - text-muted #5B5B62
  - primary #2457C5 (text on it #FFFFFF)
  - secondary #FFE36E (text on it #2A2A2E)
  - accent #D9402F
  - border #2A2A2E
  - success #2B8049 · warning #A96A08 · danger #C9372A
  - chart series #2457C5, #D9402F, #2B8049, #E09A12, #7A4FBF
Radius: sm 6px, md 10px, lg 14px, xl 20px, pill 999px
Border width: 2px
Shadows: sm `none`, md `3px 4px 0 -1px rgba(42, 42, 46, 0.16)`, lg `5px 7px 0 -1px rgba(42, 42, 46, 0.16)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1.05 density
Motion: 180ms cubic-bezier(.3,1.4,.5,1)

## Typography (Latin + Thai)
- Headings: Kalam 400/700 with Thai fallback Playpen Sans Thai 500/700
- Body: Patrick Hand 400 with Thai fallback Mali 400/600
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand:wght@400&family=Playpen+Sans+Thai:wght@500;700&family=Mali:wght@400;600&display=swap
- CSS stacks: heading `"Kalam", "Playpen Sans Thai", system-ui, sans-serif`; body `"Patrick Hand", "Mali", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.75rem, 6vw, 4.9rem), heading weight 700, heading tracking 0 (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Playpen Sans Thai is a casual marker hand like Kalam’s bold headlines; Mali’s neat, rounded schoolbook handwriting matches Patrick Hand’s legible print letters for body text.

## Components
- Primary button: ballpoint blue #2457C5 fill, white handwritten label, wobbly pencil outline, soft shading; hover tilts −1.5° and scales 1.03, press tilts back and shrinks
- Secondary button: paper fill with mirrored wobble; hover fills with highlighter yellow; ghost buttons get a red wavy underline
- Cards: paper #FFFEF9, wobbly 2px graphite outline, soft shading; icons sit in hand-drawn yellow or blue-tinted circles
- Inputs: wobbly outline, paper fill, textarea ruled with lines; focus = blue outline + 4px yellow highlighter glow
- Checkbox: wobbly square with a red-pen tick; radio: wobbly circle filled with a red dot
- Badges: 1.5px outline in the status colour, wobbly corners, no fill; solid badge is highlighter yellow
- Sticky notes: pull quotes and the CTA are yellow notes rotated about −1°, slightly irregular via clip-path, with a doodled star
- Tabs and segmented control: selected item marked with a highlighter swipe, a wavy line under the tab row
- Charts: 3px blue line plus red dashed line, dotted grid, hatched bars with pencil outlines, round-capped donut, irregular blob heatmap cells
- Tab bar: wavy top line, handwritten labels, active icon circled by a red scribble

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → steps → testimonials → pricing → faq → cta. Feature section as grid.
Split hero with a big handwritten headline under a yellow highlighter, short lead, blue and paper buttons and a red doodled arrow pointing back at them; the product shot is a cluster of tilted pencil-outlined cards. Sections are separated by hand-drawn wavy rules over the ruled paper: tilted feature cards, numbered steps in yellow wobbly circles, testimonials on tilted cards, pricing with a yellow highlighted plan, FAQ with wavy dividers and a sticky-note CTA with a star. Dashboards keep wobbly cards straight, a hand-drawn wavy sidebar edge and a highlighter active item.

## Content
Use realistic product copy (fictional brand) suited to: Learning platforms, tutoring and study tools. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Use irregular border-radius (e.g. 255px 15px 225px 15px / 15px 225px 15px 255px) on every outlined element
- Keep body copy in a legible handwriting face (Patrick Hand / Mali) at 17px+
- Tilt only decorative cards (±0.5–1.5°), never inputs or tables

## Don't
- Don’t mix in perfect geometric icons at heavy weights — keep strokes thin and round
- Don’t set long paragraphs in a messy script
- Avoid hard black offset shadows (that is Neubrutalism)
- Hard black offset shadows and straight thick borders (reads as Neubrutalism)
- Scanned grit, xerox noise, masking tape and torn edges (reads as Anti-Polish Raw)
- Pastel candy colours and mascot faces (reads as Kawaii)
- Perfectly straight 0px or uniform-radius boxes anywhere — every outline should wobble
- Messy script fonts for long paragraphs; tilting inputs, tables or form controls
- Heavy filled icons — keep icons thin, round-capped, pen-like

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Sketch / Hand-Drawn" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```