← Hub -- Hand-Drawn & Sketch Style Graphics
v10.0
Sketch Graphics
Brand System v10.0 -- Creative Toolkit
Hand-
Drawn &
Sketch
Style
Rough.js-powered hand-drawn graphics for GFS.
Programmatic sketch-style components, diagrams, and flowcharts using Rough.js canvas rendering with the GFS color palette.
Components Diagrams Flowcharts Guidelines
Document ID GFS-2026-SKT
Type Sketch Graphics
Status Active
Version 9.0
Date 05 / 17 / 2026
Library Rough.js v4
Render Canvas 2D
Owner Global Food Solutions, Inc.
02Sketch Style Components8 Hand-Drawn Demos / Rough.js Canvas

Each component below is rendered live on an HTML canvas using the Rough.js library. The hand-drawn aesthetic adds warmth and approachability to GFS brand materials when used in appropriate contexts.

01 / Hand-Drawn Button

const rc = rough.canvas(el); rc.rectangle(30, 12, 240, 50, { roughness: 1.5, stroke: '#092F64', fill: '#E9F5FF', fillStyle: 'hachure' }); // Add text via 2d context ctx.font = '600 16px Inter'; ctx.fillStyle = '#092F64'; ctx.textAlign = 'center'; ctx.fillText('Click Me', 150, 44);

02 / Hand-Drawn Card

rc.rectangle(15, 10, 270, 140, { roughness: 1.8, stroke: '#092F64', fill: '#E9F5FF', fillStyle: 'cross-hatch' }); rc.line(15, 50, 285, 50, { roughness: 1.5, stroke: '#468BE6' }); ctx.font = '700 14px Inter'; ctx.fillText('Card Title', 150, 36);

03 / Hand-Drawn Badge

rc.circle(150, 70, 100, { roughness: 2, stroke: '#092F64', fill: '#468BE6', fillStyle: 'hachure', fillWeight: 1.5 }); ctx.font = '700 22px Inter'; ctx.fillStyle = '#FFFFFF'; ctx.fillText('GFS', 150, 76);

04 / Hand-Drawn Chart Bars

const bars = [ { x:40, h:100, c:'#092F64' }, { x:120, h:130, c:'#468BE6' }, { x:200, h:80, c:'#93BFEF' } ]; bars.forEach(b => { rc.rectangle(b.x, 150-b.h, 60, b.h, { roughness:1.5, fill:b.c, fillStyle:'hachure' }); });

05 / Hand-Drawn Checkbox

// Unchecked rc.rectangle(30, 20, 36, 36, { roughness: 2, stroke: '#092F64' }); // Checked rc.rectangle(160, 20, 36, 36, { roughness: 2, stroke: '#092F64', fill: '#468BE6', fillStyle: 'solid' }); rc.line(168, 38, 178, 50, { stroke:'#FFF' }); rc.line(178, 50, 192, 26, { stroke:'#FFF' });

06 / Hand-Drawn Arrow

rc.line(30, 40, 240, 40, { roughness: 1.5, stroke: '#092F64', strokeWidth: 2.5 }); rc.line(220, 20, 260, 40, { roughness: 1.5, stroke: '#092F64', strokeWidth: 2.5 }); rc.line(220, 60, 260, 40, { roughness: 1.5, stroke: '#092F64', strokeWidth: 2.5 });

07 / Hand-Drawn Star

// 5-point star polygon const cx=150, cy=70, R=55, r=22; const pts = []; for(let i=0; i<5; i++){ let a1 = (i*72-90)*Math.PI/180; let a2 = ((i*72)+36-90)*Math.PI/180; pts.push([cx+R*Math.cos(a1), cy+R*Math.sin(a1)]); pts.push([cx+r*Math.cos(a2), cy+r*Math.sin(a2)]); } rc.polygon(pts, { roughness:1.5, fill:'#468BE6', stroke:'#092F64' });

08 / Hand-Drawn Divider

rc.line(20, 30, 280, 30, { roughness: 3.0, stroke: '#092F64', strokeWidth: 1.5, bowing: 2 }); // decorative dots rc.circle(150, 30, 8, { fill:'#468BE6', stroke:'#092F64', roughness: 1 });
03Sketch Style Process Diagrams3 Hand-Drawn Flowcharts / Rough.js

