SUMMARY

Brand Guide
City of Leavenworth

Leavenworth already has an approved palette. Municipal code 14.10 lists the Pantone colors allowed on signs in town, built around the Old World Bavarian alpine theme. The website should use the same palette, and this guide is how: every color measured for contrast and assigned a job, the type and voice the code doesn't cover, and the components the theme is built from.

Primary mark · vector

22 approved colors
9 allowed as primary
13 accent only
8 families
1 named signature

Foundations

Six rules the rest of this derives from

Every specific decision later in the guide — a hex value, a font weight, a button label — comes out of one of these. When a new situation isn't covered, decide it the way these six would.

The palette is the ordinance palette Twenty-two Pantone colors in eight families, from Leavenworth Municipal Code 14.10. The website uses the same colors as the signs downtown, so the city looks like one place on screen and on the street. Nothing outside the list.
Nothing is pure white The code bans stark and bright white, and that carries straight onto the web: no #FFFFFF page backgrounds, cards, or panels. Off-white plaster over a dark timber ground, the way a fachwerk facade is built.
WCAG 2.1 AA is the floor A legal obligation under ADA Title II, not a design preference. Where the ordinance palette and the contrast standard disagree, accessibility wins — which is why every swatch here carries a measured ratio instead of a vibe.
Plain language, second person Seventh-to-ninth grade reading level, active voice, "you" rather than "the applicant." Every process page says what happens next. Binding legal text stays as adopted, with a plain-language summary above it.
Everything survives translation The site machine-translates in the browser, so no string has a fixed width. Buttons, nav items, chips, and table headers wrap rather than truncate, and they hold up at roughly 40% more characters.
One scale, not a set of opinions One type scale, one spacing scale, three radii, three elevations. If a size or a gap isn't in the token tables at the end of this guide, it doesn't go in the theme.

Logo

The crest

A quartered shield with two lions, ringed by the city name, over a banner reading The Bavarian Village. It is a seal, not a wordmark — dense, detailed, and built for one job: saying this is official.

There is a vector master now. logo.svg is a true vector — 527 shapes, 16 flat colors, no embedded raster — and logo.ai is the Illustrator source behind it. The crest has no maximum size any more, it can be recolored for a knockout or one-color version, and the artwork above is the SVG rendering live.

The vector is not automatically the right file to serve. The SVG is 308 KB raw, about 89 KB over the wire with Brotli — roughly three times the 30 KB of the 150 px WebP, and enough to matter on a rural connection. Use the vector where the crest is displayed large or printed. Use a sized raster export at 44, 96, and 240 px for nav marks, favicons, and anything repeated across every page.

On plaster — default

On timber — headers, footers

At 44 px — nav, favicon

Check any new export on a dark ground before you ship it. Design tools routinely add a background plate on the way out, and a crest with an opaque white square behind it looks fine on a light page and breaks the moment it lands on timber or Bavarian blue. It has already happened once on this project. The timber panel above is the test — if you can see a box, the export is wrong.

The crest does not use the ordinance palette

These are the exact colors, read out of the vector rather than sampled off a screenshot — all sixteen the artwork uses. Its blues land near the code's Medium Blue, but the red, the golds, and the browns sit outside the approved list entirely. That is normal for heraldry and it is not a problem to fix.

Crest black#1B171D · field
Deep brown#2D1E0D · outlines
Mid brown#A16416 · shading
Tan#AB8857 · shading
Crest red#C42C30 · ring, shield
Burnt orange#B73F15 · oak leaves
Banner blue#116BAA · ≈ Medium Blue
Shield blue#20648F · quarters
Bright yellow#F9CC26 · lettering
Deep yellow#D8B10F · wreath
Mid gold#DCA22D · lions
Gold#F3B848 · lions
Light gold#F5C569 · lions, eagle
Pale gold#F0CC84 · highlights
Pale blue-white#E9F7F7 · plume, palette
White#FEFEFE · paint dab only

Don't recolor the crest to match the palette. Heraldic marks are allowed to sit outside a brand palette, and reworking this one would cost more than it returns. Treat the crest as a fixed asset and use the ordinance palette for everything around it. This rule matters more now than it did, not less: the vector has sixteen named flat fills and recoloring it has become trivially easy.

