scrawl

A handmade UI design system — wobbly borders, crayon colors, sticky notes, washi tape, and doodle stickers for your website.

🔗 Quick Links

📋 Live Component Demo

Every component, every variant, live in your browser.

🎨 Live Portfolio Template

Full one-page portfolio built entirely with scrawl.

What is scrawl?

scrawl is a zero-dependency CSS + JS design system for people who want their websites to feel like they were made by hand — not generated by a template engine.

Think: zine culture, scrapbook aesthetics, indie studio energy. The kind of design that looks like someone drew it on a sticky note and taped it to a cork board.

• Wobbly borders — SVG displacement filters make every card, button, and badge look genuinely hand-drawn
• Crayon color palette — chalky, slightly warm, like real colored pencils
• Scrapbook components — sticky notes, washi tape, spiral binding, torn paper edges, cork boards, receipts, index cards
• 65+ hand-drawn icons — with semantic search (scrawl.icons.search('money'))
• SVG stickers — star, heart, flower, lightning, cloud, and more — with 3-layer crayon-fill rendering
• Zero build step — drop in two files and you're done

Install

npm

npm install scrawl-ui

import 'scrawl-ui/scrawl.css'
import 'scrawl-ui/scrawl.js'
import 'scrawl-ui/icons.js'  // optional icon pack

CDN / plain HTML

<link rel="stylesheet" href="scrawl.css">
<script src="scrawl.js" defer></script>
<script src="icons.js" defer></script>  <!-- optional -->

Usage

Cards

<div class="sw-card sw-shadow sw-wobble">
  hello, I'm a wobbly card
</div>

<!-- tilted -->
<div class="sw-card sw-shadow sw-tilt-r">
  slight right tilt
</div>

Buttons

<button class="sw-btn">default</button>
<button class="sw-btn sw-btn-pink">pink</button>
<button class="sw-btn sw-btn-filled">filled dark</button>
<button class="sw-btn sw-btn-lg sw-btn-red">big red</button>

Stickers

<span data-sticker="star"     data-color="#f7c948" data-size="3rem"></span>
<span data-sticker="heart"    data-color="#f06292" data-size="2rem"></span>
<span data-sticker="sparkles" data-color="#5b9bd5" data-size="2.5rem"></span>

Available stickers: star heart sparkles arrow flower burst wave circle check lightning pin cloud

Icons

<!-- drop-in anywhere -->
<span data-icon="instagram" data-size="1.5em" data-color="#e84c4c"></span>
<span data-icon="coffee"    data-size="2em"></span>

<!-- with wobble filter -->
<span data-icon="fire" data-size="2em" data-wobble="2"></span>

Semantic search (JS)

scrawl.icons.search('money')        // → ['dollar','coins','wallet','credit-card']
scrawl.icons.search('social photo') // → ['instagram','camera','image',...]
scrawl.icons.search('music')        // → ['music','headphones','mic','spotify',...]

Sticky Notes

<div class="sw-sticky">to-do: ship the redesign</div>
<div class="sw-sticky sw-sticky-pink sw-sticky-lined">lined pink note</div>
<div class="sw-sticky sw-sticky-blue">blue note</div>

Washi Tape

<!-- full-width tape strip -->
<div class="sw-washi sw-washi-pink sw-washi-stripes"></div>
<div class="sw-washi sw-washi-yellow sw-washi-dots"></div>

<!-- short inline label -->
<span class="sw-tape-strip sw-tape-strip-mint">new!</span>

Torn Paper Edges

<!-- torn paper at bottom of a section -->
<section class="sw-torn-bottom" style="background:#ffd6e0; padding:3rem;">
  content here
</section>

<!-- torn paper at top -->
<section class="sw-torn-top" style="background:#d8f3d8; padding:3rem;">
  content here
</section>

Spiral Binding

<!-- JS auto-injects SVG coil rings at the top -->
<div class="sw-spiral-binding sw-notebook">
  <p>March 15 — started the new design system today.</p>
  <p>Also need to water my plants.</p>
</div>

Speech Bubbles

<div class="sw-speech-bubble sw-speech-bubble-yellow">
  omg this is so cute
</div>
<div class="sw-speech-bubble sw-speech-bubble-pink sw-speech-bubble-r">
  right-side tail variant
</div>

Starburst Labels

<div class="sw-starburst">new!</div>
<div class="sw-starburst sw-starburst-lg sw-starburst-pink">best seller</div>
<div class="sw-starburst sw-starburst-xl sw-starburst-green">free ship</div>

Receipt Paper

<div class="sw-receipt">
  <div class="sw-receipt-title">SCRAWL CO.</div>
  <hr class="sw-receipt-line">
  <div class="sw-receipt-row"><span>Wobble filters</span><span>x4</span></div>
  <div class="sw-receipt-row"><span>Stickers</span><span>x11</span></div>
  <hr class="sw-receipt-line">
  <div class="sw-receipt-total"><span>TOTAL</span><span>free ✦</span></div>
