Style Guide

Baja’s ProLine Designs Visual Identity System

Official high-end design framework and UI variables for local and nationwide craftsmanship branding.

Color Palette

Primary: High-Impact Yellow #F2B705 Primary call-to-action buttons, key structural highlights, and active elements.

Secondary: Deep Charcoal #0D0D0D Global page backgrounds, dark section fields, and structural block containers.

Accent: Crisp White #FFFFFF Main heading components, global navigation texts, and highly readable copy lines.

Subtle Accent: Muted Gold #C29204 Structural divider borders, layout lines, iconography, and secondary button accents.

Typography Hierarchy

MONTSERRAT ALPHABET

Headings: Extra Bold 800 / All-Caps (Crisp White / High-Impact Yellow)

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. OUR HEADERS ESTABLISH AN AUTHORITATIVE, INDUSTRIAL APPEARANCE DESIGNED TO REFLECT DURABLE CRAFTSMANSHIP.

The quick brown fox jumps over the lazy dog. Our body typography uses Open Sans at Regular 400 weight to ensure clean legibility, perfect reading balance, and sharp contrast across screen setups and multi-field quote layout configurations against deep charcoal backgrounds.

Body Text: Open Sans Regular 400 (Crisp White / Muted Copy Layers)

UI Components & Animations

Primary Action (Yellow Solid)

Secondary Action (Muted Outline)

Screen Printing Icon

Embroidery Detail Icon

Design Principles

High-Performance Infrastructure

Native block structures nested precisely with Bootstrap layout utilities ensure a lightweight footprint for future e-commerce expansions.

Industrial Contrast Edge

Every text group maintains strict contrast values against #0D0D0D by running crisp white text layouts highlighted by strategic yellow actions.

HSF Visual Identity System

The official design framework for the Hodag Schools Foundation digital presence.

Color Palette

Primary: Hodag Green #004a26 Primary Headers, Navigation, and Foundation Branding

Secondary: Hodag Mist #e6f0eb Section Backgrounds, Hover States, and Bio Headers

Accent: Hodag Gold #ffcc00 High-Priority CTAs (Donate), Urgent Alerts, and Highlights

Contrast: Charcoal #333333 Primary Body Text and Standard Interface Elements

Clean White #ffffff Base Background and Component Containers

Typography

Inter / System Sans

Headings: Semi-Bold 700 / 800 (Hodag Green)

The quick brown hodag jumps over the lazy dog. Our typography is chosen for maximum legibility and a professional, modern feel. We utilize high line-heights (1.8) for long-form content to ensure an effortless reading experience for our community of alumni and donors.

Body: Regular 400 (Charcoal)

UI Components

Primary Action (Learn More)

Urgent Action (Donate)

Education Icon

Legacy Icon

Design Principles

Readability First

Content containers are capped at 750px – 850px for bio and text-heavy pages to prevent eye fatigue.

Intentional Spacing

Generous vertical padding (80px – 100px) is used between sections to allow the brand to breathe.