The white in the crest is not a surface, and the no-white rule doesn't reach it. #FEFEFE appears twice, on the white paint dab of the artist's palette in the lower-right quarter. It is artwork, the same way the crest's red and gold are artwork that sits outside the ordinance list. Deleting it punches a transparent hole that reads as a black blob on timber. Leave it alone. The ban on stark white governs page backgrounds, cards, and panels — not the inside of the seal.

Usage rules

Do

Leave clear space on all sides equal to one quarter of the crest's width. Nothing else enters that space.
Use 96 px or larger anywhere the crest should be readable. This is about detail density, not resolution — the vector does not change it. As the panel above shows, 44 px is a colored blob at any format: fine as a favicon or nav mark, useless as a seal.
Place it on plaster, on timber, or on Bavarian blue. All three are tested above.
Over a photo, put the crest on a solid plate first. Never straight onto the image.
Serve logo.svg where the crest is large, or where it will be scaled, zoomed, or printed.
Serve a sized raster at 44, 96, and 240 px everywhere else — nav, favicon, footer, anything on every page. A 240 px export should land well under 30 KB.
Remember the SVG artboard is trimmed to the artwork and the PNG is not. At the same width the vector renders about 5% larger, so check optical size when you swap one for the other.

Don't

Recolor it, flatten it to one color, or add a stroke, glow, or drop shadow.
Stretch, rotate, or crop it. The outer ring stays a full circle.
Scale the 1200 px raster past 600 px — it visibly softens. Use the vector instead; that is what it is for.
Ship logo.ai or the 1.2 MB PNG to a browser. Those are masters, not web assets.
Reach for the SVG at nav or favicon size. At 89 KB against 30 KB it costs three times as much to deliver detail nobody can see.
Use the JPG version on the site — it carries a baked-in white box and no transparency.
Accept a new export without checking it on timber. Background plates get added silently.
Use it as a background watermark behind text.
Rebuild the banner text or set the city name in a different typeface.

Color

The approved palette

All 22 colors from municipal code 14.10, in the code's own order and grouping. Each one carries the permission level the code gives it and the contrast ratio we measured against this page's two surfaces.

Showing 22 of 22

Yellow

Painted trim, festival graphics, sunflower and edelweiss motifs.

#FCDF66

Light Yellow

Accent only

Pantone: 120 C or U
RGB: 252 223 102
On plaster: 1.14:1 Decorative
On timber: 12.61:1

#FAC82E

Medium Yellow

Accent only

Pantone: 122 C or U
RGB: 250 200 46
On plaster: 1.35:1 Decorative
On timber: 10.61:1

#EAA200

Deep Yellow

Accent only

Pantone: 124 C or U
RGB: 234 162 0
On plaster: 1.87:1 Decorative
On timber: 7.67:1

Orange

Warm accents on woodwork and awnings. Never a field colour.

#FCDCAC

Light Orange

Accent only

Pantone: 155 C or U
RGB: 252 220 172
On plaster: 1.13:1 Decorative
On timber: 12.68:1

#F38A3B

Medium Orange

Accent only

Pantone: 157 C or U
RGB: 243 138 59
On plaster: 2.12:1 Decorative
On timber: 6.76:1

#DE4C00

Deep Orange

Accent only

Pantone: 159 C or U
RGB: 222 76 0
On plaster: 3.51:1 AA large
On timber: 4.08:1

Red

Shutters, crest heraldry, geranium boxes.

#D0545A

Light Red

Accent only

Pantone: 7418 C or U
RGB: 208 84 90
On plaster: 3.54:1 AA large
On timber: 4.05:1

#AE2027

Medium Red

Accent only

Pantone: 7621 C or U
RGB: 174 32 39
On plaster: 5.94:1 AA text
On timber: 2.41:1

#8C282B

Deep Red

Accent or primary

Pantone: 7623 C or U
RGB: 140 40 43
On plaster: 7.35:1 AA text
On timber: 1.95:1

Brown

Timber, fachwerk framing, stained wood. The structural family.

#DDBCB1

Light Brown

Accent or primary

Pantone: 7611 C or U
RGB: 221 188 177
On plaster: 1.51:1 Decorative
On timber: 9.45:1

#A37D74

Medium Brown

Accent or primary

Pantone: 7614 C or U
RGB: 163 125 116
On plaster: 3.14:1 AA large
On timber: 4.56:1

#583D3F

Deep Brown

Accent or primary

Pantone: 7617 C or U
RGB: 88 61 63
On plaster: 8.37:1 AA text
On timber: 1.71:1

Green

Alpine forest, shutters, parks and trail identity.

