overview.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 400.0">
<style type="text/css">
svg {
	font-family: sans-serif;
	font-size: 10px;
}
svg.palette rect {
	stroke: #000;
	stroke-width: 1px;
}
svg.palette text.hex {
	font-size: 80%;
	font-family: monospace;
}
svg.palette text.label {
	dominant-baseline: text-bottom;
}
.dark text {
	fill: #ccc;
}
.light text {
	fill: #222;
}
</style>
<svg x="4" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#3f0600"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#3f0600</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight pumpkin</tspan></text>
</svg>
<svg x="104" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#2d2000"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#2d2000</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight gold</tspan></text>
</svg>
<svg x="204" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#002f00"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#002f00</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight lime</tspan></text>
</svg>
<svg x="304" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#003423"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#003423</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight spearmint</tspan></text>
</svg>
<svg x="404" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#002b3d"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#002b3d</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight sky</tspan></text>
</svg>
<svg x="504" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#181546"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#181546</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight bilberry</tspan></text>
</svg>
<svg x="604" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#35003a"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#35003a</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight lilac</tspan></text>
</svg>
<svg x="704" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#40001f"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#40001f</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Midnight raspberry</tspan></text>
</svg>
<svg x="804" y="4" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#000000"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#000000</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Black</tspan></text>
</svg>
<svg x="4" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#670a00"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#670a00</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark pumpkin</tspan></text>
</svg>
<svg x="104" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#4d3700"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#4d3700</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark gold</tspan></text>
</svg>
<svg x="204" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#005000"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#005000</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark lime</tspan></text>
</svg>
<svg x="304" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#00573c"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#00573c</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark spearmint</tspan></text>
</svg>
<svg x="404" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#004867"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#004867</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark sky</tspan></text>
</svg>
<svg x="504" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#2c2475"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#2c2475</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark bilberry</tspan></text>
</svg>
<svg x="604" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#590061"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#590061</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark lilac</tspan></text>
</svg>
<svg x="704" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#6a0037"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#6a0037</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark raspberry</tspan></text>
</svg>
<svg x="804" y="54.0" width="92" height="42.0" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#3a3939"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#3a3939</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Dark grey</tspan></text>
</svg>
<svg x="4" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#c13e28"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#c13e28</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pumpkin</tspan></text>
</svg>
<svg x="104" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#9c7200"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#9c7200</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Gold</tspan></text>
</svg>
<svg x="204" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#009c16"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#009c16</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Lime</tspan></text>
</svg>
<svg x="304" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#00a87c"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#00a87c</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Spearmint</tspan></text>
</svg>
<svg x="404" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#008fc3"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#008fc3</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Sky</tspan></text>
</svg>
<svg x="504" y="104.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#6356db"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#6356db</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Bilberry</tspan></text>
</svg>
<svg x="604" y="104.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#aa12b7"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#aa12b7</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Lilac</tspan></text>
</svg>
<svg x="704" y="104.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#bb1f71"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#bb1f71</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Raspberry</tspan></text>
</svg>
<svg x="804" y="104.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#787878"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#787878</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Medium grey</tspan></text>
</svg>
<svg x="4" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ff5034"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ff5034</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid pumpkin</tspan></text>
</svg>
<svg x="104" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffc600"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffc600</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid gold</tspan></text>
</svg>
<svg x="204" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#00f02e"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#00f02e</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid lime</tspan></text>
</svg>
<svg x="304" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#00ffc0"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#00ffc0</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid spearmint</tspan></text>
</svg>
<svg x="404" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#00dcff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#00dcff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid sky</tspan></text>
</svg>
<svg x="504" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#816bff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#816bff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid bilberry</tspan></text>
</svg>
<svg x="604" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#e43af4"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#e43af4</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid lilac</tspan></text>
</svg>
<svg x="704" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ff21a0"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ff21a0</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Vivid raspberry</tspan></text>
</svg>
<svg x="804" y="204.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#bab9b9"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#bab9b9</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Light grey</tspan></text>
</svg>
<svg x="4" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffe0d2"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffe0d2</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel pumpkin</tspan></text>
</svg>
<svg x="104" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#fef3c7"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#fef3c7</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel gold</tspan></text>
</svg>
<svg x="204" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#d6ffd4"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#d6ffd4</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel lime</tspan></text>
</svg>
<svg x="304" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#b9fff2"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#b9fff2</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel spearmint</tspan></text>
</svg>
<svg x="404" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#c1feff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#c1feff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel sky</tspan></text>
</svg>
<svg x="504" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#cce1ff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#cce1ff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel bilberry</tspan></text>
</svg>
<svg x="604" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffdbff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffdbff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel lilac</tspan></text>
</svg>
<svg x="704" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffd6ef"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffd6ef</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">Pastel raspberry</tspan></text>
</svg>
<svg x="804" y="254.0" width="92" height="42.0" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffffff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">White</tspan></text>
</svg>
<svg x="4" y="304.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#002633"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#002633</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base03</tspan></text>
</svg>
<svg x="104" y="304.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#0b3340"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#0b3340</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base02</tspan></text>
</svg>
<svg x="204" y="304.0" width="92" height="92" class="palette dark">
<rect x="0" y="0" width="100%" height="100%" fill="#56707b"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#56707b</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base01</tspan></text>
</svg>
<svg x="304" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#627d89"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#627d89</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base00</tspan></text>
</svg>
<svg x="404" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#899499"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#899499</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base0</tspan></text>
</svg>
<svg x="504" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#96a1a6"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#96a1a6</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base1</tspan></text>
</svg>
<svg x="604" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#f9f1e0"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#f9f1e0</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base2</tspan></text>
</svg>
<svg x="704" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#fff9e8"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#fff9e8</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">base3</tspan></text>
</svg>
<svg x="804" y="304.0" width="92" height="92" class="palette light">
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
<text x="100%" y="1.2em" text-anchor="end" class="hex"><tspan dx="-0.5em" dy="0.5em">#ffffff</tspan></text>
<text x="0" y="100%" text-anchor="start" class="label"><tspan dy="-0.5em" dx="0.5em">White</tspan></text>
</svg>
</svg>