Graphic Design Skill

Graphic Design Skill

Patterns for visual design, SVG creation, layout composition, typography, and brand identity.

Design Principles

Visual Hierarchy

Hierarchy Tools

• Size — Larger = more important
• Weight — Bolder = more attention
• Color — High contrast = focal point
• Position — Top/center = primary
• Whitespace — Isolation = emphasis

Balance Types

Layout & Composition

Grid Systems

┌─────┬─────┬─────┬─────┐
│  1  │  2  │  3  │  4  │   12-column grid
├─────┼─────┼─────┼─────┤   (most flexible)
│  5  │  6  │  7  │  8  │
├─────┼─────┼─────┼─────┤
│  9  │ 10  │ 11  │ 12  │
└─────┴─────┴─────┴─────┘

Golden Ratio (1:1.618)

• Use for proportions that feel "right"
• Width to height relationships
• Spacing progressions
• Element sizing

Rule of Thirds

┌─────────┬─────────┬─────────┐
│         │    ●    │         │  Place key elements
├─────────┼─────────┼─────────┤  at intersection
│    ●    │         │    ●    │  points for dynamic
├─────────┼─────────┼─────────┤  composition
│         │    ●    │         │
└─────────┴─────────┴─────────┘

Alignment Principles

Typography

Type Scale (1.25 ratio)

Font Pairing Rules

Typography Best Practices

• Line height: 1.4–1.6× font size for body
• Line length: 45–75 characters optimal
• Letter spacing: Increase for ALL CAPS
• Contrast: Dark on light or light on dark
• Hierarchy: Max 3 font sizes per design

Color Theory

Color Relationships

        Primary
           ●
          /|\
         / | \
        /  |  \
       ●───●───●
   Secondary  Tertiary

Color Schemes

Color Psychology

Contrast & Accessibility

Applying Color Theory to Mermaid Diagrams

Color theory principles translate directly to Mermaid diagram styling. The GitHub Pastel Palette v2 (defined in the markdown-mermaid skill) implements these principles:

Semantic Color Mapping (from color psychology):

Design Principles Applied:

1. Triadic harmony: Blue + Gold + Red form a balanced triad
2. Analogous groups: Green + Blue are adjacent, creating calm flow sections
3. Light fills + dark text: Ensures WCAG AA contrast (4.5:1+)
4. Neutral arrows (#57606a): Don't compete with colored nodes — visual hierarchy preserved
5. Consistent stroke family: Each color has a matching mid-tone stroke (not jarring black borders)

When to Override the Palette:

• Diagrams comparing two systems → Use just 2 contrasting colors (complementary scheme)
• Status dashboards → Green/Yellow/Red RAG mapping
• Sequential processes → Monochromatic gradient (light to dark within one hue)

SVG Design

SVG Structure

<svg viewBox="0 0 width height" xmlns="...">
  <defs>
    <!-- Reusable definitions -->
    <linearGradient id="grad1">...</linearGradient>
    <filter id="shadow">...</filter>
  </defs>

  <!-- Background layer -->
  <rect .../>

  <!-- Main content -->
  <g transform="translate(x, y)">
    <!-- Grouped elements -->
  </g>

  <!-- Foreground/overlay -->
</svg>

Common SVG Elements

SVG Path Commands

SVG Text Alignment

<!-- Horizontal alignment -->
text-anchor="start|middle|end"

<!-- Vertical alignment -->
dominant-baseline="auto|middle|central|hanging"

<!-- Centered text -->
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central">
  Perfectly Centered
</text>

SVG Gradients

<!-- Linear gradient -->
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#007ACC"/>
  <stop offset="100%" stop-color="#00a8e8"/>
</linearGradient>

<!-- Radial gradient -->
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#007ACC" stop-opacity="0.4"/>
  <stop offset="100%" stop-color="#007ACC" stop-opacity="0"/>
</radialGradient>

SVG Transforms

Banner & Marketing Design

Banner Dimensions

Banner Composition

┌─────────────────────────────────────────┐
│  ┌─────────────────────────────────┐    │
│  │         VISUAL ELEMENT          │    │  Top third: Logo/Icon
│  └─────────────────────────────────┘    │
│                                         │
│           MAIN HEADLINE                 │  Middle: Primary message
│           Subtitle Text                 │
│                                         │
│  [Badge 1]  [Badge 2]  [Badge 3]        │  Bottom third: CTAs/Details
└─────────────────────────────────────────┘

Badge/Pill Design

<!-- Rounded pill badge -->
<g>
  <rect x="-50" y="-16" width="100" height="32" rx="16"
        fill="#007ACC" opacity="0.15"/>
  <text x="0" y="0" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#94a3b8">Label</text>
</g>

Icon Design

Icon Grid

┌────────────────────┐
│ ┌──────────────┐   │  Outer: Padding zone
│ │              │   │  Inner: Safe area
│ │   CONTENT    │   │  Content: Icon artwork
│ │              │   │
│ └──────────────┘   │  Standard: 24×24, 16×16
└────────────────────┘

Icon Principles

• Simplicity — Recognize at small sizes
• Consistency — Same stroke weight, style
• Optical balance — Visually centered, not mathematically
• Metaphor — Universally understood symbols

Icon Styles

Design Systems

Spacing Scale (8px base)

Elevation/Shadow

Border Radius Scale

Illustration Principles

Universal principles for placing illustrations in any document — READMEs, docs, presentations, books.

Principle 1: Contextual Placement

An image should answer: "Why HERE?"

Place images at the exact moment they illustrate. An image that appears next to the content it depicts reinforces understanding; a decorative image placed arbitrarily adds noise.

Principle 2: Visual Variety

Readers should be surprised by each image, not numb to them.

Avoid repeating the same visual formula. Vary: composition, subject matter, perspective, color palette, and image type (diagram, screenshot, illustration, photo).

Principle 3: Narrative Function

Every illustration should serve one of these purposes:

Principle 4: Format Consistency

HTML for precise control:

<p align="center">
<img src="assets/IMAGE.png" alt="Descriptive alt text" width="60%">
</p>

Width guidelines:

Design Review Checklist

Visual Quality

• Consistent spacing throughout
• Aligned elements (check edges)
• Balanced composition
• Clear visual hierarchy
• Appropriate whitespace

Typography

• Readable font sizes
• Proper line height
• Consistent font usage
• Good contrast ratios
• Appropriate letter spacing

Color

• Consistent color palette
• Sufficient contrast
• Meaningful color use
• Works in different contexts
• Accessible (WCAG compliant)

Technical

• Optimized file size
• Correct dimensions
• Responsive/scalable
• Cross-platform compatible
• Proper naming conventions

Synapses

High-Strength Connections

• [creative-writing] (High, Complements, Bidirectional) — "Visual storytelling"
• [vscode-extension-patterns] (High, Applies, Forward) — "Extension branding and UI"

Medium-Strength Connections

• [markdown-mermaid] (Medium, Extends, Bidirectional) — "Diagram visualization"
• [cognitive-load] (Medium, Applies, Forward) — "Visual information processing"
• [ascii-art-alignment] (Medium, Complements, Bidirectional) — "Text-based visual design"

Supporting Connections

• [academic-research] (Low, Supports, Forward) — "Document visual design"
• [meditation] (Low, Uses, Forward) — "Reflective design iteration"