#B0DEC4

Light Green

Accent only

Pantone: 337 C or U
RGB: 176 222 196
On plaster: 1.28:1 Decorative
On timber: 11.19:1

#008B46

Medium Green

Accent only

Pantone: 340 C or U
RGB: 0 139 70
On plaster: 3.77:1 AA large
On timber: 3.80:1

#02461D

Deep Green

Accent or primary

Pantone: 343 C or U
RGB: 2 70 29
On plaster: 9.51:1 AA text
On timber: 1.51:1

Purple

Rare heraldic accent. Lowest use across town.

#858AB2

Light Purple

Accent only

Pantone: 7674 C or U
RGB: 133 138 178
On plaster: 2.87:1 Decorative
On timber: 4.98:1

#6F4E8D

Medium Purple

Accent only

Pantone: 7677 C or U
RGB: 111 78 141
On plaster: 5.72:1 AA text
On timber: 2.50:1

#4B4082

Deep Purple

Accent only

Pantone: 7672 C or U
RGB: 75 64 130
On plaster: 7.66:1 AA text
On timber: 1.87:1

Blue

Lettering, banners, sky and river. Highest-legibility family.

#4796C9

Light Blue

Accent or primary

Pantone: 7688 C or U
RGB: 71 150 201
On plaster: 2.79:1 Decorative
On timber: 5.14:1

#0074A8

Medium Blue

Accent or primary

Pantone: 7690 C or U
RGB: 0 116 168
On plaster: 4.44:1 AA large
On timber: 3.23:1

#005F96

Deep Blue

Accent or primary

Pantone: 7691 C or U
RGB: 0 95 150
On plaster: 5.86:1 AA text
On timber: 2.44:1

Bavarian Blue

The one colour the code names outright. Treat it as the city signature.

#208BBF

Bavarian Blue

Accent or primary

Pantone: 7689 C or U
RGB: 32 139 191
On plaster: 3.27:1 AA large
On timber: 4.37:1

Colors in web roles

Proposed

The code tells you which colors are allowed. It does not tell you what to do with them on a website. This mapping does, and every choice clears WCAG AA for its use.

Role assignments. Contrast measured against the surface each role sits on.
Role	Color	Source	Contrast
Page ground Timber	#221D1B	Deep Brown family, darkened	base
Panel surface Plaster	#F2EDE6	Off-white — code permits, bans stark white	14.32:1 on timber
Body text	#19171C	Crest black	15.41:1
Secondary text	#583D3F	Deep Brown · 7617 C	8.37:1
Links, primary action	#005F96	Deep Blue · 7691 C	5.86:1
Action hover	#0074A8	Medium Blue · 7690 C	4.44:1
City signature Accents, card rules	#208BBF	Bavarian Blue · 7689 C	3.27:1 — not for text
Emergency alert	#AE2027	Medium Red · 7621 C	6.9:1 with white text
Seal, formal headings	#8C282B	Deep Red · 7623 C	7.35:1
Parks, trails, success	#02461D	Deep Green · 343 C	9.51:1
Rules, dividers	#A37D74	Medium Brown · 7614 C	3.14:1 — non-text only
Highlight on dark only	#F8D719	Crest gold	11.69:1 timber · 1.22:1 plaster

Gold is a dark-background color, full stop. At 1.22:1 it is invisible on plaster. It reads beautifully on timber at 11.69:1. Never set gold text, gold links, or gold icons on a light surface.

Where these hex values came from. The PDF specifies Pantone inks, not hex. Thirteen of the 22 carry Lab values, which we converted to sRGB directly. The other nine carry CMYK builds, which we converted through a coated-ink model. Treat the Pantone numbers as the authority for anything printed or fabricated, and these hex values as the authority for screen. As the PDF itself notes, no conversion has been checked by Pantone.

Hard limits From code

What the code rules out

Four rules, quoted from the palette sheet. The first two shape the whole website, which is why this page has no pure white anywhere on it.

No bright, neon, or fluorescent color Ruled out outright. This is also why several of the palette's own lighter tints are marked accent only.

No stark or bright white Off-whites and pastel whites only. On the web that means no #FFFFFF page backgrounds, cards, or panels.

Metallics: minimal accent only Permitted sparingly, as leafing. On screen, suggest it with the crest gold rather than a metallic gradient.

Natural and clear-stained wood: allowed Usable as accent or primary. The timber ground on this page is the screen equivalent.

