Design System

Hero description text goes here.

Hero Section Patterns

Full Bleed Hero with Image

Key Specifications:

Minimum viewport height: 60vh
Navigation bar: Fixed position, z-50
Top padding below nav: pt-32 (8rem)
Bottom padding: pb-16 (4rem)
Container width: max-w-4xl with px-4 padding

Implementation Example:


<!-- Spacer for Nav (when position:fixed) -->
<div class="w-full h-[64px] bg-white"></div>

<!-- Hero Section -->
<section class="w-full">
    <div class="relative w-full h-96 -mt-24 bg-brand-dark z-0">
        <div class="relative z-10 container mx-auto px-4 pt-32 pb-16">
            <div class="max-w-4xl mx-auto">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
                    Page Title
                </h1>
                <p class="text-xl text-white/80 max-w-2xl">
                    Hero description text goes here.
                </p>
            </div>
        </div>
    </div>

Content Spacing After Hero

First section after hero: mt-24 (6rem)
Container max width: max-w-4xl
Horizontal padding: px-4
Section spacing: mb-16 (4rem)

Navigation Bar Specifications

Position: fixed top-0 left-0 right-0
Height: h-20 (5rem)
Z-index: z-50
Background: bg-white
Shadow: shadow-sm
Horizontal padding: px-4

Typography

Display - 4.5rem/72px

The quick brown fox

Heading 1 - 3rem/48px

The quick brown fox

Heading 2 - 2.25rem/36px

The quick brown fox

Heading 3 - 1.875rem/30px

The quick brown fox

Heading 4 - 1.5rem/24px

The quick brown fox

Body - 1.125rem/18px

The quick brown fox jumps over the lazy dog. This is a sample paragraph that demonstrates how body text will look in your design system. It should be highly legible and comfortable to read.

Light - 300

The quick brown fox

Regular - 400

The quick brown fox

Medium - 500

The quick brown fox

Bold - 700

The quick brown fox

Color Palette

Rich Black Fogra

#032130

Erin

#00F53D

Cultured

#F2F6F8

Layout Patterns

Two Column with Image

Example Title

Description text goes here, demonstrating the standard two-column layout used throughout the site.

Additional Information, 2024

Card Pattern

Card Title

Card description text

Quote Block

This is an example quote block using the standard left border treatment and padding.

Links and Buttons

Links

This is a paragraph with a standard link embedded in it.

Large Heading Link

Small Link Example

Buttons

Primary Button

Secondary Button

Text Button

Disabled Button

Form Elements

Text Input

Focused Input

Error Input

Error message goes here

Textarea

Select

Checkbox option

Image Grids

Single Image with Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1x3 Grid with Captions

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna.

Ut enim ad minim veniam, quis nostrud exercitation.

2x3 Grid

3x3 Grid

Image Modal

Implementation

The Image Modal component provides a simple way to view images in a larger format with captions. Each image opens in its own modal with a dark overlay background.

Required Structure


<div class="grid-item">
<div class="w-full relative" style="padding-bottom: 56.25%">
    <div data-modal-container>
        <img 
            src="/path/to/image.jpg"
            alt="Image description"
            class="absolute inset-0 w-full h-full object-cover rounded-lg">
    </div>
</div>
<p class="image-caption text-base text-gray-600 italic mt-4">Caption text</p>
</div>

Required Classes and Attributes

grid-item - Container class for the entire modal component
relative - Required on the aspect ratio container
data-modal-container - Required wrapper for modal functionality
image-caption - Class for the caption that appears in modal
absolute inset-0 - Required on image for proper sizing
mt-4 - Spacing between image and caption

Important Notes

The caption must be a sibling to the image container, not nested inside it
The image-caption class is required for the caption to show in the modal
The padding-bottom defines the aspect ratio (56.25% = 16:9)
All images must have meaningful alt text
The caption text should provide additional context beyond the alt text