Rough.js Design — Organic Hand-Drawn UI & Diagramming
Rough.js brings the natural, warm, imperfect quality of human hand-drawn sketches to UI mockups, architecture diagrams, and scientific schematics, instantly eliminating the sterile, artificial "AI plastic" look.
1. Core Visual Principles
- Controlled Roughness:
roughness: 1.2–2.0 gives a lively hand-drawn feel without losing readability.bowing: 1.0–1.5 introduces subtle curved imperfections into straight lines.
- Hachure & Cross-Hatch Fills:
- Replace flat solid fills with
hachure, zigzag, cross-hatch, or dots.
- Use semi-transparent stroke colors so underlying canvas textures show through.
- Typography Pairing:
- Pair Rough.js graphics with informal/handwritten fonts: Virgil, Comic Shanns, Caveat, or clean humanistic sans like Plus Jakarta Sans.
2. Quick HTML / Canvas Implementation Template
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #faf9f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
canvas { background: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
const rc = rough.canvas(document.getElementById('canvas'));
// Hand-drawn UI card
rc.rectangle(40, 40, 520, 320, {
roughness: 1.5,
stroke: '#1e293b',
strokeWidth: 2,
fill: 'rgba(241, 245, 249, 0.5)',
fillStyle: 'cross-hatch'
});
// Header bar
rc.rectangle(60, 60, 480, 50, {
roughness: 1.2,
stroke: '#0284c7',
fill: 'rgba(186, 230, 253, 0.4)',
fillStyle: 'hachure'
});
// Status button
rc.rectangle(420, 290, 120, 40, {
roughness: 2.0,
stroke: '#059669',
fill: 'rgba(167, 243, 208, 0.6)',
fillStyle: 'solid'
});
</script>
</body>
</html>
3. When to Use Rough.js in the Software Lifecycle
- Phase 1 (Ideation & Wireframing): Create low-fidelity wireframes that invite feedback rather than premature pixel-polishing debates.
- System Architecture Explanations: Present high-level conceptual flows in documentation that look human-crafted and accessible.
- Playful / Creative Product Dashboards: Inject personality into empty states, loading screens, and onboarding walkthroughs.
1---2name: roughjs-design3description: Hand-drawn sketchy graphics and natural organic diagrams using Rough.js (rough-stuff/rough). Eliminates rigid, artificial AI plastic styling with organic human-drawn aesthetics for wireframes, charts, and diagrams.4---56# Rough.js Design — Organic Hand-Drawn UI & Diagramming78Rough.js brings the natural, warm, imperfect quality of human hand-drawn sketches to UI mockups, architecture diagrams, and scientific schematics, instantly eliminating the sterile, artificial "AI plastic" look.910---1112## 1. Core Visual Principles13141. **Controlled Roughness**:15 - `roughness: 1.2–2.0` gives a lively hand-drawn feel without losing readability.16 - `bowing: 1.0–1.5` introduces subtle curved imperfections into straight lines.172. **Hachure & Cross-Hatch Fills**:18 - Replace flat solid fills with `hachure`, `zigzag`, `cross-hatch`, or `dots`.19 - Use semi-transparent stroke colors so underlying canvas textures show through.203. **Typography Pairing**:21 - Pair Rough.js graphics with informal/handwritten fonts: *Virgil*, *Comic Shanns*, *Caveat*, or clean humanistic sans like *Plus Jakarta Sans*.2223---2425## 2. Quick HTML / Canvas Implementation Template2627```html28<!DOCTYPE html>29<html>30<head>31 <script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>32 <style>33 body { font-family: 'Plus Jakarta Sans', sans-serif; background: #faf9f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; }34 canvas { background: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }35 </style>36</head>37<body>38 <canvas id="canvas" width="600" height="400"></canvas>39 <script>40 const rc = rough.canvas(document.getElementById('canvas'));41 42 // Hand-drawn UI card43 rc.rectangle(40, 40, 520, 320, {44 roughness: 1.5,45 stroke: '#1e293b',46 strokeWidth: 2,47 fill: 'rgba(241, 245, 249, 0.5)',48 fillStyle: 'cross-hatch'49 });50 51 // Header bar52 rc.rectangle(60, 60, 480, 50, {53 roughness: 1.2,54 stroke: '#0284c7',55 fill: 'rgba(186, 230, 253, 0.4)',56 fillStyle: 'hachure'57 });58 59 // Status button60 rc.rectangle(420, 290, 120, 40, {61 roughness: 2.0,62 stroke: '#059669',63 fill: 'rgba(167, 243, 208, 0.6)',64 fillStyle: 'solid'65 });66 </script>67</body>68</html>69```7071---7273## 3. When to Use Rough.js in the Software Lifecycle7475- **Phase 1 (Ideation & Wireframing)**: Create low-fidelity wireframes that invite feedback rather than premature pixel-polishing debates.76- **System Architecture Explanations**: Present high-level conceptual flows in documentation that look human-crafted and accessible.77- **Playful / Creative Product Dashboards**: Inject personality into empty states, loading screens, and onboarding walkthroughs.
Marvin-LiJunZan