Setting the file. One moment.
Subchapter 2.3
AGENTS.mdMarkdown5 KBView on GitHub
Quick reference for map design, color theory, visual hierarchy, and accessibility.
Most Important Rule: Direct user attention to what matters most.
Priority levels:
Tools:
Make primary features stand out from background:
// ✅ Good contrast between features and background
'background': '#f8f8f8', // Light gray
'water': '#a8d5ff', // Distinct blue
'roads': '#ffffff', // Bright white
'labels': '#333333' // Dark textColor Schemes:
Rules:
Typography sizing:
// Cities by population
'text-size': [
'interpolate', ['linear'], ['zoom'],
4, ['match', ['get', 'type'],
'capital', 16,
'city', 12,
'town', 10,
8
]
]Label placement rules:
text-allow-overlap: false)WCAG 2.1 Standards:
// ✅ Good contrast for labels
'text-color': '#333333', // Dark text
'text-halo-color': '#ffffff', // White halo
'text-halo-width': 2Avoid:
Use:
Mapbox fonts:
Rules:
Base sizes:
'text-size': [
'interpolate', ['linear'], ['zoom'],
8, 10, // Small at low zoom
12, 14, // Medium at mid zoom
16, 18 // Large at high zoom
]For area data (population, income, etc.):
// ✅ Use sequential colors
'fill-color': [
'step',
['get', 'density'],
'#f7fbff', // Light
10, '#deebf7',
20, '#c6dbef',
50, '#9ecae1',
100, '#6baed6',
200, '#3182bd',
500, '#08519c' // Dark
]Rules:
For point data (city size, counts):
// ✅ Scale circle size by value
'circle-radius': [
'interpolate', ['linear'], ['get', 'population'],
0, 5, // Min: 5px
100000, 15, // Mid: 15px
1000000, 30 // Max: 30px
]✅ Clear visual hierarchy (primary features stand out) ✅ Limited color palette (5-7 colors max) ✅ Accessible contrast ratios (4.5:1 for text) ✅ Colorblind-safe colors (avoid red/green alone) ✅ Appropriate label sizes (scales with zoom) ✅ No label collisions (readable at all zooms) ✅ Legend included (for data visualization) ✅ Consistent styling (similar features look similar) ✅ Tested at multiple zoom levels ✅ Mobile-friendly (tap targets, text size)
❌ Too many colors (>7 categories) ❌ Poor contrast (low visibility) ❌ Red/green combinations (colorblind users) ❌ Small text without halos (illegible) ❌ Cluttered labels (overlapping) ❌ Inconsistent styling (confusing) ❌ No legend (data maps unclear) ❌ Ignoring zoom levels (too much/little detail)