Hand-drawn flowcharts and process diagrams for brainstorming, whiteboard-style presentations, and informal team planning sessions. Each diagram is rendered live using Rough.js.

01 / Simple 3-Step Process

// Step boxes ['Source', 'Process', 'Deliver'].forEach((label, i) => { const x = 40 + i * 240; rc.rectangle(x, 30, 160, 70, { roughness:1.8, fill:'#E9F5FF', stroke:'#092F64' }); ctx.fillText(label, x+80, 70); if(i < 2) { rc.line(x+160, 65, x+240, 65, { roughness:1.5, stroke:'#468BE6' }); rc.line(x+225, 50, x+240, 65, { roughness:1.5, stroke:'#468BE6' }); rc.line(x+225, 80, x+240, 65, { roughness:1.5, stroke:'#468BE6' }); } });

02 / Decision Tree

// Start box -> Diamond -> Two paths rc.rectangle(260, 10, 180, 60, { roughness:1.8, fill:'#E9F5FF', stroke:'#092F64' }); // Diamond (rotated square) for decision rc.polygon([[350,100],[440,150],[350,200],[260,150]], { roughness:1.8, fill:'#468BE6', stroke:'#092F64', fillStyle:'hachure' }); // Yes path (left) + No path (right) rc.rectangle(40, 220, 160, 50, { roughness:1.8, fill:'#E9F5FF', stroke:'#092F64' }); rc.rectangle(500, 220, 160, 50, { roughness:1.8, fill:'#E9F5FF', stroke:'#092F64' });

03 / Circular Flow (4-Box Cycle)

// 4 boxes arranged in a square with curved arrows const positions = [ {x:240,y:20,label:'Plan'}, // top {x:480,y:130,label:'Build'}, // right {x:240,y:250,label:'Test'}, // bottom {x:20, y:130,label:'Ship'} // left ]; positions.forEach(p => { rc.rectangle(p.x, p.y, 160, 70, { roughness:1.8, fill:'#E9F5FF', stroke:'#092F64' }); }); // Arrows connecting in cycle...
04Usage GuideWhen to Use Sketch Style

The hand-drawn sketch style adds personality and informality to GFS communications. It signals "work in progress," creative thinking, and approachability. Use it deliberately and sparingly.

Appropriate Uses

  • Internal brainstorming presentations -- Whiteboard-style decks for team ideation sessions and strategy workshops
  • Informal team communications -- Slack graphics, internal newsletter illustrations, team update visuals
  • Early-stage concept mockups -- Wireframes and prototypes that signal "this is not final" to stakeholders
  • Fun social media content -- Casual brand moments on LinkedIn, internal Yammer posts, culture content
  • Training materials -- Onboarding visuals, how-to guides where a casual tone is appropriate

Never Use For

  • Official documents -- Contracts, invoices, purchase orders, legal correspondence
  • Customer-facing materials -- Sales proposals, formal presentations, product catalogs
  • Regulatory submissions -- USDA filings, FDA documentation, compliance reports
  • Financial reports -- Investor decks, quarterly reviews, audit materials
  • Packaging and labels -- Product packaging, shipping labels, certification marks
