Style Guide

A comprehensive reference for the Prepain design system. Use this guide to maintain visual consistency across the site.

Typography

Font Family

Montserrat

Primary typeface for all text content

Font Weights

Regular font-weight: 400

Medium font-weight: 500

Semibold font-weight: 600

Extrabold font-weight: 800

Heading Levels

<h1> - text-4xl md:text-6xl font-extrabold leading-[1.1]

Heading Level 1

<h2> - text-2xl md:text-4xl font-bold

Heading Level 2

<h3> - text-xl md:text-2xl font-bold

Heading Level 3

<h4> - text-lg md:text-xl font-semibold

Heading Level 4

<h5> - text-base md:text-lg font-semibold

Heading Level 5

<h6> - text-sm md:text-base font-semibold uppercase

Heading Level 6

Colors

Brand Colors

brand-black

#071233

--color-brand-black

humpback

#2B70C9

--color-humpback

bee

#FFC800

--color-bee

blue

#0075FF

--color-blue

red

#E53935

--color-red

gold

#D4AF37

--color-gold

pink

#FF5A5A

--color-pink

green

#58CC02

--color-green

swan

#E5E5E5

--color-swan

Gray Scale

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

Buttons

Solid Variants

.btn .btn-primary .btn-md

Outline Variants

.btn .btn-primary-outline .btn-md

Sizes

.btn-sm | .btn-md | .btn-lg

States

Normal (hover to see effect)

Disabled

disabled attribute or .btn-disabled class

Loading

.btn-loading (content wrapped in span)

Spacing

1

0.25rem (4px)

2

0.5rem (8px)

3

0.75rem (12px)

4

1rem (16px)

6

1.5rem (24px)

8

2rem (32px)

12

3rem (48px)

16

4rem (64px)

24

6rem (96px)

Prose Content

Paragraph

This is a paragraph of text demonstrating the default prose styling. It includes a link to somewhere that shows the underline and color treatment. The text should be comfortable to read with appropriate line height and spacing.

Unordered List

First item in the list
Second item with more content to show how longer items wrap and maintain proper spacing
Third item with nested list:
- Nested item one
- Nested item two
Fourth item after nesting

Ordered List

First step in the process
Second step with additional details
Third step with nested steps:
1. Sub-step A
2. Sub-step B
Fourth and final step

Blockquote

This is a blockquote that highlights important information or quotes from external sources. It has a distinct visual treatment to stand out from regular content.

Link Styles

Links within prose content are styled with an underline and brand color. They transition smoothly on hover to provide visual feedback.

Regular buttons within prose are excluded from link styling: Button Link