Images

Each exploration can have a cover image that represents the protocol change visually. Images appear on the home page topic cards and on the topic overview pages. They are optional but strongly encouraged — they make the site more engaging and help visitors quickly identify explorations.

The fun part

Think of the image as the icing on the cake after building your exploration. The code and the widget are the serious work — the image is where you get to be artistic, experiment with AI tools, and create something visually striking. It's your chance to express what the protocol change feels like, not just what it does. Enjoy it!

Format & Size

Allowed Formats

Format	Extension	Notes
WebP	.webp	Preferred — best compression-to-quality ratio
PNG	.png	Good for sharp lines and transparency
JPEG	.jpg / .jpeg	Fine for photographic or painterly styles
SVG	.svg	Great for vector illustrations, resolution-independent

WebP is recommended and used by all existing explorations. Avoid formats like BMP, TIFF, or GIF.

Dimensions & File Size

Property	Recommendation
Orientation	Portrait
Aspect ratio	3:4
Resolution	768×1024
Minimum	512px on the shorter side
Maximum	1536px on the longer side
File size	Under 200 KB (WebP), under 400 KB (PNG/JPEG)

The image file goes into your exploration folder as image.webp (or .png, .jpg) and is imported in info.ts:

import image from './image.webp'

export const INFO: Exploration = {
  // ...
  image,
  // ...
}

Color Palette

This is the one area with strict rules. The color palette for your image must be derived from the topic color assigned to your exploration. This keeps the site visually coherent across contributions.

Allowed Colors

Every image may use:

1. The full greyscale range — black, white, and all greys in between
2. Shades of the topic color — from the lightest tint (50) to the deepest shade (900), including tones in between the Tailwind steps

No other hues are allowed. The image should feel monochromatic with the topic color as its accent.

Topic Color Reference

Use this table to find the palette for your exploration's topic. Each topic includes a visual swatch, a hex table, and a copy-paste snippet you can drop straight into your AI image prompt.

Scaling — Orange

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#fff7ed	#ffedd5	#fed7aa	#fdba74	#fb923c	#f97316	#ea580c	#c2410c	#9a3412	#7c2d12

Prompt snippet:

