Web Build Standards

Images

All images must have descriptive alt tags.
Optimize images for web: Use 1920-2400px on the longest side for large background and hero images; max 1200px for others. Prefer WEBP format.
Ensure images are proportional; avoid forced sizing that causes distortion.
Use SVGs for logos and custom icons when possible.
Logos in the header and footer should link to the home page using global dynamic link.

SEO + Links

One H1 Per Page: Ensure only one H1 tag is used per page, all others should be H2, H3, spans and so on.
Meta Tags: Include relevant meta titles and descriptions for each page.
Relative Linking: Use relative links such as /contact/ where possible.
Phone Number Links: Format phone numbers as clickable links using the tel: protocol (e.g., tel:+1234567890).
Use Cornerstone Link Fields: Always use the Cornerstone link fields to insert links rather than hard-coding them in HTML or directly in content. This ensures consistency and easier updates.

Visual Consistency

Global Color Palette: Use the global color palette in Cornerstone for as many elements as possible, including solid WHITE and solid BLACK.
Interaction States: Ensure all buttons and interactive elements have defined hover, focus, and active states.
Build Buttons as DIVs: Construct buttons as DIVs containing a headline and an icon, using default components from the Blueprint where possible.
Scroll Animations: Use subtle scroll-in animations, preferably on images. Avoid flashy or large-scale transitions or FX. The default scroll-in animation often works fine.
Homepage Video: Include at least one video element on the homepage if possible, ideally a 5-10 second video loop for backgrounds.

Measuring Quality + QA

Visual Consistency: Ensure the design is matching the approved mockups.
Functionality: All interactive elements (buttons, forms, links) must function correctly.
SEO Compliance: Verify that all pages meet basic SEO requirements (e.g., H1 tags, meta descriptions).

Thank you.