1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Border Anti-Patterns — Should Flag vs Should Pass</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 24px;
11 background: #f8fafc;
12 color: #111827;
13 font: 14px/1.5 system-ui, sans-serif;
14 }
15
16 h1 {
17 max-width: 1180px;
18 margin: 0 auto 8px;
19 font-size: 34px;
20 line-height: 1.05;
21 font-weight: 720;
22 }
23
24 .intro {
25 max-width: 1180px;
26 margin: 0 auto 24px;
27 color: #4b5563;
28 }
29
30 .grid {
31 display: grid;
32 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
33 gap: 32px;
34 max-width: 1180px;
35 margin: 0 auto;
36 }
37
38 .col h2 {
39 margin: 0 0 14px;
40 color: #475569;
41 font-size: 13px;
42 font-weight: 760;
43 letter-spacing: 0.08em;
44 text-transform: uppercase;
45 }
46
47 .case {
48 margin: 0 0 14px;
49 padding: 16px;
50 background: #fdfdfd;
51 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
52 }
53
54 .case h3 {
55 margin: 0 0 4px;
56 font-size: 15px;
57 line-height: 1.25;
58 }
59
60 .case p {
61 margin: 0;
62 color: #475569;
63 }
64
65 .flag-left {
66 border-left: 4px solid #2563eb;
67 border-radius: 10px;
68 }
69
70 .flag-right {
71 border-right: 5px solid #dc2626;
72 border-radius: 10px;
73 }
74
75 .flag-left-plain {
76 border-left: 4px solid #0f766e;
77 }
78
79 .flag-top {
80 border-top: 4px solid #7c3aed;
81 border-radius: 10px;
82 }
83
84 .flag-bottom {
85 border-bottom: 3px solid #ea580c;
86 border-radius: 10px;
87 }
88
89 .flag-dark {
90 background: #141820;
91 color: #f4f7fb;
92 border-left: 4px solid #38bdf8;
93 border-radius: 10px;
94 }
95
96 .flag-dark p {
97 color: #cbd5e1;
98 }
99
100 .pass-full-border {
101 border: 1px solid #cbd5e1;
102 border-radius: 10px;
103 }
104
105 .pass-neutral-side {
106 border-left: 4px solid #d1d5db;
107 border-radius: 10px;
108 }
109
110 .pass-thin-side {
111 border-left: 1px solid #2563eb;
112 border-radius: 10px;
113 }
114
115 .pass-square-top {
116 border-top: 4px solid #7c3aed;
117 border-radius: 0;
118 }
119
120 .pass-square-bottom {
121 border-bottom: 3px solid #ea580c;
122 border-radius: 0;
123 }
124
125 .pass-dark-uniform {
126 background: #161a22;
127 color: #f4f7fb;
128 border: 1px solid #334155;
129 border-radius: 10px;
130 }
131
132 .pass-dark-uniform p {
133 color: #cbd5e1;
134 }
135 </style>
136</head>
137<body>
138 <h1>Border side-tab detector cases</h1>
139 <p class="intro">A paired fixture for colored side borders and rounded accent borders. The left column should produce border findings; the right column should stay clean.</p>
140
141 <div class="grid">
142 <section class="col" data-col="flag">
143 <h2>Should flag</h2>
144
145 <div class="case flag-left">
146 <h3>Rounded card with colored left border</h3>
147 <p>Classic side tab: border-left is thick, colored, and paired with rounded corners.</p>
148 </div>
149
150 <div class="case flag-right">
151 <h3>Rounded card with colored right border</h3>
152 <p>The right-side version is the same visual trope mirrored.</p>
153 </div>
154
155 <div class="case flag-left-plain">
156 <h3>Thick colored side border without radius</h3>
157 <p>A thick chromatic side stripe still reads as a tab even without rounded corners.</p>
158 </div>
159
160 <div class="case flag-top">
161 <h3>Rounded card with top accent border</h3>
162 <p>A heavy top accent on a rounded card is the horizontal variant of the same pattern.</p>
163 </div>
164
165 <div class="case flag-bottom">
166 <h3>Rounded card with bottom accent border</h3>
167 <p>The bottom accent is also a decorative stripe on a card surface.</p>
168 </div>
169
170 <div class="case flag-dark">
171 <h3>Dark card with bright side stripe</h3>
172 <p>Dark surfaces can hide the cliche, but the thick colored side stripe remains.</p>
173 </div>
174 </section>
175
176 <section class="col" data-col="pass">
177 <h2>Should pass</h2>
178
179 <div class="case pass-full-border">
180 <h3>Uniform full border</h3>
181 <p>A quiet all-around border frames the card instead of creating a side tab.</p>
182 </div>
183
184 <div class="case pass-neutral-side">
185 <h3>Neutral structural side rule</h3>
186 <p>A gray structural rule can be a legitimate divider when it is not chromatic emphasis.</p>
187 </div>
188
189 <div class="case pass-thin-side">
190 <h3>Thin colored side rule</h3>
191 <p>A 1px colored rule is below the decorative side-tab threshold.</p>
192 </div>
193
194 <div class="case pass-square-top">
195 <h3>Square top border</h3>
196 <p>A top rule without rounded card corners is treated as a structural divider.</p>
197 </div>
198
199 <div class="case pass-square-bottom">
200 <h3>Square bottom border</h3>
201 <p>A bottom rule without rounded card corners is also allowed.</p>
202 </div>
203
204 <div class="case pass-dark-uniform">
205 <h3>Dark card with uniform border</h3>
206 <p>The dark surface has a full neutral outline, not a chromatic side stripe.</p>
207 </div>
208 </section>
209 </div>
210
211 <script src="/js/detect-antipatterns-browser.js"></script>
212</body>
213</html>