Anthropic Claude Haiku 5.5 – Style and Fashion
via Anthropic · Generated
- AIMAC Debt 4.99
- Cost $0.012
- Total Violations 23
- HTML Size 56 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
23 Serious
-
color-contrast serious 23 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#trends" class="active">Trends</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vesta Edit | Considered Style for the Modern Wardrobe</title>
<meta name="description" content="Vesta Edit delivers seasonal trend forecasts, celebrity style analysis, designer spotlights, beauty tips and a smart wardrobe planner for considered dressing.">
<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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--ink: #1b1b1f;
--ink-soft: #4a4a52;
--paper: #fbf8f6;
--blush: #f3e6df;
--clay: #b5614b;
--clay-dark: #944a36;
--sage: #7d8f7a;
--line: #e6dcd6;
--radius: 14px;
--shadow: 0 10px 30px rgba(27, 27, 31, 0.08);
--container: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: "Montserrat", system-ui, sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.7;
font-size: 16px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--clay-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; margin-bottom: 0.6rem; }
h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; color: var(--ink-soft); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
font-weight: 600;
color: var(--clay);
margin-bottom: 0.75rem;
}
section { padding: 88px 0; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head p { font-size: 1.02rem; }
/* Buttons */
.btn {
display: inline-block;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.04em;
border: 2px solid var(--ink);
background: var(--ink);
color: #fff;
cursor: pointer;
transition: all 0.25s ease;
font-family: inherit;
}
.btn:hover { background: transparent; color: var(--ink); text-decoration: none; }
.btn-clay { background: var(--clay); border-color: var(--clay); }
.btn-clay:hover { background: transparent; color: var(--clay-dark); border-color: var(--clay-dark); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: #fff; }
.btn-light:hover { background: #fff; color: var(--ink); }
.link-arrow { font-weight: 600; font-size: 0.9rem; }
.link-arrow::after { content: " \2192"; }
/* Header */
.topbar {
background: var(--ink);
color: #d9d4d0;
font-size: 0.8rem;
text-align: center;
padding: 8px 16px;
letter-spacing: 0.03em;
}
.topbar a { color: #fff; font-weight: 600; }
header.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(251, 248, 246, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0;
flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand-text strong {
display: block;
font-family: "Playfair Display", serif;
font-size: 1.6rem;
line-height: 1;
color: var(--ink);
letter-spacing: 0.02em;
}
.brand-text span {
font-size: 0.78rem;
color: var(--ink-soft);
letter-spacing: 0.04em;
}
nav.primary-nav ul {
list-style: none;
display: flex;
gap: 28px;
flex-wrap: wrap;
}
nav.primary-nav a {
color: var(--ink);
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.03em;
padding: 6px 0;
border-bottom: 2px solid transparent;
}
nav.primary-nav a:hover, nav.primary-nav a.active {
color: var(--clay);
border-bottom-color: var(--clay);
text-decoration: none;
}
.menu-toggle {
display: none;
background: none;
border: 1px solid var(--ink);
border-radius: 6px;
padding: 6px 12px;
font-family: inherit;
cursor: pointer;
}
/* Hero */
.hero {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
color: #fff;
background: #222 center/cover no-repeat;
background-image: linear-gradient(90deg, rgba(20,16,15,0.78) 0%, rgba(20,16,15,0.35) 60%, rgba(20,16,15,0.15) 100%), url("https://picsum.photos/1600/900");
}
.hero .container { position: relative; }
.hero .eyebrow { color: #f1c7b6; }
.hero h1 { color: #fff; max-width: 720px; margin-bottom: 20px; }
.hero p.lead {
color: #efe7e2;
max-width: 560px;
font-size: 1.08rem;
margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta {
display: flex;
gap: 40px;
margin-top: 56px;
flex-wrap: wrap;
}
.hero-meta div strong {
display: block;
font-family: "Playfair Display", serif;
font-size: 1.9rem;
color: #fff;
line-height: 1.1;
}
.hero-meta div span { font-size: 0.8rem; color: #d8cdc7; letter-spacing: 0.05em; text-transform: uppercase; }
/* Intro strip */
.intro-strip {
background: var(--blush);
padding: 56px 0;
}
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.intro-grid img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 440px; object-fit: cover; }
/* Trends feature grid */
.trend-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.card {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.card:hover { transform: translateY(-4px); }
.card img { width: 100%; height: 260px; object-fit: cover; }
.card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card-body .tag {
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sage);
font-weight: 700;
margin-bottom: 8px;
}
.card-body p { font-size: 0.95rem; }
.card-body .link-arrow { margin-top: auto; }
/* Layout with sidebar */
.content-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 56px;
align-items: start;
}
.article-feature {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.article-feature img { border-radius: var(--radius); width: 100%; height: 480px; object-fit: cover; }
.article-feature .meta { font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.article-feature p { font-size: 1.02rem; }
.pull-quote {
border-left: 3px solid var(--clay);
padding: 8px 0 8px 24px;
margin: 28px 0;
font-family: "Playfair Display", serif;
font-style: italic;
font-size: 1.4rem;
color: var(--ink);
}
.celebrity-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 36px;
}
.mini-card {
display: flex;
gap: 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
align-items: center;
}
.mini-card img { width: 110px; height: 130px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.mini-card h4 { font-size: 1.1rem; margin-bottom: 4px; }
.mini-card p { font-size: 0.88rem; margin-bottom: 8px; }
/* Sidebar */
aside.sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; }
.widget {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--shadow);
}
.widget h3 {
font-size: 1.2rem;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.widget ul { list-style: none; }
.widget li {
padding: 12px 0;
border-bottom: 1px dashed var(--line);
font-size: 0.92rem;
}
.widget li:last-child { border-bottom: none; padding-bottom: 0; }
.widget li strong { display: block; color: var(--ink); font-size: 0.95rem; }
.widget li span { color: var(--ink-soft); font-size: 0.82rem; }
.score {
display: inline-block;
background: var(--blush);
color: var(--clay-dark);
font-weight: 700;
font-size: 0.8rem;
padding: 2px 10px;
border-radius: 999px;
margin-left: 6px;
}
.widget.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.widget.dark h3 { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
.widget.dark p { color: #d7d0cb; font-size: 0.9rem; }
.widget.dark input {
width: 100%;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.3);
background: transparent;
color: #fff;
font-family: inherit;
margin-bottom: 12px;
}
.widget.dark input::placeholder { color: #aaa; }
.widget.dark .btn { width: 100%; background: var(--clay); border-color: var(--clay); }
.widget.dark .btn:hover { background: transparent; }
/* Designer spotlight */
.spotlight {
background: var(--ink);
color: #fff;
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 1.05fr 1fr;
}
.spotlight img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.spotlight-body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.spotlight-body h2 { color: #fff; }
.spotlight-body p { color: #cfc7c2; }
.spotlight-body .eyebrow { color: #f1c7b6; }
.spotlight-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 24px 0 32px;
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 24px;
}
.spotlight-facts strong { display: block; font-family: "Playfair Display", serif; font-size: 1.4rem; color: #fff; }
.spotlight-facts span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #bdb3ad; }
.spotlight-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.lookbook {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 40px;
}
.lookbook figure { position: relative; overflow: hidden; border-radius: 12px; }
.lookbook img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.5s ease; }
.lookbook figure:hover img { transform: scale(1.06); }
.lookbook figcaption {
position: absolute;
left: 14px;
bottom: 14px;
background: rgba(255,255,255,0.95);
padding: 6px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
}
/* Wardrobe planner */
.planner {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr 1.1fr;
overflow: hidden;
}
.planner-form { padding: 48px; }
.planner-form h3 { font-size: 1.6rem; margin-bottom: 12px; }
.field { margin-bottom: 22px; }
.field label {
display: block;
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 8px;
color: var(--ink);
letter-spacing: 0.02em;
}
.field select, .field input[type="number"] {
width: 100%;
padding: 12px 14px;
border: 1px solid #d4c8c1;
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
background: var(--paper);
color: var(--ink);
}
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
font-size: 0.9rem;
color: var(--ink-soft);
background: var(--paper);
border: 1px solid var(--line);
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
}
.planner-result {
background: var(--blush);
padding: 48px;
display: flex;
flex-direction: column;
}
.planner-result h3 { font-size: 1.4rem; margin-bottom: 10px; }
.result-list { list-style: none; margin-top: 12px; }
.result-list li {
background: #fff;
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 10px;
font-size: 0.92rem;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.result-list li b { color: var(--ink); }
.result-list li span.qty { color: var(--clay-dark); font-weight: 700; white-space: nowrap; }
.result-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: auto; padding-top: 16px; }
.empty-state { color: var(--ink-soft); font-style: italic; }
/* Beauty */
.beauty-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.tip {
background: #fff;
border-radius: var(--radius);
padding: 34px 30px;
border: 1px solid var(--line);
position: relative;
}
.tip .num {
font-family: "Playfair Display", serif;
font-size: 3rem;
color: var(--blush);
position: absolute;
top: 12px;
right: 20px;
font-weight: 700;
line-height: 1;
}
.tip h3 { position: relative; }
.beauty-banner {
margin-top: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--sage);
border-radius: 20px;
overflow: hidden;
color: #fff;
}
.beauty-banner img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.beauty-banner-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.beauty-banner-body h3 { color: #fff; font-size: 1.8rem; }
.beauty-banner-body p { color: #eef3ec; }
.beauty-banner .btn { align-self: flex-start; background: #fff; color: var(--ink); border-color: #fff; }
.beauty-banner .btn:hover { background: transparent; color: #fff; }
/* Testimonials */
.testimonials { background: var(--blush); }
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.testi {
background: #fff;
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.testi .stars { color: var(--clay); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: 14px; }
.testi blockquote {
font-family: "Playfair Display", serif;
font-style: italic;
font-size: 1.05rem;
color: var(--ink);
margin-bottom: 22px;
line-height: 1.6;
}
.testi-author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testi-author img { width: 52px; height: 52px; border-radius: 50%; }
.testi-author strong { display: block; font-size: 0.95rem; color: var(--ink); }
.testi-author span { font-size: 0.8rem; color: var(--ink-soft); }
/* FAQ */
.faq-layout {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 64px;
align-items: start;
}
.faq-layout img { border-radius: var(--radius); width: 100%; height: 420px; object-fit: cover; }
details.faq {
border-bottom: 1px solid var(--line);
padding: 22px 0;
}
details.faq:first-of-type { border-top: 1px solid var(--line); }
details.faq summary {
cursor: pointer;
list-style: none;
font-family: "Playfair Display", serif;
font-size: 1.2rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
content: "+";
font-family: "Montserrat", sans-serif;
font-size: 1.5rem;
color: var(--clay);
transition: transform 0.2s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 14px; font-size: 0.97rem; }
/* Subscribe band */
.subscribe-band {
background: linear-gradient(120deg, var(--clay) 0%, var(--clay-dark) 100%);
color: #fff;
padding: 72px 0;
}
.subscribe-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
}
.subscribe-inner h2 { color: #fff; }
.subscribe-inner p { color: #f7e4dc; }
.subscribe-form { display: flex; gap: 12px; flex-wrap: wrap; }
.subscribe-form input {
flex: 1;
min-width: 220px;
padding: 16px 20px;
border-radius: 999px;
border: none;
font-family: inherit;
font-size: 0.95rem;
}
.subscribe-form .btn { background: var(--ink); border-color: var(--ink); }
.subscribe-form .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.form-note { font-size: 0.78rem; color: #f7e4dc; margin-top: 12px; }
/* Footer */
footer.site-footer {
background: var(--ink);
color: #bdb6b1;
padding: 72px 0 28px;
font-size: 0.92rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 48px;
}
footer h4 {
color: #fff;
font-size: 1.05rem;
margin-bottom: 18px;
font-family: "Playfair Display", serif;
}
footer p { color: #bdb6b1; font-size: 0.92rem; }
footer ul { list-style: none; }
footer li { margin-bottom: 10px; }
footer a { color: #d9d2cd; }
footer a:hover { color: #fff; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.socials a {
display: inline-block;
border: 1px solid rgba(255,255,255,0.25);
padding: 8px 14px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 500;
}
.socials a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 24px;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 0.82rem;
}
.footer-bottom nav { display: flex; gap: 22px; }
/* Responsive */
@media (max-width: 1024px) {
.content-layout { grid-template-columns: 1fr; }
aside.sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lookbook { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
.intro-grid, .spotlight, .planner, .beauty-banner, .faq-layout, .subscribe-inner { grid-template-columns: 1fr; }
.trend-grid, .beauty-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
.spotlight-body { padding: 36px; }
.planner-form, .planner-result { padding: 32px; }
.intro-grid img { height: 320px; }
.faq-layout img { height: 300px; }
}
@media (max-width: 720px) {
section { padding: 64px 0; }
.menu-toggle { display: block; }
nav.primary-nav { display: none; width: 100%; }
nav.primary-nav.open { display: block; }
nav.primary-nav ul { flex-direction: column; gap: 4px; padding-top: 8px; }
nav.primary-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trend-grid, .beauty-grid, .testi-grid, .celebrity-list, .lookbook { grid-template-columns: 1fr; }
.spotlight-facts { grid-template-columns: 1fr; }
.checks { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero { min-height: 560px; }
.hero-meta { gap: 24px; }
.mini-card { flex-direction: column; align-items: flex-start; }
.mini-card img { width: 100%; height: 200px; }
}
</style>
</head>
<body>
<div class="topbar">
Free worldwide shipping on capsule edits over $150 · <a href="#subscribe">Join the Edit list</a>
</div>
<header class="site-header">
<div class="container header-inner">
<a href="#top" class="brand" aria-label="Vesta Edit home">
<img src="https://placehold.co/104x104/1b1b1f/f3e6df?text=VE&font=playfair%20display" alt="Vesta Edit logo">
<div class="brand-text">
<strong>Vesta Edit</strong>
<span>Considered style for the modern wardrobe</span>
</div>
</a>
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav" id="menuToggle">Menu</button>
<nav class="primary-nav" id="primary-nav" aria-label="Primary navigation">
<ul>
<li><a href="#trends" class="active">Trends</a></li>
<li><a href="#celebrity">Celebrity Style</a></li>
<li><a href="#designers">Designers</a></li>
<li><a href="#planner">Wardrobe Planner</a></li>
<li><a href="#beauty">Beauty</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#stylists">Stylists</a></li>
</ul>
</nav>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-title" style="padding:0;">
<div class="container">
<span class="eyebrow">The Autumn / Winter Edit</span>
<h1 id="hero-title">Dress With Intention. Build a Wardrobe That Works Harder.</h1>
<p class="lead">Vesta Edit translates runway movements into wearable direction. Our editors analyze seasonal trend forecasts, dissect celebrity style moments, and spotlight independent designers, so every piece you buy earns its place in your closet.</p>
<div class="hero-actions">
<a href="#trends" class="btn btn-clay">Explore This Season</a>
<a href="#subscribe" class="btn btn-light">Subscribe to The Edit</a>
</div>
<div class="hero-meta">
<div><strong>240+</strong><span>Lookbooks analyzed</span></div>
<div><strong>38</strong><span>Independent designers featured</span></div>
<div><strong>1.2M</strong><span>Monthly style readers</span></div>
</div>
</div>
</section>
<!-- INTRO -->
<div class="intro-strip">
<div class="container intro-grid">
<div>
<span class="eyebrow">Our Editorial Philosophy</span>
<h2>Fashion Is a Language. We Help You Speak It Fluently.</h2>
<p>Most style advice begins with a list of must-haves and ends with a closet full of items that never meet. Vesta Edit starts from a different premise: your wardrobe should reflect how you live, the work you do, the cities you move through, and the person you are becoming.</p>
<p>Every guide, forecast, and review on this site is written by a team of stylists, textile specialists, and former showroom buyers. We look closely at silhouette, fabric weight, tailoring, and provenance, then translate those details into practical choices you can apply on a Tuesday morning.</p>
<a href="#blog" class="link-arrow">Read our editorial standards</a>
</div>
<img src="https://picsum.photos/900/1000" alt="Editorial portrait of a woman wearing a tailored camel coat">
</div>
</div>
<!-- SECTION 1: SEASONAL TRENDS -->
<section id="trends" aria-labelledby="trends-title">
<div class="container">
<div class="section-head">
<span class="eyebrow">Seasonal Trends</span>
<h2 id="trends-title">The Autumn / Winter Trend Forecast</h2>
<p>Our forecast distills months of research across Paris, Milan, Copenhagen, and New York fashion weeks, along with fabric mill previews and street-level observation. Below are the three directions our editors believe will define the season, along with ways to adopt them without a full wardrobe overhaul.</p>
</div>
<div class="trend-grid">
<article class="card">
<img src="https://picsum.photos/800/560" alt="Layered knitwear in warm neutral tones">
<div class="card-body">
<span class="tag">Trend 01 / Texture</span>
<h3>Tactile Knits and Boucle</h3>
<p>Chunky knits, brushed mohair, and boucle are moving from accent pieces to the centre of the outfit. The look favours oversized cardigans and cropped sweaters worn over slim trousers, creating volume with restraint. Choose ivory, oatmeal, or deep bordeaux for the easiest integration.</p>
<a href="#planner" class="link-arrow">Add to my capsule</a>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/801/561" alt="Model wearing a long tailored wool overcoat">
<div class="card-body">
<span class="tag">Trend 02 / Silhouette</span>
<h3>Elongated Tailoring</h3>
<p>Designers are lengthening everything: coats fall below the knee, blazers skim the hip, and trousers feature a softened wide leg that breaks cleanly at the shoe. The key is proportion. Balance a long overcoat with a fitted base layer and keep accessories minimal so the line stays uninterrupted.</p>
<a href="#designers" class="link-arrow">See designer examples</a>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/802/562" alt="Burgundy leather accessories arranged on a neutral background">
<div class="card-body">
<span class="tag">Trend 03 / Palette</span>
<h3>Deep Burgundy and Mocha</h3>
<p>The colour story of the season is rich and grounded. Burgundy, espresso, and warm mocha replace the cool greys of recent years. These shades flatter a wide range of skin tones and pair naturally with denim, leather, and tonal layering. Introduce them through shoes or bags first.</p>
<a href="#beauty" class="link-arrow">Match with a beauty look</a>
</div>
</article>
</div>
</div>
</section>
<!-- SECTION 2: CELEBRITY STYLE + SIDEBAR -->
<section id="celebrity" style="padding-top:20px;" aria-labelledby="celeb-title">
<div class="container content-layout">
<div>
<div class="section-head" style="margin-bottom:32px;">
<span class="eyebrow">Celebrity Style</span>
<h2 id="celeb-title">Red Carpet Moments, Decoded</h2>
<p>Celebrity dressing can look effortless from the outside, but every look is the product of stylists, fittings, and carefully negotiated trade-offs. We break down the moments that matter and show you how to recreate their most useful ideas at everyday price points.</p>
</div>
<article class="article-feature">
<img src="https://picsum.photos/1000/640" alt="Actress arriving at a premiere in a sculptural gown">
<div>
<div class="meta">By Elena Marsh · Red Carpet Analysis · 8 min read</div>
<h3 style="font-size:1.8rem; margin:10px 0 14px;">Why the Sculptural Gown Is Making a Comeback</h3>
<p>For much of the last decade, red carpet dressing leaned toward sheer slips and minimal column silhouettes. This season, the pendulum has swung back toward architecture. Structured bodices, sculpted hip lines, and voluminous hemlines are appearing across premieres, award shows, and gallery openings, and they signal a renewed appetite for craftsmanship.</p>
<p>What makes these looks work is not only the cut but the tension between structure and movement. A stiff faille bodice paired with a fluid silk skirt allows the wearer to stay composed while the fabric moves with every step. Stylists often rely on boning, internal corsetry, and tailored seams to hold the shape without compromising comfort.</p>
<div class="pull-quote">"The best red carpet look is the one the wearer forgets she is wearing." — Celebrity stylist Adaeze Okafor</div>
<p>For everyday wear, the lesson is to introduce one architectural element at a time. A sharply cut peplum jacket, a structured shoulder, or a column skirt with a defined waist delivers the same impression without requiring the full ensemble.</p>
</div>
</article>
<div class="celebrity-list">
<article class="mini-card">
<img src="https://picsum.photos/300/380" alt="Singer in a monochrome tailored suit">
<div>
<h4>The Monochrome Suit</h4>
<p>A full-length tonal suit shows how one colour family can deliver impact without the need for contrast or print.</p>
<a href="#planner" class="link-arrow">Build this look</a>
</div>
</article>
<article class="mini-card">
<img src="https://picsum.photos/301/381" alt="Actor wearing a relaxed double-breasted coat">
<div>
<h4>Relaxed Double-Breasted</h4>
<p>Off-duty tailoring with an oversized fit proves that polish and comfort are no longer opposites.</p>
<a href="#planner" class="link-arrow">Build this look</a>
</div>
</article>
</div>
</div>
<!-- SIDEBAR -->
<aside class="sidebar" aria-label="Sidebar">
<div class="widget">
<h3>Beauty Reviews</h3>
<ul>
<li><strong>Velvet Lip Lacquer, Shade 04 <span class="score">9.2</span></strong><span>Long-wear without drying. Holds through a four-hour dinner.</span></li>
<li><strong>Barrier Repair Serum <span class="score">8.7</span></strong><span>Lightweight hydration that layers well under makeup.</span></li>
<li><strong>Sculpt Cream Blush <span class="score">8.4</span></strong><span>Buildable colour with a soft, skin-like finish.</span></li>
</ul>
</div>
<div class="widget">
<h3>Sustainable Picks</h3>
<ul>
<li><strong>Recycled Cashmere Wrap</strong><span>Made from pre-consumer offcuts. Fully traceable supply chain.</span></li>
<li><strong>Vegetable-Tanned Leather Tote</strong><span>Repairable hardware and a lifetime resole programme.</span></li>
<li><strong>Organic Cotton Trench</strong><span>Water-resistant finish without PFAS treatments.</span></li>
</ul>
</div>
<div class="widget">
<h3>Stylist Interviews</h3>
<ul>
<li><strong>Marcus Lei on Building a Capsule</strong><span>Why he recommends starting with three shoes, not thirty.</span></li>
<li><strong>Priya Anand on Working Wardrobes</strong><span>Tailoring tips for professionals who dress for client meetings.</span></li>
</ul>
</div>
<div class="widget dark">
<h3>Get Beauty Tips</h3>
<p>Receive our monthly beauty edit with product reviews, routine upgrades, and seasonal makeup guides.</p>
<input type="email" placeholder="Your email address" aria-label="Email address for beauty tips">
<a href="#subscribe" class="btn">Get Beauty Tips</a>
</div>
</aside>
</div>
</section>
<!-- SECTION 3: DESIGNER SPOTLIGHT -->
<section id="designers" aria-labelledby="designer-title" style="padding-top:20px;">
<div class="container">
<div class="spotlight">
<img src="https://picsum.photos/900/1000" alt="Designer working on a garment in a studio">
<div class="spotlight-body">
<span class="eyebrow">Designer Spotlight</span>
<h2 id="designer-title">Maren Holt: Quiet Luxury, Hand-Finished</h2>
<p>Maren Holt trained in haute couture atelier work in Antwerp before launching her own label from a converted textile mill outside Copenhagen. Her collections are small by design, usually no more than forty pieces per season, and each garment is finished by hand in limited runs.</p>
<p>Her signature is the cape-sleeve coat, cut from a double-faced wool that is woven in the Scottish Borders. The lining is hand-stitched and the seams are pressed in stages to give the garment a sculptural but comfortable drape. Holt describes her process as subtraction: every detail that does not serve the silhouette is removed.</p>
<div class="spotlight-facts">
<div><strong>40</strong><span>Pieces per season</span></div>
<div><strong>14</strong><span>Hours per coat</span></div>
<div><strong>3</strong><span>Partner mills</span></div>
</div>
<div class="spotlight-actions">
<a href="#lookbook" class="btn btn-clay">View Lookbook</a>
<a href="#stylists" class="btn btn-light">Book Stylist</a>
</div>
</div>
</div>
<div id="lookbook" style="margin-top:56px;">
<div class="section-head" style="margin-bottom:0;">
<span class="eyebrow">Autumn / Winter Lookbook</span>
<h3 style="font-size:1.7rem;">Five Ways to Wear the Cape Coat</h3>
<p>Each look in this edit uses the same coat in a different context. Notice how a change in footwear, knit, or trouser shifts the entire mood from boardroom to weekend.</p>
</div>
<div class="lookbook">
<figure><img src="https://picsum.photos/600/800" alt="Cape coat styled with tailored trousers"><figcaption>Boardroom</figcaption></figure>
<figure><img src="https://picsum.photos/601/801" alt="Cape coat styled with denim"><figcaption>Weekend</figcaption></figure>
<figure><img src="https://picsum.photos/602/802" alt="Cape coat styled over a knit dress"><figcaption>Evening</figcaption></figure>
<figure><img src="https://picsum.photos/603/803" alt="Cape coat styled with leather trousers"><figcaption>Night Out</figcaption></figure>
</div>
</div>
</div>
</section>
<!-- SECTION 4: WARDROBE PLANNER (INTERACTIVE) -->
<section id="planner" aria-labelledby="planner-title" style="background:var(--blush);">
<div class="container">
<div class="section-head">
<span class="eyebrow">Interactive Tool</span>
<h2 id="planner-title">Smart Wardrobe Planner</h2>
<p>A capsule wardrobe works only when every piece pairs with several others. Tell us your personal style, the season, and how many days you need to cover. The planner will generate a targeted list of core pieces and the number of each you should consider, so you can shop with purpose instead of impulse.</p>
</div>
<div class="planner">
<form class="planner-form" id="plannerForm" aria-describedby="planner-desc">
<h3>Plan Your Capsule</h3>
<p id="planner-desc" style="font-size:0.9rem;">Select your preferences below. Results update instantly.</p>
<div class="field">
<label for="persona">Personal style</label>
<select id="persona" name="persona">
<option value="minimal">Minimal and Refined</option>
<option value="romantic">Romantic and Soft</option>
<option value="street">Street and Relaxed</option>
<option value="tailored">Sharp and Tailored</option>
</select>
</div>
<div class="field">
<label for="season">Season</label>
<select id="season" name="season">
<option value="autumn">Autumn</option>
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
</select>
</div>
<div class="field">
<label for="days">Days to cover (outfits needed)</label>
<input type="number" id="days" name="days" min="5" max="30" value="14">
</div>
<div class="field">
<label>Priority categories</label>
<div class="checks">
<label><input type="checkbox" name="cat" value="outerwear" checked> Outerwear</label>
<label><input type="checkbox" name="cat" value="knitwear" checked> Knitwear</label>
<label><input type="checkbox" name="cat" value="bottoms" checked> Trousers and Skirts</label>
<label><input type="checkbox" name="cat" value="footwear" checked> Footwear</label>
<label><input type="checkbox" name="cat" value="dresses"> Dresses</label>
<label><input type="checkbox" name="cat" value="accessories"> Accessories</label>
</div>
</div>
<button type="submit" class="btn btn-clay">Build My Capsule</button>
</form>
<div class="planner-result" aria-live="polite">
<h3>Your Capsule Plan</h3>
<p style="font-size:0.9rem;">Each suggested quantity is calculated from your outfit count and the pairing logic behind the chosen style.</p>
<ul class="result-list" id="resultList">
<li class="empty-state">Complete the form and select "Build My Capsule" to see your plan.</li>
</ul>
<p class="result-note" id="resultNote"></p>
</div>
</div>
</div>
</section>
<!-- SECTION 5: BEAUTY -->
<section id="beauty" aria-labelledby="beauty-title">
<div class="container">
<div class="section-head">
<span class="eyebrow">Beauty Resources</span>
<h2 id="beauty-title">Beauty That Complements Your Wardrobe</h2>
<p>Makeup and skincare are part of how an outfit reads. A considered beauty routine should feel like a natural extension of your clothing, not a separate project. Our beauty editors test formulas over several weeks, assess wear under real conditions, and recommend routines that suit different textures, climates, and colour palettes.</p>
</div>
<div class="beauty-grid">
<article class="tip">
<span class="num">01</span>
<h3>Match Lip Tone to Outerwear Colour</h3>
<p>Deep burgundy coats call for a berry or plum lip that echoes the same undertone. Camel and mocha tones pair beautifully with a warm terracotta or rosewood stain. The principle is harmony rather than contrast, which keeps the overall look cohesive.</p>
</article>
<article class="tip">
<span class="num">02</span>
<h3>Prep Skin for Cold Weather</h3>
<p>Low humidity and indoor heating strip moisture quickly. Layer a hydrating essence under a richer cream, and add a facial oil at night. Exfoliate gently once a week to keep makeup from settling into dry patches around the nose and mouth.</p>
</article>
<article class="tip">
<span class="num">03</span>
<h3>Choose a Signature Finish</h3>
<p>Rather than rotating between matte, dewy, and glossy finishes, select one primary finish for your daily look. A satin skin finish with a single defined feature, such as brows or lashes, is versatile and works from the office to evening events.</p>
</article>
</div>
<div class="beauty-banner">
<img src="https://picsum.photos/900/700" alt="Makeup artist applying foundation with a brush">
<div class="beauty-banner-body">
<span class="eyebrow" style="color:#e9f0e7;">Expert Guidance</span>
<h3>Work One-to-One With a Beauty Stylist</h3>
<p>Our certified colour and makeup consultants offer virtual and in-studio sessions. Bring your wardrobe photos and we will help you select products and techniques that complement what you already own, reducing waste and building a routine you will actually keep.</p>
<a href="#stylists" class="btn">Book Stylist</a>
</div>
</div>
</div>
</section>
<!-- BLOG -->
<section id="blog" style="padding-top:20px;" aria-labelledby="blog-title">
<div class="container">
<div class="section-head">
<span class="eyebrow">From the Blog</span>
<h2 id="blog-title">Latest Style Notes</h2>
<p>Long-form guides, shopping breakdowns, and behind-the-scenes reporting from our editors. New articles publish every week.</p>
</div>
<div class="trend-grid">
<article class="card">
<img src="https://picsum.photos/803/563" alt="Closet organised with neutral garments">
<div class="card-body">
<span class="tag">Guide · 6 min</span>
<h3>How to Audit Your Wardrobe in One Afternoon</h3>
<p>Pull everything out, sort by frequency of wear, and separate pieces that fit your current life from those that belong to an earlier version of it. A clear audit makes every future purchase sharper.</p>
<a href="#blog" class="link-arrow">Read the guide</a>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/804/564" alt="Fabric swatches laid out on a table">
<div class="card-body">
<span class="tag">Fabric Literacy · 9 min</span>
<h3>Reading Fabric Labels Like a Buyer</h3>
<p>Weight in grams per square metre, fibre blends, and weave structure tell you more about longevity than the price tag. Learn which signals indicate quality and which are marketing language.</p>
<a href="#blog" class="link-arrow">Read the guide</a>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/805/565" alt="Stylist reviewing outfit options on a rail">
<div class="card-body">
<span class="tag">Interview · 7 min</span>
<h3>Inside a Stylist's Fitting Room</h3>
<p>We spent a day with a Milan-based wardrobe stylist to understand how she sources pieces, balances proportion, and adjusts fit for clients who travel constantly.</p>
<a href="#stylists" class="link-arrow">Read the interview</a>
</div>
</article>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" aria-labelledby="testi-title">
<div class="container">
<div class="section-head" style="text-align:left;">
<span class="eyebrow">Reader Stories</span>
<h2 id="testi-title">What Our Readers Say</h2>
<p>Thousands of readers use Vesta Edit to plan purchases, refine routines, and feel more confident in what they wear. Here is what some of them told us.</p>
</div>
<div class="testi-grid">
<figure class="testi">
<div class="stars" aria-label="Five stars">★★★★★</div>
<blockquote>"The wardrobe planner stopped my impulse buying overnight. I now own nine pieces that all work together, and I have not wasted money since."</blockquote>
<figcaption class="testi-author">
<img src="https://i.pravatar.cc/104?u=vesta-reader-1" alt="Portrait of Hannah Brooks">
<div><strong>Hannah Brooks</strong><span>Architect, Toronto</span></div>
</figcaption>
</figure>
<figure class="testi">
<div class="stars" aria-label="Five stars">★★★★★</div>
<blockquote>"Their beauty reviews are the most honest I have found. They tell you when a product is not worth the hype, which is exactly why I trust them."</blockquote>
<figcaption class="testi-author">
<img src="https://i.pravatar.cc/104?u=vesta-reader-2" alt="Portrait of Dani Okoye">
<div><strong>Dani Okoye</strong><span>Marketing Director, London</span></div>
</figcaption>
</figure>
<figure class="testi">
<div class="stars" aria-label="Five stars">★★★★★</div>
<blockquote>"Booking a virtual session with a stylist was the best investment I made this year. My work wardrobe finally reflects who I am as a leader."</blockquote>
<figcaption class="testi-author">
<img src="https://i.pravatar.cc/104?u=vesta-reader-3" alt="Portrait of Sofia Lindqvist">
<div><strong>Sofia Lindqvist</strong><span>Creative Consultant, Stockholm</span></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- STYLISTS CTA + FAQ -->
<section id="stylists" aria-labelledby="faq-title">
<div class="container faq-layout">
<div>
<span class="eyebrow">Personal Styling</span>
<h2 id="faq-title">Your Questions, Answered</h2>
<p>Whether you are preparing for a career change, a wedding, or simply want a wardrobe that feels like you, our stylists can help. Review the most common questions below, or book a consultation to begin.</p>
<img src="https://picsum.photos/700/840" alt="Personal stylist consulting with a client in a showroom" style="margin:24px 0;">
<a href="#subscribe" class="btn btn-clay">Book Stylist</a>
</div>
<div>
<details class="faq" open>
<summary>How does a virtual styling session work?</summary>
<p>After you book, you will receive a short intake form covering your lifestyle, budget, colour preferences, and wardrobe goals. You then upload photos of your current wardrobe. During the 60-minute video session, your stylist walks you through outfit combinations, identifies gaps, and creates a shopping list ranked by priority.</p>
</details>
<details class="faq">
<summary>Do you sell the products you recommend?</summary>
<p>No. Vesta Edit is editorially independent. We do not accept payment for placement, and our stylists are paid by session fee rather than by commission. Affiliate links, where they appear, are clearly labelled and do not influence our recommendations.</p>
</details>
<details class="faq">
<summary>How often is the trend forecast updated?</summary>
<p>We publish a full seasonal forecast four times a year, timed to the release of each major fashion week. Between seasons, our editors add interim reports covering emerging micro-trends, notable collection drops, and shifts in palette or silhouette.</p>
</details>
<details class="faq">
<summary>Can the wardrobe planner work for plus-size or petite bodies?</summary>
<p>Yes. The planner recommends quantities and pairings rather than specific sizes, so it applies to every body type. Our stylists can also add fit notes to your plan, covering tailoring needs, proportion adjustments, and brands that cut true to size across different ranges.</p>
</details>
<details class="faq">
<summary>What is the difference between a Subscribe plan and a single session?</summary>
<p>The Edit Membership includes weekly newsletters, early access to lookbooks, and two discounted stylist sessions per quarter. A single session is a one-off consultation with no ongoing commitment. Both options can be cancelled at any time from your account settings.</p>
</details>
</div>
</div>
</section>
<!-- SUBSCRIBE -->
<section class="subscribe-band" id="subscribe" aria-labelledby="sub-title" style="padding:72px 0;">
<div class="container subscribe-inner">
<div>
<span class="eyebrow" style="color:#fbe3d9;">The Edit Newsletter</span>
<h2 id="sub-title">Subscribe for Weekly Style Intelligence</h2>
<p>Each Thursday we send a concise briefing covering the season's most useful trend, one beauty product worth your attention, and a single capsule idea you can apply that weekend. No filler, no sponsored noise.</p>
</div>
<div>
<form class="subscribe-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Thank you, welcome to The Edit';">
<label for="subEmail" class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">Email address</label>
<input type="email" id="subEmail" placeholder="Enter your email address" required>
<button type="submit" class="btn">Subscribe</button>
</form>
<p class="form-note">By subscribing you agree to our Privacy Policy. Unsubscribe at any time.</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div>
<h4>Vesta Edit</h4>
<p>An independent style publication and personal styling studio. We report on fashion, beauty, and sustainable dressing with editorial rigour and a focus on wearable, long-lasting choices.</p>
<div class="socials" style="margin-top:18px;">
<a href="#" aria-label="Instagram">Instagram</a>
<a href="#" aria-label="Pinterest">Pinterest</a>
<a href="#" aria-label="TikTok">TikTok</a>
<a href="#" aria-label="YouTube">YouTube</a>
</div>
</div>
<div>
<h4>Explore</h4>
<ul>
<li><a href="#trends">Seasonal Trends</a></li>
<li><a href="#celebrity">Celebrity Style</a></li>
<li><a href="#designers">Designer Spotlights</a></li>
<li><a href="#beauty">Beauty Resources</a></li>
<li><a href="#planner">Wardrobe Planner</a></li>
</ul>
</div>
<div>
<h4>Studio</h4>
<ul>
<li><a href="#stylists">Book a Stylist</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#subscribe">Newsletter</a></li>
<li><a href="#">Partner With Us</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li>Vesta Edit Studio Ltd.</li>
<li>48 Harrow Lane, Suite 3B</li>
<li>Shoreditch, London E1 6AQ</li>
<li><a href="mailto:hello@vestaedit.com">hello@vestaedit.com</a></li>
<li><a href="tel:+442079460318">+44 (0)20 7946 0318</a></li>
<li>Mon to Fri, 9:00 to 18:00 GMT</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> Vesta Edit. All rights reserved.</span>
<nav aria-label="Legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Cookie Settings</a>
<a href="#">Accessibility</a>
</nav>
</div>
</div>
</footer>
<script>
// Current year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile menu toggle
const toggle = document.getElementById('menuToggle');
const nav = document.getElementById('primary-nav');
toggle.addEventListener('click', () => {
const open = nav.classList.toggle('open');
toggle.setAttribute('aria-expanded', open);
});
// Wardrobe planner logic
const personaRules = {
minimal: {
label: 'Minimal and Refined',
base: 'Neutral palette, clean lines, no visible logos',
items: {
outerwear: { name: 'Structured wool coat in camel or charcoal', ratio: 0.1 },
knitwear: { name: 'Fine-gauge merino crewneck and roll-neck', ratio: 0.2 },
bottoms: { name: 'Straight-leg trousers and a midi skirt', ratio: 0.25 },
footwear: { name: 'Leather loafer and ankle boot', ratio: 0.15 },
dresses: { name: 'Column dress in a matte jersey', ratio: 0.1 },
accessories: { name: 'Slim belt and a structured tote', ratio: 0.1 }
}
},
romantic: {
label: 'Romantic and Soft',
base: 'Flowing textures, soft tones, delicate detailing',
items: {
outerwear: { name: 'Cropped faux-shearling or soft boucle jacket', ratio: 0.1 },
knitwear: { name: 'Pointelle or ribbed knit with a soft neckline', ratio: 0.2 },
bottoms: { name: 'Bias-cut midi skirt and wide-leg satin trousers', ratio: 0.2 },
footwear: { name: 'Block-heel mary janes and a suede boot', ratio: 0.15 },
dresses: { name: 'Wrap dress in printed crepe or silk', ratio: 0.2 },
accessories: { name: 'Pearl or enamel jewellery and a small shoulder bag', ratio: 0.15 }
}
},
street: {
label: 'Street and Relaxed',
base: 'Comfort-led silhouettes, layered textures, bold footwear',
items: {
outerwear: { name: 'Oversized bomber or padded utility jacket', ratio: 0.1 },
knitwear: { name: 'Chunky knit cardigan and a heavyweight sweatshirt', ratio: 0.2 },
bottoms: { name: 'Relaxed denim and cargo or wide trousers', ratio: 0.25 },
footwear: { name: 'Chunky sneakers and a leather chelsea boot', ratio: 0.2 },
dresses: { name: 'Slip dress layered over a tee', ratio: 0.08 },
accessories: { name: 'Crossbody bag and a statement cap or beanie', ratio: 0.12 }
}
},
tailored: {
label: 'Sharp and Tailored',
base: 'Precise cuts, crisp structure, polished finishes',
items: {
outerwear: { name: 'Double-breasted topcoat in navy or grey', ratio: 0.12 },
knitwear: { name: 'Lightweight knit polo and a fine-gauge vest', ratio: 0.18 },
bottoms: { name: 'Pleated wide-leg trousers and a pencil skirt', ratio: 0.25 },
footwear: { name: 'Pointed-toe pump and an Oxford derby', ratio: 0.15 },
dresses: { name: 'Sheath dress with a structured collar', ratio: 0.1 },
accessories: { name: 'Leather belt, silk scarf, and a briefcase tote', ratio: 0.12 }
}
}
};
const form = document.getElementById('plannerForm');
const list = document.getElementById('resultList');
const note = document.getElementById('resultNote');
form.addEventListener('submit', (e) => {
e.preventDefault();
const persona = personaRules[form.persona.value];
const season = form.season.value;
const days = Math.min(30, Math.max(5, parseInt(form.days.value, 10) || 14));
const selected = [...form.querySelectorAll('input[name="cat"]:checked')].map(c => c.value);
if (selected.length === 0) {
list.innerHTML = '<li class="empty-state">Select at least one priority category to generate your plan.</li>';
note.textContent = '';
return;
}
const total = selected.reduce((sum, key) => sum + persona.items[key].ratio, 0);
const seasonNote = {
autumn: 'Layering pieces are weighted higher to handle shifting temperatures.',
winter: 'Outerwear and knitwear receive additional weight for thermal coverage.',
spring: 'Lighter knits and transitional jackets are prioritised.',
summer: 'Breathable fabrics and fewer layers are favoured for warmer days.'
}[season];
list.innerHTML = selected.map(key => {
const item = persona.items[key];
const qty = Math.max(1, Math.round((item.ratio / total) * days / 2));
const label = key.charAt(0).toUpperCase() + key.slice(1);
return `<li><span><b>${label}:</b> ${item.name}</span><span class="qty">x${qty}</span></li>`;
}).join('');
note.textContent = `${persona.label} capsule for ${days} outfits. ${persona.base}. ${seasonNote}`;
});
</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:08:23.572Z",
"url": "https://benchmark.aimac.invalid/cfd5b381dd91b34d7e734fd1f486a04e687228a6c0f5f874efa6842110db0825.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-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-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-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": []
},
{
"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-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": "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": "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": "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": "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-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": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<section class=\"hero\" aria-labelledby=\"hero-title\" style=\"padding:0;\">",
"target": [
".hero"
]
}
]
},
{
"id": "button-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",
"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 type=\"submit\" class=\"btn btn-clay\">Build My Capsule</button>",
"target": [
"#plannerForm > button[type=\"submit\"]"
]
}
]
},
{
"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 id=\"hero-title\">Dress With Intention. Build a Wardrobe That Works Harder.</h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2>Fashion Is a Language. We Help You Speak It Fluently.</h2>",
"target": [
".intro-grid > div > h2"
]
},
{
"html": "<h2 id=\"trends-title\">The Autumn / Winter Trend Forecast</h2>",
"target": [
"#trends-title"
]
},
{
"html": "<h3>Tactile Knits and Boucle</h3>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(1) > .card-body > h3"
]
},
{
"html": "<h3>Elongated Tailoring</h3>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(2) > .card-body > h3"
]
},
{
"html": "<h3>Deep Burgundy and Mocha</h3>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(3) > .card-body > h3"
]
},
{
"html": "<h2 id=\"celeb-title\">Red Carpet Moments, Decoded</h2>",
"target": [
"#celeb-title"
]
},
{
"html": "<h3 style=\"font-size:1.8rem; margin:10px 0 14px;\">Why the Sculptural Gown Is Making a Comeback</h3>",
"target": [
".article-feature > div > h3"
]
},
{
"html": "<h4>The Monochrome Suit</h4>",
"target": [
".mini-card:nth-child(1) > div > h4"
]
},
{
"html": "<h4>Relaxed Double-Breasted</h4>",
"target": [
".mini-card:nth-child(2) > div > h4"
]
},
{
"html": "<h3>Beauty Reviews</h3>",
"target": [
".widget:nth-child(1) > h3"
]
},
{
"html": "<h3>Sustainable Picks</h3>",
"target": [
".widget:nth-child(2) > h3"
]
},
{
"html": "<h3>Stylist Interviews</h3>",
"target": [
".widget:nth-child(3) > h3"
]
},
{
"html": "<h3>Get Beauty Tips</h3>",
"target": [
".dark > h3"
]
},
{
"html": "<h2 id=\"designer-title\">Maren Holt: Quiet Luxury, Hand-Finished</h2>",
"target": [
"#designer-title"
]
},
{
"html": "<h3 style=\"font-size:1.7rem;\">Five Ways to Wear the Cape Coat</h3>",
"target": [
".section-head > h3"
]
},
{
"html": "<h2 id=\"planner-title\">Smart Wardrobe Planner</h2>",
"target": [
"#planner-title"
]
},
{
"html": "<h3>Plan Your Capsule</h3>",
"target": [
"#plannerForm > h3"
]
},
{
"html": "<h3>Your Capsule Plan</h3>",
"target": [
".planner-result > h3"
]
},
{
"html": "<h2 id=\"beauty-title\">Beauty That Complements Your Wardrobe</h2>",
"target": [
"#beauty-title"
]
},
{
"html": "<h3>Match Lip Tone to Outerwear Colour</h3>",
"target": [
".tip:nth-child(1) > h3"
]
},
{
"html": "<h3>Prep Skin for Cold Weather</h3>",
"target": [
".tip:nth-child(2) > h3"
]
},
{
"html": "<h3>Choose a Signature Finish</h3>",
"target": [
".tip:nth-child(3) > h3"
]
},
{
"html": "<h3>Work One-to-One With a Beauty Stylist</h3>",
"target": [
".beauty-banner-body > h3"
]
},
{
"html": "<h2 id=\"blog-title\">Latest Style Notes</h2>",
"target": [
"#blog-title"
]
},
{
"html": "<h3>How to Audit Your Wardrobe in One Afternoon</h3>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(1) > .card-body > h3"
]
},
{
"html": "<h3>Reading Fabric Labels Like a Buyer</h3>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(2) > .card-body > h3"
]
},
{
"html": "<h3>Inside a Stylist's Fitting Room</h3>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(3) > .card-body > h3"
]
},
{
"html": "<h2 id=\"testi-title\">What Our Readers Say</h2>",
"target": [
"#testi-title"
]
},
{
"html": "<h2 id=\"faq-title\">Your Questions, Answered</h2>",
"target": [
"#faq-title"
]
},
{
"html": "<h2 id=\"sub-title\">Subscribe for Weekly Style Intelligence</h2>",
"target": [
"#sub-title"
]
},
{
"html": "<h4>Vesta Edit</h4>",
"target": [
"div:nth-child(1) > h4"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
".footer-grid > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Studio</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"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": "#d9d4d0",
"bgColor": "#1b1b1f",
"contrastRatio": 11.67,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.67"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"topbar\">\n Free worldwide shipping on capsule edits over $150 \u00b7 <a href=\"#subscribe\">Join the Edit list</a>\n </div>",
"target": [
".topbar"
]
}
]
},
{
"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\">",
"target": [
"html"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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 type=\"email\" placeholder=\"Your email address\" aria-label=\"Email address for beauty tips\">",
"target": [
"input[placeholder=\"Your email address\"]"
]
}
]
},
{
"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\">",
"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\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"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://placehold.co/104x104/1b1b1f/f3e6df?text=VE&font=playfair%20display\" alt=\"Vesta Edit logo\">",
"target": [
"img[alt=\"Vesta Edit logo\"]"
]
}
]
},
{
"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": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"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 type=\"email\" placeholder=\"Your email address\" aria-label=\"Email address for beauty tips\">",
"target": [
"input[placeholder=\"Your email address\"]"
]
}
]
},
{
"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-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"topbar\">\n Free worldwide shipping on capsule edits over $150 \u00b7 <a href=\"#subscribe\">Join the Edit list</a>\n </div>",
"target": [
".topbar"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#subscribe\">Join the Edit list</a>",
"target": [
".topbar > a[href$=\"#subscribe\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"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=\"#subscribe\">Join the Edit list</a>",
"target": [
".topbar > a[href$=\"#subscribe\"]"
]
}
]
},
{
"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>",
"target": [
"#primary-nav > ul"
]
}
]
},
{
"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><a href=\"#trends\" class=\"active\">Trends</a></li>",
"target": [
"#primary-nav > ul > 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": "<img src=\"https://placehold.co/104x104/1b1b1f/f3e6df?text=VE&font=playfair%20display\" alt=\"Vesta Edit logo\">",
"target": [
"img[alt=\"Vesta Edit logo\"]"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Personal style"
},
"relatedNodes": [
{
"html": "<label for=\"persona\">Personal style</label>",
"target": [
"label[for=\"persona\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"persona\" name=\"persona\">",
"target": [
"#persona"
]
}
]
},
{
"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>How does a virtual styling session work?</summary>",
"target": [
"details[open=\"\"] > 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": 350.4,
"height": 52.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (350.4px by 52.8px, 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=\"#top\" class=\"brand\" aria-label=\"Vesta Edit home\">",
"target": [
".brand"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"stars\" aria-label=\"Five stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
".testi:nth-child(1) > .stars[aria-label=\"Five stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"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": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" aria-labelledby=\"hero-title\" style=\"padding:0;\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">The Autumn / Winter Edit</span>",
"target": [
".container > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"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": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\">",
"target": [
"header"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#trends\" class=\"active\">Trends</a>",
"target": [
".active"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b5614b",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#trends\" class=\"btn btn-clay\">Explore This Season</a>",
"target": [
".btn-clay.btn[href$=\"#trends\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#trends\" class=\"btn btn-clay\">Explore This Season</a>",
"target": [
".btn-clay.btn[href$=\"#trends\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#f3e6df",
"contrastRatio": 3.6,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"intro-strip\">",
"target": [
".intro-strip"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Our Editorial Philosophy</span>",
"target": [
".intro-grid > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Seasonal Trends</span>",
"target": [
"#trends > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Trend 01 / Texture</span>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(1) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Trend 02 / Silhouette</span>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(2) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Trend 03 / Palette</span>",
"target": [
"#trends > .container > .trend-grid > .card:nth-child(3) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Celebrity Style</span>",
"target": [
".content-layout > div > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b5614b",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#subscribe\" class=\"btn\">Get Beauty Tips</a>",
"target": [
".dark > .btn[href$=\"#subscribe\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#subscribe\" class=\"btn\">Get Beauty Tips</a>",
"target": [
".dark > .btn[href$=\"#subscribe\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b5614b",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#lookbook\" class=\"btn btn-clay\">View Lookbook</a>",
"target": [
"a[href$=\"#lookbook\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#lookbook\" class=\"btn btn-clay\">View Lookbook</a>",
"target": [
"a[href$=\"#lookbook\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Autumn / Winter Lookbook</span>",
"target": [
"#lookbook > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#f3e6df",
"contrastRatio": 3.6,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"planner\" aria-labelledby=\"planner-title\" style=\"background:var(--blush);\">",
"target": [
"#planner"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Interactive Tool</span>",
"target": [
"#planner > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b5614b",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn btn-clay\">Build My Capsule</button>",
"target": [
"#plannerForm > button[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn btn-clay\">Build My Capsule</button>",
"target": [
"#plannerForm > button[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Beauty Resources</span>",
"target": [
"#beauty > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9f0e7",
"bgColor": "#7d8f7a",
"contrastRatio": 2.97,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"beauty-banner\">",
"target": [
".beauty-banner"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.97 (foreground color: #e9f0e7, background color: #7d8f7a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\" style=\"color:#e9f0e7;\">Expert Guidance</span>",
"target": [
".beauty-banner-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.97 (foreground color: #e9f0e7, background color: #7d8f7a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#eef3ec",
"bgColor": "#7d8f7a",
"contrastRatio": 3.06,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"beauty-banner\">",
"target": [
".beauty-banner"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.06 (foreground color: #eef3ec, background color: #7d8f7a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Our certified colour and makeup consultants offer virtual and in-studio sessions. Bring your wardrobe photos and we will help you select products and techniques that complement what you already own, reducing waste and building a routine you will actually keep.</p>",
"target": [
".beauty-banner-body > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.06 (foreground color: #eef3ec, background color: #7d8f7a, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">From the Blog</span>",
"target": [
"#blog > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Guide \u00b7 6 min</span>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(1) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Fabric Literacy \u00b7 9 min</span>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(2) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d8f7a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Interview \u00b7 7 min</span>",
"target": [
"#blog > .container > .trend-grid > .card:nth-child(3) > .card-body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #7d8f7a, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#f3e6df",
"contrastRatio": 3.6,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"testimonials\" aria-labelledby=\"testi-title\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Reader Stories</span>",
"target": [
".testimonials > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.6 (foreground color: #b5614b, background color: #f3e6df, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5614b",
"bgColor": "#fbf8f6",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Personal Styling</span>",
"target": [
".faq-layout > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #b5614b, background color: #fbf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b5614b",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#subscribe\" class=\"btn btn-clay\">Book Stylist</a>",
"target": [
".btn-clay.btn[href$=\"#subscribe\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#subscribe\" class=\"btn btn-clay\">Book Stylist</a>",
"target": [
".btn-clay.btn[href$=\"#subscribe\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #ffffff, background color: #b5614b, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 11408
},
{
"y": 576,
"height": 11408
},
{
"y": 1152,
"height": 11408
},
{
"y": 1728,
"height": 11408
},
{
"y": 2304,
"height": 11408
},
{
"y": 2880,
"height": 11408
},
{
"y": 3456,
"height": 11408
},
{
"y": 4032,
"height": 11408
},
{
"y": 4608,
"height": 11408
},
{
"y": 5184,
"height": 11408
},
{
"y": 5760,
"height": 11408
},
{
"y": 6336,
"height": 11408
},
{
"y": 6912,
"height": 11408
},
{
"y": 7488,
"height": 11408
},
{
"y": 8064,
"height": 11408
},
{
"y": 8640,
"height": 11408
},
{
"y": 9216,
"height": 11408
},
{
"y": 9792,
"height": 11408
},
{
"y": 10368,
"height": 11408
},
{
"y": 10688,
"height": 11408
}
],
"scans": 21,
"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: "Blog", "Beauty", "Trends".
- **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: "Celebrity Style", "Designer Spotlights", "Seasonal Trends".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "haute couture", "trend forecast", "lookbook".
- **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", "Book Stylist", "Get Beauty Tips".
- **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: "wardrobe planner".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "beauty reviews", "sustainable picks", "stylist interviews".
- **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.