Illustrative Symbol System

Illustrative symbols are larger pictograms for technical concepts. They are not small UI icons and must not be designed by simply scaling icons up.

Purpose

Use symbols for larger conceptual communication:

feature blocks
hero graphics
onboarding
empty states
documentation illustrations
technical product storytelling

A symbol explains a concept visually. An icon labels or triggers a compact UI action.

Baseline parameters

Parameter	Requirement
Base grid	200 × 200 px
ViewBox	`0 0 200 200`
Primary stroke	4 px
Small symbol size	100 px, 2 px stroke
Base symbol size	200 px, 4 px stroke
Large symbol size	400 px, 6–8 px stroke
Cap	round
Join	round
Fill model	optional subtle fills
Export model	SVG-first

Relationship to icons

Symbols share visual DNA with icons:

geometric construction
controlled curves
round caps and joins
restrained detail
precise SVG export

But symbols may use:

more primitives
supporting shapes
subtle fills
layering
concept-specific composition
background plates or construction hints

Composition model

Use a three-layer model:

Layer	Purpose
Background	optional grid, plate, or environmental context
Midground	secondary concept support
Foreground	main symbol shape

Do not overuse all three layers. A symbol should still feel systematic and controlled.

Stroke and fill rules

Primary linework uses 4 px stroke at 200 px.

Fills are allowed when they clarify hierarchy:

neutral fill at 6–12% opacity
accent fill at 10–20% opacity
no decorative gradients by default
gradients allowed only in marketing or hero-specific artwork

Complexity rules

Symbols may be more complex than icons, but they must remain instantly interpretable.

Recommended limits:

Property	Limit
Primary concept shapes	1–3
Supporting shapes	0–4
Accent details	0–6
Text inside symbol	avoid unless decorative and non-essential

Usage rules

Use symbols for:

landing page sections
feature explanations
technical docs
empty states
onboarding flows
large cards

Do not use symbols for:

buttons
toolbar actions
navigation icons
dense map markers
small UI labels

Naming

Use:

symbol-[category]-[concept]

Examples:

symbol-infrastructure-cloud-service
symbol-data-data-layer
symbol-communication-api-connection

Metadata

Each symbol must include:

{
  "name": "cloud-service",
  "label": "Cloud Service",
  "category": "infrastructure",
  "file": "/symbols/cloud-service.svg",
  "viewBox": "0 0 200 200",
  "stroke": "4",
  "keywords": ["cloud", "service", "hosting"]
}

QA checklist

Before release:

Base viewBox is 0 0 200 200.
Stroke is 4 px at base size.
Visual center is optically balanced.
Symbol still reads at 100 px.
Fills are subtle and intentional.
No essential text is embedded.
SVG paths are clean.
File name follows naming convention.