Brand Identity

Logo Color Extraction

The color palette was extracted directly from the Garage Door Service 365 logo to ensure perfect brand consistency across all touchpoints.

Primary Navy Blue

Source: Logo house and text

#172841

Accent Bronze/Gold

Source: Logo garage door

#a67f4d

Logo Variations

Header Logo

height: 48-64px

Used in website header navigation for optimal visibility and brand recognition

Light Background

height: 64px

Dark Background

height: 64px

Home/Hero Logo

height: 120-150px

Large logo for homepage hero section - makes a bold first impression

height: 144px

Footer Logo

height: 32-40px

Smaller logo for website footer - maintains brand presence without overwhelming

height: 40px

Favicon

Browser tab icon - available in multiple formats for universal compatibility

16x16px

/favicon.svg

32x32px

/favicon.svg

Multi-size ICO

/favicon.ico

Logo Usage Guidelines

Always use transparent PNG
logo.png has transparent background for versatile placement
Maintain aspect ratio
Never stretch or distort the logo - preserve original proportions
Minimum clear space
Keep 16px clear space around logo for breathing room
Minimum size
Never display smaller than 32px height to ensure legibility

Accessibility Standards

WCAG 2.1 AA Compliance

Industry-standard accessibility for inclusive user experiences

All components and pages must meet WCAG 2.1 Level AA standards. This ensures our website is accessible to users with disabilities and provides a better experience for everyone.

Perceivable

Text contrast ratio greater than or equal to 4.5:1 (normal text)
Text contrast ratio greater than or equal to 3:1 (large text)
All images have descriptive alt text
No information conveyed by color alone

Operable

All functionality available via keyboard
Skip navigation link provided
Focus indicators visible (2px ring)
Touch targets greater than or equal to 44x44px

Understandable

Clear, consistent navigation
Semantic HTML landmarks
Descriptive link text
Form labels and error messages

Robust

Valid HTML5 markup
ARIA labels where needed
Works with screen readers
Responsive across devices

Color Contrast Requirements

All text and interactive elements must meet minimum contrast ratios for readability and accessibility compliance.

Normal Text (16px)

Body copy, navigation, labels

4.5:1

minimum ratio

Large Text (18px+ or 14px+ bold)

Headings, large CTAs

3:1

minimum ratio

UI Components

Buttons, borders, focus indicators

3:1

minimum ratio

Approved Color Combinations:

White

on Primary 900

15.2:1

Neutral 900

on White

17.5:1

White

on Primary 500

9.8:1

White

on Accent 700

5.2:1

Keyboard Navigation

All interactive elements must be keyboard accessible with visible focus indicators for users who cannot use a mouse.

Skip Navigation Link

Implemented in Header.astro - allows keyboard users to skip repetitive navigation and jump directly to main content

<a href="#main-content"
class="sr-only focus:not-sr-only...">
Skip to main content
</a>

Focus Indicators

All interactive elements must have visible focus states (2px ring with offset) for keyboard navigation visibility


focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2

Or focus me

Keyboard Shortcuts

Tab Move focus forward

Shift + Tab Move focus backward

Enter Activate links/buttons

Space Activate buttons

Semantic HTML & ARIA

Use semantic HTML5 elements and ARIA attributes for screen reader compatibility and improved accessibility.

Semantic Landmarks

<header> Site header with role="banner"
<main> Main content with role="main"
<footer> Site footer with contentinfo
<nav> Navigation sections
<section> Thematic groupings

ARIA Labels

aria-label Descriptive labels for elements
aria-hidden Hide decorative icons (true)
aria-describedby Link to descriptions
role Define element purpose
sr-only Screen reader only content

Implementation Example

Header component with full accessibility:

Testing Requirements

Keyboard-only navigation
Test all functionality without mouse
Screen reader testing
Test with NVDA (Windows) or VoiceOver (Mac)
Color contrast
Use WebAIM Contrast Checker or browser DevTools
Mobile touch targets
All interactive elements greater than or equal to 44x44px
Lighthouse accessibility audit
Target score of 95+

Complete Color System

Primary (Navy Blue - Logo)

Extracted from client logo - professional, trustworthy brand color

