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>Anti-Pattern: Inter Font Everywhere</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
17 min-height: 100vh;
18 background: #f5f5f5;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: #ffffff;
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 box-shadow: 0 4px 24px rgba(0,0,0,0.08);
33 }
34
35 /* Navigation */
36 nav {
37 display: flex;
38 justify-content: space-between;
39 align-items: center;
40 margin-bottom: 48px;
41 }
42
43 .logo {
44 font-size: 20px;
45 font-weight: 700;
46 color: #111;
47 letter-spacing: -0.5px;
48 }
49
50 .nav-links {
51 display: flex;
52 gap: 32px;
53 align-items: center;
54 }
55
56 .nav-links a {
57 color: #666;
58 text-decoration: none;
59 font-size: 14px;
60 font-weight: 500;
61 }
62
63 .nav-cta {
64 background: #111;
65 color: #fff !important;
66 padding: 10px 20px;
67 border-radius: 8px;
68 font-weight: 600;
69 }
70
71 /* Hero */
72 .hero {
73 flex: 1;
74 display: flex;
75 flex-direction: column;
76 justify-content: center;
77 max-width: 700px;
78 }
79
80 .badge {
81 display: inline-flex;
82 align-items: center;
83 gap: 8px;
84 background: #f0f0f0;
85 padding: 6px 12px;
86 border-radius: 6px;
87 font-size: 12px;
88 font-weight: 600;
89 color: #666;
90 width: fit-content;
91 margin-bottom: 24px;
92 text-transform: uppercase;
93 letter-spacing: 0.5px;
94 }
95
96 h1 {
97 font-size: 56px;
98 font-weight: 800;
99 line-height: 1.1;
100 margin-bottom: 20px;
101 color: #111;
102 letter-spacing: -2px;
103 }
104
105 .subtitle {
106 font-size: 18px;
107 color: #666;
108 line-height: 1.6;
109 margin-bottom: 32px;
110 font-weight: 400;
111 }
112
113 .cta-group {
114 display: flex;
115 gap: 12px;
116 }
117
118 .btn-primary {
119 background: #111;
120 color: white;
121 padding: 14px 28px;
122 border-radius: 8px;
123 font-weight: 600;
124 font-size: 15px;
125 border: none;
126 cursor: pointer;
127 }
128
129 .btn-secondary {
130 background: #f5f5f5;
131 border: 1px solid #e0e0e0;
132 color: #333;
133 padding: 14px 28px;
134 border-radius: 8px;
135 font-weight: 600;
136 font-size: 15px;
137 cursor: pointer;
138 }
139
140 /* Features */
141 .features {
142 display: grid;
143 grid-template-columns: repeat(3, 1fr);
144 gap: 24px;
145 margin-top: 48px;
146 padding-top: 40px;
147 border-top: 1px solid #eee;
148 }
149
150 .feature {
151 padding: 20px;
152 }
153
154 .feature-icon {
155 width: 40px;
156 height: 40px;
157 background: #f5f5f5;
158 border-radius: 8px;
159 display: flex;
160 align-items: center;
161 justify-content: center;
162 margin-bottom: 16px;
163 font-size: 18px;
164 }
165
166 .feature h3 {
167 font-size: 15px;
168 font-weight: 700;
169 margin-bottom: 8px;
170 color: #111;
171 letter-spacing: -0.3px;
172 }
173
174 .feature p {
175 font-size: 13px;
176 color: #888;
177 line-height: 1.5;
178 font-weight: 400;
179 }
180
181 /* Testimonial */
182 .testimonial {
183 background: #fafafa;
184 border-radius: 12px;
185 padding: 24px;
186 margin-top: 24px;
187 }
188
189 .testimonial-text {
190 font-size: 14px;
191 color: #444;
192 line-height: 1.6;
193 font-style: italic;
194 margin-bottom: 16px;
195 }
196
197 .testimonial-author {
198 display: flex;
199 align-items: center;
200 gap: 12px;
201 }
202
203 .testimonial-avatar {
204 width: 36px;
205 height: 36px;
206 background: #ddd;
207 border-radius: 50%;
208 }
209
210 .testimonial-name {
211 font-size: 13px;
212 font-weight: 600;
213 color: #111;
214 }
215
216 .testimonial-role {
217 font-size: 12px;
218 color: #888;
219 font-weight: 400;
220 }
221
222 /* Font specimen overlay */
223 .font-specimen {
224 position: absolute;
225 top: 48px;
226 right: 48px;
227 background: #111;
228 color: #fff;
229 padding: 16px 24px;
230 border-radius: 10px;
231 text-align: center;
232 }
233
234 .font-specimen-label {
235 font-size: 10px;
236 text-transform: uppercase;
237 letter-spacing: 1px;
238 color: #888;
239 margin-bottom: 4px;
240 }
241
242 .font-specimen-name {
243 font-size: 28px;
244 font-weight: 800;
245 letter-spacing: -1px;
246 }
247
248 .font-specimen-weights {
249 font-size: 9px;
250 color: #666;
251 margin-top: 6px;
252 }
253
254
255 </style>
256</head>
257<body>
258 <div class="container">
259 <nav>
260 <div class="logo">genericstartup</div>
261 <div class="nav-links">
262 <a href="#">Product</a>
263 <a href="#">Features</a>
264 <a href="#">Pricing</a>
265 <a href="#" class="nav-cta">Sign Up</a>
266 </div>
267 </nav>
268
269 <div class="font-specimen">
270 <div class="font-specimen-label">Font Used</div>
271 <div class="font-specimen-name">Inter</div>
272 <div class="font-specimen-weights">400 · 500 · 600 · 700 · 800</div>
273 </div>
274
275 <div class="hero">
276 <span class="badge">Now Available</span>
277 <h1>The platform for modern teams</h1>
278 <p class="subtitle">Streamline your workflow with our all-in-one solution. Built for teams who want to move fast and ship faster.</p>
279 <div class="cta-group">
280 <button class="btn-primary">Get Started Free</button>
281 <button class="btn-secondary">Book a Demo</button>
282 </div>
283 </div>
284
285 <div class="features">
286 <div class="feature">
287 <div class="feature-icon">⚡</div>
288 <h3>Lightning Fast</h3>
289 <p>Built for speed from the ground up. Everything loads instantly.</p>
290 </div>
291 <div class="feature">
292 <div class="feature-icon">🔒</div>
293 <h3>Secure by Default</h3>
294 <p>Enterprise-grade security with end-to-end encryption.</p>
295 </div>
296 <div class="feature">
297 <div class="feature-icon">🔗</div>
298 <h3>Integrations</h3>
299 <p>Connect with 100+ tools your team already uses.</p>
300 </div>
301 </div>
302
303 <div class="testimonial">
304 <p class="testimonial-text">"This product has completely transformed how our team works. We've seen a 40% increase in productivity."</p>
305 <div class="testimonial-author">
306 <div class="testimonial-avatar"></div>
307 <div>
308 <div class="testimonial-name">Sarah Johnson</div>
309 <div class="testimonial-role">Head of Product, TechCorp</div>
310 </div>
311 </div>
312 </div>
313
314 </div>
315<script src="/js/detect-antipatterns-browser.js"></script>
316</body>
317</html>