Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ---
- name: infographic-design
- description: Operating procedure for creating infographics with Steve Jobs–level obsession with perfection. Use when creating infographics, data visualizations, charts, or any graphic information design. Enforces tyrannical aesthetic restraint including visual entropy thresholds, divine proportion grids, restricted color palettes, Tufte-compliant data visualization, and sacred export protocols. Triggers on requests for infographics, data viz, charts, visual summaries, or any graphic presentation of information.
- ---
- # Infographic Design
- Design philosophy: ruthless reductionism and tyrannical aesthetic restraint. Make people feel the unbearable clarity of truth through design.
- ## Foundation Layer
- ### Visual Entropy
- Enforce maximum visual entropy threshold of 0.18 (Shannon information density across CIE L*a*b* color space).
- ### Grid System
- - Use rigid 8×8 or 12×12 modular grid
- - Gutters: 9–13 px
- - Baseline grid: lock to 1.414× (√2) the root body copy leading for divine proportion harmony
- ### Typography
- Single neo-grotesque superfamily only (Akzidenz-Grotesk Next Pro or Inter with manually corrected ink traps and optical sizes).
- Hierarchy is non-negotiable:
- - Headline: 96–144 pt, letterspacing -15 to -25
- - Subhead: exactly 0.618× the headline cap height
- - Body copy: never below 14 pt on final output
- ### Color Palette
- Restrict to five-hue maximum:
- - Build from single 60° analogous base hue in HSL space
- - Desaturate all non-accent elements to ≤22% saturation
- - Single accent color: exactly 100% saturation at 85+ lightness (retinal violence against monastic background)
- - Background: #FCFCFC or #0A0A0A only, no exceptions
- ### Icons
- - Draw on 64×64 px artboard
- - Stroke: 4 px
- - Corner radius: strictly 8% of bounding box
- - Export at 2× as SVG (perfect vector hinting disabled)
- ## Data Visualization Layer
- Zero chartjunk (Tufte compliance 100%).
- ### Forbidden Charts
- - Bar charts (unless converted to minimalist dot plots or small-multiples ridge plots)
- - Pie charts (immediate project termination)
- ### Allowed Visualizations
- - Area-proportional Euler diagrams
- - Isometric small-multiples
- - Horizon graphs for time series
- ### Axes
- Remove all axes unless data cannot be understood without them. When required:
- - 0.5 pt hairlines in 18% neutral gray
- - Labels: 11 pt medium
- - X-axis labels: precisely 45° rotation
- ### Scaling
- Use logarithmic scaling by default. Switch to linear only if dataset exhibits natural linear distribution (verify with Lilliefors-corrected K-S test).
- ### Positioning
- - Sub-pixel precision using constraint-based vector geometry
- - Snapping is for mortals
- - Apply universal 6° counterclockwise shear to all supporting graphical elements (proprioceptive momentum bias)
- ### Validation
- Pass the 5-meter squint test: must read as a single iconic gestalt from across the room. Iterate until your eyes bleed.
- ## Export Protocol
- ### Master File
- Maintain in Figma or Sketch with variants for light/dark at 1×, 2×, 4×.
- ### Export Formats
- - Never export PNG under any circumstances
- - WebP at 100% quality with embedded color profile (Display P3)
- - SVG fallback with inline CSS variables for theme switching
- ### Responsiveness
- - Container queries with fluid typography
- - Clamp between 16 px and 24 px using sqrt() scaling functions
- ### Final Validation
- 1. Print at exact final size on 200 gsm uncoated stock
- 2. Pin to studio wall
- 3. Stare for 72 hours
- 4. If it doesn't feel inevitable and slightly offensive in its aggressive simplicity, delete and start over
- Ship only when it hurts to look at how perfect it is.
Advertisement
Add Comment
Please, Sign In to add comment