primary-50

#f3f4f5

Very light navy

primary-100

#e7e9ec

Light backgrounds

primary-200

#c5c9cf

Subtle borders

primary-300

#a2a9b3

Disabled states

primary-400

#737e8d

Muted text

primary-500

#172841

LOGO COLOR - Primary brand

primary-600

#132237

Hover states

primary-700

#101c2d

Active states

primary-800

#0c1623

Dark backgrounds

primary-900

#09101a

Very dark navy

Tailwind Classes:

primary-50 primary-100 primary-200 primary-300 primary-400 primary-500 primary-600 primary-700 primary-800 primary-900

Accent (Bronze/Gold - Logo)

Extracted from garage door in logo - warm, premium accent color

accent-50

#f6f2ed

Very light bronze

accent-100

#ede5db

Light backgrounds

accent-200

#dbcbb7

Subtle accents

accent-300

#c9b294

Muted accents

accent-400

#b79870

Secondary CTAs

accent-500

#a67f4d

LOGO COLOR - Premium accent

accent-600

#8d6b41

Hover states

accent-700

#745835

Active states

accent-800

#5b452a

Dark accents

accent-900

#42321e

Very dark bronze

Tailwind Classes:

accent-50 accent-100 accent-200 accent-300 accent-400 accent-500 accent-600 accent-700 accent-800 accent-900

Neutral (Grays)

Grayscale palette for text, borders, and backgrounds

neutral-50

#fafafa

Background light

neutral-100

#f5f5f5

Background subtle

neutral-200

#e5e5e5

Borders light

neutral-300

#d4d4d4

Borders default

neutral-400

#a3a3a3

Text muted

neutral-500

#737373

Text secondary

neutral-600

#525252

Text default

neutral-700

#404040

Text emphasis

neutral-800

#262626

Text strong

neutral-900

#171717

Text darkest

Tailwind Classes:

neutral-50 neutral-100 neutral-200 neutral-300 neutral-400 neutral-500 neutral-600 neutral-700 neutral-800 neutral-900

Logo Colors Highlighted

Primary Brand Color

Navy Blue from Logo

#172841

primary-500

Accent Brand Color

Bronze/Gold from Logo

#a67f4d

accent-500

Typography System

Font Families

Poppins

Display font for headings and emphasis

font-display

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Inter

Body font for readable content

font-sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Heading Levels

Heading 1

text-5xl font-extrabold

60px - Hero sections, page titles

Heading 2

text-4xl font-extrabold

36px - Major section headers

Heading 3

text-2xl font-bold

24px - Subsections, card titles

Heading 4

text-xl font-bold

20px - Component titles, small sections

Body Text Sizes

Large body text for emphasis and important content that needs to stand out

text-xl 20px

Base body text for general content and paragraphs - optimal for readability

text-base 16px

Small body text for secondary content, captions, and supporting information

text-sm 14px

Extra small text for fine print, labels, and metadata

text-xs 12px

Font Weights

Normal (400) font-normal

Medium (500) font-medium

Semibold (600) font-semibold

Bold (700) font-bold

Extrabold (800) font-extrabold

Weight Usage Guidelines

Normal (400): Body text, paragraphs - default readable text
Medium (500): Navigation links, subtle emphasis in body text
Semibold (600): Buttons, labels, important UI text
Bold (700): Subheadings, card titles, emphasis
Extrabold (800): Major headings (H1, H2) - strong visual hierarchy

Complete Type Scale

Full typography scale from small labels to hero headlines with recommended line heights.

Hero Text

text-6xl leading-tight

60px / 1.25 line height - Hero sections only

Display Large

text-5xl leading-tight

48px / 1.25 line height - Page titles, hero subheadings

Heading Large

text-4xl leading-snug

36px / 1.375 line height - Major section headers (H2)

Heading Medium

text-3xl leading-snug

30px / 1.375 line height - Section headers (H3)

Heading Small

text-2xl leading-normal

24px / 1.5 line height - Subsections, card titles (H4)

Body Extra Large

text-xl leading-relaxed

20px / 1.625 line height - Emphasis, lead paragraphs

Body Large - Great for readability on mobile

text-lg leading-relaxed

