DESIGN SYSTEM

VA UI System Documentation

Complete design system specifications for maintaining consistent, conversion-focused UI across all VA loan pages. This system serves as the source of truth and can be adapted for FHA and Conventional domains.

Table of Contents

  1. 1. Hero Panel Container System
  2. 2. Typography System
  3. 3. Action Card Components
  4. 4. Trust Row Pattern
  5. 5. Hero Image Responsive System
  6. 6. Benefit Card Grid
  7. 7. Color System & Accents
  8. 8. Spacing & Layout Tokens

1. Hero Panel Container System

The signature "rounded hero panel" container creates a soft, trustworthy appearance that differentiates our pages from typical mortgage sites.

Core Specifications

Background Color bg-[#F6F7F8]
Border Radius (Mobile) rounded-[28px]
Border Radius (Desktop) lg:rounded-[36px]
Padding (Mobile) p-6
Padding (Desktop) lg:p-16

Visual Example

This is what the hero panel container looks like. All hero content sits inside this soft gray rounded background.

Layout Grid Structure 

<div class="bg-[#F6F7F8] rounded-[28px] lg:rounded-[36px] p-6 lg:p-16">
  <div class="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
    <!-- Left: Content (text, CTAs, trust signals) -->
    <div>...</div>
    
    <!-- Right: Hero Image -->
    <div class="relative overflow-hidden rounded-[28px] lg:rounded-[36px]">...</div>
  </div>
</div>

2. Typography System

Typography is the foundation of readability and conversion. Our system uses Inter font with specific sizing, weight, and spacing for each element.

H1 — Primary Headline

Zero Down VA Home Loans

Mobile Size text-[36px]
Desktop Size lg:text-[60px]
Font Weight font-medium (500)
Line Height leading-[1.05]
Letter Spacing tracking-[-0.02em]

Review Line — Expert Attribution

Reviewed by Vatche Saatdjian, VA Loan Expert, 30+ Years

Size text-[12px] lg:text-[13px]
Color text-[#6B7280]
Icon Color text-[#16A34A]
Placement Directly below H1, small gap (mb-3 lg:mb-4)

Subhead — Supporting Text

Get pre-approved in minutes. Local Nevada specialists. No obligation.

Mobile Size text-[16px]
Desktop Size lg:text-[20px]
Color text-[#6B7280]
Line Height leading-relaxed (1.625)

Body Text — Content Blocks

Standard body text for Quick Answer blocks, benefit descriptions, and informational content. Slightly larger than typical body text for improved readability.

Size text-[15px] lg:text-[17px]
Color text-[#111827]
Line Height leading-relaxed

3. Action Card Components

Stacked action cards are the primary conversion drivers. Each card follows the same structure: icon, title + subtext, and arrow circle.

Buy a Home 0% down for eligible veterans
Refinance VA IRRRL & cash-out options

Core Specifications

Background bg-white
Border border border-[#E5E7EB]
Border Radius (Mobile) rounded-[22px]
Border Radius (Desktop) lg:rounded-[28px]
Padding (Mobile) p-5
Padding (Desktop) lg:p-7
Icon Color text-[#DE3341]
Icon Size text-xl lg:text-3xl
Title Size text-[16px] lg:text-[20px]
Subtext Size text-[13px] lg:text-[16px]
Hover Effect Shadow + darker border + arrow circle turns black
Spacing Between Cards space-y-3 lg:space-y-4

HTML Structure 

<a href="/apply" class="flex items-center justify-between bg-white rounded-[22px] lg:rounded-[28px] p-5 lg:p-7 border border-[#E5E7EB] hover:shadow-md hover:border-[#111827] transition-all group">
  <div class="flex items-center gap-4 lg:gap-6">
    <i class="fa-regular fa-house text-[#DE3341] text-xl lg:text-3xl"></i>
    <div>
      <span class="text-[16px] lg:text-[20px] font-semibold text-[#111827] block">Buy a Home</span>
      <span class="text-[13px] lg:text-[16px] text-[#6B7280]">0% down for eligible veterans</span>
    </div>
  </div>
  <div class="w-10 h-10 lg:w-14 lg:h-14 bg-[#F6F7F8] rounded-full flex items-center justify-center group-hover:bg-[#111827] transition-colors">
    <i class="fa-regular fa-arrow-right text-[#6B7280] group-hover:text-white text-sm lg:text-lg transition-colors"></i>
  </div>
</a>

5. Hero Image Responsive System

The hero image system ensures perfect rendering across all devices with zero distortion, optimal cropping, and conversion-first spacing.

📱 Mobile (≤767px)

Aspect Ratio aspect-[4/5]
Max Height max-h-[340px]
Object Position object-[50%_40%]
Behavior object-fit: cover (fills container, no distortion)
Critical: The 4:5 aspect ratio prevents the image from being too tall and pushing CTAs below the fold on mobile devices.

📱 Tablet (768–1023px)

Aspect Ratio sm:aspect-[16/10]
Max Height sm:max-h-[460px]
Object Position sm:object-[50%_50%]
Layout Switch to two-column if space allows, or remain stacked

💻 Desktop (≥1024px)

Aspect Ratio lg:aspect-[16/10]
Max Height lg:max-h-[520px]
Object Position lg:object-[50%_55%]
Layout Two-column grid (text left, image right)
Note: The slight downward object-position (55%) ensures key subjects remain visible while preserving visual balance.

Complete HTML Structure 

<div class="relative overflow-hidden rounded-[28px] lg:rounded-[36px]">
  <div class="w-full aspect-[4/5] sm:aspect-[16/10] lg:aspect-[16/10] max-h-[340px] sm:max-h-[460px] lg:max-h-[520px]">
    <img 
      src="[IMAGE_URL]" 
      alt="[DESCRIPTIVE_ALT_TEXT]"
      class="w-full h-full object-cover object-[50%_40%] sm:object-[50%_50%] lg:object-[50%_55%]"
      data-media='{"id":"[ID]","src":"[SOURCE]","type":"image"}'
      loading="eager"
      decoding="async"
    />
  </div>
</div>

✓ QA Checklist

  • • Test at 1440px, 1280px, 1024px, 768px, 430px, 390px, 375px
  • • Confirm no stretching or distortion at any breakpoint
  • • Verify subject remains visible (no awkward cropping)
  • • Ensure CTA remains above fold on mobile (image not too tall)
  • • Check for horizontal scrolling (should be none)
  • • Confirm alt text and data-media attributes are present

4. Trust Row Pattern

The trust row appears below action cards and provides social proof, security, and licensing credentials.

4.9/5 from 750+ veterans
No credit impact
NMLS #65506

Specifications

Text Size text-[12px] lg:text-[14px]
Text Color text-[#6B7280]
Gap Between Items gap-4 lg:gap-6
Star Icon Color text-[#F59E0B]
Wrapping Behavior flex-wrap (wraps on narrow screens)

⚠️ Compliance Rules

  • • Reviews claim: Only include if verifiable (e.g., "4.9/5 from 750+ veterans")
  • • "No credit impact": Only if initial step is truly a soft pull or no-pull. If uncertain, use "Secure form" instead
  • • NMLS number: Always include and keep accurate (NMLS #65506)

7. Color System & Cross-Domain Accents

The VA site uses a red accent (#DE3341). When cloning this UI system to FHA and Conventional domains, only swap the accent color while keeping all grayscale base colors identical.

VA Site (Current) — Red Accent

#DE3341

Primary Accent

#111827

Ink (text)

#6B7280

Muted (subtext)

#F6F7F8

Surface

FHA Site — Soft Green Accent (Recommended)

#22c55e

Primary Accent

#111827

Ink (same)

#6B7280

Muted (same)

#F6F7F8

Surface (same)

Soft green conveys trust, affordability, and accessibility—perfect for FHA's first-time buyer audience.

Conventional Site — Deep Blue Accent (Recommended)

#3b82f6

Primary Accent

#111827

Ink (same)

#6B7280

Muted (same)

#F6F7F8

Surface (same)

Deep blue conveys professionalism, stability, and premium quality—perfect for Conventional's creditworthy buyer audience.

Where to Apply Accent Color

  • Action card icons (house, rotate, shield icons)
  • Benefit card icons (dollar, shield, chart icons)
  • Quick Answer lightbulb icon
  • Link hover states and inline CTAs
  • Highlight chips (e.g., "60 seconds" badge)
Important: Do NOT change grayscale colors (ink, muted, surface, borders). Only swap the accent color to maintain visual consistency across domains.

Complete Implementation Checklist

Use this checklist when creating new pages or cloning the VA UI system to FHA/Conventional domains.

1 Hero Panel Container

2 Typography

3 Action Cards

4 Trust Row

5 Hero Image

Cross-Domain Adaptation

Ready to Implement?

Use this documentation as your source of truth. Every new page should follow this system to maintain design consistency and maximize conversions.

Back to Homepage