Overview

---

This guide is intended for internal users and external contractors working on Matanuska-Susitna Borough webpages. It outlines the visual and structural standards to ensure consistency, accessibility, and alignment with the Borough’s branding. Following this guide helps maintain a professional and user-friendly experience across all digital platforms.

Borough Seals & Department Logos

The Borough Seal must appear prominently on all official borough websites and materials, with department logos displayed only in a secondary position. Exceptions to this requirement may be granted solely with the explicit approval of the Borough Manager.

Borough Seal

The official seal of the Matanuska-Susitna Borough was adopted by Ordinance 84-34 (1984) and features two concentric circles. The outer circle bears the words “MATANUSKA-SUSITNA BOROUGH SEAL” and the date 1964, along with images of a moose, mountain sheep, salmon, and bear. The center depicts a mural with a horn of plenty, symbolizing the borough’s diverse resources:

• Cow for dairy industry
• Logs and trees for timber products
• Coal miner with pick and ore car for mining
• Skier on a slope with mountain peaks and a radiant sun

This design reflects the borough’s heritage and economic foundations.

Thumbnail	Size	Description	Link
	42px x 42px	PNG Format	Download
	100px x 100px	PNG Format	Download
	150px x 150px	PNG Format	Download
	300px x 300px	PNG Format	Download
	500px x 500px	PNG Format	Download
	1000px x 1000px	PNG Format	Download
	Vector	SVG Format	Download
	1920px x 1110px	State Overlay PNG Format	Download

Department Logos

 

Coming

 

 

 

Colors

Base

 

--color-base-lightest

#f0f0f0

Copy hexCopied!

 

--color-base-lighter

#dfe1e2

Copy hexCopied!

 

--color-base-light

#a9aeb1

Copy hexCopied!

 

--color-base

#71767a

Copy hexCopied!

 

--color-base-dark

#565c65

Copy hexCopied!

 

--color-base-darker

#3d4551

Copy hexCopied!

 

--color-base-darkest

#1b1b1b

Copy hexCopied!

 

--color-ink

#2a2a2a

Copy hexCopied!

Surface

 

--color-surface-primary

#162e50

Copy hexCopied!

 

--color-surface-base

#f6fbf9

Copy hexCopied!

Primary

 

--color-primary-lighter

#d9e8f6

Copy hexCopied!

 

--color-primary-light

#73b3e7

Copy hexCopied!

 

--color-primary

#3160ad

Copy hexCopied!

 

--color-primary-vivid

#0050d8

Copy hexCopied!

 

--color-primary-dark

#1a4480

Copy hexCopied!

 

--color-primary-darker

#162e51

Copy hexCopied!

Secondary

 

--color-secondary-lighter

#fee685

Copy hexCopied!

 

--color-secondary-light

#face00

Copy hexCopied!

 

--color-secondary

#f9cf0e

Copy hexCopied!

 

--color-secondary-vivid

#e5a000

Copy hexCopied!

 

--color-secondary-dark

#ddaa01

Copy hexCopied!

 

--color-secondary-darker

#b38c00

Copy hexCopied!

Accent (Cool)

 

--color-accent-cool-lighter

#e1f3f8

Copy hexCopied!

 

--color-accent-cool-light

#97d4ea

Copy hexCopied!

 

--color-accent-cool

#52daf2

Copy hexCopied!

 

--color-accent-cool-dark

#28a0cb

Copy hexCopied!

 

--color-accent-cool-darker

#07648d

Copy hexCopied!

Accent (Warm)

 

--color-accent-warm-lighter

#ffe396

Copy hexCopied!

 

--color-accent-warm-light

#ffbe2e

Copy hexCopied!

 

--color-accent-warm

#e5a000

Copy hexCopied!

 

--color-accent-warm-dark

#936f38

Copy hexCopied!

 

--color-accent-warm-darker

#7a591a

Copy hexCopied!

Success

 

--color-success-lighter

#ecf3ec

Copy hexCopied!

 

--color-success-light

#70e17b

Copy hexCopied!

 

--color-success

#5e9f69

Copy hexCopied!

 

--color-success-dark

#4d8055

Copy hexCopied!

 

--color-success-darker

#216e1f

Copy hexCopied!

Info

 

--color-info-lighter

#e7f6f8

Copy hexCopied!

 

--color-info-light

#99deea

Copy hexCopied!

 

--color-info

#52daf2

Copy hexCopied!

 

--color-info-dark

#009ec1

Copy hexCopied!

 

--color-info-darker

#2e6276

Copy hexCopied!

Warning

 

--color-warning-lighter

#faf3d1

Copy hexCopied!

 

--color-warning-light

#fee685

Copy hexCopied!

 

--color-warning

#ffbe2e

Copy hexCopied!

 

--color-warning-dark

#e5a000

Copy hexCopied!

 

--color-warning-darker

#936f38

Copy hexCopied!

Error

 

--color-error-lighter

#f4e3db

Copy hexCopied!

 

--color-error-light

#f6bd9c

Copy hexCopied!

 

--color-error

#c9332f

Copy hexCopied!

 

--color-error-dark

#b50909

Copy hexCopied!

 

--color-error-darker

#6f3331

Copy hexCopied!

Emergency

 

--color-emergency

#d54309

Copy hexCopied!

 

--color-emergency-dark

#805039

Copy hexCopied!

Disabled

 

--color-disabled-lighter

#c9c9c9

Copy hexCopied!

 

--color-disabled-light

#919191

Copy hexCopied!

 

--color-disabled

#757575

Copy hexCopied!

 

--color-disabled-dark

#454545

Copy hexCopied!

 

--color-disabled-darker

#1b1b1b

Copy hexCopied!

Typography

1. Font: Public Sans Variable
2. Sizes
   1. Base Body: 1rem = 16x
   2. Body small: 0.875rem = 14px
   3. Header1: 2.25rem = 36px - Bold 700
   4. Header2: 1.5rem = 24px - Bold 700
   5. Header3: 1.25rem = 20px - Bold 700

Header using these styles

• Placement: The header should appear at the top of every Borough webpage.
• Logo: Ensure the Borough logo is left-aligned and maintains clear space around it.
• Navigation: Include primary navigation links in a horizontal layout. Use the Primary color (#3160ad) for active or hovered links.
• Background: Use the Surface Primary color (#162e50) for the header background to maintain visual consistency.
• Text: Use Light Text (#ffffff) for all header text to ensure readability against the dark background.
• Accessibility: Ensure keyboard navigation is supported and that contrast ratios meet WCAG 2.1 standards.

Footer using these styles

• Placement: The footer should appear at the bottom of every webpage.
• Content: Include contact information, legal disclaimers, and quick links to key Borough resources.
• Background: Use the Surface Primary color (#162e50) or Surface Base (#f6fbf9) depending on the page’s overall tone.
• Text: Use Light Text (#ffffff) on dark backgrounds and Dark Text (#2a2a2a) on light backgrounds.
• Icons and Links: Use the Secondary color (#f9cf0e) sparingly for icons or secondary links.
• Accessibility: Ensure all links are clearly labeled and accessible via screen readers.

Additional Resources

• See the Matanuska-Susitna Borough homepage to review standard implementation
• See the ADA website to review Web Content Accessibility Guidelines version 2.1, Level AA information

Contact Information

For further information or assistance, contact the Web Team.

 

Glossary

• Hex Code: A six-digit code used to represent colors on the web (e.g., #ffffff is white).
• Header: The top section of a webpage, typically containing the logo, navigation menu, and page title.
• Footer: The bottom section of a webpage, often containing contact information, links, and legal notices.
• Typography: The style and appearance of text, including font, size, and weight.
• Surface: A background layer used to group content visually (e.g., cards or sections).
• Accent Color: A color used to highlight key elements like buttons or links.
• WCAG: Web Content Accessibility Guidelines – standards to ensure websites are usable by people with disabilities.