Creative

User Interface

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Primary
Primary Button
Secondary
Secondary Button
Link
Button
Primary
Primary Button
Secondary
Secondary Button
Link
Button

Buttons

Our primary button color is our accent color coral.

Button SizE

Our buttons height is 44px with 16px padding on all sides. There should be 8px of padding between the text and the icon. Buttons have a 4px corner radius. Button text should be 16pt, Montserrat bold, and initial caps.

Size & Padding

Max & Min Size

200px max
100px min
center text

Hover State

The button hover state is a darker tint and the arrow moves.

Hover

Card Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.

Button

Card Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.

Button

Card Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Button

Type Sizing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

H1/Black/64px
H2/Black/40px
H3/Black/32px
H4/Black/24px
S1/SemiBold/32px
S2/SemiBold/24px
S3/SemiBold/20px
B1/Medium/18px
B2/Medium/16px
B3/Medium/14px
Overline1/Medium/16px
Overline2/Medium/14px

Web sizing & Pairing

We use these font sizes and pairings for web.
Spacing between a heading and subhead is the same size as the subhead.
Spacing between subhead and body is 3x body copy size.
Spacing between a headline and body is 2x body copy size.
16 Overline
H1, 64px
S1, 32px, SemiBold Subtitle
B1, 18px, Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
16 Overline
H2, 40px Take a stand
S2, 24px Subtitle here
B1, 18px Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
14 overline
H3, 32px Take a Stand
S3, 20px Subtitle here
B2, 16px Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
14 Overline
H4, 24px Foster, donate, advocate
S3, 20px Subtitle here
B3, 14px Medium
Connect with our team to decide if foster care is right for you, discover how to get started with the licensing process, and learn about all the resources available to you as you welcome a child into your home.

Mobile sizing & Pairing

We use these font sizes and pairings for mobile.
14 Overline
H1, 40px Take a stand
S1, 24px, SemiBold Subtitle here
B1, 16px, Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
14 Overline
H2, 32px Take a stand
S2, 24px Subtitle here
B1, 16px Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
14 overline
H3, 24px Foster, donate, advocate
S3, 20px Subtitle here
B2, 16px Medium
Our aim is to inspire a movement in Montana led by people like you. People who believe that every child is worth defending. Who have passion for these kids in their soul and want to do something about it.
14 Overline
H4, 24px Foster, donate, advocate
S3, 20px Subtitle here
B3, 14px Medium
Connect with our team to decide if foster care is right for you, discover how to get started with the licensing process, and learn about all the resources available to you as you welcome a child into your home.