Visual Design Systems & Branding

Typography System

A disciplined type system is the backbone of every e-commerce interface. It establishes hierarchy, guides the eye, and directly impacts readability and conversion. Every value below has been chosen to balance visual impact with accessibility requirements.

Size Scale

Scale Ratio

Use a 1.25x to 1.5x ratio between heading levels. For example, if H3 is 20px, H2 should be 25 – 30px and H1 should be 31 – 45px. This produces a clear visual staircase without jarring jumps or cramped levels.

Limit each page to a maximum of 4 distinct font sizes. More than four creates visual noise and weakens hierarchy.

Line Height

Line Length

The optimal reading measure is 50 – 75 characters per line (approximately 500 – 700px for body text at 16px). Lines shorter than 45 characters cause excessive line-breaking; lines longer than 80 characters cause readers to lose their place when tracking back to the next line.

Letter Spacing

Fluid Typography

Use CSS clamp() to create type that scales smoothly between breakpoints without media queries. This produces a seamless reading experience from mobile to ultrawide displays.

/* Body text: 16px on mobile, scales up, caps at 20px */
font-size: clamp(16px, 1rem + 0.5vw, 20px);

/* H1: 28px on mobile, scales up, caps at 42px */
font-size: clamp(28px, 1.5rem + 2vw, 42px);

/* H2: 22px on mobile, scales up, caps at 32px */
font-size: clamp(22px, 1.25rem + 1.2vw, 32px);

/* H3: 18px on mobile, scales up, caps at 24px */
font-size: clamp(18px, 1rem + 0.8vw, 24px);

Font Pairing for Industrial & Automotive

The Patriot Chassis brand demands typefaces that communicate strength, precision, and American manufacturing heritage. The fundamental pairing strategy is: condensed display font for headlines + clean sans-serif for body.

Recommended Display Fonts (Headlines & Titles)

Recommended Body Font

Recommended Pairings

Color System — The 60-30-10 Rule

The 60-30-10 rule is a foundational principle from interior design that applies directly to web interfaces. It produces balanced, visually harmonious layouts without conscious effort from the viewer.

Distribution

WCAG Contrast Requirements

Extended Neutral Palette

American Flag & Patriotic Colors

The official colors of the United States flag are codified by multiple government agencies. Different sources use slightly different color values because no single standard covers all color models. Below are the authoritative references.

Official Color Values

Bureau of Cultural Affairs Specification

The U.S. Department of State, Bureau of Cultural Affairs provides CMYK and RGB values that differ slightly from Pantone conversions. These are used in official government publications and diplomatic materials.

Patriot Chassis Brand Palette

For digital use on the Patriot Chassis website, we standardize on the following values (aligned with PMS conversions optimized for screen display):

Color Comparison: Source Variants

Spacing System

All spacing in the Patriot Chassis design system is built on an 8px base grid. Every margin, padding, gap, and dimension should be a multiple of 8. This creates a consistent visual rhythm that the human eye perceives as orderly and professional, even without consciously noticing.

Spacing Scale

Application Guidelines

CSS Custom Properties

:root {
    --space-1:   8px;    /* 1x  - tight */
    --space-2:  16px;    /* 2x  - default */
    --space-3:  24px;    /* 3x  - gutters */
    --space-4:  32px;    /* 4x  - component */
    --space-6:  48px;    /* 6x  - section (small) */
    --space-8:  64px;    /* 8x  - section (medium) */
    --space-10: 80px;    /* 10x - section (large) */
    --space-12: 96px;    /* 12x - page-level */
    --space-16: 128px;   /* 16x - hero/major break */
}

Hero Section Design

The hero section is the single most important visual element on any landing page. It establishes brand identity, communicates the primary value proposition, and drives the first action. It must work flawlessly at every viewport width.

Dimensions

Above-the-Fold Targets

• Desktop: ~1200px viewport height (most common). Hero content must be fully visible without scrolling.
• Mobile: ~600px viewport height. Headline + CTA must be visible; supporting text and imagery can extend below.

Required Elements

Every hero section must include exactly three elements:

1. Headline — clear, benefit-driven, 6 – 12 words maximum
2. Subheadline — supporting detail, 15 – 25 words
3. Single primary CTA — one action, not two or three competing buttons

