Sketch / Hand-Drawn

Also called: Hand-drawn UI, Sketchy, Doodle style, Notebook UI

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

“Notebook doodles”Organic & NaturalEra: 2010s–presentPlayfulFriendlyNostalgic

Open full screen ↗

sketch-hand-drawn / landingEN

sketch-hand-drawn / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md10pxRadius lg14pxRadius xl20pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

wobbly hand-drawn bordershandwriting fontsruled notebook paperred margin linehighlighter swipedoodled arrows and starssticky noteshatched pencil fills

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)

Not to be confused with

Anti-Polish / Raw Aesthetic →Anti-polish is scanned, xeroxed and taped-together with gritty texture; Sketch is a clean school notebook with tidy pencil outlines, highlighter and doodles.Neubrutalism →Neubrutalism uses straight thick black borders with hard offset shadows; Sketch borders wobble, tilt and carry no hard shadow.Kawaii / Cute →Kawaii is pastel candy with mascot faces and round bubbles; Sketch is graphite-on-paper with ballpoint blue and highlighter yellow.

On mobile

Rule the phone screen like a notebook page with a red margin, keep wobbly outlines on cards, chips and the tab bar, and circle the active tab with a red-pen scribble. Tilt only the featured index card; lists, inputs and buttons stay straight for easy tapping.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinKalam · 400/700

The quick brown fox

Heading · ThaiPlaypen Sans Thai · 500/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinPatrick Hand · 400

Clear words make shared decisions.

Body · ThaiMali · 400/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 14px · xl 20px · pill 999px`
Border	`2px`
Shadow	`3px 4px 0 -1px rgba(42, 42, 46, 0.16)`
Display	`clamp(2.75rem, 6vw, 4.9rem)`
Motion	`180ms cubic-bezier(.3,1.4,.5,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Sketch / Hand-Drawn (sketch-hand-drawn) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 14px;
  --background: #FBF8EF;
  --foreground: #2A2A2E;
  --card: #FFFEF9;
  --card-foreground: #2A2A2E;
  --popover: #FFFEF9;
  --popover-foreground: #2A2A2E;
  --primary: #2457C5;
  --primary-foreground: #FFFFFF;
  --secondary: #FFE36E;
  --secondary-foreground: #2A2A2E;
  --muted: #F3EEDD;
  --muted-foreground: #5B5B62;
  --accent: #F3EEDD;
  --accent-foreground: #2A2A2E;
  --destructive: #C9372A;
  --border: #2A2A2E;
  --input: #2A2A2E;
  --ring: #2457C5;
  --chart-1: #2457C5;
  --chart-2: #D9402F;
  --chart-3: #2B8049;
  --chart-4: #E09A12;
  --chart-5: #7A4FBF;
  --sidebar: #FFFEF9;
  --sidebar-foreground: #2A2A2E;
  --sidebar-primary: #2457C5;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3EEDD;
  --sidebar-accent-foreground: #2A2A2E;
  --sidebar-border: #2A2A2E;
  --sidebar-ring: #2457C5;
}

.dark {
  --background: #1E2A23;
  --foreground: #F2F0E6;
  --card: #25322B;
  --card-foreground: #F2F0E6;
  --popover: #25322B;
  --popover-foreground: #F2F0E6;
  --primary: #9DBEFF;
  --primary-foreground: #14213D;
  --secondary: #FFE36E;
  --secondary-foreground: #2A2A2E;
  --muted: #2C3A32;
  --muted-foreground: #BAC4B9;
  --accent: #2C3A32;
  --accent-foreground: #F2F0E6;
  --destructive: #FF8F7E;
  --border: #E8E5D8;
  --input: #E8E5D8;
  --ring: #9DBEFF;
  --chart-1: #9DBEFF;
  --chart-2: #FF8F7E;
  --chart-3: #7FD39A;
  --chart-4: #F2C14E;
  --chart-5: #C9A9FF;
  --sidebar: #25322B;
  --sidebar-foreground: #F2F0E6;
  --sidebar-primary: #9DBEFF;
  --sidebar-primary-foreground: #14213D;
  --sidebar-accent: #2C3A32;
  --sidebar-accent-foreground: #F2F0E6;
  --sidebar-border: #E8E5D8;
  --sidebar-ring: #9DBEFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Sketch / Hand-Drawn (sketch-hand-drawn) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FBF8EF;
  --color-surface: #FFFEF9;
  --color-surface-2: #F3EEDD;
  --color-text: #2A2A2E;
  --color-text-muted: #5B5B62;
  --color-primary: #2457C5;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFE36E;
  --color-on-secondary: #2A2A2E;
  --color-accent: #D9402F;
  --color-border: #2A2A2E;
  --color-success: #2B8049;
  --color-warning: #A96A08;
  --color-danger: #C9372A;
  --color-chart-1: #2457C5;
  --color-chart-2: #D9402F;
  --color-chart-3: #2B8049;
  --color-chart-4: #E09A12;
  --color-chart-5: #7A4FBF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 3px 4px 0 -1px rgba(42, 42, 46, 0.16);
  --shadow-lg: 5px 7px 0 -1px rgba(42, 42, 46, 0.16);
  --font-heading: "Kalam", "Playpen Sans Thai", system-ui, sans-serif;
  --font-body: "Patrick Hand", "Mali", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Mali", monospace;
}