Implementation note. All sketch-style graphics should still use the GFS color palette (Cobalt #092F64, Tufts #468BE6, Jordy #93BFEF, Alice #E9F5FF). The hand-drawn effect comes from the rendering style, not from deviating from brand colors. Always use roughness values between 1.0 and 3.0 for consistent visual weight.
Rough.js Parameters Reference
Parameter GFS Default Description
roughness1.5How sketchy the lines appear (0 = smooth, 3 = very rough)
bowing1How much lines bow (higher = more curved)
fillStylehachureFill pattern: hachure, solid, zigzag, cross-hatch, dots
fillWeight1Thickness of fill lines
stroke#092F64Outline color (always Cobalt)
strokeWidth1.5Outline thickness in pixels
05Hand-Drawn Charts6 Chart Types / Rough.js Canvas

Data visualizations rendered with hand-drawn aesthetics. Ideal for brainstorming sessions, internal dashboards, and presentations where a polished chart feels too formal.

01 / Hand-Drawn Pie Chart

// Pie chart with 4 segments const data = [35, 25, 22, 18]; const colors = [COBALT, TUFTS, JORDY, '#C6DCEF']; let startAngle = -Math.PI / 2; data.forEach((val, i) => { const sweep = (val/100) * Math.PI * 2; rc.arc(150, 110, 160, 160, startAngle, startAngle + sweep, true, { fill: colors[i], fillStyle:'hachure', roughness:1.5 }); startAngle += sweep; });

02 / Hand-Drawn Line Chart

// Line chart with 6 data points const points = [ [40,140],[90,100],[140,120], [190,60],[240,80],[280,40] ]; // Draw axes rc.line(30,170,290,170, opts); rc.line(30,20,30,170, opts); // Draw line path for(let i=0; i<points.length-1; i++){ rc.line(...points[i],...points[i+1], { stroke:TUFTS, roughness:1.2 }); }

03 / Hand-Drawn Donut Chart

// Donut = pie with inner circle rc.arc(150,110,160,160,0,Math.PI*2, true, { fill:TUFTS, roughness:1.5 }); rc.circle(150,110,80, { fill:'#FFFFFF', stroke:COBALT, fillStyle:'solid', roughness:1 }); ctx.font = '700 24px Inter'; ctx.fillText('72%', 150, 115);

04 / Hand-Drawn Scatter Plot

// Scatter plot with random points const pts = [[60,50],[90,120],[130,80], [160,40],[200,100],[230,60],[260,130]]; rc.line(30,170,290,170, axes); rc.line(30,20,30,170, axes); pts.forEach(p => { rc.circle(p[0],p[1],14, { fill:TUFTS, stroke:COBALT, roughness:1.5 }); });

05 / Hand-Drawn Area Chart

// Filled area chart const pts = [[40,140],[90,90],[140,110], [190,50],[240,70],[280,30]]; const polygon = [...pts, [280,170],[40,170]]; rc.polygon(polygon, { fill:ALICE, stroke:TUFTS, fillStyle:'hachure', roughness:1.5 });

06 / Hand-Drawn Horizontal Bars

// Horizontal bar chart const data = [ {label:'Sales', w:220}, {label:'Ops', w:160}, {label:'R&D', w:180}, {label:'HR', w:100} ]; data.forEach((d,i) => { rc.rectangle(70, 20+i*45, d.w, 30, { fill:TUFTS, roughness:1.5 }); });
06Wireframe Mockups4 Sketch Wireframes / Rough.js

Hand-drawn wireframe mockups for early-stage design exploration. These signal "work in progress" and are intentionally rough to encourage feedback without attachment to details.

01 / Desktop Page Wireframe

02 / Mobile Screen Wireframe

03 / Dashboard Layout Wireframe

04 / Form Layout Wireframe

07Whiteboard-Style Diagrams4 Diagram Types / Rough.js

Diagrams that look like they were drawn on a whiteboard. Perfect for architecture discussions, team retrospectives, and strategy sessions.

01 / Organization Chart

02 / Mind Map

03 / Kanban Board

04 / Project Timeline

08Hand-Drawn Icon Variants20 Sketch Icons / Rough.js

Hand-drawn variants of 20 common GFS icons. These complement the precise SVG icon library with a warmer, more approachable aesthetic for informal contexts.

Home
Search
Settings
User
Mail
Phone
Calendar
Clock
Chart
Truck
Box
Document
Folder
Lock
Check
Alert
Heart
Globe
Thermometer
Snowflake
09Sketch Mode ToggleDesign System Concept

A proposed system-wide "Sketch Mode" that transforms the entire design system's visual rendering from precise to hand-drawn. Toggle between polished and sketchy with a single button.

Concept Demo: Toggle Sketch Mode
Revenue Card
$2.4M
+12.3% vs LY
Orders Card
1,847
+8.1% vs LY
Delivery Rate
98.6%
Target: 99.0%
How Sketch Mode Works
Normal Mode (Default)
  • Precise 1px borders and straight lines
  • Clean background fills with solid colors
  • Standard Inter font rendering
  • CSS Grid with exact pixel spacing
  • No canvas overlays
Sketch Mode (Toggle On)
  • Rough.js canvas overlays replace CSS borders
  • Hachure fill patterns instead of solid backgrounds
  • Slightly wavy underlines on headings
  • Hand-drawn chart sparklines appear in data cards
  • CSS filter: url(#sketchy) applies subtle distortion
Implementation status. Sketch Mode is a concept prototype. Production implementation would require a Rough.js rendering layer that intercepts CSS borders and backgrounds, replacing them with canvas-drawn equivalents. Estimated effort: 2-3 days for core engine, 1 week for full design system coverage.
10Hand-Drawn UI Components8 Sketch UI Elements / Rough.js

Full UI components rendered in sketch style. These go beyond simple shapes to create usable interface elements with hand-drawn aesthetics -- buttons, inputs, dropdowns, toggles, progress bars, tabs, tooltips, and alerts.

01 / Button Set (3 Variants)

// Primary, secondary, ghost buttons rc.rectangle(20,10,120,40, { fill:COBALT, roughness:1.8 }); rc.rectangle(160,10,120,40, { fill:ALICE, stroke:COBALT }); rc.rectangle(20,70,120,40, { stroke:COBALT, roughness:2 }); // Labels via ctx.fillText()

02 / Text Input Field

// Label + input box + placeholder ctx.font = '600 11px IBM Plex Mono'; ctx.fillText('EMAIL ADDRESS', 20, 30); rc.rectangle(15,40,270,40, { roughness:1.8, stroke:COBALT, fill:'#FFFFFF', fillStyle:'solid' }); ctx.font = '400 13px Inter'; ctx.fillStyle = '#9CA3AF'; ctx.fillText('you@company.com', 30, 65);

03 / Dropdown Select

// Closed dropdown + open state rc.rectangle(15,10,270,40, { roughness:1.8, stroke:COBALT }); // Chevron arrow rc.line(250,25,260,35, opts); rc.line(260,35,270,25, opts); // Dropdown panel rc.rectangle(15,55,270,130, { fill:ALICE, roughness:1.5 }); // 3 option rows with hover state

04 / Toggle Switch

// Off state toggle rc.rectangle(20,30,50,26, { roughness:2, stroke:COBALT }); rc.circle(34,43,18, { fill:'#FFFFFF', stroke:COBALT }); // On state toggle rc.rectangle(140,30,50,26, { roughness:2, fill:TUFTS }); rc.circle(176,43,18, { fill:'#FFFFFF', stroke:COBALT });

05 / Progress Bar

// Background track rc.rectangle(20,30,260,20, { roughness:1.5, stroke:COBALT, fill:'#E5E7EB', fillStyle:'solid' }); // Filled portion (72%) rc.rectangle(20,30,187,20, { roughness:1.5, fill:TUFTS, fillStyle:'hachure' }); ctx.fillText('72%', 150, 75);

06 / Tab Navigation

// 3 tabs, first one active ['Overview','Details','History'] .forEach((t,i) => { const x = 15 + i*95; rc.rectangle(x,10,90,36, { roughness:1.8, stroke:COBALT, fill: i===0 ? COBALT : ALICE }); }); // Content area below rc.rectangle(15,46,270,60, opts);

07 / Tooltip

// Element with tooltip above rc.rectangle(100,80,100,40, { fill:ALICE, roughness:1.8 }); // Tooltip bubble rc.rectangle(60,10,180,50, { fill:COBALT, roughness:2, fillStyle:'solid' }); // Tooltip arrow (triangle) rc.polygon([[140,60],[150,70],[160,60]], { fill:COBALT, roughness:1 });

08 / Alert Banner

// Success alert box rc.rectangle(15,15,270,80, { roughness:1.8, stroke:'#0F766E', fill:'#F0FDF4', fillStyle:'hachure' }); // Check circle icon rc.circle(40,55,20, { fill:'#0F766E', roughness:1.5 }); ctx.fillText('Order confirmed!', 70, 50);
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY