Basic Style Guide

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 42px x 42px PNG Format Download
100px x 100px 100px x 100px PNG Format Download
150px x 150px 150px x 150px PNG Format Download
300px x 300px 300px x 300px PNG Format Download
500px x 500px 500px x 500px PNG Format Download
1000px x 1000px 1000px x 1000px PNG Format Download
Vector Vector SVG Format Download
1920px x 1110px 1920px x 1110px State Overlay PNG Format Download

Department Logos

 

asdfasdf

Colors

Name Hex Usage Text Color
Background #ffffff Primary Page background. Keep it clean and minimal Dark text
Dark Text #2a2a2a Default text color for light backgrounds -
Light Text #ffffff Text color for dark surfaces -
Surface Primary #162e50 Section or card background for emphasis Light text
Surface base #f6fbf9 Neutral Section or Card Background Dark text
Primary #3160ad Main interactive color for buttons and links. Most common accent on the site Light text
Secondary #f9cf0e Access color for secondary actions or links on dark surfaces. Use Sparingly Dark text
Error #c9332f Indicates errors or destructive actions (E.G. delete) Light text
Warning #ffbe2e Highlights cautionary states (E.G. unsaved changes) Dark text
Success #00a91c Represents success, completion, or safe states Dark text

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

Uploaded Image (Thumbnail)

  • 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

Uploaded Image (Thumbnail)

  • 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

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.

 

 

Print Article