shades of orange (hex range: #fff7ed to #7c2d12)

Privacy — Yellow

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#fefce8	#fef9c3	#fef08a	#fde047	#facc15	#eab308	#ca8a04	#a16207	#854d0e	#713f12

Prompt snippet:

shades of yellow (hex range: #fefce8 to #713f12)

UX — Blue

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#eff6ff	#dbeafe	#bfdbfe	#93c5fd	#60a5fa	#3b82f6	#2563eb	#1d4ed8	#1e40af	#1e3a8a

Prompt snippet:

shades of blue (hex range: #eff6ff to #1e3a8a)

Security — Green

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#f0fdf4	#dcfce7	#bbf7d0	#86efac	#4ade80	#22c55e	#16a34a	#15803d	#166534	#14532d

Prompt snippet:

shades of green (hex range: #f0fdf4 to #14532d)

Robustness — Purple

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#faf5ff	#f3e8ff	#e9d5ff	#d8b4fe	#c084fc	#a855f7	#9333ea	#7e22ce	#6b21a8	#581c87

Prompt snippet:

shades of purple (hex range: #faf5ff to #581c87)

Interoperability — Red

Shade	50	100	200	300	400	500	600	700	800	900
Hex	#fef2f2	#fee2e2	#fecaca	#fca5a5	#f87171	#ef4444	#dc2626	#b91c1c	#991b1b	#7f1d1d

Prompt snippet:

shades of red (hex range: #fef2f2 to #7f1d1d)

Drawing Style

The visual style should lean towards abstract technical illustration rather than photorealistic rendering or cartoons. Think along these lines:

• Architectural blueprints — clean lines, measured precision, schematic layouts
• Industrial design sketches — product concepts, exploded views, annotated diagrams
• Pen-and-ink drafting — crosshatching, fine linework, hand-drawn texture
• Etching / engraving — dense parallel lines, high contrast, vintage technical feel

Composition Rules

• One focal point. The image should concentrate on a single action, detail, or movement at its center. Avoid busy scenes with many competing elements — abstract and reduce.
• White margins. The subject should naturally fade or dissolve towards the edges so that generous white space surrounds it. The image borders should be purely white.
• No lettering. No text, labels, captions, or watermarks anywhere in the image.

Color Separation

Keep greyscale tones and topic color tones clearly separate. Elements should be either drawn in black/grey/white or rendered in topic color shades — avoid muddying the two together. Within the allowed color palette, be bold and vivid: use the full range from light tints to deep shades for visual punch.

Theming

Ethereum Association

The image should evoke a subtle connection to Ethereum, its ecosystem, or decentralized technology — think geometric patterns reminiscent of blockchain structure, faint diamond shapes woven into the composition, or network-like line patterns. Avoid prominent Ethereum logos or brand marks; the association should feel organic, not stamped on.

Mood & Aesthetic

Styles that work well with the technical illustration approach:

• Cypherpunk — encrypted transmissions, masked identities, circuit traces
• Futurism — kinetic forms, velocity, overlapping geometric planes
• Solarpunk — organic-meets-technical, optimistic infrastructure
• Constructivism — bold structure, angular composition, propaganda-poster energy

These are suggestions, not requirements. The key is that the image feels intentional and technically grounded, not generic or decorative.

Finding a Subject

This is where the creative freedom kicks in. The hardest part is often deciding what to depict — but it's also the most rewarding. There's no single right answer; different people will find wildly different visual metaphors for the same protocol change, and that's exactly what makes the gallery interesting. Here are three approaches to get you started:

Goal-Oriented

Visualize the outcome the protocol change aims for.

• "Post-Quantum Cryptography" → a lattice structure shielding a diamond
• "Scaling" → a network expanding outward from a central beacon
• "Privacy" → layered veils over a geometric identity

Structure-Oriented

Depict the architecture described in the specification.

• "Proposer-Builder Separation" → two interlocking mechanisms, one assembling, one validating
• "PeerDAS" → a distributed mesh of nodes with data shards flowing between them
• "Account Abstraction" → a key morphing into multiple authentication pathways

Process-Oriented

Illustrate the flow of how the change works.

• "Frame Transactions" → a figure moving through sequential frames, each transforming the state
• "Blob Transactions" → data parcels ascending from an execution layer into a beacon above
• "Gas Repricing" → a balance scale recalibrating under shifting weights

AI Prompt Templates

Most images will be generated with AI tools (ChatGPT/DALL-E, Midjourney, Stable Diffusion, etc.). Don't be shy about iterating — generating a few variations and picking the one that clicks is part of the fun. Below are two ready-to-use prompt templates. Copy the prompt snippet from your topic's color section above and paste it into the [TOPIC COLOR] placeholder.

Template A — You Choose the Subject

Use this when you have a specific visual idea for your exploration. Replace the placeholders:

Create a portrait-format (3:4) abstract illustration in the style of an
architectural blueprint or industrial design sketch.

Subject: [YOUR SUBJECT DESCRIPTION — e.g. "a lattice-based cryptographic
shield emerging from intersecting geometric planes"]

Style and composition:
- Abstract, reduced — focus on ONE central action, detail, or movement
- Pen-and-ink drafting, technical etching, crosshatching
- The subject fades naturally into generous white margins at all edges
- Very subtle Ethereum association (faint geometric patterns, not logos)
- Cypherpunk / futurist mood
- No text, no lettering, no watermarks

Colors — strict:
- Greyscale tones (black, white, greys) AND [TOPIC COLOR]
  (hex range: [LIGHTEST HEX] to [DARKEST HEX]). No other hues.
- Use the color palette boldly and vividly across the full shade range
- Keep greyscale and color clearly separated — elements are either
  drawn in black/grey OR rendered in color, not mixed together

Example (for an exploration in the Scaling / Orange topic):

Create a portrait-format (3:4) abstract illustration in the style of an
architectural blueprint or industrial design sketch.

Subject: a distributed mesh network expanding outward from a central beacon
node, with data shards flowing between peers in concentric rings.

Style and composition:
- Abstract, reduced — focus on ONE central action, detail, or movement
- Pen-and-ink drafting, technical etching, crosshatching
- The subject fades naturally into generous white margins at all edges
- Very subtle Ethereum association (faint geometric patterns, not logos)
- Cypherpunk / futurist mood
- No text, no lettering, no watermarks

Colors — strict:
- Greyscale tones (black, white, greys) AND shades of orange
  (hex range: #fff7ed to #7c2d12). No other hues.
- Use the color palette boldly and vividly across the full shade range
- Keep greyscale and color clearly separated — elements are either
  drawn in black/grey OR rendered in color, not mixed together

Template B — Fully AI-Derived

Use this when you want the AI to pick the subject based on the EIP title and summary. Just fill in the EIP details:

I'm creating a cover image for an interactive exploration of [EIP TITLE]
([EIP NUMBER]) on an Ethereum protocol education site.

The EIP in one sentence: [ONE-SENTENCE SUMMARY OF THE EIP]

Create a portrait-format (3:4) abstract illustration that visually represents
this protocol change. Choose an evocative subject — it can represent the goal,
the internal architecture, or the process flow of the change.

Style and composition:
- Abstract, reduced — concentrate on ONE central action, detail, or movement
- Architectural blueprint / industrial design sketch / pen-and-ink etching
- The subject fades naturally into generous white margins at all edges
- Very subtle Ethereum association (faint geometric patterns woven into the
  composition — no prominent logos or brand marks)
- Cypherpunk / futurist mood
- No text, no lettering, no watermarks

Colors — strict:
- Greyscale tones (black, white, greys) AND [TOPIC COLOR]
  (hex range: [LIGHTEST HEX] to [DARKEST HEX]). No other hues.
- Use the color palette boldly and vividly across the full shade range
- Keep greyscale and color clearly separated — elements are either
  drawn in black/grey OR rendered in color, not mixed together

Example (for EIP-7883, Robustness / Purple topic):

I'm creating a cover image for an interactive exploration of "ModExp Gas Cost
Increase" (EIP-7883) on an Ethereum protocol education site.

The EIP in one sentence: EIP-7883 recalibrates the gas cost formula for the
ModExp precompile to better reflect actual computation costs on modern hardware.

Create a portrait-format (3:4) abstract illustration that visually represents
this protocol change. Choose an evocative subject — it can represent the goal,
the internal architecture, or the process flow of the change.

Style and composition:
- Abstract, reduced — concentrate on ONE central action, detail, or movement
- Architectural blueprint / industrial design sketch / pen-and-ink etching
- The subject fades naturally into generous white margins at all edges
- Very subtle Ethereum association (faint geometric patterns woven into the
  composition — no prominent logos or brand marks)
- Cypherpunk / futurist mood
- No text, no lettering, no watermarks

Colors — strict:
- Greyscale tones (black, white, greys) AND shades of purple
  (hex range: #faf5ff to #581c87). No other hues.
- Use the color palette boldly and vividly across the full shade range
- Keep greyscale and color clearly separated — elements are either
  drawn in black/grey OR rendered in color, not mixed together

Quick Reference

Rule	Detail
Format	WebP preferred; PNG, JPEG, SVG also accepted
Orientation	Portrait (3:4)
Resolution	768×1024 recommended; min 512px short side, max 1536px long side
File size	< 200 KB (WebP) or < 400 KB (PNG/JPEG)
Colors	Greyscale + topic color shades only; keep the two clearly separated
Composition	Abstract, one focal point, generous white margins at edges
Style	Technical illustration — blueprints, sketches, etching
Theme	Subtle Ethereum association; cypherpunk / futurist mood optional
Lettering	None — no text, labels, or watermarks
File location	src/explorations/<id>/image.webp