18px / 1.625 line height - Large body text, descriptions

Body Base - Default body text with optimal readability for long-form content and paragraphs

text-base leading-relaxed

16px / 1.625 line height - Default body text

Body Small - Secondary content, captions, and supporting information that complements main content

text-sm leading-relaxed

14px / 1.625 line height - Helper text, labels

Body Extra Small - Fine print, labels, metadata, and legal text

text-xs leading-normal

12px / 1.5 line height - Minimum readable size

Line Height Scale

Consistent line heights improve readability and create visual rhythm.

leading-tight

1.25 ratio

Tight line height for large display text and headlines. Best for text-4xl and larger.

Usage: Hero text, large headings

leading-snug

1.375 ratio

Snug line height for medium headings. Balances readability with compact vertical spacing.

Usage: H2, H3 headings (text-3xl, text-4xl)

leading-normal

1.5 ratio

Normal line height - Tailwind's default. Good balance for most text sizes.

Usage: Small headings (text-2xl), UI text

leading-relaxed

1.625 ratio

Relaxed line height for optimal body text readability. Best for paragraphs and long-form content.

Usage: Body text (text-base, text-lg)

Line Height Best Practices

Larger text → tighter leading: Hero text uses leading-tight to prevent excessive vertical space
Body text → relaxed leading: Paragraphs use leading-relaxed for comfortable reading
Responsive consideration: Mobile users benefit from slightly more generous line heights
Consistency: Similar text sizes should use the same line height throughout the site

Spacing System

Tailwind Spacing Scale

0 (0px)

No spacing

1 (4px)

Minimal spacing

2 (8px)

Tight spacing

3 (12px)

Small gaps

4 (16px)

Default spacing

6 (24px)

Medium spacing

8 (32px)

Large spacing

12 (48px)

XL spacing

16 (64px)

Section spacing

20 (80px)

Large sections

24 (96px)

Hero spacing

Common Spacing Patterns

Component Padding

p-4 Tight (16px)

p-6 Default (24px)

p-8 Comfortable (32px)

Section Padding

py-12 Small (48px)

py-16 Medium (64px)

py-20 Large (80px)

Grid Gaps

gap-4 Tight (16px)

gap-6 Default (24px)

gap-8 Comfortable (32px)

Stack Spacing

space-y-4 Tight (16px)

space-y-6 Default (24px)

space-y-8 Comfortable (32px)

Border Radius

Large

rounded-lg

8px - Default cards

XL

rounded-xl

12px - Feature cards

2XL

rounded-2xl

16px - Hero sections

Full

rounded-full

Pills, avatars

Shadows & Elevation

hover me

Small

shadow-sm

Subtle elevation

hover me

Medium

shadow-md

Default cards

hover me

Large

shadow-lg

Hover states

hover me

XL

shadow-xl

Modals, popovers

hover me

2XL

shadow-2xl

Hero elements

Design Tokens

Consistency Through Tokens

Design tokens are the foundational values that ensure consistency across the entire design system. They're defined in tailwind.config.js and used throughout components for predictable, maintainable design.

Z-Index Layering Scale

Standardized z-index values prevent layering conflicts and create predictable stacking contexts.

z-default → z-index: 1

Base layer for positioned elements

Usage

Overlays, decorative elements

z-header → z-index: 20

Site header and navigation

Usage

Main navigation, logo

z-sticky → z-index: 30

Sticky navigation and persistent UI

Usage

Sticky sidebars, floating buttons

z-dropdown → z-index: 40

Dropdown menus and popovers

Usage

Menus, tooltips, autocomplete

z-modal → z-index: 50

Modal dialogs and overlays (highest layer)

Usage

Dialogs, lightboxes, alerts

Z-Index Best Practices

Always use tokens: Never use arbitrary z-index values (e.g., z-[999]). Stick to the scale.
Predictable layering: The scale ensures modals always appear above dropdowns, dropdowns above sticky elements, etc.
Debugging tip: If elements aren't stacking correctly, check that both elements use scale values.

Animation Timing Scale

Consistent transition durations create a cohesive, polished user experience across all interactions.

duration-instant → 100ms

Micro-interactions and immediate feedback

