1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>Repeated Section Kickers Fixture</title>
6 <style>
7 body {
8 margin: 0;
9 font-family: Arial, sans-serif;
10 background: #f6f2ec;
11 color: #171411;
12 }
13 main {
14 display: grid;
15 grid-template-columns: 1fr 1fr;
16 gap: 32px;
17 padding: 32px;
18 }
19 .col {
20 min-width: 0;
21 border: 1px solid #c9bfb2;
22 padding: 24px;
23 }
24 .case {
25 min-height: 120px;
26 margin: 0 0 24px;
27 padding: 16px;
28 background: #fffaf3;
29 }
30 .kicker,
31 .pass-kicker {
32 display: block;
33 width: 240px;
34 min-height: 16px;
35 margin: 0 0 8px;
36 font-size: 12px;
37 line-height: 16px;
38 letter-spacing: 0.11em;
39 color: #5b5046;
40 }
41 .kicker {
42 text-transform: uppercase;
43 }
44 h1,
45 h2,
46 h3 {
47 margin: 0 0 12px;
48 font-size: 32px;
49 line-height: 38px;
50 font-weight: 700;
51 }
52 p,
53 label,
54 figcaption,
55 a,
56 li {
57 font-size: 16px;
58 line-height: 24px;
59 }
60 nav,
61 form,
62 figure,
63 ol {
64 margin: 0 0 24px;
65 padding: 16px;
66 border: 1px solid #d8cec0;
67 min-height: 80px;
68 }
69 .brand-system {
70 min-height: 120px;
71 }
72 </style>
73</head>
74<body>
75 <main>
76 <section class="col" aria-label="Should flag">
77 <h1>Should flag</h1>
78
79 <section class="case">
80 <span class="kicker">Invitation protocol</span>
81 <h2>"The Future Is Admitted"</h2>
82 <p>Repeated tracked labels carry the hierarchy instead of a stronger structure.</p>
83 </section>
84
85 <section class="case">
86 <p class="kicker">Preview sequence</p>
87 <h2>"A Private Rehearsal"</h2>
88 <p>The same scaffolding appears again before another section heading.</p>
89 </section>
90
91 <section class="case">
92 <div class="kicker">Access window</div>
93 <h2>"Reviewed, Not Sold"</h2>
94 <p>The pattern is now the page's default section grammar.</p>
95 </section>
96
97 <section class="case">
98 <small class="kicker">Material briefing</small>
99 <h2>"Touch the Future"</h2>
100 <p>Four repeated kickers should be enough to flag the page-level smell.</p>
101 </section>
102 </section>
103
104 <section class="col" aria-label="Should pass">
105 <h1>Should pass</h1>
106
107 <nav class="case" aria-label="Breadcrumb">
108 <span class="pass-kicker">Home / Journal</span>
109 <h2>"Breadcrumb Before Heading"</h2>
110 <a href="/">Home</a>
111 </nav>
112
113 <form class="case">
114 <label class="pass-kicker" for="guest">Guest name</label>
115 <input id="guest" name="guest" style="width: 220px; height: 40px;">
116 <h2>"Form Heading Is Separate"</h2>
117 </form>
118
119 <ol class="case">
120 <li>
121 <span class="pass-kicker">Step 01</span>
122 <h3>"Step Indicator"</h3>
123 <p>Step indicators in ordered flows should not count as section scaffolding.</p>
124 </li>
125 </ol>
126
127 <figure class="case">
128 <span class="pass-kicker">Plate study</span>
129 <figcaption>"Figure Caption Label"</figcaption>
130 </figure>
131
132 <section class="case">
133 <span class="pass-kicker">Lowercase label</span>
134 <h2>"Normal Case Kicker"</h2>
135 <p>Not uppercase, not the repeated AI section-label pattern.</p>
136 </section>
137
138 <section class="case brand-system" data-impeccable-allow-kickers>
139 <span class="pass-kicker">Archive code</span>
140 <h2>"Intentional Brand Label"</h2>
141 <p>Deliberate brand systems can opt out with an explicit marker.</p>
142 </section>
143 </section>
144 </main>
145</body>
146</html>