Accessibility From requirements

WCAG 2.1 AA is the floor, not the goal

The requirements make this a legal obligation under ADA Title II, not a design preference. That changes how the palette works: most of the approved colors cannot carry text, so the working interface uses a small subset of them.

7 of 22 pass AA for body text Measured on plaster at 4.5:1 or better. Everything else is decoration, large type, or non-text only.
9 of 22 allowed as primary The code's own permission level. Only four of those nine also clear AA for text.
15 of 22 can't carry body text Nine fall under 3:1 and are decoration only. Six clear 3:1 — large headings, borders, and fills, but never a paragraph.

The compliance date, as stated in your requirements. April 26, 2028 for entities serving populations under 50,000, following the 2024 DOJ rule and an April 2026 interim final rule. We are reproducing your document, not offering a legal reading — confirm the date and the population bucket with whoever owns compliance for the city.

No accessibility overlay widgets. Your requirements already rule these out, and they are right to. A floating accessibility button does not make a non-conforming site conforming, and vendors have been sued over exactly that. The fix is in the markup and the contrast, which is why every swatch above carries a measured ratio.

What this guide already does about it

Every color is measured, not eyeballed. Contrast ratios against both surfaces are printed on all 22 swatches, and the role mapping only assigns colors that clear AA for the job they're doing.
Color is never the only signal. Permission levels, contrast grades, and provenance are labelled in words as well as color, so they survive greyscale and color blindness.
Focus is always visible. A 2 px ring on every interactive element — Deep Blue on plaster, crest gold on timber, because Deep Blue disappears against dark wood.
Gold is fenced off. At 1.22:1 on plaster it fails everything. It is documented as a dark-background color only.
Motion is optional. Only transform and opacity animate, and prefers-reduced-motion turns it off.
Body text never goes below 1 rem. The type scale marks the floor explicitly so nobody sets 13 px paragraphs to fit a layout.

Still your team's job

Searchable text PDFs. Your requirements call for this specifically: agendas, minutes, and ordinances must be real text, not scanned images. No palette decision can fix a scanned PDF.
Alt text written by whoever uploads. The CMS has to require it, and staff have to write it. Decorative images get empty alt, not a filename.
Heading order in body content. Editors will reach for a bigger heading to make text stand out. The CMS should not let them skip levels.
Embedded vendor systems. Meeting portals and bill-pay iframes are in scope for the same standard, and you cannot patch them from the theme. See Build constraints.
The lang attribute after translation. 3.1.1 is Level A and 3.1.2 is Level AA. If the widget swaps the text without swapping lang, screen readers read the new language with the old pronunciation rules. See Translation.

Typography Proposed

Type

Nothing in the brand assets names a typeface, so this is a recommendation. It is built to three constraints: a resident must be able to read it, it has to load on a slow rural connection, and it should not look like it came from anywhere else in Washington.

Vollkorn · 400–800

Headings and pull quotes. A German serif by Friedrich Althausen — warm, sturdy, slightly bookish. It carries the Old World register without the legibility problems of blackletter.

IBM Plex Sans · 300–600

Body copy, navigation, forms, buttons. Open license, wide language coverage, and it holds up at the small sizes where a city site does most of its real work.

IBM Plex Mono · 400–500

Reference data only: ordinance numbers, permit and parcel IDs, fees, dates, color values. Never body copy.

Summer rec program registration is open

Sign up before spots fill up. Registration runs through the end of the month, and you can pay online or at the front counter in city hall. If a session is already full, add your child to the waitlist — we usually clear several spots in the first week. Questions go to the Parks office, and they answer the phone.

Vollkorn 800 / −0.035em · IBM Plex Sans 400 / 1.7

ORD 14.10 · PERMIT CUP-2026-0184 · $145.00 · 10 BUSINESS DAYS

No blackletter or Fraktur anywhere a resident has to read. It belongs on the shop signs downtown, not on a permit page. It is hard to read for everyone, harder with low vision, and screen readers handle decorative Unicode variants badly. If you want Old World character in the interface, get it from Vollkorn and from the palette.

Ship four font files, not a font service. This page loads from Google Fonts for convenience, but the build should self-host subset WOFF2: Vollkorn 700 and 800, IBM Plex Sans 400 and 600. Use font-display:swap so text renders immediately in the fallback, and keep the total font payload under 120 KB. If the mono face pushes past that, drop it — ui-monospace is an acceptable substitute for reference data.