Live Example Pattern

Card Design Patterns

Product cards are the primary browsing interface in e-commerce. A well-structured card communicates product identity, price, and social proof (rating) within a single glance. Consistency across all cards is essential — irregular card heights or misaligned elements create a sloppy, untrustworthy impression.

Image Ratio

Use a 1:1 (square) image ratio for product cards. This is the industry standard used by Amazon, Shopify, and every major e-commerce platform. Square images are easier to crop consistently and align in grids without awkward gaps or overflows.

Content Stack (Top to Bottom)

1. Image — square, product-centered, consistent background
2. Title — max 2 lines, truncate with ellipsis
3. Price — bold, red accent color
4. Rating — star icons + review count
5. CTA Button — "Add to Cart" or "View Details"

Card Behavior

Live Card Examples

Hover over these cards to see the interaction pattern:

Fixed Heights & Text Truncation

All cards in a grid must share the same total height. Use fixed image containers and truncate overflowing text. This keeps the grid visually clean and prevents layout shifts caused by variable content lengths.

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em; /* Reserve space for 2 lines */
}

.card-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

Border vs. Shadow

• Box shadow: Use for elevation — when a card should feel like it floats above the page surface.
• Border: Use for definition — when cards are flush with the page and need edge delineation. Use subtle colors like 1px solid #e2e6ea.
• Combining both (subtle border + light shadow) provides maximum clarity without heaviness.

Shadow & Border System

Shadows create the illusion of depth and physical layering. A consistent shadow system with defined levels prevents the ad-hoc "just make it look elevated" approach that leads to visual inconsistency. Each level corresponds to a specific UI role.

Shadow Levels

CSS Custom Properties

:root {
    --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.10);
    --shadow-3: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-4: 0 16px 48px rgba(0,0,0,0.16);
}

Border Guidelines

Transition Timing

Shadow and border transitions should use 200 – 300ms duration with the standard easing function:

/* Standard easing — quick start, gentle deceleration */
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);

/* Shorthand using the design token */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* var(--transition) */

Animation & Motion Design

Motion should be purposeful and restrained. Animation that serves no functional purpose — decorative spinners, gratuitous parallax, bouncing icons — degrades performance and annoys users. Every animated element should answer the question: "What does this motion communicate?"

Transition Durations

AOS (Animate On Scroll) Library

AOS is a lightweight (5.7KB gzipped) library for scroll-triggered animations. It is the recommended approach for entrance animations on the Patriot Chassis site.

Common AOS Effects

<!-- Fade up (most common, works everywhere) -->
<div data-aos="fade-up" data-aos-duration="600">...</div>

<!-- Fade in from left (for side-by-side layouts) -->
<div data-aos="fade-right" data-aos-duration="600">...</div>

<!-- Zoom in (for hero product images) -->
<div data-aos="zoom-in" data-aos-duration="800">...</div>

<!-- Staggered cards (delay creates cascade) -->
<div data-aos="fade-up" data-aos-delay="0">Card 1</div>
<div data-aos="fade-up" data-aos-delay="100">Card 2</div>
<div data-aos="fade-up" data-aos-delay="200">Card 3</div>

Reduced Motion Preference

Some users experience motion sickness, vestibular disorders, or simply prefer no animation. The prefers-reduced-motion media query must be respected. This is an accessibility requirement, not optional polish.

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

Performance Rules

• Prefer transform and opacity for all animations. These are the only two CSS properties that are GPU-accelerated and can be composited without triggering layout or paint.
• Never animate width, height, top, left, margin, or padding. These trigger expensive layout recalculations on every frame.
• Use will-change sparingly — only on elements you know will animate, and remove it after animation completes. Overusing will-change consumes GPU memory.
• Only animate elements that benefit from motion. Entrance animations on every paragraph are noise. Reserve animation for key moments: hero entrance, card hover, CTA attention, and scroll reveals of important content blocks.

Photography Standards

Product photography is the #1 factor in e-commerce purchase decisions. Poor images destroy trust instantly. Every product image must meet the following technical standards before publication.

Image Dimensions

File Formats & Compression

File Size Budgets

