• The full width compact hero has a background image extending to the edge of the 12-column grid on Large viewports. The background image extends to the viewport's edges on Small and Medium devices.

Disclaimer:

• A Desktop and a Mobile version must be choosen in orden to create art assets with specific design specifications.

The full width compact hero's basic anatomy comprises 4 primary areas — background, image, body and CTA.

Default Tag - Use for messaging like "Proximamente" or "Ag 20 - Ag 30" - MAX 25 Characters

Tagline - Use for messaging like "Online Only" and "Only at Ulta Beauty" etc - MAX 15 Characters

Title - Title, required - Use clear and succinct language - MAX 45 Characters

Description - Use to provide context to the Title - MAX 45 Characters

Button - Used to redirect the user to another part of the site

Redirect - Where the CTA should redirect to. Ex: Brandstore - PDP specific UPC

By default the texts color placed in AEM to the Full Width Compact banner is Black(#000000).

⚠️❗IMPORTANT❗⚠️

It is essential to use light background colors for background images design

This ensures sufficient contrast between text and background to meet ADA (Americans with Disabilities Act) accessibility requirements. Using light backgrounds helps maintain readability, prevents eye strain, and guarantees compliance with accessibility guidelines.

⚠️ Text copies must be delivered to the business owner independently of the design, using the available anatomy properties as a reference.⚠️

✅ Correct Design ✅

Desktop

Mobile

Width: 2800px

Height: 800px​

Resolution:300 dpis

The full width compact hero's basic anatomy comprises 4 primary areas — background, image, body and CTA.

General Layout on Desktop​

1760px/1040px Visual Split:​

• 1760px of the width on the left contains editorial content (text + button).​

• 1040px on the right contains multimedia content (images of models, products).​

Width: 1400px

Height: 1400px​

Resolution:300 dpis

Technical Recommendations for Mobile Version

• The marked area should begin approximately between 45% and 50% of the horizontal axis (X-axis) from the left edge of the image. As for its height, it should not exceed 60% of the total height of the canvas, as its purpose is to accommodate visual content (such as faces or products) without interfering with text.​

​

Width: 1400px

Height: 1400px​

Resolution:300 dpis

🟥 Safe Zone (Content Area)

The red box represents the safe zone, where all key communication content must be placed:

• Text elements (headlines, subheadings, disclaimers)

• Buttons and calls to action (CTAs)

• Any elements that must not be cropped or overlapped

This zone ensures full visibility across mobile and responsive platforms.

🟧 Artwork Area

The areas outside the red box are designated as the “Artwork Area”, intended for non-essential visual enhancements such as:

• Product photography

• Models or lifestyle images

• Background textures, lighting effects, or graphic elements

Width: 1400px

Height: 1400px​

Resolution:300 dpis

🟥 Safe Zone (Content Area)

The red rectangle defines the safe zone for core content. All essential communication must remain within this zone to ensure visibility across different platforms:

• Text: headlines, subheadings, disclaimers

• Call-to-action buttons (CTAs)

• Logos and legal info

This zone should be considered the fixed area where content is never cropped.

🟧 Artwork Area (Outside Safe Zone)

The outer gray space, labeled "ZONA DE ARTE", is intended for purely visual enhancements and not for text or actionable content

Artwork Area Proportions (Relative to Full Canvas – 1400 × 1400 px)

• Top – 40% of height
  Ideal for decorative elements: gradients, product halo, upper imagery, etc.

• Right – 30% of width
  Space for cropped models, packaging visuals, or environmental background

Width: 1400px

Height: 1400px​

Resolution:300 dpis

🟧 Artwork Area (Outside Safe Zone)

Yo can use the hole canva to design.