.dark {
  --color-bg: #1E2A23;
  --color-surface: #25322B;
  --color-surface-2: #2C3A32;
  --color-text: #F2F0E6;
  --color-text-muted: #BAC4B9;
  --color-primary: #9DBEFF;
  --color-on-primary: #14213D;
  --color-secondary: #FFE36E;
  --color-on-secondary: #2A2A2E;
  --color-accent: #FF8F7E;
  --color-border: #E8E5D8;
  --color-success: #7FD39A;
  --color-warning: #F2C14E;
  --color-danger: #FF8F7E;
  --color-chart-1: #9DBEFF;
  --color-chart-2: #FF8F7E;
  --color-chart-3: #7FD39A;
  --color-chart-4: #F2C14E;
  --color-chart-5: #C9A9FF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Sketch / Hand-Drawn (sketch-hand-drawn). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9373
          ],
          "hex": "#fbf8ef"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9961,
            0.9765
          ],
          "hex": "#fffef9"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.8667
          ],
          "hex": "#f3eedd"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1804
          ],
          "hex": "#2a2a2e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.3569,
            0.3843
          ],
          "hex": "#5b5b62"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.3412,
            0.7725
          ],
          "hex": "#2457c5"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8902,
            0.4314
          ],
          "hex": "#ffe36e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1804
          ],
          "hex": "#2a2a2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.251,
            0.1843
          ],
          "hex": "#d9402f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1804
          ],
          "hex": "#2a2a2e"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.502,
            0.2863
          ],
          "hex": "#2b8049"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.4157,
            0.0314
          ],
          "hex": "#a96a08"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2157,
            0.1647
          ],
          "hex": "#c9372a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.3412,
            0.7725
          ],
          "hex": "#2457c5"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.251,
            0.1843
          ],
          "hex": "#d9402f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.502,
            0.2863
          ],
          "hex": "#2b8049"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6039,
            0.0706
          ],
          "hex": "#e09a12"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.3098,
            0.749
          ],
          "hex": "#7a4fbf"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.1647,
            0.1373
          ],
          "hex": "#1e2a23"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1451,
            0.1961,
            0.1686
          ],
          "hex": "#25322b"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.2275,
            0.1961
          ],
          "hex": "#2c3a32"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9412,
            0.902
          ],
          "hex": "#f2f0e6"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7294,
            0.7686,
            0.7255
          ],
          "hex": "#bac4b9"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7451,
            1
          ],
          "hex": "#9dbeff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.1294,
            0.2392
          ],
          "hex": "#14213d"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8902,
            0.4314
          ],
          "hex": "#ffe36e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1804
          ],
          "hex": "#2a2a2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5608,
            0.4941
          ],
          "hex": "#ff8f7e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.898,
            0.8471
          ],
          "hex": "#e8e5d8"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8275,
            0.6039
          ],
          "hex": "#7fd39a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7569,
            0.3059
          ],
          "hex": "#f2c14e"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5608,
            0.4941
          ],
          "hex": "#ff8f7e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7451,
            1
          ],
          "hex": "#9dbeff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5608,
            0.4941
          ],
          "hex": "#ff8f7e"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.8275,
            0.6039
          ],
          "hex": "#7fd39a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7569,
            0.3059
          ],
          "hex": "#f2c14e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6627,
            1
          ],
          "hex": "#c9a9ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.1647,
              0.1804
            ],
            "hex": "#2a2a2e",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": -1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.1647,
              0.1804
            ],
            "hex": "#2a2a2e",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 5,
            "unit": "px"
          },
          "offsetY": {
            "value": 7,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": -1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Kalam",
        "Playpen Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Patrick Hand",
        "Mali",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Mali",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      1.4,
      0.5,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!