Glyph coverage is now a live constraint, not a hypothetical. The site uses Google Translate, so whichever languages you publish in the widget are languages this type has to render. IBM Plex Sans covers Latin and Latin Extended comfortably — Spanish and most European languages are safe. Neither face covers Arabic, Hebrew, or CJK, and a published language the fonts can't render silently falls back to a system face. Cap the language list at what the fonts cover, or choose the fallback on purpose. See Translation.

Type scale

One scale for the whole site. Do not set sizes outside it.
Token	Size	Line height	Use
--t-xs	0.75rem	1.5	Eyebrows, table labels, captions
--t-sm	0.8125rem	1.6	Secondary copy, chips, help text
--t-base	1rem	1.7	Body copy. Never smaller for a paragraph.
--t-lg	1.125rem	1.65	Ledes, card titles
--t-xl	1.375rem	1.3	h3 — subsection headings
--t-2xl	1.75rem	1.2	Color family names, large card titles
--t-3xl	2.25rem	1.1	h2 — section headings
--t-4xl	3rem	1.06	Page titles on interior pages
--t-5xl	4.25rem	1	Home hero only

Voice & tone From voice.md

How the city writes

Plain, warm, credible — never stiff bureaucratese, never cutesy. This section reproduces the city's own voice guide. Nothing here is our invention.

These rules now have a second job. The site machine-translates through Google Translate, and short active sentences survive that far better than long ones with subordinate clauses. Writing plainly isn't only kinder to residents reading English — it's what makes the Spanish version intelligible. See Translation.

Plain language firstAim for a 7th to 9th grade reading level. Short sentences. Active voice. Common words over official-sounding ones.
Address the reader directlyUse "you." Write "You'll need to submit…" not "Applicants must submit…"
Explain jargon, don't assume itSpell out acronyms on first use — SEPA, CUP, ROW. Staff use them daily; residents don't.
Confident, not defensiveCut hedging like "please be advised that" or "it should be noted that." Say the thing directly.
Say what happens nextEvery process page tells the reader what to expect after they act: timelines, next steps, who to contact.

Tone by content type

Content type	Tone	Notes
Emergency alerts, public safety	Clear, calm, zero fluff	Lead with the action needed, not the backstory
Permits, licenses, utility billing	Neutral, precise	Still second-person and jargon-free
News, community events, parks & rec	Warmer, some personality	Where the city's character can show through
Ordinances, legal text	Formal, precise as required	Don't force plain language onto binding text — add a plain-language summary above it instead
Council and meeting content	Neutral, factual	No editorializing — this is impartial public record

Word choice

Avoid	Use
utilize	use
facilitate	help
in order to	to
prior to	before
subsequent to	after
commence	start
the applicant	you
it is required that	you must / you'll need to
please be advised that	cut it entirely

Sample rewrites

Five pairs from the voice guide. The pattern to copy: cut the throat-clearing, name the reader, keep the number.

Permit page

Before

Applicants are required to submit a completed application, along with the applicable fee, no less than ten (10) business days prior to the desired start date of work.

After

Submit your application and fee at least 10 business days before your planned start date.

Utility billing notice

Before

Customers are hereby notified that failure to remit payment by the due date indicated may result in the assessment of a late fee and potential service interruption.

After

Pay by the due date on your bill to avoid a late fee or service interruption.

Public safety alert

Before

Residents in the affected area are advised to exercise caution and are encouraged to consider limiting non-essential travel at this time.

After

Avoid travel in [area] until further notice. Roads are closed due to flooding.

Community and parks news

Before

The Parks Department is pleased to announce the commencement of the summer recreation program registration period.

After

Summer rec program registration is open! Sign up before spots fill up.

Council meeting summary

Before

The Council engaged in a productive discussion regarding the proposed ordinance.

After

The Council discussed the proposed ordinance. No vote was taken.

Do

Use headings and lists so people can scan for the one thing they need
Say what happens next and give realistic timelines
Be upfront about fees, wait times, and process steps

Avoid

Passive voice as a default
Bureaucratic phrasing carried over from print-era documents
Forced friendliness on serious content — no cheerful boil-water notices
Editorializing on council and meeting content. It must read as neutral record.

Translation From requirements

A machine will rewrite everything above

The site uses Google Translate. That is a reasonable call for a city this size — it covers a lot of languages for very little money. It also means the careful plain-language work in the Voice section gets re-written by a machine before most non-English readers ever see it. Design and write for that.