Hover me

Example: Button press, checkbox toggle

duration-fast → 200ms

Hover states and tooltips

Hover me

Example: Button hover, link underlines

duration-normal → 300ms

Default transitions (recommended)

Hover me

Example: Modals, dropdowns, accordions

duration-slow → 500ms

Complex animations

Hover me

Example: Page transitions, slide-ins

Animation Guidelines

Default to normal: When unsure, use duration-normal (300ms)
Faster for small elements: Use duration-instant or duration-fast for buttons, icons
Slower for large areas: Use duration-slow for modals, page transitions
Consistency matters: Similar interactions should use the same timing across the site

Opacity Scale

Standard opacity values for overlays, disabled states, and visual hierarchy.

50%

opacity-50

Disabled states, subtle overlays

75%

opacity-75

Hover states, loading indicators

90%

opacity-90

Modal backdrops, overlays

Backdrop Overlays

bg-neutral-900/90

Modal backdrop: Dark overlay with 90% opacity

Glass Morphism

bg-white/50 backdrop-blur

Frosted glass effect with blur and opacity

Complete Icon Library

All 15 custom SVG icons used throughout the website. Icons are inline SVG components, fully customizable with Tailwind classes for color, size, and styling.

Phone

Contact, call-to-action

Clock

24/7 service, hours

Shield

Licensed, insured, safety

Star

Ratings, reviews, quality

CheckCircle

Verified, completed, success

MapPin

Location, service area

Home

Residential services

Building

Commercial services

Alert

Emergency, warnings

Smartphone

Mobile, contact

ChevronRight

Navigation, arrows

Menu

Mobile menu toggle

X

Close, dismiss

Check

Checkmarks, lists

ArrowRight

CTAs, links, navigation

Icon Size Variations

h-4 w-4

16px - Inline text

h-6 w-6

24px - Buttons

h-8 w-8

32px - Badges

h-12 w-12

48px - Feature cards

UI Components

Buttons

Variants

<Button variant="primary">Text</Button> <Button variant="secondary">Text</Button> <Button variant="outline">Text</Button>

Sizes

<Button size="sm">Text</Button> - min-h-[48px] (WCAG 2.1 compliant) <Button size="md">Text</Button> - min-h-[48px] (default) <Button size="lg">Text</Button> - min-h-[56px]

States

Loading state shows a spinner and prevents interaction:

<Button variant="primary" loading={true}>Loading...</Button>

Disabled state prevents interaction and reduces opacity:

<Button variant="primary" disabled={true}>Disabled</Button>

State Usage Best Practices

Loading: Use during async operations (form submissions, API calls). The button remains in DOM for layout stability.
Disabled: Use when action is temporarily unavailable (form validation fails, insufficient permissions).
Both states: Prevent interaction and provide visual feedback. Loading takes precedence if both props are true.
Accessibility: Both states use aria-disabled and prevent pointer events for proper screen reader support.

PhoneLink Component

Header Variant

(405) 555-0365

<PhoneLink variant="header" />

Hero Variant

(405) 555-0365

<PhoneLink variant="hero" />

Inline Variant

Call us today at (405) 555-0365 for emergency service.

<PhoneLink variant="inline" />

ServiceCard Component

Residential Services

Professional garage door services for homes including installations, repairs, and upgrades.

Commercial Services

Expert garage door solutions for businesses, offices, and commercial properties.

<ServiceCard icon="home" title="Title" description="Description" />

TrustBadge Component

Licensed Fully Insured

Availability 24/7 Service

Rated 5.0 Stars

<TrustBadge icon="shield" label="Licensed" value="Fully Insured" />

Priority Badge System

Research Foundation: Based on Oklahoma City market research findings (850+ reviews, 58 keywords, 10 competitors), this priority system communicates strategic importance using color psychology and semantic hierarchy.

CRITICAL Priority (Red)

CRITICAL

WEEK 1-2

TIER 1: CRITICAL

Usage: First-mover advantages, unserved markets, top customer pain points

