bOpus Style Guide V1

Complete typography and color system preview with responsive scaling

Typography System

Heading Scale

H1 - Main Page Titles (52px at 2xl)

The quick brown fox jumps over the lazy dog

H2 - Section Titles (43px at 2xl) ⭐ Target Size

The quick brown fox jumps over the lazy dog

H3 - Subsection Titles (34px at 2xl)

The quick brown fox jumps over the lazy dog

H4 - Subpanel Titles (25px at 2xl) ⭐ Target Size

The quick brown fox jumps over the lazy dog

H5 - Small Headings (22px at 2xl)

The quick brown fox jumps over the lazy dog

H6 - Smallest Headings (19px at 2xl)

The quick brown fox jumps over the lazy dog

Body Text

Responsive Body Text (18px at 2xl) ⭐ Target Size

This is the main body text that scales responsively across all breakpoints. At mobile it starts at 14px, grows to 15px on tablet, 16px on desktop, 17px on large screens, and reaches the target 18px at extra large viewports (2xl: 1536px+). This ensures optimal readability at all screen sizes while meeting the requirement for 18px base font at approximately 2000px viewport width.

Light Body Text (18px at 2xl, weight 450)

This is light body text with a slightly heavier weight (450) for improved readability while maintaining the responsive scaling to 18px at large viewports.

Relaxed Body Text (18px at 2xl, increased line height)

This is relaxed body text with increased line height for better readability in longer content sections. It also scales to 18px at large viewports but with more generous line spacing.

Small Text Elements

Caption Text

Caption text for images and small annotations (12px/16px)

Label Text

Label text for form fields and UI elements (14px/20px, weight 500)

Button Text

Button text with letter spacing (14px/20px, weight 600)

Color System

Brand Colors (Green Palette)

#e7f7ee

100

#d9efe4

200

#bde5cf

300

#8fd6b1

400

#53bf87

500

#0e8a43

600

#0c783a

700

#0a6330

800

#084f26

900

#063b1d

950

#042a14

Extended Color Palette

core

Primary

#4d6bfa

Secondary

#4353fa

Charcoal

#1e2a32

Charcoal Light

#e6eaed

accent

Orange

#f57c00

Yellow

#f5b100

Teal

#2b9d8f

Purple

#7d4cc0

Blue

#146cad

Red

#d63c3c

semantic

Text Primary

#292929

Text Secondary

#757575

Text Tertiary

#b3b3b1

Web Link

#0e8a43

background

Light Grey

#fafafa

Light Blue

#f8f8fa

Dark Gray

#2c2c2c

Dark

#1c1c1c

Gradient Colors

Gradient 1

#00cf7a

Gradient 2

#008d52

Gradient 3

#008d52

Gradient 4

#006c3e

Gradient 5

#fe5b25

Gradient Utilities

Rainbow Gradient Text

.text-gradient

Green Gradient Text

.text-green-gradient

Purple Gradient Text

.text-purple-gradient

Brand Gradient Background

.bg-brand-gradient

Contact Gradient Background

.bg-contact-gradient

Component Styles

Buttons

Cards

Brand Card

This is a brand card with white background, subtle border, and rounded corners.

Dark Card

This is a dark card with inset shadow and subtle glow effects.

Responsive Typography Preview

Resize your browser window to see typography scaling across breakpoints:
Mobile (default) → Tablet (768px+) → Desktop (1024px+) → Large (1280px+) → XL (1536px+)

Main Title (scales to 43px at 2xl)

Subpanel Title (scales to 25px at 2xl)

Body text that scales responsively from 14px on mobile to 18px at extra large viewports (2xl: 1536px+). This ensures optimal readability across all device sizes while meeting the target of 18px base font at approximately 2000px viewport width.