Two kinds of content should never be machine-translated. Emergency and public-safety alerts. A mistranslated evacuation notice or boil-water order is a safety incident, not a typo. Binding legal text. Ordinances and code carry legal weight in their adopted English wording. Machine output is not the ordinance. Exclude both from the widget and supply human translations for anything the city treats as a vital document — your requirements flag Title VI here, so confirm the list with whoever owns compliance.

What this does to the design system

Nothing can be a fixed width

Translated strings grow. Plan for roughly 40% more characters in a sentence, and up to double on short labels — "Pay" is three letters in English and considerably more in German. Buttons, chips, nav items, and table headers all have to wrap rather than truncate or overflow.

The font list caps the language list

Both Vollkorn and IBM Plex Sans ship Latin, Latin Extended, Greek, Cyrillic, and Vietnamese, so Spanish, Russian, and Ukrainian are all safe in headings and body. IBM Plex Mono skips Greek. None of the three cover Arabic, Hebrew, or CJK — a published language the fonts can't render silently swaps in a system face and the type system stops applying. If one of those scripts is needed, add a matching font rather than letting it fall back.

Uppercase stops being safe

The eyebrow labels on this page are uppercased in CSS. That misbehaves in some languages — German ß and Turkish dotted and dotless i are the usual examples. Keep text-transform off anything the widget will translate, or accept that a few languages will look wrong.

Write shorter English

Machine translation handles short declarative sentences well and long subordinate clauses badly. The voice guide already asks for short sentences and active voice — that guidance now does double duty, because it is also what makes the translation come out intelligible.

Test the lang attribute before launch. WCAG 3.1.1 Language of Page is Level A and 3.1.2 Language of Parts is Level AA — the markup has to declare the language actually on screen. Client-side translation widgets frequently rewrite the text and leave <html lang="en"> untouched, which makes a screen reader pronounce Spanish with English rules. If it doesn't update that, that is an accessibility defect on a site with a legal obligation, and it needs a fix or a different tier. Verify it rather than assuming either way.

Translated pages won't show up in search. The widget rewrites the page in the reader's browser. There are no separate translated URLs, nothing for a search engine to index, and no hreflang. That's fine for a resident who is already on the site and switches language. It does nothing for a resident who searches in Spanish and never finds the page. If that second case matters, it needs translated pages served at real URLs, which is a bigger piece of work than a widget.

Components Proposed

Components

Live elements, built from the tokens on this page. Every copy example follows the voice guide, so you can lift them straight into the build.

Buttons — every one has hover, focus, and active states

See all services

Label the button with what happens when it's used. "Pay your utility bill," not "Submit." Keep the same words through the whole flow.

Emergency alert — lead with the action, not the backstory

Avoid travel on Icicle Road until further notice

Roads are closed due to flooding. Crews are on site. Check the closure map before you leave.

Service cards

Pay your utility bill

Pay online with a card or bank account. Payments post the next business day. Pay by the due date on your bill to avoid a late fee or service interruption.

Go to the payment portal

Reserve a city park

Book a shelter or field for a private event. Requests need 10 business days' notice, and we'll confirm by email once the fee clears.

Check availability

Plain-language summary — required above binding legal text

In plain language

You need a permit before you put up a new sign, and the colors have to come from the city's approved list. Submit your application at least 10 business days before you plan to install. Community Development reviews it and emails you a decision.

LMC 14.10.040 — No person shall erect, alter, or relocate any sign within the city without first obtaining a sign permit, except as otherwise provided herein…

The voice guide is explicit about this: don't rewrite binding text into plain language. Put the plain-language summary above it and leave the ordinance intact.

Language switcher — a labelled control, not a flag

Language

Name each language in its own language, never in English and never as a flag — a flag is a country, and plenty of countries share a language. Give it a visible label, keep it in the header in the same place on every page, and make sure it is reachable by keyboard. Google Translate ships its own widget; restyle it to match this or replace it, but don't leave two switchers on the page.

Department chips

Public Works Community Development Finance City Clerk Parks Water & Wastewater

Breadcrumb

Build constraints From requirements

Four constraints that outrank taste

These come from the requirements document, not from us. Each one narrows the design system in a way worth stating out loud, because the tempting choice is the wrong one in all four cases.

