Civic & Public Service · Service Landings
A city-services landing that leads with a map: big type, one search field, and service tiles around a hand-drawn SVG map — find, pay, and track in one place.
| Color | Hex | Use |
|---|---|---|
| paper | #f6f3ec | page background |
| ink | #16201f | headlines · borders |
| accent | #e8541d | map pins · kicker |
| teal | #1c7c6c | emphasized headline word |
| hair | #ddd6c6 | hairlines · chips |
| Type | Face | Spec |
| display | system grotesk | h1 52 / 800 · −0.035em |
| labels | mono | kickers · stats · go-links |
| lede | 17px | 1.55 · ink-2 |
| Shape | Value | Use |
| search | 2px ink · r12 | shadow 5px 5px 0 |
| map card | 2px ink · r16 | shadow 8px 8px 0 |
| tiles | r12 · 1px hair | 3-col · hover −2px |
| gutter | 28px | max-width 1120 |
MISSION City-services landing that leads with a map. Find, pay,
and track — one search field, no phone trees.
TYPE System grotesk + mono labels. h1 52/800, −0.035em.
COLOR paper #f6f3ec · ink #16201f · accent #e8541d · teal #1c7c6c
SHAPE hard borders + offset shadows (5px / 8px) · tiles r12
MAP inline SVG 560×420: streets #d9d1bc, river #b7d6cd,
park #cfe0c2, 4 numbered pins (3 orange, 1 teal)
COPY "Find, pay, and track city services in one place."
stats: 311 · 1,240 / response · 14 min
FULL tokens, map spec, do/don'ts & checklist →
ai-guide.md (copy button fetches the whole file)
<!-- excerpt — full file: reference.html (self-contained) -->
<section class="hero">
<div>
<p class="kicker">City of Meridian · Service hub</p>
<h1>Find, pay, and track city services in <em>one place.</em></h1>
<p class="lede">…</p>
<form class="search">
<input type="search" placeholder="Search permits…" />
<button class="go">Search</button>
</form>
</div>
<div class="map-card">
<svg viewBox="0 0 560 420">
<!-- streets, river, park, 4 numbered pins -->
</svg>
<div class="map-overlay">
<div class="map-stat">311 · 1,240</div>
<div class="map-stat">Avg. response · 14 min</div>
<span class="map-pill">Map-forward</span>
</div>
</div>
</section>