Copied to clipboard!

Style Guide

Custom utilities, colors, and typography

💡 How to use:

Click on any text sample, color swatch, or button to copy the CSS classes to your clipboard!

Typography

Headings

H1

The five boxing wizards jump quickly

H2

The five boxing wizards jump quickly

H3

The five boxing wizards jump quickly

H4

The five boxing wizards jump quickly

H5
The five boxing wizards jump quickly
H6
The five boxing wizards jump quickly
Tagline
Tagline style

Text Sizes

Large Text

Light (22px)
Normal (22px)
Medium (22px)
Semibold (22px)
Bold (22px)
Extrabold (22px)
Link (22px)

Medium Text

Light (18px)
Normal (18px)
Medium (18px)
Semibold (18px)
Bold (18px)
Extrabold (18px)
Link (18px)

Regular Text

Light (16px)
Normal (16px)
Medium (16px)
Semibold (16px)
Bold (16px)
Extrabold (16px)
Link (16px)

Small Text

Light (14px)
Normal (14px)
Medium (14px)
Semibold (14px)
Bold (14px)
Extrabold (14px)
Link (14px)

Tiny Text

Light (12px)
Normal (12px)
Medium (12px)
Semibold (12px)
Bold (12px)
Extrabold (12px)
Link (12px)

Colors

Theme Colors

Regular Theme

bg-regular-background
Main background
bg-regular-foreground
Secondary background
bg-regular-accent
Accent color
border-regular-border
Border color

Accent Theme

bg-accent-background
Primary accent
bg-accent-foreground
Accent foreground
border-accent-border
Accent border

Boston Theme

bg-boston-background
Boston background
bg-boston-foreground
Boston foreground
border-boston-border
Boston border

Brand Colors

connoisseurs-red
connoisseurs-dark-red

Boston Blue Variants

boston-blue-lightest
boston-blue-lighter
boston-blue-light
boston-blue
boston-blue-dark
boston-blue-darker
boston-blue-darkest

Neutral Colors

neutral-darkest
neutral-darker
neutral-lightest
white

Opacity Variants

White Opacity

white-5
white-10
white-15
white-20
white-30
white-40
white-50
white-60

Dark Opacity

neutral-darkest-5
neutral-darkest-10
neutral-darkest-15
neutral-darkest-20
neutral-darkest-30
neutral-darkest-40
neutral-darkest-50
neutral-darkest-60

Buttons

Primary Buttons

Secondary Buttons

Tertiary Buttons

Link Buttons

Ghost Buttons

Icon Only Buttons

Form Elements

Input Fields

Textarea

Checkboxes

Tags

Default Tag Outlined Tag Text Only Tag Dark Tag

Layout & Spacing

Container

This content is within the .container utility class

Responsive Breakpoints

sm: - 320px and up
md: - 750px and up
lg: - 990px and up
xlg: - 1440px and up
x2lg: - 1920px and up

Border Radius

none
sm
md
lg
full

Usage Guidelines

Typography Best Practices

  • • Use Bodoni for headings and Montserrat for body text
  • • Always use custom text utilities instead of standard Tailwind classes
  • • Use semantic heading classes (heading-h1 through heading-h6) for responsive typography
  • • Use heading-tagline for uppercase, tracked text

Color Best Practices

  • • Use semantic color classes (regular-text, accent-background, etc.) instead of specific colors
  • • Leverage the three themes: Regular (default), Accent (primary actions), Boston (tertiary elements)
  • • Use opacity variants for overlays and subtle backgrounds
  • • Always specify border colors when using borders

Component Best Practices

  • • Use button utilities instead of building buttons from scratch
  • • Apply the container class for consistent page layouts
  • • Use custom form utilities for consistent styling
  • • Maintain accessibility with proper semantic HTML