Style Guide

Branding and colors

Black $black #232323 .bg-black

Black Texture .bg-black .bg-texture

Grey $grey #797979 .bg-grey

Grey Texture .bg-grey .bg-texture

Dark Grey $dark-grey #333333 .bg-dark-grey

Dark Grey Texture .bg-dark-grey .bg-texture

Off White $off-white #F3F3ED .bg-off-white

Off White Texture .bg-off-white .bg-texture

Beige $beige #DFD5CB .bg-beige

Beige Texture .bg-beige .bg-texture

Dark Beige $dark-beige #DFD5CB .bg-dark-beige

Dark Beige Texture .bg-dark-beige .bg-texture

Green $green #A7B695 .bg-green

Green Texture .bg-green .bg-texture

Dark green $dark-green #687459 .bg-dark-green

Dark green Texture .bg-dark-green .bg-texture

Sand $sand #D7AA5C .bg-sand

Sand Texture .bg-sand .bg-texture

Dark Sand $dark-sand #B58B45 .bg-dark-sand

Dark Sand Texture .bg-dark-sand .bg-texture

Red $red #EA5C4A .bg-red

Red Texture .bg-red .bg-texture

Dark Red $dark-red #B93B2C .bg-dark-red

Dark Red Texture .bg-dark-red .bg-texture

Brown $brown #DB8852 .bg-brown

Brown Texture .bg-brown .bg-texture

Dark Brown $dark-brown #AB693D .bg-dark-brown

Dark Brown Texture .bg-dark-brown .bg-texture

Pink $pink #F292B2 .bg-pink

Pink Texture .bg-pink .bg-texture

Dark Pink $dark-pink #811f3e .bg-dark-pink

Dark Pink Texture .bg-dark-pink .bg-texture

Lilac $lilac #BAACEA .bg-lilac

Lilac Texture .bg-lilac .bg-texture

Dark Lilac $dark-lilac #A08FDC .bg-dark-lilac

Dark Lilac Texture .bg-dark-lilac .bg-texture

White $white #FFFFFF .bg-white

Text Colors

Text Lilac `.text-lilac`

Text Grey `.text-grey`

Text dark-green `.text-dark-green`

Text White `.text-white`

Text Black `.text-black`

Text Green `.text-green`

Typography

Step-9 .step-9

Step-8 .step-8

Step-6 .step-6

Step-5 .step-5

Step-2 .step-2 .step-bold .step-bold-secondary-font

Step-2 .step-2

Step-1 .step-1 .step-bold .step-bold-secondary-font

Step-1 .step-1

Step-0 .step-0

Step -1 .step-n1 .step-bold .step-bold-secondary-font

Step -1 .step-n1

Step -2 .step-n2 .step-bold .step-bold-secondary-font

Step -2 .step-n2

Step -1 Mono .step-n1 .step-mono

Step -1 Bold Mono .step-n1 .step-mono

Step -2 Mono .step-n2 .step-mono

Step -2 Bold Mono .step-n2 .step-mono

Type/Class	Font size as per Viewport Width				Line Height
Type/Class	390	834	1280	1600	Line Height
h1 / step 9 (.h1/.step-9)	82.56	101.47	120.47	134.11	1 / 100%
h2 / step 8 (.h2/.step-8)	68.80	82.92	97.12	107.29	1 / 100%
h3 / step 6 (.h3/.step-6)	47.78	55.45	63.14	68.66	1 / 100%
h4 (.h4 / .step-5)	39.81	45.36	50.93	54.93	1 / 100%
step 3 (.step-3)	27.65	30.40	33.17	35.16	1.18 / 118%
step 1 (.step-1)	19.20	20.41	21.63	22.50	1.18 / 118%
step 0 (.step-0)	16	16.73	17.47	18	1.2 / 120%
step -1 (.step-n1)	13.33	13.72	14.12	14.40	1.18 / 118%
step -2 (.step-n2)	11.11	11.26	11.41	11.52	1.18 / 118%

Paragraph Sans Serif `$font-family-sans-serif`

FUSE partners with local governments and communities to create projects that advance racial equity and accelerate systems change across six issue areas: affordable housing, climate resilience, educational access, public health, justice reform, and workforce development. We embed experienced professionals from the private and social sectors to lead these year-long projects.

Paragraph Sans Serif Semibold`$font-family-sans-serif-semibold`

Paragraph Mono`$font-family-mono`

Grid Information

	xs <700px	sm ≥700px	md ≥1000px	lg ≥1280px
Container `max-width`	None (auto)	None	None	125rem
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Gutter width	Space m	Space m	Space m	Space l
Container Margin	Space m	Space m	Space xl	Space 3xl
No. of columns	12

Reusable Components

Buttons

.btn-primary

.btn-primary.btn-primary--offwhite

Icons

<i
                                        class="icon-chevron-down-bold"></i>

Text Colors

Text Lilac .text-lilac

Text Grey .text-grey

Text dark-green .text-dark-green

Text White .text-white

Text Black .text-black

Text Green .text-green

Paragraph Sans Serif $font-family-sans-serif

Paragraph Sans Serif Semibold$font-family-sans-serif-semibold

Paragraph Mono$font-family-mono