Wobbly lines
Borders and shapes look drawn by hand, never perfectly straight or round.
Interfaces that keep the pencil visible. Wobbly lines, handwriting and annotations say this is an idea in progress, and they invite people to think along.
Open the kit Copy the promptConceptual sketch style borrows the look of notebooks and whiteboards. It makes digital work feel human, provisional and open to discussion.
Borders and shapes look drawn by hand, never perfectly straight or round.
Arrows, circles and handwritten notes explain the design on top of the design.
Graph paper, dot grids and off-white backgrounds recall notebooks and drafting tables.
A yellow marker stripe and blue pencil ink replace flat color fills.
Sketching is the oldest design tool. Interfaces borrow its look when they want to feel early, friendly and editable.
Leonardo da Vinci fills notebooks with sketches and mirror-written notes. The annotated drawing becomes a model for thinking on paper.
Interaction designers test interfaces with hand-drawn screens before writing code.
Balsamiq Mockups launches with deliberately hand-drawn widgets, so clients focus on structure instead of polish.
An open-source whiteboard tool with a hand-drawn look spreads quickly among developers and designers.
Product sites and explainers use sketchy illustrations and handwriting to feel approachable.
Sketch motion is drawing itself. Lines appear stroke by stroke, as if a pen is moving right now.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Startups use sketchy visuals to show ideas without overpromising polish.
Course pages and tutorials use annotations to guide attention.
Whiteboards and planning apps use a hand-drawn look to invite editing.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Paper, ink and blue pencil, with a highlighter yellow for emphasis. Red appears only for corrections and errors. Tap a swatch to copy its hex value.
:root{
--paper: #FDFCF7;
--pencil-ink: #22314F;
--blue-pencil: #2F5BD3;
--highlighter: #FFE45C;
--eraser: #F4F2E9;
--red-pen: #C23A2B;
}A hand-lettered architect's font for headings and a neat handwriting face for body, sized larger than usual for legibility.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Architects Daughter","Comic Sans MS",cursive;
--font-b: "Patrick Hand","Comic Sans MS",cursive;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(46px, 9vw, 91px);
--fs-1: 46.4px; --fs-2: 37.1px;
--fs-3: 29.7px; --fs-4: 23.8px;
--fs-body: 19px; --fs-sm: 15.2px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.15;
}
/* fonts: Architects Daughter and Patrick Hand */A visible graph-paper background doubles as the layout grid. Content still aligns cleanly to it.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Irregular border-radius values create the wobble. Shadows are flat pencil smudges.
:root {
--radius: 255px 15px 225px 15px/15px 225px 15px 255px;
--radius-sm: 15px 255px 15px 225px/225px 15px 255px 15px;
--bw: 2px;
--shadow: 4px 5px 0 rgba(34,49,79,.18);
--shadow-sm: 3px 3px 0 rgba(34,49,79,.18);
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Conceptual Sketch kit · Anti-Boring */
:root{
--bg:#FDFCF7;
--surface:#FFFFFF;
--surface2:#F4F2E9;
--fg:#22314F;
--muted:#4F5B75;
--accent:#2F5BD3;
--accent-fg:#FFFFFF;
--accent2:#FFE45C;
--accent2-fg:#22314F;
--border:#22314F;
--bw:2px;
--radius:255px 15px 225px 15px/15px 225px 15px 255px;
--radius-sm:15px 255px 15px 225px/225px 15px 255px 15px;
--shadow:4px 5px 0 rgba(34,49,79,.18);
--shadow-sm:3px 3px 0 rgba(34,49,79,.18);
--font-d:"Architects Daughter","Comic Sans MS",cursive;
--font-b:"Patrick Hand","Comic Sans MS",cursive;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.15;
--gap:24px;
--pad:24px;
--focus:rgba(255,228,92,.8);
--ok:#2E7A4A;
--warn:#9A5A00;
--danger:#C23A2B;
--info:#2F5BD3;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(to top right,transparent calc(50% - 1px),#22314F 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),#22314F 50%,transparent calc(50% + 1px)),#F4F2E9;
--code-bg:#22314F;
--code-fg:#F4F2E9;
--btn-case:none;
--btn-track:0;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:15.2px;
--fs-body:19px;
--fs-4:23.8px;
--fs-3:29.7px;
--fs-2:37.1px;
--fs-1:46.4px;
--fs-d:clamp(46px, 9vw, 91px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{font-size:1.1rem}
.btn:hover{transform:rotate(-1deg)}
.btn-ghost{border-style:dashed}
.card-media{border:2px solid var(--border)}
.badge{background:linear-gradient(transparent 40%,#FFE45C 40% 85%,transparent 85%);border:0;font-size:.95rem;font-family:var(--font-d);padding:.2em .3em}
.label{font-family:var(--font-d);font-weight:400}
.input:focus,.select:focus,.textarea:focus{background:#FFFBE0}
.switch{border-radius:999px}
.alert{border-left-width:2px;border-radius:var(--radius-sm)}
.alert b{background:linear-gradient(transparent 45%,#FFE45C 45% 90%,transparent 90%);color:var(--fg)}
.hl{background:linear-gradient(transparent 50%,#FFE45C 50% 88%,transparent 88%)}
.tab{font-family:var(--font-d)}
.tab[aria-selected="true"]{border-bottom:3px solid var(--accent);border-bottom-left-radius:40% 6px;border-bottom-right-radius:60% 4px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1F2A24;
--surface:#26332C;
--surface2:#22302A;
--fg:#EFEDE3;
--muted:#BFC7BD;
--border:#EFEDE3;
--accent:#8FB3FF;
--accent-fg:#1F2A24;
--accent2-fg:#1F2A24;
--shadow:4px 5px 0 rgba(0,0,0,.35);
--shadow-sm:3px 3px 0 rgba(0,0,0,.35);
--code-bg:#141C18;
}
html.alt .badge,html.alt .alert b{color:#1F2A24}html.alt .hl{color:#1F2A24}html.alt .sketch path,html.alt .sketch rect,html.alt .sketch circle{stroke:#EFEDE3}html.alt .sketch .blue{stroke:#8FB3FF}html.alt .sketch text{fill:#8FB3FF}html.alt .stage{background:#26332C}html.alt .input:focus,html.alt .select:focus,html.alt .textarea:focus{background:#2E3D35}html.alt body{background-image:linear-gradient(rgba(239,237,227,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(239,237,227,.06) 1px,transparent 1px)!important}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A 2026 trend: clean layouts decorated with quick hand-drawn scribbles, circles and arrows, as a human answer to polished AI output.
Clean type, then a quick circle and a rough underline make it feel made by a person.
.scrib{position:relative;display:inline-block}
.scrib svg{position:absolute;left:-6%;width:112%;pointer-events:none;overflow:visible}
.scrib .circ{top:-30%;height:160%}
.scrib .under{bottom:-.35em;height:.6em}
.scrib path{fill:none;stroke:#E4572E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
<p style="font-size:1.6rem;font-family:system-ui,sans-serif;line-height:1.5;max-width:30ch">Clean type, then a <span class="scrib">quick circle<svg class="circ" viewBox="0 0 200 60" preserveAspectRatio="none"><path d="M20 30 C 10 5, 190 0, 185 28 S 30 62, 12 30"/></svg></span> and a <span class="scrib">rough underline<svg class="under" viewBox="0 0 200 20" preserveAspectRatio="none"><path d="M4 12 C 50 4, 120 18, 196 8"/></svg></span> make it feel made by a person.</p>Keep the base layout tidy and add scribbles only to a few words. One marker colour is enough, and the strokes should look fast, never traced.
A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for an online course about product design in an authentic Conceptual Sketch style.
Palette: Paper #FDFCF7, Pencil ink #22314F, Blue pencil #2F5BD3, Highlighter #FFE45C, Eraser #F4F2E9, Red pen #C23A2B.
Typography: Architects Daughter for headings, Patrick Hand for body at 19px or larger.
Layout: Two-column hero: headline with a yellow highlighter stripe on one word, and a hand-drawn wireframe on the right with blue pencil arrows and handwritten notes. Graph paper background.
Signature details: Wobbly borders using irregular border-radius (for example 255px 15px 225px 15px / 15px 225px 15px 255px), 2px ink lines, flat pencil-smudge shadows, highlighter accents.
Components: Hand-drawn outlined buttons, wobbly inputs that highlight yellow on focus, marker badges, dashed ghost buttons, underline tabs drawn like pen strokes.
Motion: SVG strokes drawing themselves with stroke-dashoffset, staggered.
Avoid: perfect geometry, gradients, glossy effects, long paragraphs in handwriting, sketchy style on payment steps.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Script fonts slow reading. Increase size and keep paragraphs short.
For payments or legal steps, a sketchy look can reduce trust. Use it where exploration fits.
Too many arrows and notes compete with content. Annotate only what matters.
Identical radius values on every box look fake. Alternate two or three wobble shapes.