OpenAI GPT 6 Astra Pro – Style and Fashion
via OpenAI · Generated
- AIMAC Debt 3.98
- Cost $1.98
- Total Violations 8
- HTML Size 63 KB
- Em Dashes 3
Screenshot
View Live Page
Accessibility Issues Found
8 Serious
-
color-contrast serious 8 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="eyebrow">A little inspiration, on demand</p>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f5f3ed">
<meta name="description" content="Forme & Field is an independent style journal for a wardrobe, beauty routine, and point of view that feel like you.">
<title>Forme & Field — Style with a point of view.</title>
<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=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;650;700;800&display=swap" rel="stylesheet">
<style>
:root{--paper:#f5f3ed;--ink:#22251f;--muted:#6c7066;--line:#d4d5ca;--green:#dcec89;--purple:#e5dff0;--white:#fff;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.65}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{color:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{display:block;width:100%;object-fit:cover}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:500}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:3px solid #677630;outline-offset:5px}
.wrap{width:min(1320px,calc(100% - 96px));margin:auto}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.topline{border-bottom:1px solid var(--line);padding:10px 0;font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;gap:15px}
.topline span:last-child{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;display:inline-block;background:#68754a;border-radius:50%}
.masthead{padding:22px 0 20px}
.masthead-top{display:flex;align-items:center;justify-content:space-between}
.identity{display:flex;align-items:center;gap:11px}
.logo{width:34px;height:34px}
.identity .eyebrow{font-size:9px;line-height:1.6}
.masthead-tag{font-family:var(--serif);font-size:16px;font-style:italic}
.wordmark{font-family:'Manrope',sans-serif;font-size:clamp(52px,10.7vw,153px);font-weight:600;letter-spacing:-.071em;line-height:1.15;display:block;text-align:center;white-space:nowrap;margin:5px 0 0}
.wordmark span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.9em;display:inline-block;margin:0 .06em}
.nav-shell{position:sticky;top:0;background:rgba(245,243,237,.97);backdrop-filter:blur(12px);z-index:20;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.nav-content{display:flex;align-items:center;justify-content:space-between;min-height:59px;gap:25px}
.nav-links{display:flex;align-items:center;gap:33px}
.nav-links a{font-size:12px;font-weight:500;position:relative}
.nav-links a:after{content:"";position:absolute;bottom:-7px;left:0;width:0;height:1px;background:var(--ink);transition:width .2s}
.nav-links a:hover:after{width:100%}
.nav-subscribe{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:1px;display:flex;align-items:center;gap:25px}
.nav-subscribe span{font-size:20px;font-weight:400}
.menu-toggle{display:none;border:0;background:none;padding:10px 0;font-weight:600}
.hero{display:grid;grid-template-columns:1fr 1.07fr;padding-top:35px;padding-bottom:45px;gap:44px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;padding:27px 0 0}
.issue-label{display:flex;gap:13px;align-items:center;margin-bottom:24px}
.pill{display:inline-block;border:1px solid var(--ink);border-radius:30px;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:3px 10px}
.hero h1{font-size:clamp(48px,5.1vw,74px);line-height:1.035;letter-spacing:-3.6px;max-width:580px}
.hero h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-3px}
.hero-deck{font-size:14px;line-height:1.8;max-width:360px;margin-top:25px;color:#5b5e55}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;background:var(--ink);color:var(--paper);padding:14px 21px;border:1px solid var(--ink);font-size:11px;font-weight:600;letter-spacing:.2px;transition:background .2s,color .2s,transform .2s}
.button:hover{background:#404735;transform:translateY(-2px)}
.button .arrow{font-size:20px;line-height:1}
.button.light{background:transparent;color:var(--ink)}
.button.light:hover{background:var(--ink);color:var(--paper)}
.hero .button{margin-top:26px}
.hero-bottom{margin-top:auto;padding-top:36px;display:flex;align-items:center;gap:12px}
.avatar-stack{display:flex;padding-right:6px}
.avatar-stack img{width:30px;height:30px;border-radius:50%;border:2px solid var(--paper);margin-right:-7px}
.hero-bottom p{font-size:10px;line-height:1.6;color:var(--muted)}
.hero-bottom strong{color:var(--ink);font-weight:600}
.hero-visual{position:relative;min-height:490px;background:#b1ad9c;overflow:hidden}
.hero-visual>img{height:100%;position:absolute;inset:0;object-position:center 36%;filter:grayscale(100%);transition:transform .8s}
.hero-visual:hover>img{transform:scale(1.025)}
.hero-visual:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.image-index{position:absolute;top:18px;left:20px;color:white;z-index:1;font-size:10px;letter-spacing:1px}
.hero-sticker{position:absolute;right:21px;top:23px;background:var(--green);width:99px;height:99px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);font-size:11px;line-height:1.4;font-weight:600;z-index:1}
.photo-caption{position:absolute;bottom:24px;left:25px;right:25px;color:white;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:15px}
.photo-caption p{font-family:var(--serif);font-size:27px;line-height:1.1;margin-top:7px}
.circle-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:transparent;color:white;font-size:23px;flex-shrink:0;transition:background .2s}
.circle-link:hover{background:rgba(255,255,255,.2)}
.ticker{background:var(--green);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ticker .wrap{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:14px}
.ticker-label{font-weight:700;font-size:10px;letter-spacing:1px;white-space:nowrap}
.ticker-item{font-size:11px;display:flex;align-items:center;gap:21px}
.spark{font-size:20px;line-height:1}
.section{padding-top:65px;padding-bottom:62px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-heading h2{font-size:38px;line-height:1.2;letter-spacing:-1.6px;margin-top:8px}
.section-heading h2 em{font-family:var(--serif);font-weight:400}
.text-link{display:inline-flex;align-items:center;gap:24px;font-size:11px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:5px;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0}
.text-link span{font-size:17px;line-height:1}
.text-link:hover{color:#6b783c;border-color:#6b783c}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.story-image{position:relative;overflow:hidden;aspect-ratio:1.18;background:#d2d0c6}
.story-image img{height:100%;transition:transform .6s;filter:saturate(.6)}
.story-card:hover .story-image img{transform:scale(1.035)}
.category-tag{position:absolute;left:12px;bottom:12px;background:var(--paper);font-size:9px;font-weight:600;letter-spacing:1px;padding:5px 10px;text-transform:uppercase}
.story-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:17px 0 10px}
.story-card h3{font-size:23px;line-height:1.3;letter-spacing:-.75px}
.story-card p{font-size:12px;line-height:1.85;color:var(--muted);margin-top:12px}
.story-card .text-link{margin-top:17px}
.runway{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.05fr 1fr;gap:65px;padding-block:47px}
.runway-visual{position:relative;background:#d3d0c9;min-height:435px}
.runway-visual>img{height:100%;width:100%;position:absolute;inset:0;filter:grayscale(100%);object-position:center 35%}
.vertical-label{position:absolute;left:16px;top:18px;writing-mode:vertical-rl;color:white;font-size:10px;letter-spacing:2px}
.runway-note{position:absolute;right:-18px;bottom:23px;background:var(--purple);width:159px;padding:20px;transform:rotate(-5deg);box-shadow:2px 4px 12px #0000000d}
.runway-note span{font-size:9px;letter-spacing:1px;text-transform:uppercase}
.runway-note p{font-family:var(--serif);font-size:25px;line-height:1.2;margin-top:8px;font-style:italic}
.runway-copy{padding:20px 0}
.runway-copy h2{font-size:45px;line-height:1.1;letter-spacing:-2px;margin:18px 0}
.runway-copy h2 em{font-family:var(--serif);font-weight:400}
.runway-copy>p{font-size:13px;color:var(--muted);max-width:460px;margin-bottom:13px;line-height:1.9}
.runway-points{border-top:1px solid var(--line);margin:23px 0 25px;max-width:460px}
.runway-point{display:flex;gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px}
.runway-point span{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:16px}
.wardrobe-heading{max-width:485px}
.wardrobe-heading p{color:var(--muted);font-size:13px;line-height:1.85;margin-top:14px}
.wardrobe-tool{border:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.65fr;background:#efeee6}
.tool-controls{padding:33px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:start}
.tool-controls h3{font-size:23px;letter-spacing:-.7px;line-height:1.3;margin:10px 0 12px}
.tool-controls>p{font-size:12px;color:var(--muted);margin-bottom:21px}
.occasion-options{display:flex;flex-direction:column;gap:9px;width:100%;border:0;padding:0;margin:0}
.occasion-options legend{font-size:10px;font-weight:600;margin-bottom:10px}
.occasion-option{position:relative;display:flex;align-items:center;gap:10px;font-size:12px;padding:10px 13px;border:1px solid var(--line);cursor:pointer;transition:background .2s}
.occasion-option:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.occasion-option input{accent-color:#bbcf67;width:13px;height:13px;margin:0}
.occasion-option .option-arrow{margin-left:auto}
.tool-note{font-size:10px!important;margin:22px 0 0!important}
.outfit-result{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.outfit-result-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;gap:15px}
.outfit-result-top h3{font-family:var(--serif);font-size:25px;font-style:italic}
.outfit-count{font-size:9px;letter-spacing:1px}
.outfit-pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.outfit-piece{background:var(--paper);padding:12px 12px 18px;border:1px solid #e3e2d8}
.piece-number{font-size:9px;color:var(--muted)}
.garment{height:113px;width:100%;display:flex;align-items:center;justify-content:center}
.garment svg{height:96px;width:100px;filter:drop-shadow(3px 6px 2px #0000000a)}
.outfit-piece h4{font-size:11px;font-weight:600;margin:7px 0 2px}
.outfit-piece p{font-size:10px;color:var(--muted)}
.styling-tip{font-size:11px;color:var(--muted);margin-top:20px;line-height:1.8}
.styling-tip strong{color:var(--ink)}
.beauty-band{background:#e9e5ed;border-block:1px solid #d7d2dc}
.beauty{display:grid;grid-template-columns:1fr .85fr 1fr;gap:42px;padding-block:47px;align-items:center}
.beauty h2{font-size:41px;line-height:1.1;letter-spacing:-1.8px;margin:18px 0}
.beauty h2 em{font-family:var(--serif);font-weight:400}
.beauty-copy>p{font-size:12px;line-height:1.9;color:#66616a;margin-bottom:22px}
.beauty-image{aspect-ratio:.85;position:relative;background:#bbb3ac;overflow:hidden}
.beauty-image img{height:100%;filter:saturate(.55)}
.beauty-image .pill{position:absolute;left:14px;top:14px;background:var(--paper)}
.beauty-tips .eyebrow{margin-bottom:11px}
.beauty-tip{padding:17px 0;border-bottom:1px solid #cbc5d0;display:flex;align-items:start;gap:14px}
.beauty-tip>span{font-family:var(--serif);font-style:italic;font-size:22px;color:#817788}
.beauty-tip h3{font-size:15px;font-weight:600;letter-spacing:-.3px;margin-bottom:5px}
.beauty-tip p{font-size:11px;line-height:1.8;color:#68616d}
.beauty-tips .small-print{font-size:9px;color:#78717c;margin-top:17px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.about h2{font-size:37px;line-height:1.17;letter-spacing:-1.4px;margin:15px 0 19px}
.about h2 em{font-family:var(--serif);font-weight:400}
.about-copy>p{font-size:13px;color:var(--muted);line-height:1.9;margin-bottom:12px}
.signature{display:flex;align-items:center;gap:12px;margin-top:24px}
.signature img{width:40px;height:40px;border-radius:50%;filter:grayscale(1)}
.signature p{font-size:11px;line-height:1.6}
.signature span{color:var(--muted);font-size:10px}
.faq{padding-top:5px}
.faq>.eyebrow{margin-bottom:19px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:20px;font-weight:400}
details[open] summary:after{content:"−"}
details>p{font-size:12px;color:var(--muted);padding:0 24px 20px 0;line-height:1.9}
.newsletter{background:var(--green);padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:60px}
.newsletter h2{font-size:39px;line-height:1.13;letter-spacing:-1.5px;margin:12px 0}
.newsletter h2 em{font-family:var(--serif);font-weight:400}
.newsletter-copy>p{max-width:380px;font-size:12px;line-height:1.8}
.newsletter label{display:block;font-size:10px;font-weight:600;margin-bottom:8px}
.email-row{display:flex;border-bottom:1px solid var(--ink);padding-bottom:9px;gap:8px}
.email-row input{width:100%;min-width:0;border:0;background:transparent;font-size:13px;padding:10px 0;border-radius:0}
.email-row input::placeholder{color:#626d42}
.email-row button{border:0;background:var(--ink);color:var(--paper);padding:11px 17px;white-space:nowrap;font-size:11px}
.email-row button:hover{background:#454d33}
.form-note{font-size:9px;line-height:1.8;margin-top:13px;color:#57613c}
.form-note a{text-decoration:underline}
.form-message{font-size:12px;margin-top:12px;font-weight:500}
footer{background:var(--ink);color:var(--paper);padding:45px 0 20px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:35px;padding-bottom:38px}
.footer-brand{font-family:'Manrope',sans-serif;font-size:24px;letter-spacing:-1.2px;font-weight:600}
.footer-brand span{font-family:var(--serif);font-style:italic;font-weight:400}
.footer-intro p{font-size:11px;color:#b8bdac;max-width:220px;margin:12px 0 18px;line-height:1.8}
.footer-intro .eyebrow{color:#dcec89;font-size:9px}
.footer-column h3{font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin:6px 0 17px;color:#b8bdac}
.footer-column a{display:block;font-size:11px;margin-bottom:8px;width:fit-content}
.footer-column a:hover{text-decoration:underline}
.footer-column p{font-size:10px;color:#b8bdac;margin-top:12px}
.footer-bottom{border-top:1px solid #4a4e41;padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#b8bdac}
.footer-legal{display:flex;gap:20px}
.footer-legal button{padding:0;border:0;background:none;color:inherit;font-size:9px}
.footer-legal button:hover{text-decoration:underline}
dialog{border:1px solid var(--line);padding:0;max-width:700px;width:calc(100% - 32px);max-height:85dvh;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#171b16a8;backdrop-filter:blur(4px)}
.dialog-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 25px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1}
.dialog-close{border:1px solid var(--line);background:transparent;width:32px;height:32px;font-size:21px;line-height:1}
.dialog-content{padding:30px}
.dialog-content h2{font-size:35px;line-height:1.15;letter-spacing:-1.3px;margin-bottom:22px}
.dialog-content h3{font-size:19px;margin:24px 0 8px}
.dialog-content p{font-size:14px;line-height:1.9;margin-bottom:15px;color:#606457}
.dialog-content img{max-height:330px;margin:22px 0}
.dialog-content ul{font-size:13px;color:var(--muted);padding-left:20px;line-height:1.9}
.dialog-content .eyebrow{font-size:10px;color:var(--muted);margin-bottom:14px}
.dialog-content .button{margin-top:12px}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:100;background:var(--ink);color:white;padding:10px 20px}
.skip-link:focus{transform:translateY(0)}
@media(min-width:1500px){.hero-visual{min-height:545px}.hero h1{font-size:78px}}
@media(max-width:1100px){
.wrap{width:calc(100% - 56px)}.hero{gap:30px}.hero h1{font-size:58px}.hero-visual{min-height:475px}.nav-links{gap:24px}
.ticker-item{gap:12px;font-size:10px}.ticker-item:last-child{display:none}.runway{gap:45px}.beauty{gap:25px}.wardrobe-tool{grid-template-columns:.9fr 1.6fr}.tool-controls{padding:25px}.outfit-result{padding:25px 20px}.about{gap:50px}.newsletter{gap:35px}
}
@media(max-width:800px){
.hero{grid-template-columns:1fr 1fr;gap:25px}.hero h1{font-size:45px;letter-spacing:-2.3px}.hero h1 em{letter-spacing:-2px}.hero-deck{font-size:12px}.hero-visual{min-height:425px}.hero-copy{padding-top:12px}.hero-sticker{width:75px;height:75px;font-size:9px}.photo-caption p{font-size:23px}.hero-bottom{padding-top:25px}.issue-label{gap:8px;flex-wrap:wrap}.issue-label .eyebrow{font-size:9px}.nav-links{gap:20px}.nav-links a{font-size:11px}
.story-grid{gap:18px}.story-card h3{font-size:20px}.story-card p{font-size:11px}.story-meta{font-size:8px;gap:8px;flex-wrap:wrap}.runway-copy h2{font-size:35px}.runway{gap:35px}.runway-note{width:130px;padding:15px;right:-10px}.runway-note p{font-size:22px}
.wardrobe-tool{grid-template-columns:1fr}.tool-controls{border-right:0;border-bottom:1px solid var(--line)}.occasion-options{flex-direction:row;flex-wrap:wrap}.occasion-option{flex:1;min-width:150px}.tool-controls>p{margin-bottom:15px}.tool-note{margin-top:15px!important}.outfit-result{padding:25px}.garment{height:130px}.garment svg{height:110px;width:115px}.beauty{grid-template-columns:1fr 1fr}.beauty-tips{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.beauty-tips>.eyebrow,.beauty-tips>.small-print{grid-column:1/-1}.beauty-tips>.eyebrow{margin-bottom:-12px}.beauty-tips>.small-print{margin-top:-5px}.beauty-tip{border-top:1px solid #cbc5d0;border-bottom:0}
.about{gap:35px}.about h2{font-size:31px}.newsletter{padding:30px;gap:30px}.newsletter h2{font-size:31px}.footer-top{grid-template-columns:1.4fr 1fr 1fr}.footer-column:last-child{grid-column:1/-1;border-top:1px solid #4a4e41;padding-top:20px;display:flex;align-items:baseline;gap:25px;flex-wrap:wrap}.footer-column:last-child p{margin:0}
}
@media(max-width:600px){
html{scroll-padding-top:75px}.wrap{width:calc(100% - 36px)}.topline{font-size:8px;letter-spacing:.8px}.topline span:last-child{display:none}.topline .wrap{justify-content:center}.masthead{padding:15px 0}.logo{width:27px;height:27px}.identity{gap:8px}.identity .eyebrow{font-size:7px}.masthead-tag{font-size:12px}.wordmark{font-size:10.6vw;letter-spacing:-.065em;margin-top:12px}.nav-content{min-height:52px}.menu-toggle{display:block;font-size:12px}.nav-subscribe{font-size:10px;gap:15px}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:20px;border-bottom:1px solid var(--line);box-shadow:0 8px 12px #0000000a;grid-template-columns:repeat(2,1fr);gap:20px}.nav-links.is-open{display:grid}.nav-links a{font-size:13px;padding:5px}
.hero{grid-template-columns:1fr;padding-top:22px;gap:26px;padding-bottom:29px}.hero-copy{padding-top:0}.issue-label{margin-bottom:17px}.hero h1{font-size:clamp(49px,12vw,68px);letter-spacing:-3px;max-width:480px}.hero h1 em{letter-spacing:-2.5px}.hero-deck{font-size:13px;max-width:360px;margin-top:19px}.hero .button{margin-top:20px}.hero-bottom{padding-top:22px}.hero-visual{min-height:440px}.hero-sticker{width:85px;height:85px;font-size:10px}.photo-caption p{font-size:28px}
.ticker .wrap{gap:20px;padding-block:12px}.ticker-label{font-size:9px}.ticker-item{font-size:10px}.ticker-item:nth-last-child(2){display:none}.spark{font-size:17px}
.section{padding-block:40px}.section-heading{gap:15px;margin-bottom:23px;align-items:start}.section-heading h2{font-size:31px;letter-spacing:-1px}.section-heading>.text-link{margin-top:26px;font-size:10px;gap:12px}.eyebrow{font-size:9px}.story-grid{grid-template-columns:1fr;gap:30px}.story-image{aspect-ratio:1.3}.story-card h3{font-size:25px}.story-card p{font-size:13px}.story-meta{font-size:9px;margin-top:14px}.story-card .text-link{margin-top:13px}.runway{grid-template-columns:1fr;padding-block:30px;gap:25px}.runway-visual{min-height:390px;margin-right:10px}.runway-note{width:150px;right:-10px;bottom:23px}.runway-copy{padding:0}.runway-copy h2{font-size:41px}.runway-copy>p{max-width:none}
.wardrobe .section-heading{display:block}.wardrobe-heading p{font-size:12px}.tool-controls{padding:22px}.occasion-options{gap:7px}.occasion-option{min-width:0;flex:1;flex-direction:column;padding:11px 7px;font-size:10px;text-align:center}.occasion-option .option-arrow{display:none}.occasion-option input{margin-bottom:2px}.outfit-result{padding:20px 15px}.outfit-result-top h3{font-size:22px}.outfit-count{font-size:8px}.outfit-pieces{gap:7px}.outfit-piece{padding:8px 8px 13px}.garment{height:100px}.garment svg{height:86px;width:80px}.outfit-piece h4{font-size:10px}.outfit-piece p{font-size:9px}.styling-tip{font-size:11px}
.beauty{grid-template-columns:1fr;gap:25px;padding-block:35px}.beauty h2{font-size:42px}.beauty-copy>p{font-size:13px}.beauty-image{aspect-ratio:1.05}.beauty-tips{grid-template-columns:1fr;gap:0}.beauty-tips>.eyebrow{margin-bottom:10px}.beauty-tip{border-top:0;border-bottom:1px solid #cbc5d0;padding:15px 0}.beauty-tip p{font-size:12px}.beauty-tip h3{font-size:16px}.beauty-tips>.small-print{margin-top:15px}
.about{grid-template-columns:1fr;gap:35px}.about h2{font-size:36px}.newsletter{grid-template-columns:1fr;padding:27px 23px;gap:25px;margin-bottom:38px}.newsletter h2{font-size:36px}.newsletter-copy>p{font-size:12px}.email-row button{padding:11px 12px}.footer-top{grid-template-columns:1fr 1fr;gap:25px}.footer-intro{grid-column:1/-1}.footer-intro p{max-width:280px}.footer-column:last-child{display:block}.footer-column:last-child p{margin-top:12px}.footer-bottom{flex-direction:column;gap:12px}.dialog-content{padding:23px}.dialog-content h2{font-size:29px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header>
<div class="topline">
<div class="wrap">
<span>Independent minds. Individual style.</span>
<span><i class="dot" aria-hidden="true"></i> The everyday issue · No. 06 / 2026</span>
</div>
</div>
<div class="masthead wrap">
<div class="masthead-top">
<a class="identity" href="#" aria-label="Forme and Field home">
<img class="logo" src="https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora" width="34" height="34" alt="F/F logo">
<span class="eyebrow">An independent<br>style journal</span>
</a>
<p class="masthead-tag">Style with a point of view.</p>
</div>
<a href="#" class="wordmark" aria-label="Forme and Field">FORME <span>&</span> FIELD</a>
</div>
</header>
<div class="nav-shell">
<nav class="wrap nav-content" aria-label="Primary navigation">
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="nav-links">☰ Explore</button>
<div class="nav-links" id="nav-links">
<a href="#news">News</a>
<a href="#style">Style</a>
<a href="#runway">Runway</a>
<a href="#beauty">Beauty</a>
<a href="#wardrobe">Wardrobe</a>
<a href="#about">About</a>
</div>
<a href="#subscribe" class="nav-subscribe">The Sunday Edit <span aria-hidden="true">↗</span></a>
</nav>
</div>
<main id="main">
<section class="hero wrap" id="style" aria-labelledby="hero-title">
<div class="hero-copy">
<div class="issue-label">
<span class="pill">The new perspective</span>
<span class="eyebrow">Style, on your terms</span>
</div>
<h1 id="hero-title">A little less<br>trend. A lot<br>more <em>you.</em></h1>
<p class="hero-deck">Good style isn’t about keeping up. It’s about finding your own rhythm. Discover considered fashion, beauty that feels good, and ideas worth making your own.</p>
<button class="button" type="button" data-article="perspective">Explore the new edit <span class="arrow" aria-hidden="true">↗</span></button>
<div class="hero-bottom">
<div class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/60?u=forme-editor-1" width="30" height="30" alt="">
<img src="https://i.pravatar.cc/60?u=forme-editor-2" width="30" height="30" alt="">
<img src="https://i.pravatar.cc/60?u=forme-editor-3" width="30" height="30" alt="">
</div>
<p><strong>Different voices. A shared curiosity.</strong><br>Meet your new favourite corner of the internet.</p>
</div>
</div>
<div class="hero-visual">
<img src="https://picsum.photos/id/64/900/1050" width="900" height="1050" fetchpriority="high" alt="Black-and-white outdoor portrait with a relaxed, individual spirit">
<span class="image-index">F/F — THE EVERYDAY ISSUE</span>
<div class="hero-sticker">Wear what<br>feels like<br><em>you.</em></div>
<div class="photo-caption">
<div><span class="eyebrow">The cover story</span><p>The art of being yourself.</p></div>
<button class="circle-link" type="button" data-article="perspective" aria-label="Read The art of being yourself">↗</button>
</div>
</div>
</section>
<div class="ticker" aria-label="On our radar">
<div class="wrap">
<span class="ticker-label">On our radar ↗</span>
<span class="ticker-item"><span class="spark" aria-hidden="true">✳</span> A softer kind of tailoring</span>
<span class="ticker-item"><span class="spark" aria-hidden="true">✳</span> The return of the everyday flat</span>
<span class="ticker-item"><span class="spark" aria-hidden="true">✳</span> Skin first, always</span>
</div>
</div>
<section class="section wrap" id="news" aria-labelledby="news-title">
<div class="section-heading">
<div><p class="eyebrow">Fresh perspectives, daily</p><h2 id="news-title">The latest <em>edit.</em></h2></div>
<button class="text-link" data-article="index" type="button">All stories <span aria-hidden="true">↗</span></button>
</div>
<div class="story-grid">
<article class="story-card">
<div class="story-image">
<img src="https://picsum.photos/id/1005/650/550" width="650" height="550" loading="lazy" alt="Outdoor portrait in relaxed everyday layers">
<span class="category-tag">Style notes</span>
</div>
<div class="story-meta"><span>By Alex Morgan</span><span>5 min read</span></div>
<h3>The quiet confidence of getting dressed simply.</h3>
<p>Easy layers, good proportions, and one unexpected detail. Why the most interesting outfit in the room is often the one that tries a little less.</p>
<button class="text-link" type="button" data-article="simple">Read the story <span aria-hidden="true">↗</span></button>
</article>
<article class="story-card">
<div class="story-image">
<img src="https://picsum.photos/id/445/650/550" width="650" height="550" loading="lazy" alt="A quiet travel scene, inspiration for an unhurried weekend away">
<span class="category-tag">The style guide</span>
</div>
<div class="story-meta"><span>By Camille Reed</span><span>6 min read</span></div>
<h3>A weekend away. A carry-on that does it all.</h3>
<p>Less luggage, more possibility. Build a small but hardworking travel wardrobe around breathable fabrics, repeatable layers, and clever accessorizing.</p>
<button class="text-link" type="button" data-article="travel">Pack with us <span aria-hidden="true">↗</span></button>
</article>
<article class="story-card">
<div class="story-image">
<img src="https://picsum.photos/id/1027/650/550" width="650" height="550" loading="lazy" alt="Natural-light portrait highlighting a fresh, understated beauty look">
<span class="category-tag">Beauty, considered</span>
</div>
<div class="story-meta"><span>By Nina Park</span><span>4 min read</span></div>
<h3>Your skin doesn’t need another ten-step routine.</h3>
<p>A gentler approach to the bathroom shelf. Our beauty desk makes the case for a consistent foundation, fewer actives, and a little patience.</p>
<button class="text-link" type="button" data-article="skin">Find your essentials <span aria-hidden="true">↗</span></button>
</article>
</div>
</section>
<section class="runway wrap" id="runway" aria-labelledby="runway-title">
<div class="runway-visual">
<img src="https://picsum.photos/id/1011/750/950" width="750" height="950" loading="lazy" alt="Monochrome location portrait, inspiration for our off-duty lookbook">
<span class="vertical-label">THE F/F VISUAL NOTEBOOK · VOL. 06</span>
<div class="runway-note"><span>A note from the desk</span><p>Take the idea.<br>Make it yours.</p></div>
</div>
<div class="runway-copy">
<p class="eyebrow">Runway reports / Fashion week</p>
<h2 id="runway-title">From the runway.<br>For <em>real life.</em></h2>
<p>The best thing to bring home from fashion week isn’t a shopping list. It’s a fresh way of seeing the clothes you already own. This season, we’re looking at movement, texture, and the freedom of a less-defined silhouette.</p>
<p>Our ready-to-wear notebook translates big ideas into small, wearable shifts: a longer hem, a softer shoulder, a beautiful clash of textures. No front-row invitation required.</p>
<div class="runway-points">
<div class="runway-point"><span>01</span> Relaxed tailoring, with room to move</div>
<div class="runway-point"><span>02</span> Tonal dressing that’s anything but flat</div>
<div class="runway-point"><span>03</span> One well-chosen, characterful accessory</div>
</div>
<button type="button" class="button light" data-article="lookbook">View lookbook <span class="arrow" aria-hidden="true">↗</span></button>
</div>
</section>
<section class="section wardrobe wrap" id="wardrobe" aria-labelledby="wardrobe-title">
<div class="section-heading">
<div class="wardrobe-heading">
<p class="eyebrow">Less wardrobe. More possibilities.</p>
<h2 id="wardrobe-title">Make it <em>work for you.</em></h2>
<p>A useful wardrobe is built on outfit formulas, not endless new purchases. Start with your plans, explore our three-piece combinations, then recreate the feeling with what you own.</p>
</div>
<span class="pill">The outfit formula</span>
</div>
<div class="wardrobe-tool">
<div class="tool-controls">
<p class="eyebrow">A little inspiration, on demand</p>
<h3>What’s on your agenda?</h3>
<p>Pick a moment. We’ll put the proportions, palette, and finishing touch together.</p>
<fieldset class="occasion-options">
<legend>Choose your occasion</legend>
<label class="occasion-option"><input type="radio" name="occasion" value="everyday" checked><span>An everyday kind of day</span><span class="option-arrow" aria-hidden="true">↗</span></label>
<label class="occasion-option"><input type="radio" name="occasion" value="work"><span>A day at the office</span><span class="option-arrow" aria-hidden="true">↗</span></label>
<label class="occasion-option"><input type="radio" name="occasion" value="evening"><span>Somewhere after dark</span><span class="option-arrow" aria-hidden="true">↗</span></label>
</fieldset>
<p class="tool-note">No rules. No shopping basket. Just a starting point.</p>
</div>
<div class="outfit-result" id="outfit-result" aria-live="polite" aria-atomic="true">
<div class="outfit-result-top"><h3 id="outfit-title">Easy does it.</h3><span class="outfit-count">3 PIECES · ENDLESS YOU</span></div>
<div class="outfit-pieces" id="outfit-pieces">
<div class="outfit-piece"><span class="piece-number">01 / THE TOP</span><div class="garment" aria-hidden="true"><svg viewBox="0 0 120 120"><path d="M39 15 23 22 7 45 25 57 34 42 31 105 89 105 86 42 95 57 113 45 97 22 81 15 72 23 48 23Z" fill="#e4decf" stroke="#898578" stroke-width="1.3"/><path d="m39 15 9 8 12 11 12-11 9-8M60 34v71M34 42l2-13M86 42l-2-13" fill="none" stroke="#898578"/><path d="m48 23-5 15 17-4 17 4-5-15" fill="none" stroke="#898578"/><path d="M65 48h13v15H65" fill="none" stroke="#898578"/></svg></div><h4>The relaxed shirt</h4><p>Soft cotton · Ecru</p></div>
<div class="outfit-piece"><span class="piece-number">02 / THE BASE</span><div class="garment" aria-hidden="true"><svg viewBox="0 0 120 120"><path d="M33 12h54l8 96H65l-5-68-5 68H25Z" fill="#8794a0" stroke="#525f6d" stroke-width="1.3"/><path d="M33 20h54M60 20v20M36 21q0 17-5 18M84 21q0 17 5 18M29 101h26M65 101h29" fill="none" stroke="#525f6d"/></svg></div><h4>The straight-leg jean</h4><p>Classic denim · Mid blue</p></div>
<div class="outfit-piece"><span class="piece-number">03 / THE FINISH</span><div class="garment" aria-hidden="true"><svg viewBox="0 0 120 120"><path d="m20 55 19-17 21 20 29 10q19 3 20 16H12q-2-14 8-29Z" fill="#e8e4db" stroke="#8d897f" stroke-width="1.4"/><path d="M12 84h97v8H12z" fill="#d0c7b4" stroke="#8d897f"/><path d="m46 49-11 11m19-4-11 10m20-4-11 9m20-5-11 9" stroke="#8d897f" stroke-width="2"/><path d="m21 56 14 13-9 15" fill="none" stroke="#8d897f"/></svg></div><h4>The everyday trainer</h4><p>Low profile · Chalk</p></div>
</div>
<p class="styling-tip" id="styling-tip"><strong>The styling note:</strong> Roll the sleeves, leave the shirt loosely half-tucked, and let the denim skim your shoe. Add a favourite watch or a simple silver hoop.</p>
</div>
</div>
</section>
<section class="beauty-band" id="beauty" aria-labelledby="beauty-title">
<div class="beauty wrap">
<div class="beauty-copy">
<p class="eyebrow">Beauty / A softer approach</p>
<h2 id="beauty-title">Good to your skin.<br><em>Better for you.</em></h2>
<p>Beauty should feel like a small act of care, not another thing to get right. We look beyond the hype to bring you practical routines, thoughtful ingredients, and advice with a little breathing room.</p>
<button class="button light" type="button" data-article="skin">Get beauty tips <span class="arrow" aria-hidden="true">↗</span></button>
</div>
<div class="beauty-image">
<img src="https://picsum.photos/id/1027/600/750" width="600" height="750" loading="lazy" alt="A relaxed portrait in soft daylight">
<span class="pill">Less, but better</span>
</div>
<div class="beauty-tips">
<p class="eyebrow">The back-to-basics list</p>
<div class="beauty-tip"><span>01</span><div><h3>Start gentle.</h3><p>A non-stripping cleanser sets the tone. Your skin should feel comfortable after washing, not tight or squeaky.</p></div></div>
<div class="beauty-tip"><span>02</span><div><h3>Support your barrier.</h3><p>A straightforward moisturiser can do plenty. Look for a texture you enjoy and ingredients your skin already tolerates.</p></div></div>
<div class="beauty-tip"><span>03</span><div><h3>Make SPF a habit.</h3><p>Choose broad-spectrum SPF 30 or higher. Apply as directed and reapply outdoors, especially after swimming or sweating.</p></div></div>
<p class="small-print">General beauty education, not personalised medical advice.</p>
</div>
</div>
</section>
<section class="section about wrap" id="about" aria-labelledby="about-title">
<div class="about-copy">
<p class="eyebrow">A journal, not a rulebook</p>
<h2 id="about-title">Fashion moves fast.<br>We prefer to <em>look closer.</em></h2>
<p>Forme & Field is an independent editorial space for people who love style, but don’t need to be told who to be. We’re interested in the stories behind the clothes, the pleasure of getting dressed, and the pieces that stay with us.</p>
<p>Our small team brings different tastes and one shared belief: the most compelling point of view is your own. Expect useful guides, honest beauty conversations, and inspiration that leaves room for real life.</p>
<div class="signature">
<img src="https://i.pravatar.cc/80?u=forme-editor-1" width="40" height="40" loading="lazy" alt="Portrait placeholder for Camille Reed">
<p>Camille Reed<br><span>Founder & Editorial Director</span></p>
</div>
</div>
<div class="faq">
<p class="eyebrow">A few things worth knowing</p>
<details open>
<summary>How do you choose what to feature?</summary>
<p>We start with a useful idea, not a product launch. Our editors look at wearability, versatility, construction, and the story behind a piece. A familiar staple can be just as interesting as a new designer.</p>
</details>
<details>
<summary>Do I need to buy new to try a look?</summary>
<p>Not at all. Our outfit formulas focus on shape, colour, and proportion. Begin with your own wardrobe, then consider borrowing, repairing, altering, or buying secondhand before adding something new.</p>
</details>
<details>
<summary>What’s inside The Sunday Edit?</summary>
<p>A thoughtful reading list, one outfit idea to make your own, a useful beauty note, and something our editors can’t stop talking about. Designed for a slow coffee, rather than an overflowing inbox.</p>
</details>
<details>
<summary>Can I pitch a story or work with you?</summary>
<p>We welcome original perspectives from writers, photographers, stylists, and independent makers. Send a short introduction, a focused idea, and links to relevant work to <a href="mailto:editorial@formeandfield.example"><u>editorial@formeandfield.example</u></a>. Paid partnerships would always be clearly labelled.</p>
</details>
</div>
</section>
<section class="newsletter wrap" id="subscribe" aria-labelledby="newsletter-title">
<div class="newsletter-copy">
<p class="eyebrow">A good read. A fresh perspective.</p>
<h2 id="newsletter-title">Your Sunday,<br><em>a little more inspired.</em></h2>
<p>The stories worth your time, the looks worth a second glance. A considered edit of style and beauty, made for your inbox.</p>
</div>
<form id="newsletter-form">
<label for="email">Your email address</label>
<div class="email-row">
<input type="email" id="email" name="email" placeholder="you@somewhere.com" autocomplete="email" required maxlength="254" aria-describedby="newsletter-note form-message">
<button type="submit">Subscribe ↗</button>
</div>
<p class="form-note" id="newsletter-note">A little inspiration. Never noise. Read our <a href="#" data-article="privacy">privacy policy</a>.<br>Preview edition: your sign-up is saved on this device only; no emails are sent.</p>
<p class="form-message" id="form-message" role="status"></p>
</form>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-top">
<div class="footer-intro">
<a href="#" class="footer-brand">FORME <span>&</span> FIELD</a>
<p>An independent journal of fashion, beauty, and the everyday art of being yourself.</p>
<span class="eyebrow">Style with a point of view.</span>
</div>
<div class="footer-column">
<h3>Explore</h3>
<a href="#news">The latest stories</a>
<a href="#runway">Runway reports</a>
<a href="#wardrobe">Wardrobe essentials</a>
<a href="#beauty">Beauty, considered</a>
</div>
<div class="footer-column">
<h3>Keep in touch</h3>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Explore Instagram, opens in a new tab">Instagram ↗</a>
<a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer" aria-label="Explore Pinterest, opens in a new tab">Pinterest ↗</a>
<a href="#subscribe">The Sunday Edit</a>
<a href="#about">About the journal</a>
</div>
<div class="footer-column">
<h3>Have something in mind?</h3>
<a href="mailto:hello@formeandfield.example">hello@formeandfield.example ↗</a>
<a href="tel:+442079460186">+44 (0)20 7946 0186</a>
<p>18 Willow Mews, London W1F 8QH<br>An independent spirit. A global outlook.</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="year">2026</span> Forme & Field. All rights reserved.</p>
<div class="footer-legal">
<button type="button" data-article="privacy">Privacy</button>
<button type="button" data-article="terms">Terms</button>
<a href="#main">Back to top ↑</a>
</div>
<p>Considered words. Lasting ideas.</p>
</div>
</div>
</footer>
<dialog id="story-dialog" aria-labelledby="dialog-title">
<div class="dialog-toolbar"><span class="eyebrow">The Forme & Field journal</span><button class="dialog-close" type="button" aria-label="Close story">×</button></div>
<div class="dialog-content" id="dialog-content"></div>
</dialog>
<script>
const menuButton = document.querySelector('.menu-toggle');
const navigation = document.getElementById('nav-links');
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', String(!expanded));
navigation.classList.toggle('is-open', !expanded);
});
navigation.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
menuButton.setAttribute('aria-expanded', 'false');
navigation.classList.remove('is-open');
}));
document.addEventListener('keydown', event => {
if (event.key === 'Escape' && navigation.classList.contains('is-open')) {
menuButton.setAttribute('aria-expanded', 'false');
navigation.classList.remove('is-open');
menuButton.focus();
}
});
const illustrations = {
shirt: '<path d="M39 15 23 22 7 45 25 57 34 42 31 105 89 105 86 42 95 57 113 45 97 22 81 15 72 23 48 23Z" fill="#e4decf" stroke="#898578" stroke-width="1.3"/><path d="m39 15 9 8 12 11 12-11 9-8M60 34v71M34 42l2-13M86 42l-2-13m-36-6-5 15 17-4 17 4-5-15M65 48h13v15H65" fill="none" stroke="#898578"/>',
jeans: '<path d="M33 12h54l8 96H65l-5-68-5 68H25Z" fill="#8794a0" stroke="#525f6d" stroke-width="1.3"/><path d="M33 20h54M60 20v20M36 21q0 17-5 18M84 21q0 17 5 18M29 101h26M65 101h29" fill="none" stroke="#525f6d"/>',
trainers: '<path d="m20 55 19-17 21 20 29 10q19 3 20 16H12q-2-14 8-29Z" fill="#e8e4db" stroke="#8d897f" stroke-width="1.4"/><path d="M12 84h97v8H12z" fill="#d0c7b4" stroke="#8d897f"/><path d="m46 49-11 11m19-4-11 10m20-4-11 9m20-5-11 9" stroke="#8d897f" stroke-width="2"/><path d="m21 56 14 13-9 15" fill="none" stroke="#8d897f"/>',
blazer: '<path d="m40 13-17 10-14 71 18 4 11-55-5 64h54l-5-64 11 55 18-4-14-71-17-10-20 9Z" fill="#b9b1a0" stroke="#777363" stroke-width="1.3"/><path d="m40 13 20 62 20-62M43 23l-7 15 13 9-3 8 14 20v32m17-84 7 15-13 9 3 8-14 20M38 80h15M68 80h15" fill="none" stroke="#777363"/><circle cx="64" cy="84" r="2" fill="#777363"/>',
trousers: '<path d="M33 12h54l10 96H65l-5-65-5 65H23Z" fill="#4c4d46" stroke="#30332d" stroke-width="1.3"/><path d="M33 21h54M60 21v22M43 22l-7 78M77 22l7 78" fill="none" stroke="#898a7e"/>',
loafers: '<path d="M18 55q18-17 38 0l11 15 27 3q16 3 17 16l-9 7H17q-12-5-9-17Z" fill="#6f4c39" stroke="#493729" stroke-width="1.5"/><path d="M10 90h96v8H14ZM30 58l35 11-6 13-39-10Z" fill="#815d46" stroke="#493729"/><path d="m34 66 17 5" stroke="#c2a781" stroke-width="3"/>',
knit: '<path d="m42 15-21 10-12 66 19 4 11-46-5 57h52l-5-57 11 46 19-4-12-66-21-10q-18 16-36 0Z" fill="#433f42" stroke="#29272a" stroke-width="1.3"/><path d="M43 18q17 14 34 0M36 97h48M12 84l17 4M91 88l17-4" fill="none" stroke="#827b7e"/>',
skirt: '<path d="M40 14h40l19 94H21Z" fill="#b5a3a4" stroke="#8c777b" stroke-width="1.3"/><path d="M39 22h42M45 24l-11 74M75 24l11 74M61 25l-1 78" fill="none" stroke="#d3c2bf"/>',
flats: '<path d="M21 30q13-14 23 0l4 66q-6 18-23 10-7-4-7-14Z" fill="#592f35" stroke="#3d2025"/><path d="M27 36q6-7 10 0l4 48q-5 10-15 2Z" fill="#bea392"/><path d="M76 22q13-14 23 0l4 66q-6 18-23 10-7-4-7-14Z" fill="#592f35" stroke="#3d2025"/><path d="M82 28q6-7 10 0l4 48q-5 10-15 2Z" fill="#bea392"/><path d="m23 84 20 2m35-10 20 2" stroke="#592f35" stroke-width="5"/>'
};
const outfits = {
everyday: {
title: 'Easy does it.',
pieces: [['THE TOP','shirt','The relaxed shirt','Soft cotton · Ecru'],['THE BASE','jeans','The straight-leg jean','Classic denim · Mid blue'],['THE FINISH','trainers','The everyday trainer','Low profile · Chalk']],
tip: 'Roll the sleeves, leave the shirt loosely half-tucked, and let the denim skim your shoe. Add a favourite watch or a simple silver hoop.'
},
work: {
title: 'A softer kind of sharp.',
pieces: [['THE LAYER','blazer','The easy blazer','Unstructured · Oat'],['THE BASE','trousers','The tailored trouser','Fluid weave · Charcoal'],['THE FINISH','loafers','The polished loafer','Supple leather · Cocoa']],
tip: 'Layer the blazer over a tee or shirt you already own. Keep the trouser hem just above the loafer and repeat the warm shoe colour in a belt or bag.'
},
evening: {
title: 'After-hours, effortlessly.',
pieces: [['THE TOP','knit','The fine-gauge knit','Soft drape · Ink'],['THE BASE','skirt','The slip skirt','Satin finish · Rose'],['THE FINISH','flats','The statement flat','Mary Jane · Oxblood']],
tip: 'Let the contrast do the work: a matte knit against a fluid, lustrous skirt. Add a small earring and tuck just the front of the knit to define the waist.'
}
};
document.querySelectorAll('input[name="occasion"]').forEach(input => {
input.addEventListener('change', () => {
const outfit = outfits[input.value];
document.getElementById('outfit-title').textContent = outfit.title;
document.getElementById('outfit-pieces').innerHTML = outfit.pieces.map((piece, i) =>
`<div class="outfit-piece"><span class="piece-number">0${i+1} / ${piece[0]}</span><div class="garment" aria-hidden="true"><svg viewBox="0 0 120 120">${illustrations[piece[1]]}</svg></div><h4>${piece[2]}</h4><p>${piece[3]}</p></div>`
).join('');
document.getElementById('styling-tip').innerHTML = '<strong>The styling note:</strong> ' + outfit.tip;
});
});
const articles = {
perspective: {
category: 'The cover story · The everyday issue',
title: 'The art of being yourself.',
body: `<p>There’s a particular ease to an outfit that feels like you. It might not be the newest thing in your wardrobe, or the one that attracts the most attention. More often, it’s the combination you reach for without a second thought: the worn-in shirt, the trousers that move properly, the earrings with a story.</p><h3>Begin with what you return to</h3><p>For one week, pay attention to the clothes you actually wear. Not the imagined version of your life, but the real one. Notice which fabrics feel good, which silhouettes make you stand a little taller, and which shoes let you forget about your feet.</p><p>Those observations are the beginning of a personal style vocabulary. An oversized shoulder might be your signature; a flash of red might feel more natural than an entirely new silhouette. You don’t need a label for it.</p><h3>Make room for one small experiment</h3><p>Individual style isn’t static. Try wearing a favourite shirt open over a simple vest. Pair the dress you save for dinner with everyday flats. Revisit a scarf as a belt. The point isn’t reinvention; it’s finding another possibility in something familiar.</p><p>Our new edit is built around that idea: fewer instructions, better questions, and a wardrobe that leaves you more time to be yourself.</p><button class="button" type="button" data-jump="wardrobe">Try an outfit formula <span aria-hidden="true">↗</span></button>`
},
simple: {
category: 'Style notes · Alex Morgan',
title: 'The quiet confidence of getting dressed simply.',
body: `<p>Simple dressing is often mistaken for playing it safe. In practice, it asks you to notice more: the break of a trouser, the weight of a cotton shirt, and the space between a sleeve and your wrist. When there are fewer elements, each one gets a little more attention.</p><h3>Think in proportions, not rules</h3><p>A roomy shirt can balance a narrow trouser, but a wide-on-wide silhouette can be just as compelling. The difference is usually a point of definition: a visible ankle, a gently tucked waist, or an open neckline. Try taking a quick mirror photograph to see the overall shape rather than concentrating on individual pieces.</p><h3>Let texture bring the interest</h3><p>Pair washed cotton with smooth denim, a brushed knit with crisp poplin, or linen with a polished shoe. A limited palette gives different surfaces room to speak. Ecru, tobacco, faded blue, and charcoal are useful starting points, not a required uniform.</p><h3>Choose one personal detail</h3><p>A hand-me-down watch, an unusual bag, a printed sock: accessorizing is most effective when it tells you something about the wearer. Start with one detail you genuinely enjoy. The aim is to feel finished, not decorated.</p><p>Before you leave, check comfort as carefully as appearance. Sit down, stretch, and walk around. An outfit that works in motion is always more convincing than one that only works in the mirror.</p>`
},
travel: {
category: 'The style guide · Camille Reed',
title: 'A weekend away. A carry-on that does it all.',
body: `<p>Packing gets easier when you stop imagining a different outfit for every hour. For a three-day trip, choose one base colour, a complementary neutral, and a single accent. Then make sure every top works with both of your bottoms.</p><h3>The small-but-useful packing list</h3><ul><li>One relaxed trouser and one jean, skirt, or second trouser.</li><li>Two everyday tops and a shirt that doubles as a light layer.</li><li>One knit for cooler mornings and overly enthusiastic air conditioning.</li><li>Comfortable walking shoes, plus a compact pair for dinner if needed.</li><li>A weather-appropriate outer layer, underwear, and sleepwear.</li><li>One crossbody bag, sunglasses, and a scarf you love.</li></ul><h3>Plan the repeat, not the exception</h3><p>Wear the bulkier items in transit. For a daytime look, pair the shirt and relaxed trouser with walking shoes. At dinner, switch to the finer top, add a personal accessory, and leave the rest alone. A fresh combination matters more than a completely fresh outfit.</p><p>Check the forecast and your actual plans before packing. A beach break, museum weekend, and hiking trip need different footwear and protection. If a piece only works in one unlikely scenario, it probably doesn’t deserve the space.</p><h3>Leave a little room</h3><p>Roll soft jersey pieces, fold structured layers, and pack shoes separately. A small laundry bag and a refillable toiletry kit are often more useful than a third “just in case” outfit.</p>`
},
skin: {
category: 'Beauty, considered · Nina Park',
title: 'A routine with room to breathe.',
body: `<p>A good skincare routine doesn’t have to fill a shelf. Consistency, comfort, and sun protection are useful foundations. If your skin is unsettled, adding more products can make it harder to understand what is helping and what is not.</p><h3>Morning: keep the foundation simple</h3><p>Cleanse gently if you need to, then apply a moisturiser suited to your skin. Finish with broad-spectrum SPF 30 or higher, following the label for application and reapplication. Outdoors, combine sunscreen with shade, protective clothing, and a hat. No sunscreen blocks all UV exposure.</p><h3>Evening: remove, replenish, rest</h3><p>Remove makeup and sunscreen without aggressive scrubbing. Follow with a gentle cleanser if needed, then moisturise. A formula with ingredients such as glycerin or ceramides can be useful, but the best option is one your skin tolerates and you can use consistently.</p><h3>Introduce changes one at a time</h3><p>Follow a new product’s patch-testing instructions and allow time to assess your response. Don’t layer several exfoliating acids or strong actives simply because they appear in different steps. Stop using a product if it causes irritation.</p><p>Persistent acne, rashes, pain, or sudden skin changes deserve individual advice from a qualified healthcare professional. This guide is general education, not diagnosis or treatment.</p>`
},
lookbook: {
category: 'The F/F lookbook · Three ideas to borrow',
title: 'From the runway. For real life.',
body: `<p>Our visual notebook takes three ready-to-wear ideas and turns them into outfits you can assemble without starting over. Treat the formulas as experiments in silhouette, not a list of pieces to buy.</p><h3>01 / The softer suit</h3><p>Choose an unstructured jacket and trousers with enough drape to move. Break up a matching set with a cotton tee or an open-neck shirt. A low-profile trainer makes the look more informal; a loafer brings a little polish.</p><h3>02 / One colour, several textures</h3><p>Build a look from close, rather than identical, shades. An ecru knit, cream denim, and an oat jacket can feel more dimensional than a perfect match. Mix matte, textured, and subtly polished surfaces so the outfit has depth.</p><h3>03 / An ordinary outfit, an extraordinary detail</h3><p>Begin with the familiar: a shirt, a straight trouser, and a comfortable shoe. Add one element with personality—a sculptural earring, a vintage silk scarf, or a bag in a surprising colour. Give it space by keeping the remaining accessories quiet.</p><p>The common thread is ease. Walk, sit, and move in each combination before deciding whether it works for you. Ready-to-wear should be ready for your actual day.</p><button class="button" type="button" data-jump="wardrobe">Build your own combination <span aria-hidden="true">↗</span></button>`
},
index: {
category: 'The reading room',
title: 'Good stories, all in one place.',
body: `<p>A considered collection of style guides, beauty notes, and ideas to revisit. Choose a story and settle in.</p><h3>Style & everyday dressing</h3><p><button class="text-link" type="button" data-article="perspective">The art of being yourself <span>↗</span></button></p><p><button class="text-link" type="button" data-article="simple">The quiet confidence of dressing simply <span>↗</span></button></p><p><button class="text-link" type="button" data-article="travel">The considered weekend packing list <span>↗</span></button></p><h3>Runway & beauty</h3><p><button class="text-link" type="button" data-article="lookbook">Three runway ideas for real life <span>↗</span></button></p><p><button class="text-link" type="button" data-article="skin">A beauty routine with room to breathe <span>↗</span></button></p>`
},
privacy: {
category: 'The small print · Updated 2026',
title: 'Your privacy, considered.',
body: `<p>This is a demonstration of the fictional Forme & Field journal. The newsletter form does not transmit your email address, enrol you in a mailing list, or send messages. Submitting it saves only a preview-sign-up flag in your browser’s local storage. Your email address is not stored.</p><h3>Storage on your device</h3><p>The preview flag remembers that you tried the form on this device. You can remove it with the button below or clear this site’s browser data. Outfit selections are temporary and are not stored.</p><p><button class="button light" type="button" id="clear-preview">Clear preview sign-up</button></p><p id="clear-status" role="status"></p><h3>Third-party resources</h3><p>Images are supplied by Picsum Photos, Placehold.co, and Pravatar. Fonts are supplied by Google Fonts. Loading these resources shares normal connection information, such as your IP address, with those providers under their own policies. This page does not include advertising or analytics scripts.</p><h3>Links and contact details</h3><p>Social links open the relevant platform’s homepage. All Forme & Field contact details are fictional demonstration details; the .example email addresses are not monitored.</p>`
},
terms: {
category: 'The small print · Updated 2026',
title: 'A few ground rules.',
body: `<p>Forme & Field is a fictional editorial website created as a design demonstration. Its team, address, and contact information are illustrative. Photography and avatars are placeholders and do not depict an actual editorial team, commissioned fashion campaign, or endorsed product.</p><h3>Editorial information</h3><p>Fashion content is general inspiration, not a statement of product availability or an instruction to purchase. Illustrations show outfit concepts rather than items for sale. Beauty content is educational and is not a substitute for advice from a qualified healthcare professional.</p><h3>Using this preview</h3><p>You can explore articles, change outfit formulas, and test the newsletter form. No purchase, paid subscription, or email delivery is offered. External websites operate independently and are subject to their own terms and privacy policies.</p><h3>Credits</h3><p>Placeholder photography: Picsum Photos. Placeholder portraits: Pravatar. Logo placeholder: Placehold.co. Typography: Manrope and DM Sans via Google Fonts.</p>`
}
};
const dialog = document.getElementById('story-dialog');
const dialogContent = document.getElementById('dialog-content');
let priorFocus;
let previousOverflow = '';
function showArticle(key) {
const article = articles[key];
if (!article) return;
const wasOpen = dialog.open;
if (!wasOpen) {
priorFocus = document.activeElement;
previousOverflow = document.body.style.overflow;
}
dialogContent.innerHTML = `<p class="eyebrow">${article.category}</p><h2 id="dialog-title" tabindex="-1">${article.title}</h2>${article.body}`;
if (!wasOpen) {
dialog.showModal();
document.body.style.overflow = 'hidden';
}
dialog.scrollTop = 0;
document.getElementById('dialog-title').focus({preventScroll:true});
}
document.addEventListener('click', event => {
const trigger = event.target.closest('[data-article]');
if (trigger) {
event.preventDefault();
showArticle(trigger.dataset.article);
}
const jump = event.target.closest('[data-jump]');
if (jump) {
const target = document.getElementById(jump.dataset.jump);
priorFocus = null;
dialog.close();
target.setAttribute('tabindex', '-1');
target.focus({preventScroll:true});
target.scrollIntoView({behavior:window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'});
}
if (event.target.closest('#clear-preview')) {
try {
localStorage.removeItem('ff-preview-signup');
document.getElementById('clear-status').textContent = 'Your preview sign-up has been cleared from this device.';
document.getElementById('form-message').textContent = '';
} catch {
document.getElementById('clear-status').textContent = 'Browser storage is unavailable. No preview sign-up can be accessed.';
}
}
});
document.querySelector('.dialog-close').addEventListener('click', () => dialog.close());
dialog.addEventListener('click', event => {
const rect = dialog.getBoundingClientRect();
if (event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) dialog.close();
});
dialog.addEventListener('close', () => {
document.body.style.overflow = previousOverflow;
if (priorFocus && document.contains(priorFocus)) priorFocus.focus({preventScroll:true});
});
const newsletterForm = document.getElementById('newsletter-form');
const formMessage = document.getElementById('form-message');
try {
if (localStorage.getItem('ff-preview-signup') === 'true') formMessage.textContent = 'Your preview sign-up is saved on this device. No emails are sent.';
} catch {}
newsletterForm.addEventListener('submit', event => {
event.preventDefault();
if (!newsletterForm.reportValidity()) return;
try {
localStorage.setItem('ff-preview-signup', 'true');
formMessage.textContent = 'Thank you! Your preview sign-up is saved on this device. No email has been sent.';
} catch {
formMessage.textContent = 'Thank you for trying the preview! Browser storage is unavailable, so nothing was saved or sent.';
}
newsletterForm.reset();
});
document.getElementById('year').textContent = new Date().getFullYear();
</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-12T09:56:54.053Z",
"url": "https://benchmark.aimac.invalid/3e26f66ff9f98252d434eadcfd46574a8634d9d01999320d7dbfff2bfb41c7c9.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-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-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-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": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": "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": []
},
{
"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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-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 class=\"identity\" href=\"#\" aria-label=\"Forme and Field home\">\n <img class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">\n <span class=\"eyebrow\">An independent<br>style journal</span>\n </a>",
"target": [
".identity"
]
}
]
},
{
"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 class=\"identity\" href=\"#\" aria-label=\"Forme and Field home\">\n <img class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">\n <span class=\"eyebrow\">An independent<br>style journal</span>\n </a>",
"target": [
".identity"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<p class=\"form-message\" id=\"form-message\" role=\"status\"></p>",
"target": [
"#form-message"
]
}
]
},
{
"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-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<i class=\"dot\" aria-hidden=\"true\"></i>",
"target": [
"i"
]
}
]
},
{
"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 class=\"identity\" href=\"#\" aria-label=\"Forme and Field home\">\n <img class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">\n <span class=\"eyebrow\">An independent<br>style journal</span>\n </a>",
"target": [
".identity"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<p class=\"form-message\" id=\"form-message\" role=\"status\"></p>",
"target": [
"#form-message"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<p class=\"form-message\" id=\"form-message\" role=\"status\"></p>",
"target": [
"#form-message"
]
}
]
},
{
"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 class=\"identity\" href=\"#\" aria-label=\"Forme and Field home\">\n <img class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">\n <span class=\"eyebrow\">An independent<br>style journal</span>\n </a>",
"target": [
".identity"
]
}
]
},
{
"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 class=\"identity\" href=\"#\" aria-label=\"Forme and Field home\">\n <img class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">\n <span class=\"eyebrow\">An independent<br>style journal</span>\n </a>",
"target": [
".identity"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@somewhere.com\" autocomplete=\"email\" required=\"\" maxlength=\"254\" aria-describedby=\"newsletter-note form-message\">",
"target": [
"#email"
]
}
]
},
{
"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 class=\"button\" type=\"button\" data-article=\"perspective\">Explore the new edit <span class=\"arrow\" aria-hidden=\"true\">\u2197</span></button>",
"target": [
".button[data-article=\"perspective\"][type=\"button\"]"
]
}
]
},
{
"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\">A little less<br>trend. A lot<br>more <em>you.</em></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"news-title\">The latest <em>edit.</em></h2>",
"target": [
"#news-title"
]
},
{
"html": "<h3>The quiet confidence of getting dressed simply.</h3>",
"target": [
"article:nth-child(1) > h3"
]
},
{
"html": "<h3>A weekend away. A carry-on that does it all.</h3>",
"target": [
"article:nth-child(2) > h3"
]
},
{
"html": "<h3>Your skin doesn\u2019t need another ten-step routine.</h3>",
"target": [
"article:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"runway-title\">From the runway.<br>For <em>real life.</em></h2>",
"target": [
"#runway-title"
]
},
{
"html": "<h2 id=\"wardrobe-title\">Make it <em>work for you.</em></h2>",
"target": [
"#wardrobe-title"
]
},
{
"html": "<h3>What\u2019s on your agenda?</h3>",
"target": [
".tool-controls > h3"
]
},
{
"html": "<h3 id=\"outfit-title\">Easy does it.</h3>",
"target": [
"#outfit-title"
]
},
{
"html": "<h4>The relaxed shirt</h4>",
"target": [
".outfit-piece:nth-child(1) > h4"
]
},
{
"html": "<h4>The straight-leg jean</h4>",
"target": [
".outfit-piece:nth-child(2) > h4"
]
},
{
"html": "<h4>The everyday trainer</h4>",
"target": [
".outfit-piece:nth-child(3) > h4"
]
},
{
"html": "<h2 id=\"beauty-title\">Good to your skin.<br><em>Better for you.</em></h2>",
"target": [
"#beauty-title"
]
},
{
"html": "<h3>Start gentle.</h3>",
"target": [
".beauty-tip:nth-child(2) > div > h3"
]
},
{
"html": "<h3>Support your barrier.</h3>",
"target": [
".beauty-tip:nth-child(3) > div > h3"
]
},
{
"html": "<h3>Make SPF a habit.</h3>",
"target": [
".beauty-tip:nth-child(4) > div > h3"
]
},
{
"html": "<h2 id=\"about-title\">Fashion moves fast.<br>We prefer to <em>look closer.</em></h2>",
"target": [
"#about-title"
]
},
{
"html": "<h2 id=\"newsletter-title\">Your Sunday,<br><em>a little more inspired.</em></h2>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Keep in touch</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Have something in mind?</h3>",
"target": [
".footer-column:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"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": "#22251f",
"bgColor": "#f5f3ed",
"contrastRatio": 13.99,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 13.99"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>Independent minds. Individual style.</span>",
"target": [
".topline > .wrap > span:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"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": "nav-links",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"nav-links\" id=\"nav-links\">\n <a href=\"#news\">News</a>\n <a href=\"#style\">Style</a>\n <a href=\"#runway\">Runway</a>\n <a href=\"#beauty\">Beauty</a>\n <a href=\"#wardrobe\">Wardrobe</a>\n <a href=\"#about\">About</a>\n </div>",
"target": [
"#nav-links"
]
}
]
},
{
"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": [
{
"html": "<label class=\"occasion-option\"><input type=\"radio\" name=\"occasion\" value=\"everyday\" checked=\"\"><span>An everyday kind of day</span><span class=\"option-arrow\" aria-hidden=\"true\">\u2197</span></label>",
"target": [
".occasion-option:nth-child(2)"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"radio\" name=\"occasion\" value=\"everyday\" checked=\"\">",
"target": [
"input[value=\"everyday\"]"
]
}
]
},
{
"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 class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">",
"target": [
".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": "implicit-label",
"data": {
"implicitLabel": "An everyday kind of day"
},
"relatedNodes": [
{
"html": "<label class=\"occasion-option\"><input type=\"radio\" name=\"occasion\" value=\"everyday\" checked=\"\"><span>An everyday kind of day</span><span class=\"option-arrow\" aria-hidden=\"true\">\u2197</span></label>",
"target": [
".occasion-option:nth-child(2)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"radio\" name=\"occasion\" value=\"everyday\" checked=\"\">",
"target": [
"input[value=\"everyday\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": null,
"relatedNodes": [
{
"html": "<p class=\"form-note\" id=\"newsletter-note\">A little inspiration. Never noise. Read our <a href=\"#\" data-article=\"privacy\">privacy policy</a>.<br>Preview edition: your sign-up is saved on this device only; no emails are sent.</p>",
"target": [
"#newsletter-note"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<p class=\"form-note\" id=\"newsletter-note\">A little inspiration. Never noise. Read our <a href=\"#\" data-article=\"privacy\">privacy policy</a>.<br>Preview edition: your sign-up is saved on this device only; no emails are sent.</p>",
"target": [
"#newsletter-note"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" data-article=\"privacy\">privacy policy</a>",
"target": [
"a[data-article=\"privacy\"][href=\"#\"]"
]
}
]
},
{
"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=\"#main\" class=\"skip-link\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
},
{
"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\">",
"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 class=\"logo\" src=\"https://placehold.co/68x68/22251f/f5f3ed?text=F%2FF&font=lora\" width=\"34\" height=\"34\" alt=\"F/F logo\">",
"target": [
".logo"
]
}
]
},
{
"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 do you choose what to feature?</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": 146.6,
"height": 44.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (146.6px by 44.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=\"#main\" class=\"skip-link\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
}
],
"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=\"ticker\" aria-label=\"On our radar\">",
"target": [
".ticker"
],
"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": {
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<div class=\"hero-visual\">",
"target": [
".hero-visual"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"image-index\">F/F \u2014 THE EVERYDAY ISSUE</span>",
"target": [
".image-index"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"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": "#6c7066",
"bgColor": "#efeee6",
"contrastRatio": 4.35,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"wardrobe-tool\">",
"target": [
".wardrobe-tool"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">A little inspiration, on demand</p>",
"target": [
".tool-controls > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6c7066",
"bgColor": "#efeee6",
"contrastRatio": 4.35,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"wardrobe-tool\">",
"target": [
".wardrobe-tool"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Pick a moment. We\u2019ll put the proportions, palette, and finishing touch together.</p>",
"target": [
".tool-controls > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6c7066",
"bgColor": "#efeee6",
"contrastRatio": 4.35,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"wardrobe-tool\">",
"target": [
".wardrobe-tool"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"tool-note\">No rules. No shopping basket. Just a starting point.</p>",
"target": [
".tool-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6c7066",
"bgColor": "#efeee6",
"contrastRatio": 4.35,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"wardrobe-tool\">",
"target": [
".wardrobe-tool"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"styling-tip\" id=\"styling-tip\"><strong>The styling note:</strong> Roll the sleeves, leave the shirt loosely half-tucked, and let the denim skim your shoe. Add a favourite watch or a simple silver hoop.</p>",
"target": [
"#styling-tip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #6c7066, background color: #efeee6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#817788",
"bgColor": "#e9e5ed",
"contrastRatio": 3.42,
"fontSize": "16.5pt (22px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"beauty-band\" id=\"beauty\" aria-labelledby=\"beauty-title\">",
"target": [
"#beauty"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>01</span>",
"target": [
".beauty-tip:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#817788",
"bgColor": "#e9e5ed",
"contrastRatio": 3.42,
"fontSize": "16.5pt (22px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"beauty-band\" id=\"beauty\" aria-labelledby=\"beauty-title\">",
"target": [
"#beauty"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>02</span>",
"target": [
".beauty-tip:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#817788",
"bgColor": "#e9e5ed",
"contrastRatio": 3.42,
"fontSize": "16.5pt (22px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"beauty-band\" id=\"beauty\" aria-labelledby=\"beauty-title\">",
"target": [
"#beauty"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>03</span>",
"target": [
".beauty-tip:nth-child(4) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.42 (foreground color: #817788, background color: #e9e5ed, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#78717c",
"bgColor": "#e9e5ed",
"contrastRatio": 3.79,
"fontSize": "6.8pt (9px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"beauty-band\" id=\"beauty\" aria-labelledby=\"beauty-title\">",
"target": [
"#beauty"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.79 (foreground color: #78717c, background color: #e9e5ed, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"small-print\">General beauty education, not personalised medical advice.</p>",
"target": [
".small-print"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.79 (foreground color: #78717c, background color: #e9e5ed, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4871
},
{
"y": 576,
"height": 4871
},
{
"y": 1152,
"height": 4871
},
{
"y": 1728,
"height": 4871
},
{
"y": 2304,
"height": 4871
},
{
"y": 2880,
"height": 4871
},
{
"y": 3456,
"height": 4871
},
{
"y": 4032,
"height": 4871
},
{
"y": 4151,
"height": 4871
}
],
"scans": 10,
"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: "News", "About", "Beauty".
- **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: "Runway Reports", "Fashion Week", "Wardrobe Essentials".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "lookbook", "ready-to-wear", "accessorizing".
- **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", "Get Beauty Tips", "View Lookbook".
- **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: "trend tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "beauty reviews", "must-haves", "celebrity looks".
- **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.