Responsive Image Implementation

<!-- Progressive format delivery with responsive sizes -->
<picture>
    <source
        type="image/avif"
        srcset="product-400.avif 400w,
                product-800.avif 800w,
                product-1200.avif 1200w"
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
    >
    <source
        type="image/webp"
        srcset="product-400.webp 400w,
                product-800.webp 800w,
                product-1200.webp 1200w"
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
    >
    <img
        src="product-800.jpg"
        alt="Patriot Chassis Modular Frame - front view"
        width="800"
        height="800"
        loading="lazy"
        decoding="async"
    >
</picture>

Brand Consistency

Brand consistency is the cumulative effect of every visual decision being the same across every page, every component, and every interaction. A user should never feel like they have left the Patriot Chassis site when navigating between pages. This requires a systematic approach, not ad-hoc styling.

Design Tokens (CSS Custom Properties)

Every visual value — color, spacing, font, shadow, border, timing — must be defined as a CSS custom property and referenced throughout the stylesheet. Direct hex values or pixel numbers in component styles are prohibited.

Component Library Approach

Build a library of reusable components rather than styling pages individually. Every button, card, form element, badge, and navigation item should be a defined component with predictable behavior.

Cross-Page Checklist

• Header and footer are identical on every page (loaded via shared component)
• Page background color is consistent (white or #f7f8fa)
• All headings use the display font (Oswald) in navy (#002868)
• All body text uses Inter at 16px with #1a2332 color
• All CTAs are Old Glory Red (#BF0A30) with white text
• Hover states use the same transition (0.3s cubic-bezier(0.4, 0, 0.2, 1))
• Spacing between sections is consistent (--section-padding: 80px)
• Images use the same border-radius (8px) and loading strategy

Automotive & Industrial Visual Design

The Patriot Chassis brand operates in the automotive aftermarket / custom chassis space. The visual language must communicate strength, precision, American craftsmanship, and mechanical authority. This is not a minimalist lifestyle brand — it is an industrial brand that builds things out of steel.

Brand Personality

Color Application for Automotive

The combination of dark navy + red + white achieves a patriotic and rugged aesthetic simultaneously. Navy provides depth and authority. Red drives action and urgency. White provides breathing room and contrast. This triad is inherently American and inherently industrial.

Typography for Automotive

Bold, condensed typefaces are the standard in automotive and industrial branding. They convey strength through their dense, compact letterforms — the typographic equivalent of a steel I-beam.

• Headlines: Oswald 700 or Bebas Neue, all-caps or title-case, with letter-spacing: -0.02em for tightness
• Subheadlines: Barlow Condensed 600, sentence case, for technical descriptions and category labels
• Body: Inter 400, clean and readable, never condensed — body text must be effortless to read
• Specifications: Monospace (SF Mono, Consolas) for dimensions, weights, tolerances — communicates precision

Photography Direction

Product Photography

• Chassis frames shot on white or light gray backgrounds for catalog/shop pages
• Three-quarter angle as primary view (shows depth and construction)
• Detail shots of welds, mounting points, and finish quality
• Include a scale reference (ruler, human hand) for large products

Lifestyle / Workshop Photography

• Welding sparks, grinding, fabrication in progress — the process is the brand
• Workshop environment: organized tools, steel, concrete, overhead lighting
• Finished vehicles on the road or at shows (the aspiration)
• Warm color temperature, slight grain — authentic, not overly polished

Technical Imagery

• CAD renderings and engineering drawings communicate precision and planning
• Specification sheets with dimensions, materials, weight ratings
• Comparison diagrams (before/after, stock vs. custom)
• Installation sequence photography (step-by-step visual guides)

Industrial Design Elements

What to Avoid

• Rounded, bubbly shapes — they feel soft and consumer-grade; use squared corners or minimal rounding (4 – 8px max)
• Pastel colors — they undermine the industrial authority; stick to saturated reds, deep navies, and clean whites
• Script or handwritten fonts — they feel craft/artisanal, not industrial
• Excessive whitespace — industrial sites should feel dense and information-rich, not sparse and lifestyle-oriented
• Stock photography of generic cars — customers in this market can instantly spot inauthentic imagery; use real product photos only