Elegant Whiteboard Sketch Diagram Style Guide

{ "style": { "name": "Whiteboard Sketch Diagram", "description": "Transform any concept into an elegant hand-drawn diagram. Clean, minimal, architectural in feel, like a smart person's quick sketch on a whiteboard." }, "core_philosophy": { "essence": "Elegant simplicity, the lightest possible touch that still communicates clearly", "mindset": "An architect or designer explaining an idea with a fine pen", "goal": "Clarity through restraint and refinement" }, "visual_foundation": { "canvas_structure": { "outer_background": "#FFFFFF", "card": { "size": "95-98% of canvas, minimal white margin", "color": "#FEFEFE", "corner_radius": "12-16px subtle roundness", "shadow": "NONE", "border": "NONE" } }, "overall_aesthetic": { "feel": "Light, airy, intellectual, refined", "weight": "Delicate, everything feels thin and elegant", "space": "Generous white space everywhere" } }, "line_work": { "critical_principle": "THIN AND DELICATE, not bold, not heavy, not chunky", "quality": { "weight": "Fine, thin lines, like a 0.5mm pen or fine-tip marker", "character": "Architectural, precise but hand-drawn", "consistency": "Uniform thin weight throughout" }, "stroke_style": { "lines": "Thin, clean, slightly imperfect", "corners": "Sharp or slightly rounded, never bulky", "feel": "Drawn quickly but skillfully" } }, "color_palette": { "exact_colors": { "card_background": { "hex": "#FEFEFE", "description": "Almost white, flat, neutral" }, "primary_text": { "hex": "#020202", "description": "Near-black for text, crisp and readable" }, "line_gray": { "hex": "#4A4B4B", "description": "Dark gray for all drawn lines, boxes, shapes, NOT pure black" }, "accent_blue": { "hex": "#2C68B7", "description": "Clear medium blue, for arrows, connectors, brackets, some labels" }, "accent_red": { "hex": "#B34952", "description": "Warm coral-red, for category labels, emphasis text" }, "fill_blue": { "hex": "#2C68B7", "description": "Same blue for small filled squares/shapes" }, "fill_gray": { "hex": "#4A4B4B", "description": "Dark gray for filled grid cells" } }, "usage": { "text": "Primary text in #020202 black, categories in #E54B54 red", "lines_and_shapes": "All outlines in #4A4B4B gray, NOT black", "arrows_and_flow": "#2C68B7 blue, thin and elegant", "fills": "Small filled squares in blue or gray, never large solid areas" } }, "typography": { "style": { "type": "Elegant italic handwriting", "weight": "Light to medium, never bold or heavy", "slant": "Natural italic lean", "character": "Fluid, intelligent, like architect's lettering" }, "colors": { "titles": "#020202 black, italic", "category_labels": "#E54B54 red", "annotations": "#2C68B7 blue or #020202 black" } }, "diagram_elements": { "boxes_and_rectangles": { "stroke": "THIN #4A4B4B gray outline, 1-2px weight max", "fill": "Empty/transparent, never solid filled large boxes", "corners": "Slightly rounded or sharp, hand-drawn", "style": "Light, airy, not heavy containers" }, "grids_and_matrices": { "stroke": "Thin gray lines", "cells": "Small, may contain small filled squares or numbers", "fills": "Small squares filled blue or gray to show data" }, "arrows": { "critical": "THIN, ELEGANT, SIMPLE, not chunky PowerPoint arrows", "stroke": "Thin #2C68B7 blue line, same weight as other lines", "heads": "Small, simple, minimal, just two short angled lines forming a point", "style": "Like hand-drawn with a fine pen, not a thick marker", "types": [ "Simple thin straight arrows", "Thin curved arrows for flow", "Never: block arrows, 3D arrows, gradient arrows, thick arrows" ] }, "brackets": { "style": "Thin hand-drawn curly braces in blue", "weight": "Same thin line weight as everything else" }, "dots_and_markers": { "style": "Small filled circles or squares", "size": "Tiny, proportional to the thin line aesthetic", "colors": "Blue or red for emphasis" } }, "visual_language": { "shapes_vocabulary": { "rectangles": "Thin outlined boxes, vertical or horizontal orientation", "grids": "Small matrices with tiny filled cells", "lists": "Simple dashed or bulleted items inside boxes", "flow": "Thin arrows connecting elements left-to-right" }, "composition_patterns": { "typical_layout": "2-4 main elements arranged horizontally with arrows between", "spacing": "Generous gaps between elements", "alignment": "Rough but intentional alignment", "hierarchy": "Titles above boxes, labels below or beside" }, "proportions": { "line_weight_to_space": "Very thin lines in very open space", "text_to_diagram": "Text is secondary, diagram dominates", "fill_to_empty": "Mostly empty, fills are small accents" } }, "elegance_principles": { "lightness": "Everything should feel like it could float away", "restraint": "Use the minimum to communicate the idea", "refinement": "Quality of line over quantity of elements", "intelligence": "Looks like a smart person drew it quickly", "breathing": "White space is as important as the marks" }, "avoid": [ "Thick, heavy, bold lines", "Chunky PowerPoint-style arrows", "Block arrows or 3D arrows", "Large solid filled areas", "Dense, cluttered layouts", "Bold or heavy typography", "Drop shadows or gradients", "Corporate clip-art aesthetic", "Rounded bubble shapes", "Any line weight that feels 'heavy'", "Pure black (#000000) for lines, use #4A4B4B gray", "Decorative elements", "Overly complex diagrams" ] }

Elegant Whiteboard Sketch Diagram Style Guide

Related media

Prompt ContentSave

Usage

References

Talk