Examples: Tri-City geographic opportunity, pricing transparency content (#1 pain point)

Impact: $2-3M market potential, 500-1,000 additional monthly clicks

<div class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-bold">CRITICAL</div>

HIGH Priority (Orange)

HIGH

WEEK 3-4

TIER 2: HIGH

Usage: Underserved markets, featured snippet opportunities, top value drivers

Examples: Eastern suburbs (Choctaw, Harrah), emergency service content, FAQPage schema

Impact: 45K underserved population, 20-30% conversion improvement

<div class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-xs font-bold">HIGH</div>

MEDIUM/STANDARD Priority (Blue/Primary)

MEDIUM

MONTH 2-3

TIER 3: STANDARD

Usage: Comprehensive coverage, evergreen content, standard competitive landscape

Examples: Standard OKC metro cities, buying guides, maintenance content, product keywords

Impact: Complete market coverage, topical authority, 100-150 keywords ranking

<div class="px-3 py-1 bg-primary-100 text-primary-800 rounded-full text-xs font-bold">MEDIUM</div>

DEFER Priority (Gray/Neutral)

DEFER

LOW PRIORITY

Usage: Saturated markets, high competition, limited ROI opportunities

Examples: Edmond/Norman (competitor has dedicated offices), low-volume keywords

Impact: Consider only after Tier 1-3 success, resource allocation to higher ROI first

<div class="px-3 py-1 bg-neutral-300 text-neutral-800 rounded-full text-xs font-bold">DEFER</div>

Priority Badge Usage Guidelines

Color Psychology: Red (urgency/critical), Orange (important/high), Blue (standard/reliable), Gray (low priority/defer)
Strategic Alignment: Priorities based on market research data (customer pain points, competitor gaps, search volumes)
Implementation Order: CRITICAL = Phase 1, HIGH = Phase 2, MEDIUM = Phase 3, DEFER = Phase 4
Visual Hierarchy: Use larger badges for CRITICAL, smaller for MEDIUM/DEFER to reinforce importance
Consistency: Apply same priority system across silo design, content calendar, and project planning
Data-Driven: Every priority level backed by specific metrics (market potential, search volume, competitive analysis)

Form Elements

Text Input

Default State

Full Name

Helper text goes here

 <input class="w-full px-4 py-3 border-2 border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 min-h-[48px]" />

Error State

Email Address

Please enter a valid email address

<input class="border-2 border-red-500 focus:ring-red-300" />

Success State

Username

Username is available!

<input class="border-2 border-green-500 focus:ring-green-300" />

Disabled State

Company Name

<input disabled class="bg-neutral-100 text-neutral-500 cursor-not-allowed" />

Select Dropdown

Service Type

 <select class="w-full px-4 py-3 border-2 border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 min-h-[48px]">

Textarea

Message

Maximum 500 characters

<textarea class="w-full px-4 py-3 border-2 border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500">

Checkbox

I agree to the terms and conditions

By checking this box, you agree to our privacy policy and terms of service

Send me promotional emails

Disabled checkbox

<input type="checkbox" class="h-5 w-5 rounded border-2 text-primary-500 focus:ring-2 focus:ring-primary-500" />

Radio Buttons

Select your service urgency

Emergency (Same Day)

We'll arrive within 2-4 hours

Standard Service

Scheduled service appointment

Flexible (Within Week)

We'll find the best time for you

<input type="radio" class="h-5 w-5 border-2 text-primary-500 focus:ring-2 focus:ring-primary-500" />

Form Validation Best Practices

Show errors inline - Display error messages directly below the field
Use color + icons - Don't rely on color alone for validation states
Touch targets 48px+ - All form controls meet WCAG 2.1 minimum
Clear labels - Always provide visible labels, not just placeholders
Required indicators - Use asterisk (*) or "Required" text for mandatory fields

Grid & Responsive System

Breakpoints

sm: 640px

Small tablets and large phones

md: 768px

Tablets

lg: 1024px

Laptops and small desktops

xl: 1280px

Desktops

2xl: 1536px

Large desktops

12-Column Grid Demo

1

2

3

4

5

6

7

8

9

10

11

12

col-span-12 md:col-span-6

col-span-4

Bento Grid Layouts

Modern Asymmetric Layouts

Bento grids create visually interesting layouts with cards of varying sizes. Perfect for feature showcases, service grids, and content highlights. All examples are mobile-first with 48px minimum touch targets.

Pattern 1: Feature Showcase

Mobile: 1 column → Tablet: 2 columns → Desktop: 2x2 with large hero

24/7 Emergency Service

Fast response guaranteed. Licensed & insured technicians ready to help anytime.

Learn More

5-Star Rated

Trusted by 500+ homeowners

Same Day

Fast installation & repair

Licensed

Fully insured & certified

Local Team

Serving your community

HTML Structure:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
  <!-- Hero: Mobile full-width, Desktop 2x2 -->
  <div class="md:col-span-2 lg:row-span-2">...</div>

  <!-- Small cards: Auto-flow on mobile, grid on desktop -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Pattern 2: Services Highlight

Mobile: 1 column → Tablet: 2 columns → Desktop: Asymmetric 3-column

Commercial Services

High-security doors, loading docks, and warehouse solutions for businesses of all sizes.

Loading Docks Security Doors Warehouse

Residential

Custom garage doors, openers, and smart home integration for your property.

New door installation
Opener replacement
Smart home integration
Maintenance & repair

Emergency Repairs

Available 24/7 for urgent door malfunctions and security issues.

Response in 60 minutes

Maintenance Plans

Regular service to keep your doors running smoothly year-round.

Starting at $99/year

HTML Structure:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
  <!-- Wide card: Spans 2 columns on desktop -->
  <div class="lg:col-span-2">...</div>

  <!-- Tall card: Spans 2 rows on desktop -->
  <div class="lg:row-span-2">...</div>

  <!-- Regular cards: Auto-flow -->
  <div>...</div>
  <div>...</div>
</div>

Pattern 3: Content Magazine

Mobile: Stack → Tablet: 2-col → Desktop: Magazine-style asymmetric grid

FEATURED

Smart Garage Door Technology Guide

Learn how modern smart openers can integrate with your home automation system for enhanced security and convenience.

5 min read Read Article

Service Area Expansion

Now serving 15 additional neighborhoods with same-day emergency service.

Jan 15, 2025

Customer Reviews

Rated 4.9/5 stars based on 500+ verified customer reviews.

Spring Maintenance Tips

Essential spring maintenance checklist for garage doors.

Safety Features

Understanding modern garage door safety mechanisms.

HTML Structure:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 lg:gap-6">
  <!-- Featured: 3 cols, 2 rows on desktop -->
  <div class="sm:col-span-2 lg:col-span-3 lg:row-span-2">...</div>

  <!-- Medium: 3 cols on desktop -->
  <div class="lg:col-span-3">...</div>

  <!-- Small: 2 cols each on desktop -->
  <div class="lg:col-span-2">...</div>
  <div class="lg:col-span-2">...</div>
  <div class="lg:col-span-2">...</div>
</div>

Mobile-First Bento Guidelines

Stack on Mobile

Always start with single-column layout (grid-cols-1), then add responsive breakpoints

Touch Target Minimum 48px

All clickable cards must have min-h-[160px] or larger to ensure comfortable tapping

Readable Text on Mobile

Use text-base (16px) minimum for body text, text-xl+ for headings on small screens

Consistent Gap Spacing

Use gap-4 on mobile, gap-6 on desktop for comfortable spacing between cards

Test Real Devices

Bento grids can look different on actual phones vs desktop simulators - always test on real devices

Production Rules

NO EMOJIS IN PRODUCTION CODE

Never use emojis in production website code. Always use SVG icons instead for consistent rendering across browsers and operating systems.

Don't: 5 star rating or checkmark or chart icon

Do: <Star class="h-5 w-5" /> or <CheckCircle class="h-5 w-5" />

Optymizer Footer Required

Every production page must include the Optymizer attribution in the footer:


Growth by [logo] Optymizer

Link to https://optymizer.com with rel="nofollow noopener"

Mobile-First Development

Touch targets minimum 48px

All interactive elements must be at least 48x48px for accessibility and mobile usability

Progressive enhancement only

Build for mobile first, then enhance for desktop - never degrade

Test on real devices

Always test on actual mobile devices with 3G/4G networks - not just desktop simulators