Meta Muse Spark Open – Style and Fashion
via Modal · Generated
- AIMAC Debt 32.47
- Cost $0.06
- Total Violations 36
- HTML Size 48 KB
- Em Dashes 47
Screenshot
View Live Page
Accessibility Issues Found
8 Critical 28 Serious
-
button-name critical 2 instances
Buttons must have discernible text
Example HTML
<button class="hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition"> -
color-contrast serious 24 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span>Featured In</span> -
image-alt critical 6 instances
Images must have alternative text
Example HTML
<img src="https://picsum.photos/seed/cap1/300/360" class="h-28 w-full object-cover"> -
link-name serious 4 instances
Links must have discernible text
Example HTML
<a href="#" class="w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition"><i data-lucide="in...
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MÆVE — The Modern Atelier | Curated Style for the Intentional Wardrobe</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,ital@6..96,0;6..96,1&family=Instrument+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config={
theme:{
extend:{
fontFamily:{
serif:['"Bodoni Moda"', 'serif'],
sans:['"Instrument Sans"', 'sans-serif'],
},
colors:{
ivory:'#F8F5F0',
ink:'#0F0F0F',
clay:'#C9A96A',
stone:'#E8E0D5',
blush:'#F2E6DD',
muted:'#6B6B6B'
}
}
}
}
</script>
<style>
*{ -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#C9A96A;border-radius:10px}
</style>
</head>
<body class="bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white">
<!-- Top Bar -->
<div class="bg-ink text-stone text-[11px] tracking-[0.18em] uppercase py-2.5 text-center font-medium">
<div class="max-w-[1400px] mx-auto px-4 flex justify-center items-center gap-6">
<span class="hidden md:inline">Complimentary Shipping on Orders $250+</span>
<span class="opacity-30 hidden md:inline">•</span>
<span>New Fall Capsule Live — <a href="#collections" class="underline underline-offset-4 decoration-clay hover:text-white transition">Explore Now</a></span>
</div>
</div>
<!-- HEADER -->
<header class="sticky top-0 z-50 bg-ivory/95 backdrop-blur-xl border-b border-stone">
<div class="max-w-[1400px] mx-auto px-6 lg:px-8">
<div class="flex items-center justify-between h-[72px] lg:h-[84px]">
<!-- Logo -->
<a href="#" class="flex items-center gap-3 group">
<div class="w-10 h-10 bg-ink text-ivory grid place-items-center font-serif text-lg tracking-widest">MÆ</div>
<div class="leading-none">
<div class="font-serif text-[22px] tracking-[0.18em] font-semibold">MÆVE</div>
<div class="text-[9px] tracking-[0.22em] uppercase text-muted font-semibold -mt-0.5">The Modern Atelier</div>
</div>
</a>
<!-- Desktop Nav -->
<nav class="hidden lg:flex items-center gap-8 text-[12px] tracking-[0.14em] uppercase font-semibold">
<a href="#collections" class="hover:text-clay transition">Collections</a>
<a href="#style-guide" class="hover:text-clay transition">Style Guide</a>
<a href="#runway" class="hover:text-clay transition">Runway Reports</a>
<a href="#beauty" class="hover:text-clay transition">Beauty Lab</a>
<a href="#journal" class="hover:text-clay transition">Journal</a>
<a href="#contact" class="hover:text-clay transition">Contact</a>
</nav>
<!-- Actions -->
<div class="flex items-center gap-2 lg:gap-4">
<button class="hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition"><i data-lucide="search" class="w-4 h-4"></i></button>
<button class="hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition"><i data-lucide="user" class="w-4 h-4"></i></button>
<a href="#style-guide" class="hidden lg:inline-flex bg-ink text-ivory px-6 py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-black transition">Get Inspired</a>
<button id="mobileBtn" class="lg:hidden w-9 h-9 grid place-items-center border border-stone rounded-full"><i data-lucide="menu" class="w-4 h-4"></i></button>
<a href="#" class="relative w-9 h-9 grid place-items-center border border-stone rounded-full">
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
<span class="absolute -top-1 -right-1 bg-clay text-white text-[10px] w-5 h-5 grid place-items-center rounded-full font-bold">2</span>
</a>
</div>
</div>
<!-- Mobile Nav -->
<div id="mobileNav" class="hidden lg:hidden border-t border-stone py-6 flex-col gap-4 text-[13px] tracking-widest uppercase font-semibold">
<a href="#collections">Collections</a>
<a href="#style-guide">Style Guide</a>
<a href="#runway">Runway Reports</a>
<a href="#beauty">Beauty Lab</a>
<a href="#journal">Journal</a>
<a href="#contact">Contact</a>
</div>
</div>
<!-- Tagline bar -->
<div class="bg-blush/60 border-y border-stone">
<div class="max-w-[1400px] mx-auto px-6 lg:px-8 py-3 flex flex-wrap justify-between items-center gap-3 text-[11px]">
<p class="tracking-[0.16em] uppercase font-semibold text-muted">Curated Style for the Intentional Wardrobe — Est. 2018 • New York • Paris</p>
<div class="flex items-center gap-4 text-muted">
<span class="flex items-center gap-1.5"><i data-lucide="instagram" class="w-3.5 h-3.5"></i> @maeve.atelier</span>
<span class="hidden sm:inline opacity-30">|</span>
<span class="hidden sm:inline">Editor's Letter Vol. 47</span>
</div>
</div>
</div>
</header>
<!-- HERO -->
<section class="max-w-[1400px] mx-auto px-6 lg:px-8 pt-8 lg:pt-12">
<div class="grid lg:grid-cols-12 gap-6 lg:gap-8">
<!-- Left Hero Image + Title -->
<div class="lg:col-span-8">
<div class="relative overflow-hidden bg-stone">
<img src="https://picsum.photos/seed/maevehero/1100/720" class="w-full h-[520px] lg:h-[640px] object-cover" alt="Fall fashion editorial">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 lg:p-10 text-white max-w-[620px]">
<p class="text-[11px] tracking-[0.2em] uppercase font-semibold text-clay mb-3">Fall/Winter 2025 — Cover Story</p>
<h1 class="font-serif text-4xl lg:text-[56px] leading-[0.95] font-light">The Art of<br><span class="italic font-normal">Quiet Luxury</span></h1>
<p class="mt-4 text-sm lg:text-[15px] leading-relaxed text-white/80 max-w-[520px]">We deconstruct the new minimalism — from sumptuous knits and sculpted tailoring to the sustainable fashion choices shaping a more conscious closet. Less noise, more essence.</p>
<div class="mt-6 flex gap-3">
<a href="#collections" class="bg-white text-ink px-7 py-3.5 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-ivory transition">Shop The Editorial</a>
<a href="#journal" class="border border-white/50 text-white px-7 py-3.5 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-white hover:text-ink transition">Read Story</a>
</div>
</div>
<div class="absolute top-6 right-6 bg-white px-4 py-3 text-center shadow-xl">
<div class="text-[10px] tracking-[0.18em] uppercase font-bold text-muted">Issue</div>
<div class="font-serif text-2xl leading-none">047</div>
</div>
</div>
</div>
<!-- Right Sidebar: Editor Picks -->
<div class="lg:col-span-4 flex flex-col gap-6">
<!-- Must Haves Card -->
<div class="bg-white border border-stone p-6 lg:p-7">
<div class="flex items-center justify-between mb-5">
<h3 class="text-[11px] tracking-[0.18em] uppercase font-bold">Editor's Picks — Must-Haves</h3>
<span class="text-clay"><i data-lucide="sparkles" class="w-4 h-4"></i></span>
</div>
<div class="space-y-4">
<a href="#" class="flex gap-4 group">
<img src="https://picsum.photos/seed/bag1/120/140" class="w-20 h-24 object-cover" alt="">
<div class="flex-1">
<p class="text-[11px] tracking-[0.12em] uppercase text-muted font-semibold">Bags & Leather</p>
<h4 class="font-serif text-[15px] leading-tight group-hover:text-clay transition">The Sculpted Saddle in Brushed Suede</h4>
<p class="text-xs text-muted mt-1">$485 — Why stylists are calling it the “one-bag solution”</p>
</div>
</a>
<div class="h-px bg-stone"></div>
<a href="#" class="flex gap-4 group">
<img src="https://picsum.photos/seed/trench/120/140" class="w-20 h-24 object-cover" alt="">
<div class="flex-1">
<p class="text-[11px] tracking-[0.12em] uppercase text-muted font-semibold">Outerwear</p>
<h4 class="font-serif text-[15px] leading-tight group-hover:text-clay transition">Wool-Cashmere Cocoon Coat</h4>
<p class="text-xs text-muted mt-1">$620 — Accessorizing tip: cinch with leather obi</p>
</div>
</a>
<div class="h-px bg-stone"></div>
<a href="#" class="flex gap-4 group">
<img src="https://picsum.photos/seed/earrings/120/140" class="w-20 h-24 object-cover" alt="">
<div class="flex-1">
<p class="text-[11px] tracking-[0.12em] uppercase text-muted font-semibold">Jewelry</p>
<h4 class="font-serif text-[15px] leading-tight group-hover:text-clay transition">Vermeil Dome Hoops — 18k Recycled</h4>
<p class="text-xs text-muted mt-1">$145 — Personal styling favorite for day-to-night</p>
</div>
</a>
</div>
<a href="#" class="mt-6 block text-center border border-ink py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-ink hover:text-white transition">View All 12 Picks →</a>
</div>
<!-- Celebrity Looks Mini -->
<div class="bg-ink text-ivory p-6 lg:p-7 relative overflow-hidden">
<p class="text-[11px] tracking-[0.18em] uppercase font-bold text-clay">Celebrity Looks • Decoded</p>
<h3 class="font-serif text-[22px] leading-tight mt-2">Zendaya’s Off-Duty Uniform, Re-created Under $300</h3>
<p class="text-sm text-white/70 mt-3 leading-relaxed">We broke down her LAX street style — relaxed tailoring, vintage tee, and the art of accessorizing with quiet hardware.</p>
<img src="https://picsum.photos/seed/celebrity/400/260" class="w-full h-44 object-cover mt-5 border border-white/10" alt="">
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[11px] tracking-[0.14em] uppercase font-bold text-clay hover:text-white transition">Get The Look <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i></a>
</div>
</div>
</div>
<!-- Press Logos -->
<div class="mt-8 border-y border-stone py-5 flex flex-wrap justify-between items-center gap-6 text-[11px] tracking-[0.18em] uppercase font-bold text-muted opacity-70">
<span>Featured In</span>
<span class="font-serif text-[18px] tracking-[0.12em] lowercase">vogue</span>
<span class="font-serif text-[16px] tracking-widest">ELLE</span>
<span class="font-serif text-[16px]">Harper's BAZAAR</span>
<span class="tracking-[0.2em]">THE CUT</span>
<span class="tracking-[0.16em]">GQ STYLE</span>
<span class="hidden lg:inline-flex items-center gap-2 bg-ink text-white px-4 py-2 rounded-full text-[10px]"><i data-lucide="award" class="w-3 h-3 text-clay"></i> Best Independent Atelier 2024</span>
</div>
</section>
<!-- COLLECTIONS / CATEGORY PORTAL -->
<section id="collections" class="max-w-[1400px] mx-auto px-6 lg:px-8 mt-12 lg:mt-16">
<div class="flex flex-wrap justify-between items-end gap-4 mb-8">
<div>
<p class="text-clay text-[11px] tracking-[0.18em] uppercase font-bold">Collections — Fall Edit</p>
<h2 class="font-serif text-3xl lg:text-[42px] leading-none mt-2">Style, Stripped to Its Essence</h2>
</div>
<p class="max-w-[520px] text-sm leading-relaxed text-muted">Four curated pathways to build a wardrobe that works harder, lasts longer, and feels entirely you. From street style pragmatism to runway fantasy — all through a sustainable fashion lens.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<article class="group bg-white border border-stone overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/seed/street/600/700" class="w-full h-[360px] object-cover group-hover:scale-[1.03] transition duration-700" alt="Street Style">
<span class="absolute top-4 left-4 bg-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold">Street Style • 24 Looks</span>
</div>
<div class="p-6">
<h3 class="font-serif text-xl leading-tight">Street Style Decoded</h3>
<p class="text-sm leading-relaxed text-muted mt-3">Real-world personal styling from Copenhagen to SoHo. Learn how to balance proportion, master layering, and let accessorizing do the talking — one utilitarian parka, one thrifted silk scarf at a time.</p>
<ul class="mt-4 text-[13px] leading-6 text-ink/80 list-disc list-inside">
<li>Off-duty tailoring formulas</li>
<li>Accessorizing with intention</li>
</ul>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1 hover:text-clay hover:border-clay transition">Explore Street <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</div>
</article>
<!-- Card 2 -->
<article class="group bg-white border border-stone overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/seed/accessories/600/700" class="w-full h-[360px] object-cover group-hover:scale-[1.03] transition duration-700" alt="Accessories">
<span class="absolute top-4 left-4 bg-ink text-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold">Accessories Guide • Editor Ranked</span>
</div>
<div class="p-6">
<h3 class="font-serif text-xl leading-tight">The Accessories Guide</h3>
<p class="text-sm leading-relaxed text-muted mt-3">The difference between an outfit and a look lives in the details. We dissect hardware, handbags, and heirloom jewelry — with sustainable fashion alternatives that don’t compromise on polish.</p>
<ul class="mt-4 text-[13px] leading-6 text-ink/80 list-disc list-inside">
<li>Capsule jewelry wardrobes</li>
<li>Bag silhouettes for every frame</li>
</ul>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1 hover:text-clay hover:border-clay transition">Shop Accessories <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</div>
</article>
<!-- Card 3 -->
<article class="group bg-white border border-stone overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/seed/runway/600/700" class="w-full h-[360px] object-cover group-hover:scale-[1.03] transition duration-700" alt="Runway">
<span class="absolute top-4 left-4 bg-clay text-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold">Runway Reports • FW25</span>
</div>
<div class="p-6">
<h3 class="font-serif text-xl leading-tight">Runway Reports</h3>
<p class="text-sm leading-relaxed text-muted mt-3">From Miu Miu’s librarian-core to Khaite’s sculpted minimalism, we translate couture into closet. Keynotes on fabric, palette, and silhouette — plus how to honor the trend without overhauling your wardrobe.</p>
<ul class="mt-4 text-[13px] leading-6 text-ink/80 list-disc list-inside">
<li>Color stories: oxblood & ecru</li>
<li>Texture play for winter</li>
</ul>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1 hover:text-clay hover:border-clay transition">Read Reports <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</div>
</article>
<!-- Card 4 -->
<article class="group bg-white border border-stone overflow-hidden hover:shadow-xl transition-all duration-300">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/seed/sustainable/600/700" class="w-full h-[360px] object-cover group-hover:scale-[1.03] transition duration-700" alt="Sustainable">
<span class="absolute top-4 left-4 bg-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold">Conscious Closet</span>
</div>
<div class="p-6">
<h3 class="font-serif text-xl leading-tight">Sustainable Fashion</h3>
<p class="text-sm leading-relaxed text-muted mt-3">Buy less, wear longer. Our sourcing team vets deadstock fabrics, circular production, and transparent pricing — so your personal styling journey leaves a lighter footprint.</p>
<ul class="mt-4 text-[13px] leading-6 text-ink/80 list-disc list-inside">
<li>Capsule wardrobes 30% less waste</li>
<li>Care guides to extend garment life</li>
</ul>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1 hover:text-clay hover:border-clay transition">Shop Conscious <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</div>
</article>
</div>
</section>
<!-- STYLE GUIDE INTERACTIVE - Capsule Builder -->
<section id="style-guide" class="max-w-[1400px] mx-auto px-6 lg:px-8 mt-12 lg:mt-20">
<div class="bg-ink text-ivory overflow-hidden border border-ink">
<div class="grid lg:grid-cols-2">
<!-- Left: Interactive -->
<div class="p-6 lg:p-10">
<p class="text-clay text-[11px] tracking-[0.18em] uppercase font-bold">Interactive — Personal Styling Studio</p>
<h2 class="font-serif text-3xl lg:text-[40px] leading-none mt-3">Build Your <span class="italic text-clay">Capsule</span> in 60 Seconds</h2>
<p class="text-white/70 text-sm leading-relaxed mt-4 max-w-[560px]">Answer three quick prompts and our stylists will assemble a 12-piece sustainable fashion capsule tailored to your lifestyle, palette, and silhouette. Save it, share it, shop it — your accessorizing shortcut.</p>
<!-- Stepper -->
<div class="mt-8 bg-white text-ink rounded-xl p-6 border border-stone">
<div class="flex items-center justify-between">
<div class="flex gap-2">
<span id="dot1" class="w-8 h-2 rounded-full bg-ink"></span>
<span id="dot2" class="w-8 h-2 rounded-full bg-stone"></span>
<span id="dot3" class="w-8 h-2 rounded-full bg-stone"></span>
</div>
<span id="stepLabel" class="text-[11px] tracking-[0.14em] uppercase font-bold text-muted">Step 1 of 3</span>
</div>
<!-- Step 1 -->
<div id="step1" class="mt-6">
<h4 class="font-serif text-xl">What’s your day-to-day?</h4>
<div class="grid grid-cols-3 gap-3 mt-4">
<button onclick="choose('lifestyle','Creative')" class="optBtn border border-stone rounded-lg py-4 px-2 text-center hover:border-ink transition">
<i data-lucide="palette" class="w-5 h-5 mx-auto"></i><div class="text-xs font-semibold mt-2">Creative Studio</div>
</button>
<button onclick="choose('lifestyle','Corporate')" class="optBtn border border-stone rounded-lg py-4 px-2 text-center hover:border-ink transition">
<i data-lucide="briefcase" class="w-5 h-5 mx-auto"></i><div class="text-xs font-semibold mt-2">Corporate</div>
</button>
<button onclick="choose('lifestyle','On-the-go')" class="optBtn border border-stone rounded-lg py-4 px-2 text-center hover:border-ink transition">
<i data-lucide="footprints" class="w-5 h-5 mx-auto"></i><div class="text-xs font-semibold mt-2">On-The-Go</div>
</button>
</div>
</div>
<!-- Step 2 -->
<div id="step2" class="hidden mt-6">
<h4 class="font-serif text-xl">Pick a palette that feels like you</h4>
<div class="grid grid-cols-3 gap-3 mt-4">
<button onclick="choose('palette','Warm Neutrals')" class="optBtn border-2 border-transparent rounded-lg p-1 hover:border-ink transition"><div class="h-16 rounded-md bg-[#D9C5A5]"></div><div class="text-xs font-semibold mt-2">Warm Neutrals</div></button>
<button onclick="choose('palette','Monochrome')" class="optBtn border-2 border-transparent rounded-lg p-1 hover:border-ink transition"><div class="h-16 rounded-md bg-zinc-900"></div><div class="text-xs font-semibold mt-2">Monochrome</div></button>
<button onclick="choose('palette','Oxbl ood & Ecru')" class="optBtn border-2 border-transparent rounded-lg p-1 hover:border-ink transition"><div class="h-16 rounded-md bg-[#7A1C1C]"></div><div class="text-xs font-semibold mt-2">Oxblood & Ecru</div></button>
</div>
</div>
<!-- Step 3 -->
<div id="step3" class="hidden mt-6">
<h4 class="font-serif text-xl">Your accessorizing mantra</h4>
<div class="grid grid-cols-1 gap-3 mt-4">
<button onclick="choose('mantra','Minimal hardware')" class="optBtn border border-stone rounded-lg py-3 px-4 text-left hover:border-ink transition text-sm font-medium">Minimal hardware — let the cut speak</button>
<button onclick="choose('mantra','Statement pieces')" class="optBtn border border-stone rounded-lg py-3 px-4 text-left hover:border-ink transition text-sm font-medium">Statement pieces — accessorizing as art</button>
<button onclick="choose('mantra','Vintage mix')" class="optBtn border border-stone rounded-lg py-3 px-4 text-left hover:border-ink transition text-sm font-medium">Vintage + modern mix — stories in every look</button>
</div>
</div>
<div class="mt-6 flex justify-between items-center">
<button id="backBtn" onclick="back()" class="hidden text-[11px] tracking-[0.14em] uppercase font-bold">← Back</button>
<div class="ml-auto flex gap-3">
<button onclick="resetBuilder()" class="text-[11px] tracking-[0.14em] uppercase font-bold text-muted">Reset</button>
<button id="nextBtn" onclick="next()" class="bg-ink text-white px-6 py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-black transition">Next →</button>
</div>
</div>
</div>
<p class="text-[11px] tracking-[0.12em] uppercase text-white/50 mt-4 flex items-center gap-2"><i data-lucide="shield-check" class="w-3.5 h-3.5"></i> No email required to preview • Takes ~45s</p>
</div>
<!-- Right: Result Preview -->
<div class="bg-blush text-ink p-6 lg:p-10 flex flex-col">
<div class="flex items-center justify-between">
<p class="text-[11px] tracking-[0.16em] uppercase font-bold text-muted">Your Capsule Preview</p>
<span class="bg-white border border-stone px-3 py-1.5 text-[11px] tracking-[0.14em] uppercase font-bold">12 Pieces • 48+ Outfits</span>
</div>
<div id="capsuleResult" class="mt-6 bg-white border border-stone p-5 flex-1">
<div class="grid grid-cols-3 gap-3">
<img src="https://picsum.photos/seed/cap1/300/360" class="h-28 w-full object-cover">
<img src="https://picsum.photos/seed/cap2/300/360" class="h-28 w-full object-cover">
<img src="https://picsum.photos/seed/cap3/300/360" class="h-28 w-full object-cover">
<img src="https://picsum.photos/seed/cap4/300/360" class="h-28 w-full object-cover">
<img src="https://picsum.photos/seed/cap5/300/360" class="h-28 w-full object-cover">
<img src="https://picsum.photos/seed/cap6/300/360" class="h-28 w-full object-cover">
</div>
<div class="mt-5">
<h4 id="capsuleTitle" class="font-serif text-xl">The Soho Minimalist</h4>
<p id="capsuleDesc" class="text-sm text-muted leading-relaxed mt-2">Crisp poplin, relaxed tailoring, and soft suede — anchored by warm neutrals. Perfect for creative commutes and gallery evenings. Our stylist suggests accessorizing with sculpted gold and a structured tote.</p>
<div class="flex flex-wrap gap-2 mt-4 text-[11px] tracking-[0.12em] uppercase font-semibold">
<span class="bg-ivory border border-stone px-3 py-1.5">Sustainable Fabrics</span>
<span class="bg-ivory border border-stone px-3 py-1.5">Personal Styling Notes</span>
</div>
<div class="grid grid-cols-2 gap-3 mt-5">
<a href="#" class="bg-ink text-white text-center py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-black transition">Shop This Capsule</a>
<a href="#" class="bg-white border border-ink text-center py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-ivory transition">Share Style</a>
</div>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3 text-center">
<div class="bg-white border border-stone py-4"><div class="font-serif text-xl leading-none">4.9/5</div><div class="text-[10px] tracking-[0.14em] uppercase font-bold text-muted">Stylist Rating</div></div>
<div class="bg-white border border-stone py-4"><div class="font-serif text-xl leading-none">30%</div><div class="text-[10px] tracking-[0.14em] uppercase font-bold text-muted">Less Waste</div></div>
<div class="bg-white border border-stone py-4"><div class="font-serif text-xl leading-none">200k+</div><div class="text-[10px] tracking-[0.14em] uppercase font-bold text-muted">Capsules Built</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- RUNWAY REPORTS + BEAUTY LAB -->
<section id="runway" class="max-w-[1400px] mx-auto px-6 lg:px-8 mt-12 lg:mt-16">
<div class="grid lg:grid-cols-12 gap-8">
<!-- Main Editorial -->
<div class="lg:col-span-8">
<div class="flex items-center gap-3 mb-6">
<span class="bg-ink text-white px-3 py-1.5 text-[11px] tracking-[0.16em] uppercase font-bold">Runway Reports</span>
<span class="text-sm text-muted">FW25 Takeaways — Milan • Paris • New York</span>
</div>
<article class="bg-white border border-stone overflow-hidden">
<img src="https://picsum.photos/seed/runwayreport/1100/620" class="w-full h-[380px] object-cover" alt="">
<div class="p-6 lg:p-8">
<h3 class="font-serif text-[28px] lg:text-[34px] leading-[1.05]">Texture Over Logo: Why FW25 Is All About Touch</h3>
<div class="flex items-center gap-3 mt-3 text-xs text-muted">
<img src="https://i.pravatar.cc/100?u=editor1" class="w-7 h-7 rounded-full" alt=""> <span>By <b class="text-ink">Sofia Marín</b>, Fashion Director • 8 min read</span> <span>•</span> <span>Oct 12, 2025</span>
</div>
<div class="prose prose-sm max-w-none text-[14.5px] leading-relaxed text-ink/80 mt-6">
<p>After seasons of quiet luxury, the runway has found its voice again — not louder, but more tactile. At Khaite, brushed mohair met patent leather; at Miu Miu, collegiate cardigans were deliberately pilled to suggest years of love. The message is clear: sustainable fashion isn’t just about how clothes are made, but how they age.</p>
<p class="mt-4">For personal styling, this translates to permission. Mix the pristine with the lived-in: a sharply cut blazer over a soft, sun-faded tee; accessorizing with vintage brass rather than new shine. It’s a nod to longevity over novelty — and our readers are here for it. In our atelier poll, 71% said they’d rather invest in one beautifully made coat than five fast-fashion iterations.</p>
<p class="mt-4">Key palettes to watch: deep oxblood, parchment ecru, and slate. Key move: layering tonal textures head-to-toe. When in doubt, add a belt — cinching is back, but softly, with leather obis and knotted sashes rather than hard hardware.</p>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<a href="#" class="bg-ink text-white px-6 py-3 text-[11px] tracking-[0.14em] uppercase font-bold">Get Inspired — Shop The Palette</a>
<a href="#" class="border border-stone px-6 py-3 text-[11px] tracking-[0.14em] uppercase font-bold hover:border-ink transition">Save to Style Guide</a>
</div>
</div>
</article>
<!-- Two smaller reports -->
<div class="grid md:grid-cols-2 gap-6 mt-6">
<article class="bg-white border border-stone p-6">
<p class="text-clay text-[11px] tracking-[0.14em] uppercase font-bold">Street Style • Copenhagen</p>
<h4 class="font-serif text-lg leading-tight mt-2">The Bike-to-Brunch Formula Everyone’s Copying</h4>
<p class="text-sm text-muted leading-relaxed mt-2">Padded shoulders, barrel jeans, and ballet flats — plus how Copenhagen women are accessorizing with thrifted silk scarves.</p>
<img src="https://picsum.photos/seed/bike/600/360" class="w-full h-48 object-cover mt-4" alt="">
<a href="#" class="mt-4 inline-flex text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1">Read Dispatch →</a>
</article>
<article class="bg-white border border-stone p-6">
<p class="text-clay text-[11px] tracking-[0.14em] uppercase font-bold">Beauty Lab</p>
<h4 class="font-serif text-lg leading-tight mt-2">Skin First, Makeup Second: Winter Glow Guide</h4>
<p class="text-sm text-muted leading-relaxed mt-2">Our beauty resources team tests 12 moisturizers for makeup longevity — and the ceramide that changed everything.</p>
<img src="https://picsum.photos/seed/beauty1/600/360" class="w-full h-48 object-cover mt-4" alt="">
<a href="#" class="mt-4 inline-flex text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1">Read Guide →</a>
</article>
</div>
</div>
<!-- Sidebar: Beauty Lab + FAQ -->
<aside id="beauty" class="lg:col-span-4 space-y-6">
<div class="bg-white border border-stone p-6 lg:p-7">
<h3 class="font-serif text-xl">Beauty Lab — This Week</h3>
<p class="text-sm text-muted leading-relaxed mt-2">Beauty resources, tested in our atelier. We wear, wash, and re-wear — so you know what holds up.</p>
<div class="mt-5 space-y-5">
<div class="flex gap-4">
<img src="https://picsum.photos/seed/beauty2/100/100" class="w-16 h-16 object-cover rounded-full" alt="">
<div>
<p class="text-[11px] tracking-[0.12em] uppercase font-bold text-clay">Tested • 4.8/5</p>
<h5 class="text-sm font-semibold leading-tight">Tinted Serum That Actually Doubles as Skincare</h5>
<p class="text-xs text-muted mt-1">12-hour wear without creasing — plus niacinamide.</p>
</div>
</div>
<div class="flex gap-4">
<img src="https://picsum.photos/seed/beauty3/100/100" class="w-16 h-16 object-cover rounded-full" alt="">
<div>
<p class="text-[11px] tracking-[0.12em] uppercase font-bold text-clay">Sustainable Pick</p>
<h5 class="text-sm font-semibold leading-tight">Refillable Lip Color in Fig — Warm, Wearable</h5>
<p class="text-xs text-muted mt-1">One tube, endless refills. Personal styling approved.</p>
</div>
</div>
</div>
<a href="#" class="mt-6 block w-full bg-blush border border-stone text-center py-3 text-[11px] tracking-[0.14em] uppercase font-bold">Subscribe for Beauty Drops</a>
</div>
<!-- FAQ Accordion -->
<div class="bg-white border border-stone">
<div class="p-6 border-b border-stone">
<h3 class="font-serif text-xl">Style Guide FAQ</h3>
<p class="text-xs text-muted mt-1">Honest answers from our personal styling team.</p>
</div>
<div class="divide-y divide-stone">
<details class="group p-5 open:bg-ivory">
<summary class="flex justify-between items-center cursor-pointer list-none text-sm font-semibold">How do I start sustainable fashion without replacing everything? <i data-lucide="plus" class="w-4 h-4 group-open:hidden"></i><i data-lucide="minus" class="w-4 h-4 hidden group-open:block"></i></summary>
<p class="text-sm text-muted leading-relaxed mt-3">Start with a capsule audit: document what you wear most, then fill gaps with quality. Our Capsule Builder above suggests 12 pieces that multiply your outfits while cutting waste.</p>
</details>
<details class="group p-5">
<summary class="flex justify-between items-center cursor-pointer list-none text-sm font-semibold">What’s the 2025 rule for accessorizing? <i data-lucide="plus" class="w-4 h-4 group-open:hidden"></i><i data-lucide="minus" class="w-4 h-4 hidden group-open:block"></i></summary>
<p class="text-sm text-muted leading-relaxed mt-3">One focal point. If your bag is sculptural, keep jewelry soft. Texture is your accessory — think suede, patent, knit.</p>
</details>
<details class="group p-5">
<summary class="flex justify-between items-center cursor-pointer list-none text-sm font-semibold">Can I book virtual personal styling? <i data-lucide="plus" class="w-4 h-4 group-open:hidden"></i><i data-lucide="minus" class="w-4 h-4 hidden group-open:block"></i></summary>
<p class="text-sm text-muted leading-relaxed mt-3">Yes — 30-minute video sessions with our stylists, plus a shoppable board. Book via Contact. Members get first access.</p>
</details>
</div>
</div>
<!-- Promo -->
<div class="bg-clay text-white p-6 text-center">
<p class="text-[11px] tracking-[0.16em] uppercase font-bold text-white/90">Refer a Friend</p>
<h4 class="font-serif text-xl mt-2">Share Style, Earn $40</h4>
<p class="text-sm text-white/80 mt-2 leading-relaxed">Invite friends to MÆVE — they get 15% off their first capsule, you get credit.</p>
<a href="#" class="mt-4 inline-block bg-white text-ink px-6 py-3 text-[11px] tracking-[0.14em] uppercase font-bold">Share Your Link</a>
</div>
</aside>
</div>
</section>
<!-- TESTIMONIALS + JOURNAL -->
<section id="journal" class="max-w-[1400px] mx-auto px-6 lg:px-8 mt-12 lg:mt-16">
<div class="flex flex-wrap justify-between items-end gap-4 mb-8">
<h2 class="font-serif text-3xl lg:text-[38px]">What Our Community Wears & Says</h2>
<a href="#" class="text-[11px] tracking-[0.14em] uppercase font-bold border-b border-ink pb-1">View All Stories →</a>
</div>
<div class="grid lg:grid-cols-3 gap-6">
<div class="bg-white border border-stone p-6 flex flex-col">
<div class="flex gap-1 text-clay"><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i></div>
<p class="text-[14px] leading-relaxed mt-4">“I used the Capsule Builder before a work trip — 12 pieces, 10 days, zero stress. The personal styling notes on accessorizing saved me. I felt like myself, just sharper.”</p>
<div class="flex items-center gap-3 mt-6">
<img src="https://i.pravatar.cc/100?u=alex" class="w-9 h-9 rounded-full" alt="">
<div><div class="text-sm font-semibold">Alex R., Brooklyn</div><div class="text-xs text-muted">Creative Director • Verified Buyer</div></div>
</div>
<img src="https://picsum.photos/seed/look1/600/380" class="w-full h-40 object-cover mt-6 border border-stone" alt="">
</div>
<div class="bg-white border border-stone p-6 flex flex-col">
<div class="flex gap-1 text-clay"><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i><i data-lucide="star" class="w-4 h-4 fill-clay"></i></div>
<p class="text-[14px] leading-relaxed mt-4">“MÆVE taught me sustainable fashion isn’t sacrifice. My wool-cam coat is 3 years old and better than day one. Their beauty resources finally fixed my winter skin.”</p>
<div class="flex items-center gap-3 mt-6">
<img src="https://i.pravatar.cc/100?u=priya" class="w-9 h-9 rounded-full" alt="">
<div><div class="text-sm font-semibold">Priya S., London</div><div class="text-xs text-muted">Editor • MÆVE Member since 2022</div></div>
</div>
<img src="https://picsum.photos/seed/look2/600/380" class="w-full h-40 object-cover mt-6 border border-stone" alt="">
</div>
<div class="bg-ink text-ivory p-6 flex flex-col">
<p class="text-clay text-[11px] tracking-[0.16em] uppercase font-bold">Journal • Clothing Inspiration</p>
<h3 class="font-serif text-2xl leading-tight mt-3">How We Style a Single Dress 5 Ways (Without Buying More)</h3>
<p class="text-sm text-white/70 leading-relaxed mt-3">Day to date, desk to dinner — see how our team uses accessorizing, layering, and proportion to turn one sustainable slip dress into a week’s worth of looks.</p>
<img src="https://picsum.photos/seed/dress5/600/380" class="w-full h-40 object-cover mt-6 border border-white/10" alt="">
<a href="#" class="mt-6 inline-flex items-center gap-2 bg-white text-ink px-5 py-3 text-[11px] tracking-[0.14em] uppercase font-bold w-fit">Read the Playbook <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="max-w-[1400px] mx-auto px-6 lg:px-8 mt-12">
<div class="bg-blush border border-stone grid lg:grid-cols-2 gap-8 p-6 lg:p-10 items-center">
<div>
<p class="text-[11px] tracking-[0.18em] uppercase font-bold text-muted">Stay in the Know</p>
<h3 class="font-serif text-3xl lg:text-[36px] leading-none mt-2">The Atelier Edit — <span class="italic">Weekly</span></h3>
<p class="text-sm leading-relaxed text-muted mt-3 max-w-[560px]">Fashion trends without the frenzy. One thoughtful email each Saturday: street style breakdowns, beauty resources, and early access to conscious drops. No spam — ever.</p>
<div class="flex items-center gap-4 mt-4 text-xs text-muted">
<span class="flex items-center gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-clay"></i> 85k+ subscribers</span>
<span class="flex items-center gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-clay"></i> Unsubscribe anytime</span>
</div>
</div>
<form onsubmit="event.preventDefault(); alert('Welcome to the Atelier Edit — check your inbox!');" class="bg-white border border-stone p-5 flex flex-col gap-3">
<div class="grid grid-cols-2 gap-3">
<input required placeholder="First name" class="border border-stone px-4 py-3 text-sm outline-none focus:border-ink">
<input required type="email" placeholder="Email address" class="border border-stone px-4 py-3 text-sm outline-none focus:border-ink">
</div>
<label class="flex items-start gap-2 text-xs text-muted leading-relaxed"><input type="checkbox" required class="mt-0.5"> I agree to the Terms and want beautiful, sustainable style inspiration. See Privacy.</label>
<button class="bg-ink text-white py-3.5 text-[11px] tracking-[0.14em] uppercase font-bold hover:bg-black transition">Subscribe — Get 15% Off First Order</button>
<p class="text-[11px] text-center text-muted">By joining, you’ll also unlock your Capsule Builder results via email.</p>
</form>
</div>
</section>
<!-- CONTACT / FOOTER -->
<footer id="contact" class="mt-12 bg-ink text-stone">
<div class="max-w-[1400px] mx-auto px-6 lg:px-8">
<div class="grid lg:grid-cols-12 gap-10 py-12 border-b border-white/10">
<div class="lg:col-span-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white text-ink grid place-items-center font-serif text-lg tracking-widest">MÆ</div>
<div class="leading-none">
<div class="font-serif text-white text-[20px] tracking-[0.18em] font-semibold">MÆVE</div>
<div class="text-[9px] tracking-[0.22em] uppercase text-white/60 font-semibold -mt-0.5">The Modern Atelier</div>
</div>
</div>
<p class="text-sm leading-relaxed text-white/70 mt-5 max-w-[420px]">Curated style for the intentional wardrobe. We champion sustainable fashion, thoughtful personal styling, and beauty resources that respect your skin — and the planet. Come visit the atelier or reach us anytime.</p>
<div class="mt-6 space-y-2 text-sm text-white/80">
<div class="flex gap-3"><i data-lucide="map-pin" class="w-4 h-4 text-clay mt-0.5"></i> 148 Mercer Street, SoHo, New York, NY 10012 — By appointment</div>
<div class="flex gap-3"><i data-lucide="mail" class="w-4 h-4 text-clay mt-0.5"></i> hello@maeve-atelier.com</div>
<div class="flex gap-3"><i data-lucide="phone" class="w-4 h-4 text-clay mt-0.5"></i> +1 (212) 555-0147 • Mon–Fri 10am–6pm EST</div>
</div>
<div class="flex gap-3 mt-6">
<a href="#" class="w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition"><i data-lucide="instagram" class="w-4 h-4"></i></a>
<a href="#" class="w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition"><i data-lucide="pinIcon" class="w-4 h-4"></i></a>
<a href="#" class="w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition"><i data-lucide="youtube" class="w-4 h-4"></i></a>
<a href="#" class="w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition"><i data-lucide="twitter" class="w-4 h-4"></i></a>
</div>
</div>
<div class="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h5 class="text-white text-[11px] tracking-[0.16em] uppercase font-bold">Collections</h5>
<ul class="mt-4 space-y-2.5 text-sm text-white/70">
<li><a href="#" class="hover:text-white">New In</a></li>
<li><a href="#" class="hover:text-white">Street Style</a></li>
<li><a href="#" class="hover:text-white">Accessories Guide</a></li>
<li><a href="#" class="hover:text-white">Runway Reports</a></li>
<li><a href="#" class="hover:text-white">Conscious Edit</a></li>
</ul>
</div>
<div>
<h5 class="text-white text-[11px] tracking-[0.16em] uppercase font-bold">Style Guide</h5>
<ul class="mt-4 space-y-2.5 text-sm text-white/70">
<li><a href="#" class="hover:text-white">Personal Styling</a></li>
<li><a href="#" class="hover:text-white">Capsule Wardrobe</a></li>
<li><a href="#" class="hover:text-white">Accessorizing 101</a></li>
<li><a href="#" class="hover:text-white">Fit & Proportion</a></li>
<li><a href="#" class="hover:text-white">Book a Stylist</a></li>
</ul>
</div>
<div>
<h5 class="text-white text-[11px] tracking-[0.16em] uppercase font-bold">Beauty Lab</h5>
<ul class="mt-4 space-y-2.5 text-sm text-white/70">
<li><a href="#" class="hover:text-white">Skincare</a></li>
<li><a href="#" class="hover:text-white">Makeup</a></li>
<li><a href="#" class="hover:text-white">Fragrance</a></li>
<li><a href="#" class="hover:text-white">Beauty Resources</a></li>
<li><a href="#" class="hover:text-white">Ingredient Index</a></li>
</ul>
</div>
<div>
<h5 class="text-white text-[11px] tracking-[0.16em] uppercase font-bold">Help</h5>
<ul class="mt-4 space-y-2.5 text-sm text-white/70">
<li><a href="#" class="hover:text-white">Contact</a></li>
<li><a href="#" class="hover:text-white">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
</ul>
</div>
</div>
</div>
<div class="py-6 flex flex-wrap justify-between items-center gap-4 text-xs text-white/60">
<div>© 2026 MÆVE Atelier LLC. All rights reserved. Crafted sustainably in New York & Paris.</div>
<div class="flex items-center gap-4">
<span class="hidden md:inline">Payments:</span>
<span class="tracking-widest text-white/80">VISA • MASTERCARD • AMEX • APPLE PAY • AFTERPAY</span>
</div>
</div>
</div>
</footer>
<script>
lucide.createIcons();
// Mobile toggle
document.getElementById('mobileBtn').addEventListener('click', ()=>{
document.getElementById('mobileNav').classList.toggle('hidden');
document.getElementById('mobileNav').classList.toggle('flex');
});
// Builder logic
let step = 1;
let choices = {lifestyle:null, palette:null, mantra:null};
function updateUI(){
document.getElementById('step1').classList.toggle('hidden', step!==1);
document.getElementById('step2').classList.toggle('hidden', step!==2);
document.getElementById('step3').classList.toggle('hidden', step!==3);
document.getElementById('dot1').className = step>=1 ? 'w-8 h-2 rounded-full bg-ink' : 'w-8 h-2 rounded-full bg-stone';
document.getElementById('dot2').className = step>=2 ? 'w-8 h-2 rounded-full bg-ink' : 'w-8 h-2 rounded-full bg-stone';
document.getElementById('dot3').className = step>=3 ? 'w-8 h-2 rounded-full bg-ink' : 'w-8 h-2 rounded-full bg-stone';
document.getElementById('stepLabel').textContent = step<4 ? `Step ${step} of 3` : 'Your Result';
document.getElementById('backBtn').classList.toggle('hidden', step===1);
document.getElementById('nextBtn').textContent = step===3 ? 'Build Capsule' : 'Next →';
if(step===4){
buildResult();
step=3;
}
}
function choose(k,v){
choices[k]=v;
// visual feedback
const container = event.currentTarget.closest('div');
container.querySelectorAll('.optBtn').forEach(b=>b.classList.remove('border-ink','bg-ivory'));
event.currentTarget.classList.add('border-ink','bg-ivory');
}
function next(){
if(step===1 && !choices.lifestyle){ alert('Pick your day-to-day to continue'); return; }
if(step===2 && !choices.palette){ alert('Choose a palette'); return; }
if(step===3 && !choices.mantra){ alert('Select an accessorizing mantra'); return; }
if(step===3){ buildResult(); step=3; return; }
step++; updateUI();
}
function back(){ if(step>1){ step--; updateUI(); } }
function resetBuilder(){ choices={lifestyle:null,palette:null,mantra:null}; step=1; updateUI(); document.querySelectorAll('.optBtn').forEach(b=>b.classList.remove('border-ink','bg-ivory')); capsuleDefault(); }
function buildResult(){
const titleMap = {
'Creative':'The Soho Minimalist',
'Corporate':'The Boardroom Edit',
'On-the-go':'The City Sprinter'
};
const desc = `${choices.palette} anchors this 12-piece core — think sharp tailoring, soft knit, and sculpted outerwear. Mantra: ${choices.mantra.toLowerCase()}. Our sustainable fashion edit prioritizes deadstock wool and certified suede, styled to multiply outfits without multiplying clutter.`;
document.getElementById('capsuleTitle').textContent = titleMap[choices.lifestyle] || 'Your Capsule';
document.getElementById('capsuleDesc').textContent = desc;
// fun: swap images slightly based on palette
const seed = choices.palette.includes('Monochrome') ? 'mono' : choices.palette.includes('Warm') ? 'warm' : 'ox';
document.querySelectorAll('#capsuleResult img').forEach((img,i)=> img.src = `https://picsum.photos/seed/${seed}${i}/300/360`);
}
function capsuleDefault(){ document.getElementById('capsuleTitle').textContent='The Soho Minimalist'; document.getElementById('capsuleDesc').textContent='Crisp poplin, relaxed tailoring, and soft suede — anchored by warm neutrals. Perfect for creative commutes and gallery evenings. Our stylist suggests accessorizing with sculpted gold and a structured tote.'}
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:09:41.690Z",
"url": "https://benchmark.aimac.invalid/322e71d35da8646f93cc6abeecdf06a64cffc5000aa86707c0004cf8650f8253.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-lucide=\"search\" aria-hidden=\"true\" class=\"lucide lucide-search w-4 h-4\">",
"target": [
".lucide-search"
]
}
]
},
{
"id": "button-name",
"impact": "critical",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button onclick=\"choose('lifestyle','Creative')\" class=\"optBtn border border-stone rounded-lg py-4 px-2 text-center hover:border-ink transition\">",
"target": [
"button[onclick=\"choose('lifestyle','Creative')\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"font-serif text-4xl lg:text-[56px] leading-[0.95] font-light\">The Art of<br><span class=\"italic font-normal\">Quiet Luxury</span></h1>",
"target": [
"h1"
]
},
{
"html": "<h3 class=\"text-[11px] tracking-[0.18em] uppercase font-bold\">Editor's Picks \u2014 Must-Haves</h3>",
"target": [
".mb-5 > .tracking-\\[0\\.18em\\]"
]
},
{
"html": "<h4 class=\"font-serif text-[15px] leading-tight group-hover:text-clay transition\">The Sculpted Saddle in Brushed Suede</h4>",
"target": [
".group.gap-4[href=\"#\"]:nth-child(1) > .flex-1 > .text-\\[15px\\].group-hover\\:text-clay"
]
},
{
"html": "<h4 class=\"font-serif text-[15px] leading-tight group-hover:text-clay transition\">Wool-Cashmere Cocoon Coat</h4>",
"target": [
".group.gap-4[href=\"#\"]:nth-child(3) > .flex-1 > .text-\\[15px\\].group-hover\\:text-clay"
]
},
{
"html": "<h4 class=\"font-serif text-[15px] leading-tight group-hover:text-clay transition\">Vermeil Dome Hoops \u2014 18k Recycled</h4>",
"target": [
".group.gap-4[href=\"#\"]:nth-child(5) > .flex-1 > .text-\\[15px\\].group-hover\\:text-clay"
]
},
{
"html": "<h3 class=\"font-serif text-[22px] leading-tight mt-2\">Zendaya\u2019s Off-Duty Uniform, Re-created Under $300</h3>",
"target": [
".lg\\:p-7.text-ivory.relative > .text-\\[22px\\]"
]
},
{
"html": "<h2 class=\"font-serif text-3xl lg:text-[42px] leading-none mt-2\">Style, Stripped to Its Essence</h2>",
"target": [
".lg\\:text-\\[42px\\]"
]
},
{
"html": "<h3 class=\"font-serif text-xl leading-tight\">Street Style Decoded</h3>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(1) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-serif text-xl leading-tight\">The Accessories Guide</h3>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(2) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-serif text-xl leading-tight\">Runway Reports</h3>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(3) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-serif text-xl leading-tight\">Sustainable Fashion</h3>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(4) > .p-6 > h3"
]
},
{
"html": "<h2 class=\"font-serif text-3xl lg:text-[40px] leading-none mt-3\">Build Your <span class=\"italic text-clay\">Capsule</span> in 60 Seconds</h2>",
"target": [
".lg\\:text-\\[40px\\]"
]
},
{
"html": "<h4 class=\"font-serif text-xl\">What\u2019s your day-to-day?</h4>",
"target": [
"#step1 > h4"
]
},
{
"html": "<h4 id=\"capsuleTitle\" class=\"font-serif text-xl\">The Soho Minimalist</h4>",
"target": [
"#capsuleTitle"
]
},
{
"html": "<h3 class=\"font-serif text-[28px] lg:text-[34px] leading-[1.05]\">Texture Over Logo: Why FW25 Is All About Touch</h3>",
"target": [
".text-\\[28px\\]"
]
},
{
"html": "<h4 class=\"font-serif text-lg leading-tight mt-2\">The Bike-to-Brunch Formula Everyone\u2019s Copying</h4>",
"target": [
"article:nth-child(1) > .text-lg"
]
},
{
"html": "<h4 class=\"font-serif text-lg leading-tight mt-2\">Skin First, Makeup Second: Winter Glow Guide</h4>",
"target": [
"article:nth-child(2) > .text-lg"
]
},
{
"html": "<h3 class=\"font-serif text-xl\">Beauty Lab \u2014 This Week</h3>",
"target": [
".lg\\:p-7.p-6.bg-white > h3"
]
},
{
"html": "<h5 class=\"text-sm font-semibold leading-tight\">Tinted Serum That Actually Doubles as Skincare</h5>",
"target": [
".gap-4.flex:nth-child(1) > div > h5"
]
},
{
"html": "<h5 class=\"text-sm font-semibold leading-tight\">Refillable Lip Color in Fig \u2014 Warm, Wearable</h5>",
"target": [
".gap-4.flex:nth-child(2) > div > h5"
]
},
{
"html": "<h3 class=\"font-serif text-xl\">Style Guide FAQ</h3>",
"target": [
".border-b.p-6.border-stone > h3"
]
},
{
"html": "<h4 class=\"font-serif text-xl mt-2\">Share Style, Earn $40</h4>",
"target": [
".bg-clay.text-center.text-white > h4"
]
},
{
"html": "<h2 class=\"font-serif text-3xl lg:text-[38px]\">What Our Community Wears & Says</h2>",
"target": [
".lg\\:text-\\[38px\\]"
]
},
{
"html": "<h3 class=\"font-serif text-2xl leading-tight mt-3\">How We Style a Single Dress 5 Ways (Without Buying More)</h3>",
"target": [
".text-ivory.flex-col.bg-ink > .text-2xl"
]
},
{
"html": "<h3 class=\"font-serif text-3xl lg:text-[36px] leading-none mt-2\">The Atelier Edit \u2014 <span class=\"italic\">Weekly</span></h3>",
"target": [
".lg\\:text-\\[36px\\]"
]
},
{
"html": "<h5 class=\"text-white text-[11px] tracking-[0.16em] uppercase font-bold\">Collections</h5>",
"target": [
"div:nth-child(1) > h5"
]
},
{
"html": "<h5 class=\"text-white text-[11px] tracking-[0.16em] uppercase font-bold\">Style Guide</h5>",
"target": [
".md\\:grid-cols-4 > div:nth-child(2) > h5"
]
},
{
"html": "<h5 class=\"text-white text-[11px] tracking-[0.16em] uppercase font-bold\">Beauty Lab</h5>",
"target": [
"div:nth-child(3) > h5"
]
},
{
"html": "<h5 class=\"text-white text-[11px] tracking-[0.16em] uppercase font-bold\">Help</h5>",
"target": [
"div:nth-child(4) > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8e0d5",
"bgColor": "#0f0f0f",
"contrastRatio": 14.65,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.65"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"hidden md:inline\">Complimentary Shipping on Orders $250+</span>",
"target": [
".justify-center > .md\\:inline.hidden:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input required=\"\" placeholder=\"First name\" class=\"border border-stone px-4 py-3 text-sm outline-none focus:border-ink\">",
"target": [
"input[placeholder=\"First name\"]"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://picsum.photos/seed/maevehero/1100/720\" class=\"w-full h-[520px] lg:h-[640px] object-cover\" alt=\"Fall fashion editorial\">",
"target": [
".h-\\[520px\\]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input required=\"\" placeholder=\"First name\" class=\"border border-stone px-4 py-3 text-sm outline-none focus:border-ink\">",
"target": [
"input[placeholder=\"First name\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": null,
"relatedNodes": [
{
"html": "<span>New Fall Capsule Live \u2014 <a href=\"#collections\" class=\"underline underline-offset-4 decoration-clay hover:text-white transition\">Explore Now</a></span>",
"target": [
".justify-center > span:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span>New Fall Capsule Live \u2014 <a href=\"#collections\" class=\"underline underline-offset-4 decoration-clay hover:text-white transition\">Explore Now</a></span>",
"target": [
".justify-center > span:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#collections\" class=\"underline underline-offset-4 decoration-clay hover:text-white transition\">Explore Now</a>",
"target": [
".underline"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#collections\" class=\"underline underline-offset-4 decoration-clay hover:text-white transition\">Explore Now</a>",
"target": [
".underline"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"mt-4 text-[13px] leading-6 text-ink/80 list-disc list-inside\">\n <li>Off-duty tailoring formulas</li>\n <li>Accessorizing with intention</li>\n </ul>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(1) > .p-6 > .leading-6.list-disc.list-inside"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li>Off-duty tailoring formulas</li>",
"target": [
".hover\\:shadow-xl.transition-all.duration-300:nth-child(1) > .p-6 > .leading-6.list-disc.list-inside > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition\">",
"target": [
".md\\:grid.w-9.h-9:nth-child(1)"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary class=\"flex justify-between items-center cursor-pointer list-none text-sm font-semibold\">",
"target": [
".open\\:bg-ivory > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 185.6,
"height": 40
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (185.6px by 40px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"flex items-center gap-3 group\">",
"target": [
".group.gap-3.items-center"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c9a96a",
"contrastRatio": 2.24,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": "shortTextContent",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute -top-1 -right-1 bg-clay text-white text-[10px] w-5 h-5 grid place-items-center rounded-full font-bold\">2</span>",
"target": [
".-top-1"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute -top-1 -right-1 bg-clay text-white text-[10px] w-5 h-5 grid place-items-center rounded-full font-bold\">2</span>",
"target": [
".-top-1"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"violations": [
{
"id": "button-name",
"impact": "critical",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition\">",
"target": [
".md\\:grid.w-9.h-9:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"hidden md:grid w-9 h-9 place-items-center border border-stone rounded-full hover:border-ink transition\">",
"target": [
".md\\:grid.w-9.h-9:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Featured In</span>",
"target": [
".py-5 > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "13.5pt (18px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-[18px] tracking-[0.12em] lowercase\">vogue</span>",
"target": [
".text-\\[18px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-[16px] tracking-widest\">ELLE</span>",
"target": [
".text-\\[16px\\].tracking-widest.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-[16px]\">Harper's BAZAAR</span>",
"target": [
".text-\\[16px\\].font-serif:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tracking-[0.2em]\">THE CUT</span>",
"target": [
".py-5 > .tracking-\\[0\\.2em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#959493",
"bgColor": "#f8f5f0",
"contrastRatio": 2.78,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tracking-[0.16em]\">GQ STYLE</span>",
"target": [
".py-5 > .tracking-\\[0\\.16em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.78 (foreground color: #959493, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a96a",
"bgColor": "#f8f5f0",
"contrastRatio": 2.06,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-ivory text-ink font-sans antialiased selection:bg-clay selection:text-white\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #c9a96a, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-clay text-[11px] tracking-[0.18em] uppercase font-bold\">Collections \u2014 Fall Edit</p>",
"target": [
".items-end.mb-8.flex-wrap > div > .tracking-\\[0\\.18em\\].text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #c9a96a, background color: #f8f5f0, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c9a96a",
"contrastRatio": 2.24,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-4 left-4 bg-clay text-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold\">Runway Reports \u2022 FW25</span>",
"target": [
".bg-clay.top-4.left-4"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #ffffff, background color: #c9a96a, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-4 left-4 bg-clay text-white px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase font-bold\">Runway Reports \u2022 FW25</span>",
"target": [
".bg-clay.top-4.left-4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #ffffff, background color: #c9a96a, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#f2e6dd",
"contrastRatio": 4.34,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush text-ink p-6 lg:p-10 flex flex-col\">",
"target": [
".bg-blush.lg\\:p-10.flex-col"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] tracking-[0.16em] uppercase font-bold text-muted\">Your Capsule Preview</p>",
"target": [
".bg-blush.lg\\:p-10.flex-col > .justify-between.items-center.flex > .tracking-\\[0\\.16em\\].text-muted"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a96a",
"bgColor": "#ffffff",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white border border-stone p-6\">",
"target": [
".md\\:grid-cols-2.gap-6.mt-6 > article:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-clay text-[11px] tracking-[0.14em] uppercase font-bold\">Street Style \u2022 Copenhagen</p>",
"target": [
"article:nth-child(1) > .text-clay.tracking-\\[0\\.14em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a96a",
"bgColor": "#ffffff",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white border border-stone p-6\">",
"target": [
".md\\:grid-cols-2.gap-6.mt-6 > article:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-clay text-[11px] tracking-[0.14em] uppercase font-bold\">Beauty Lab</p>",
"target": [
"article:nth-child(2) > .text-clay.tracking-\\[0\\.14em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a96a",
"bgColor": "#ffffff",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-stone p-6 lg:p-7\">",
"target": [
"#beauty > .lg\\:p-7.p-6.bg-white"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] tracking-[0.12em] uppercase font-bold text-clay\">Tested \u2022 4.8/5</p>",
"target": [
".gap-4.flex:nth-child(1) > div > .tracking-\\[0\\.12em\\].text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a96a",
"bgColor": "#ffffff",
"contrastRatio": 2.24,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-stone p-6 lg:p-7\">",
"target": [
"#beauty > .lg\\:p-7.p-6.bg-white"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] tracking-[0.12em] uppercase font-bold text-clay\">Sustainable Pick</p>",
"target": [
".gap-4.flex:nth-child(2) > div > .tracking-\\[0\\.12em\\].text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #c9a96a, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#faf6f0",
"bgColor": "#c9a96a",
"contrastRatio": 2.08,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-clay text-white p-6 text-center\">",
"target": [
".bg-clay.text-center.text-white"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.08 (foreground color: #faf6f0, background color: #c9a96a, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] tracking-[0.16em] uppercase font-bold text-white/90\">Refer a Friend</p>",
"target": [
".text-white\\/90"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.08 (foreground color: #faf6f0, background color: #c9a96a, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c9a96a",
"contrastRatio": 2.24,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-clay text-white p-6 text-center\">",
"target": [
".bg-clay.text-center.text-white"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.24 (foreground color: #ffffff, background color: #c9a96a, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4 class=\"font-serif text-xl mt-2\">Share Style, Earn $40</h4>",
"target": [
".bg-clay.text-center.text-white > h4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.24 (foreground color: #ffffff, background color: #c9a96a, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4eee1",
"bgColor": "#c9a96a",
"contrastRatio": 1.93,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-clay text-white p-6 text-center\">",
"target": [
".bg-clay.text-center.text-white"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #f4eee1, background color: #c9a96a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-white/80 mt-2 leading-relaxed\">Invite friends to M\u00c6VE \u2014 they get 15% off their first capsule, you get credit.</p>",
"target": [
".text-white\\/80.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #f4eee1, background color: #c9a96a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#f2e6dd",
"contrastRatio": 4.34,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush border border-stone grid lg:grid-cols-2 gap-8 p-6 lg:p-10 items-center\">",
"target": [
".lg\\:grid-cols-2.bg-blush.gap-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[11px] tracking-[0.18em] uppercase font-bold text-muted\">Stay in the Know</p>",
"target": [
".lg\\:grid-cols-2.bg-blush.gap-8 > div > .tracking-\\[0\\.18em\\].text-muted"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#f2e6dd",
"contrastRatio": 4.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush border border-stone grid lg:grid-cols-2 gap-8 p-6 lg:p-10 items-center\">",
"target": [
".lg\\:grid-cols-2.bg-blush.gap-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm leading-relaxed text-muted mt-3 max-w-[560px]\">Fashion trends without the frenzy. One thoughtful email each Saturday: street style breakdowns, beauty resources, and early access to conscious drops. No spam \u2014 ever.</p>",
"target": [
".max-w-\\[560px\\].mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#f2e6dd",
"contrastRatio": 4.34,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush border border-stone grid lg:grid-cols-2 gap-8 p-6 lg:p-10 items-center\">",
"target": [
".lg\\:grid-cols-2.bg-blush.gap-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
".gap-4.text-xs.mt-4 > .gap-1\\.5.items-center:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#f2e6dd",
"contrastRatio": 4.34,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush border border-stone grid lg:grid-cols-2 gap-8 p-6 lg:p-10 items-center\">",
"target": [
".lg\\:grid-cols-2.bg-blush.gap-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\">",
"target": [
".gap-1\\.5.items-center:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.34 (foreground color: #6b6b6b, background color: #f2e6dd, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#eceae5",
"contrastRatio": 4.43,
"fontSize": "6.8pt (9px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"sticky top-0 z-50 bg-ivory/95 backdrop-blur-xl border-b border-stone\">",
"target": [
"header"
]
},
{
"html": "<div class=\"bg-ink text-ivory overflow-hidden border border-ink\">",
"target": [
".text-ivory.border-ink.overflow-hidden"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.43 (foreground color: #6b6b6b, background color: #eceae5, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-[9px] tracking-[0.22em] uppercase text-muted font-semibold -mt-0.5\">The Modern Atelier</div>",
"target": [
".group.gap-3.items-center > .leading-none > .text-\\[9px\\].tracking-\\[0\\.22em\\].-mt-0\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.43 (foreground color: #6b6b6b, background color: #eceae5, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#efe8e0",
"contrastRatio": 4.38,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush/60 border-y border-stone\">",
"target": [
".bg-blush\\/60"
]
},
{
"html": "<header class=\"sticky top-0 z-50 bg-ivory/95 backdrop-blur-xl border-b border-stone\">",
"target": [
"header"
]
},
{
"html": "<div class=\"bg-ink text-ivory overflow-hidden border border-ink\">",
"target": [
".text-ivory.border-ink.overflow-hidden"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"tracking-[0.16em] uppercase font-semibold text-muted\">Curated Style for the Intentional Wardrobe \u2014 Est. 2018 \u2022 New York \u2022 Paris</p>",
"target": [
".tracking-\\[0\\.16em\\].font-semibold.text-muted"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#efe8e0",
"contrastRatio": 4.38,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush/60 border-y border-stone\">",
"target": [
".bg-blush\\/60"
]
},
{
"html": "<header class=\"sticky top-0 z-50 bg-ivory/95 backdrop-blur-xl border-b border-stone\">",
"target": [
"header"
]
},
{
"html": "<div class=\"bg-ink text-ivory p-6 flex flex-col\">",
"target": [
".text-ivory.flex-col.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"flex items-center gap-1.5\"><i data-lucide=\"instagram\" class=\"w-3.5 h-3.5\"></i> @maeve.atelier</span>",
"target": [
".flex-wrap.lg\\:px-8.max-w-\\[1400px\\] > .gap-4.items-center.text-muted > .gap-1\\.5.items-center"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6b6b",
"bgColor": "#efe8e0",
"contrastRatio": 4.38,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-blush/60 border-y border-stone\">",
"target": [
".bg-blush\\/60"
]
},
{
"html": "<header class=\"sticky top-0 z-50 bg-ivory/95 backdrop-blur-xl border-b border-stone\">",
"target": [
"header"
]
},
{
"html": "<div class=\"bg-ink text-ivory p-6 flex flex-col\">",
"target": [
".text-ivory.flex-col.bg-ink"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"hidden sm:inline\">Editor's Letter Vol. 47</span>",
"target": [
".sm\\:inline.hidden:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.38 (foreground color: #6b6b6b, background color: #efe8e0, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "image-alt",
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap1/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap2/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap3/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap4/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap5/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://picsum.photos/seed/cap6/300/360\" class=\"h-28 w-full object-cover\">",
"target": [
".h-28.w-full.object-cover:nth-child(6)"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition\"><i data-lucide=\"instagram\" class=\"w-4 h-4\"></i></a>",
"target": [
".border-white\\/15.hover\\:bg-white.hover\\:text-ink:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition\"><i data-lucide=\"pinIcon\" class=\"w-4 h-4\"></i></a>",
"target": [
".border-white\\/15.hover\\:bg-white.hover\\:text-ink:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition\"><i data-lucide=\"youtube\" class=\"w-4 h-4\"></i></a>",
"target": [
".border-white\\/15.hover\\:bg-white.hover\\:text-ink:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"w-9 h-9 grid place-items-center rounded-full border border-white/15 hover:bg-white hover:text-ink transition\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"></i></a>",
"target": [
".border-white\\/15.hover\\:bg-white.hover\\:text-ink:nth-child(4)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5972
},
{
"y": 576,
"height": 5972
},
{
"y": 1152,
"height": 5972
},
{
"y": 1728,
"height": 5972
},
{
"y": 2304,
"height": 5972
},
{
"y": 2880,
"height": 5972
},
{
"y": 3456,
"height": 5972
},
{
"y": 4032,
"height": 5972
},
{
"y": 4608,
"height": 5972
},
{
"y": 5184,
"height": 5972
},
{
"y": 5252,
"height": 5972
}
],
"scans": 12,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Style & Fashion" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Style & Fashion"
- Description: Fashion trends, style guides, beauty resources, and clothing inspiration.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Style & Fashion" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Collections", "Contact", "Style Guide".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Style & Fashion" category. Consider themes similar to: "Street Style", "Accessories Guide", "Runway Reports".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "accessorizing", "personal styling", "sustainable fashion".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "Share Style", "Get Inspired".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Style & Fashion" sector. Ideas similar but not limited to: "virtual try-on".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "celebrity looks", "editor picks", "must-haves".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.