BearTax is now Fyn. Learn More

STYLEGUIDE

Note: Also works more like a framework too with all the classes available
for use to avoid clashing or making way too many classes.

Typography/Fonts

Heading 1

Class Name: default-h1

Heading 2

Class Name: default-h2

Heading 3

Class Name: default-h3

Heading 4

Class Name: default-h4
Heading 5
Class Name: default-h5
Heading 6
Class Name: default-h6
Description Text
Class Name: default-description
Paragraph Regular
Class Name: default-paragraph
Paragraph Bold
Class Name: default-paragraph-bold
Paragraph Small Regular
Class Name: default-small-paragraph
Paragraph Smaller Regular
Class Name: default-smaller-paragraph
Button Text
Class Name: default-btn-text
Navigation Text
Class Name: default-nav-text
Label Text
Class Name: default-label
Eyebrow Text
Class Name: default-eyebrow

Colors

Forest Green

Class Name (for text): text-forest-green
Class Name (for background): bg-forest-green
(alternatively you can use the swatch feature and just choose the color)

Green

Class Name (for text): text-green
Class Name (for background): bg-green
(alternatively you can use the swatch feature and just choose the color)

Yellow

Class Name (for text): text-yellow
Class Name (for background): bg-yellow
(alternatively you can use the swatch feature and just choose the color)

Dark Green

Class Name (for text): text-dark-green
Class Name (for background): bg-dark-green
(alternatively you can use the swatch feature and just choose the color)

Sky Blue

Class Name (for text): text-sky-blue
Class Name (for background): bg-sky-blue
(alternatively you can use the swatch feature and just choose the color)

Light Mint

Class Name (for text): text-light-mint
Class Name (for background): bg-light-mint
(alternatively you can use the swatch feature and just choose the color)

Warm Grey

Class Name (for text): text-warm-grey
Class Name (for background): bg-warm-grey
(alternatively you can use the swatch feature and just choose the color)

Dark Grey

Class Name (for text): text-dark-grey
Class Name (for background): bg-dark-grey
(alternatively you can use the swatch feature and just choose the color)

Grey

Class Name (for text): text-grey
Class Name (for background): bg-grey
(alternatively you can use the swatch feature and just choose the color)

Light Grey

Class Name (for text): text-light-grey
Class Name (for background): bg-light-grey
(alternatively you can use the swatch feature and just choose the color)

White

Class Name (for text): text-white
Class Name (for background): bg-white
(alternatively you can use the swatch feature and just choose the color)

Buttons

Filled Primary

BUTTON
Class Name: btn-filled

Outline Primary

Button
Class Name: btn-outline

Link Primary

Button
Class Name (uses text link): default-link

Outline (White) Primary

Button
Class Name: btn-outline-white

Link (White) Primary

Button
Class Name (uses text link): default-link-white

Utilities

Note: Mostly a list of classes for use and to combine with others so that
there's no need to click/change any as it may affect other classes too

(Will be adding more in the future once we progress through the project)

Sections

Class Names:
> Section with a Padding Top & Bottom of [Desktop: 100px, Mobile: 40px]:
section-padding-lg
> Section with a Padding Top & Bottom of [Desktop: 75px, Mobile: 40px]: section-padding-md

Text Alignment

Class Names:
> Left Aligned:
text-left
> Center Aligned:
text-center
> Right Aligned:
text-right

Padding

Class Names:
> Padding on All Corners (20px):
padding-20
> Padding on All Corners (30px): padding-30
> Padding on All Corners (40px): padding-40

Others

Class Names:
> Reset/remove default spacing (both padding and margin) on element:
remove-spacing-all