f*nkytown style guide

Typeface

Defines the font family used across various text elements on the website. This includes specifications for heading, subhead, and body text fonts to ensure brand consistency.

heading

pill

Font Family

Ribes

Weight

900 Black

Ribes

subheading

pill

Font Family

Hoss Round

Weight

Heavy Italic

Chicle from Google Font

body

pill

Font Family

Jost

Weight

400 Normal

Jost from Google Font

Headings

Specifies the styles and hierarchy of headings from level 1 to level 9. Each heading levels has distinct font sizes and spacing to clearly denote the content structure.

heading-style-1

pill

Weight

900 Black

Size

7 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 1

heading-style-2

pill

Weight

900 Black

Size

5 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 2

heading-style-3

pill

Weight

900 Black

Size

4 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 3

heading-style-4

pill

Weight

900 Black

Size

3 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 4

heading-style-5

pill

Weight

900 Black

Size

2 rem

Height

1.2

Width

100%

Margin

↓ 0.5 rem

Heading 5

heading-style-6

pill

Weight

900 Black

Size

1.5 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 6

heading-style-7

pill

Weight

900 Black

Size

1.25 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 7

heading-style-8

pill

Weight

900 Black

Size

1 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 8

heading-style-9

pill

Weight

900 Black

Size

0.8 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Heading 9

Subheadings

Specifies the styles and hierarchy of subheadings from level 1 to level 6. Each heading levels has distinct font sizes and spacing to clearly denote the content structure.

subheading-style-1

pill

Weight

400 Normal

Size

3 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 1

subheading-style-2

pill

Weight

400 Normal

Size

2 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 2

subheading-style-3

pill

Weight

400 Normal

Size

1.5 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 3

subheading-style-4

pill

Weight

400 Normal

Size

1.25 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 4

subheading-style-5

pill

Weight

400 Normal

Size

1 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 5

subheading-style-6

pill

Weight

400 Normal

Size

0.75 rem

Height

0.9

Width

100%

Margin

↓ 0.5 rem

Subheading 6

Text Classes

Outlines different text sizes, weights, styles, decorations, and alignment options. These classes help maintain uniformity in textual presentation and improve visual hierarchy.

Text Sizes

text-size-l

pill

Weight

400 Normal

Size

1.5 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

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.

text-size-m

pill

Weight

400 Normal

Size

1.25 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

text-size-r

pill

Weight

400 Normal

Size

1 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

text-size-s

pill

Weight

400 Normal

Size

0.85 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

text-size-xs

pill

Weight

400 Normal

Size

0.75 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

text-size-t

pill

Weight

400 Normal

Size

0.65 rem

Height

1.5

Width

100%

Margin

↓ 0.5 rem

Text Styles

regular

pill

Style / Decoration

none

Regular text style

italic

pill

Style / Decoration

italic

Italic text style

strikethrough

pill

Style / Decoration

strikethrough

Strikethrough text style

underline

pill

Style / Decoration

underline

Underline text style

overline

pill

Style / Decoration

overline

Overline text style

link

pill

Style / Decoration

link

Link text style

allcaps

pill

Style / Decoration

all caps

All caps text style

titlecase

pill

Style / Decoration

title case

Title case text style

lowercase

pill

Style / Decoration

lowercase

Lowercase text style

muted

pill

Style / Decoration

opacity

Muted text style

custom-span

pill

Style / Decoration

custom span

Custom span

Text Alignment

align-left

pill

Align

left

align-left

pill

Align

center

align-left

pill

Align

right

align-left

pill

Align

justify

Colors

Establishes the color palette for text and element background. This section ensures that colors are used consistently and align with the brand's visual identity.

Text Colors

text-color-primary

pill

Text Color

⬤

text-color-secondary

pill

Text Color

⬤

text-color-alternate

pill

Text Color

⬤

text-color-green-1

Text Color

⬤

text-color-green-2

Text Color

⬤

text-color-green-3

Text Color

⬤

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.

text-color-red-1

Text Color

⬤

text-color-red-2

Text Color

⬤

text-color-red-3

Text Color

⬤

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.

text-color-blue-1

Text Color

⬤

text-color-blue-2

Text Color

⬤

text-color-blue-3

Text Color

⬤

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.

Background Colors

bg-color-primary

pill

Background Color

⬤

bg-color-secondary

pill

Background Color

⬤

bg-color-alternate

pill

Background Color

⬤

bg-color-green-1

Background Color

⬤

bg-color-green-2

Background Color

⬤

bg-color-green-3

Background Color

⬤

bg-color-red-1

Background Color

⬤

bg-color-red-2

Background Color

⬤

bg-color-red-3

Background Color

⬤

bg-color-blue-1

Background Color

⬤

bg-color-blue-2

Background Color

⬤

bg-color-blue-3

Background Color

⬤

Buttons

Specifies the design of buttons. Buttons should have a clear call-to-action and change visually to indicate different states like hover, active, and disabled.

button

pill

Corner Radius

3 rem

Text Size

1 rem

Text Color

⬤

BG Color

⬤

Outline Color

⬤

Primary Button

button

is-outline

Text Color

⬤

BG Color

◯

Outline Color

⬤

Outline Button

button

is-small

Corner Radius

1.5 rem

Text Size

0.75 rem

Small Button

button

is-large

Corner Radius

5 rem

Text Size

1.25 rem

Large Button

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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 velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

↑

Category

Menu Item Name

Menu Item Name

Menu Item Name

f*nkytown style guide

Ribes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 7

Heading 8

Heading 9

Subheading 1

Subheading 2

Subheading 3

Subheading 4

Subheading 5

Subheading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6