logo
search
Hennepin County

Design System Theme

Built with Tailwind CSS v4

Logos

Icon

Hennepin County Hennepin County Hennepin County Hennepin County

H Logo

Hennepin County Hennepin County Hennepin County Hennepin County

Standard

Hennepin County Hennepin County Hennepin County Hennepin County

Wordmark

Hennepin County Hennepin County Hennepin County Hennepin County

Brand Colors

brand-navy #113c66
brand-blue #0058a4
brand-sky #44c8f5
ui-blue #0047e2
bg-ui-blue-hover #002c8d

Accent Colors

brand-accent-green #009245
brand-accent-gold #fbb03b
brand-accent-orange #f15a24
brand-accent-pink #ff7bac
brand-accent-red #ce1432

Gray Scale

white #ffffff
gray-50 #f9fafb
gray-100 #f3f4f6
gray-200 #e5e7eb
gray-300 #d1d5db
gray-400 #9ca3af
gray-500 #6b7280
gray-600 #4b5563
gray-700 #374151
gray-800 #1f2937
gray-900 #111827
gray-950 #030712
black #000000

System Colors

Red

red-100 #fee2e2
red-500 #ef4444
red-900 #7f1d1d

Yellow

yellow-100 #fef9c3
yellow-500 #eab308
yellow-900 #713f12

Green

green-100 #dcfce7
green-500 #22c55e
green-900 #14532d

Blue

blue-100 #dbeafe
blue-500 #3b82f6
blue-900 #1e3a8a

Box Shadows

shadow-none 0 0 #0000
shadow-2xs 0 1px rgb(0 0 0 / 0.05)
shadow-xs 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow-sm 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
shadow-md 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
shadow-lg 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
shadow-xl 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
shadow-2xl 0 25px 50px -12px rgb(0 0 0 / 0.25)

Typography

text-xs

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-sm

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-base

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-lg

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-xl

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-2xl

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-3xl

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-4xl

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

text-5xl

Text style for the design system library

Text style for the design system library

Text style for the design system library

Text style for the design system library

editorial-2xl

Editorial style heading for news

editorial-3xl

Editorial style heading for news

Buttons

Accordions

The Ash Center supports many student organizations which focus on one of our areas of interest. We welcome funding applications from groups as well; please refer to the independent research application for guidelines on submitting an application. We also welcome “standard” proposals used by groups and journals to fundraise across HKS.

The Ash Center supports many student organizations which focus on one of our areas of interest. We welcome funding applications from groups as well; please refer to the independent research application for guidelines on submitting an application. We also welcome “standard” proposals used by groups and journals to fundraise across HKS.

The Ash Center supports many student organizations which focus on one of our areas of interest. We welcome funding applications from groups as well; please refer to the independent research application for guidelines on submitting an application. We also welcome “standard” proposals used by groups and journals to fundraise across HKS.

The Ash Center supports many student organizations which focus on one of our areas of interest. We welcome funding applications from groups as well; please refer to the independent research application for guidelines on submitting an application. We also welcome “standard” proposals used by groups and journals to fundraise across HKS.

Banners

An official website of Hennepin County Government

report

Error notification

This is an error or danger alert banner on the site

warning

Warning notification

This is a basic warning alert banner

check_circle

Success notification

This is a success or confirmation banner

info

Informational notification

This is a general information banner

Breadcrumbs

Editorial Card

Content Card

Stacked:

Card title example

Short description text for this content type can be used here. It should be informative and engaging to drive user action.

Button Text

Stacked - No Background:

Card title example

Short description text for this content type can be used here. It should be informative and engaging to drive user action.

Button Text

Horizontal:

Card title example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Button Text

Horizontal - No Background:

Card title example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Button Text

Variations:

Card: No image

Short description text for this content type can be used here. It should be informative and engaging to drive user action.

Button Text

Card: No image full button

Short description text for this content type can be used here. It should be informative and engaging to drive user action.

Button Text

Card title example w/ Link

Short description text for this content type can be used here. It should be informative and engaging to drive user action.

Link text

Contact Card

Contact Card

CTA

Sign up for email and text messages to stay connected to Hennepin County.

Button Text

Custom Pattern

Horizontal:

Small:

Dividers




Forms

Search:

search

Search Large:

search

Inputs:

Optional helper text can be used

Explain the error with this text

Selects:

keyboard_arrow_down
keyboard_arrow_down

Explain the error with this text

Checkboxes:

Radios:

Heros

Optional eyebrow heading

Detail page template


This is example intro text for the detail A template. This area can include a short description of introductory copy to provide context for the page.

Optional eyebrow heading

Detail page template


This is example intro text for the detail A template. This area can include a short description of introductory copy to provide context for the page.

4:3 image

Optional eyebrow heading

Detail page template


This is example intro text for the detail A template. This area can include a short description of introductory copy to provide context for the page.

Optional eyebrow heading

Detail page template


This is example intro text for the detail A template. This area can include a short description of introductory copy to provide context for the page.

4:3 image

Heading with icon


Optional eyebrow heading

Detail page template


Heading with icon

eco

Heading with icon


eco

Optional eyebrow heading

Detail page template


Tables

search
Service Area arrow_drop_down
Phone arrow_drop_down
[Service Area] Department Name (612) 555-5555
[Service Area] Department Name (612) 555-5555
[Service Area] Department Name (612) 555-5555
[Service Area] Department Name (612) 555-5555
[Service Area] Department Name (612) 555-5555
[Service Area] Department Name (612) 555-5555

Text

Display headline example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Display headline example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Display headline example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Display headline example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.