</div>

Arc Text

<!-- text bent along an SVG arc path — JS-powered -->
<span
  data-arc-text="made with love ✦"
  data-arc-radius="100"
  data-arc-size="22px"
  data-arc-font="'Permanent Marker', cursive"
  data-arc-color="#e84c4c">made with love ✦</span>

Rating Badge

<div class="sw-rating"><span class="sw-rating-num">9</span><span class="sw-rating-label">fire</span></div>
<div class="sw-rating sw-rating-lg sw-rating-pink"><span class="sw-rating-num">10</span></div>

Components

| Component | Class | Notes | |-----------|-------|-------| | Card | .sw-card | Add .sw-wobble, .sw-shadow, .sw-tilt-r | | Badge | .sw-badge | 6 color variants | | Button | .sw-btn | 8 colors, 4 sizes, .sw-btn-filled | | Input | .sw-input | Wavy underline, no filter on text | | Checkbox | .sw-checkbox | Custom checkmark via SVG data-URI | | Sticky note | .sw-sticky | 6 colors, .sw-sticky-lined | | Washi tape | .sw-washi | 8 colors, 4 patterns | | Tape strip | .sw-tape-strip | Short inline label | | Spiral binding | .sw-spiral-binding | JS injects SVG coil rings | | Notebook | .sw-notebook | Blue rules + red margin line | | Cork board | .sw-corkboard | Textured board background | | Receipt | .sw-receipt | Perforated edges via CSS mask | | Index card | .sw-index-card | Ruled lines + punched hole | | Speech bubble | .sw-speech-bubble | 4 colors, left/right tail | | Starburst | .sw-starburst | 5 sizes, 5 colors, clip-path | | Stamp frame | .sw-stamp | Perforated edge mask | | Polaroid | .sw-polaroid | White frame + caption area | | Rating | .sw-rating | 3 sizes, 3 colors | | Torn edges | .sw-torn-top .sw-torn-bottom | Jagged clip-path | | Stickers | data-sticker="name" | 12 shapes, any color/size | | Icons | data-icon="name" | 65+ icons, semantic search | | Arc text | data-arc-text="..." | JS-warped SVG textPath |

Wobble Levels

<div class="sw-wobble-1">barely a whisper</div>   <!-- subtle -->
<div class="sw-wobble">standard doodle</div>       <!-- default -->
<div class="sw-wobble-3">sketchy</div>             <!-- noticeable -->
<div class="sw-wobble-4">chaos</div>               <!-- maximum -->

Each level uses a pre-blurred feTurbulence → feDisplacementMap SVG filter chain. The noise map is blurred before displacement so lines curve smoothly rather than stairstepping pixel-by-pixel.

Design Tokens

:root {
  /* Crayon palette */
  --sw-red:     #e85d4a;
  --sw-yellow:  #f7c948;
  --sw-green:   #4cb878;
  --sw-blue:    #5b9bd5;
  --sw-pink:    #f06292;
  --sw-purple:  #9c73c9;
  --sw-orange:  #f4845f;

  /* Paper */
  --sw-paper: #fef9f0;
  --sw-ink:   #2a2520;

  /* Fonts */
  --sw-font-marker: 'Permanent Marker', cursive;
  --sw-font-hand:   'Caveat', cursive;
  --sw-font-neat:   'Patrick Hand', cursive;
  /* v0.2 additions */
  /* 'Bangers' for bold display headings */
  /* 'Lilita One' for rounded bold */
}

File Structure

scrawl-ui/
├── scrawl.css      # All styles — tokens, components, animations
├── scrawl.js       # SVG filter injection, stickers, grain, spiral, arc text
├── icons.js        # 65+ icons with semantic search (optional)
├── demo.html       # Full component showcase
├── portfolio.html  # Example one-page portfolio built with scrawl
└── package.json

Fonts

scrawl uses three Google Fonts (loaded via CSS @import):

| Font | Use | |------|-----| | Permanent Marker | Section headings, labels | | Caveat | Body copy, captions, handwritten notes | | Patrick Hand | UI text, readable at small sizes | | Bangers | Bold display headings (zine/comic style) |

All fonts degrade gracefully to system cursive/sans-serif.

Browser Support

Works in all modern browsers (Chrome, Firefox, Safari, Edge). SVG filters (feTurbulence, feDisplacementMap) are supported in all of them. The perforated stamp/receipt edges use CSS mask — supported everywhere except very old Safari (falls back to flat edges, still functional).

License

MIT — use it, fork it, ship it.

scrawl — for websites that look like a human made them.