Rural bandwidth · three font families is too many The requirements ask for reasonable performance on limited connections. Three families is a heavy ask. Self-host subset WOFF2 rather than calling Google Fonts, use font-display:swap, and ship four files total: Vollkorn 700 and 800, IBM Plex Sans 400 and 600. Load the mono only on pages that use it, or drop it for a system stack. Budget under 120 KB of font in total.

Staff editing · don't hand them 22 colors WordPress has to be safe for non-technical department staff. Define a short palette in theme.json — body text, link, one accent, and the alert style — and set defaultPalette: false plus custom: false so the color picker disappears. Every extra swatch is a chance to break contrast. Give them blocks, not freeform HTML.

Vendor embeds · the brand stops at the iframe Meeting portals, bill pay, permits, alert signup, and the Google Translate widget are all third-party. You usually cannot restyle them, and the translation widget adds its own JavaScript to every page. Don't fake it — frame the embed on plaster, keep the surrounding chrome consistent, and tell the reader plainly when they're moving to another system so a mismatched form doesn't read as a phishing page.

Legacy integrations · design for data you don't control Utility billing and permitting come from existing systems. Field labels, ID formats, and error text will arrive as-is and will not match the voice guide. Plan for long strings, ALL-CAPS labels, and unhelpful vendor error messages instead of assuming you can rewrite them.

One more, from the compliance list. A .gov domain is expected under CISA's DotGov program. If the city moves domains during the retheme, the crest, the footer, and every printed reference to the old address change with it. Worth sequencing before launch, not after.

Spacing & radius Proposed

Spacing and radius

A fixed scale, not arbitrary pixel values. If a gap isn't on this list, it doesn't go in the theme.

Spacing
Token	Value	Scale
--s-1	0.25rem
--s-2	0.5rem
--s-3	0.75rem
--s-4	1rem
--s-5	1.5rem
--s-6	2rem
--s-7	3rem
--s-8	4rem
--s-9	6rem
--s-10	8rem

Radius — crisp, like painted woodwork
Token	Value	Use
--r-sm	3px	Chips, tags, inputs, buttons
--r-md	6px	Cards, panels
--r-lg	12px	Modals, media frames

Elevation — tinted with brown, never flat grey
Token	Use
--lift-1	Resting cards and swatches
--lift-2	Hover, sticky header
--lift-3	Modals, menus, floating panels

Two surfaces, three layers. Timber is the ground, plaster is the panel, --plaster-hi is anything raised inside a panel. Nothing on the site should sit at an undefined depth, and nothing should be pure white.

Next steps

What we need from you

The platform, the accessibility target, the translation approach, and the crest artwork are all settled now. Three things still block the rest of the retheme: block theme or classic theme, and which existing plugins carry over — which vendor systems get embedded — and which languages the translator publishes. Everything else can be settled as we build.

Mark up anything you disagree with and send it back. The palette, the hard limits, the accessibility standard, and the voice guide are fixed. The type, the logo rules, the components, and the spacing scale are all still open.

Working draft · Prepared by Sherpas IT for the City of Leavenworth, WA
Color values derived from colors.pdf (Approved Old World Bavarian Colors, LMC 14.10). Voice section reproduced from voice.md; compliance and technical constraints from requirements.md. Pantone is the property of Pantone LLC; conversions here are unverified by Pantone.
Internal reference — not part of the public site.

Brand GuideCity of Leavenworth

Six rules the rest of this derives from

The crest

The crest does not use the ordinance palette

Usage rules

Do

Don't

The approved palette

Yellow

Light Yellow

Medium Yellow

Deep Yellow

Orange

Light Orange

Medium Orange

Deep Orange

Red

Light Red

Medium Red

Deep Red

Brown

Light Brown

Medium Brown

Deep Brown

Green

Light Green

Medium Green

Deep Green

Purple

Light Purple

Medium Purple

Deep Purple

Blue

Light Blue

Medium Blue

Deep Blue

Bavarian Blue

Bavarian Blue

Colors in web roles

What the code rules out

WCAG 2.1 AA is the floor, not the goal

What this guide already does about it

Still your team's job

Type

Type scale

How the city writes

Tone by content type

Word choice

Sample rewrites

Do

Avoid

A machine will rewrite everything above

What this does to the design system

Nothing can be a fixed width

The font list caps the language list

Uppercase stops being safe

Write shorter English

Components

Pay your utility bill

Reserve a city park

Four constraints that outrank taste

Spacing and radius

What we need from you

Brand Guide
City of Leavenworth