Files
pbakaus_impeccable/tests/fixtures/antipatterns/typography-should-pass.html
T
Paul BakausandClaude Opus 4.6 3c9cc86061 Merge CLI into main repo, switch everything to Apache 2.0
Merges the impeccable-detect CLI repo (pbakaus/impeccable-cli@831a6cc)
into this repo. The BSL-1.1 license that motivated the split is gone;
everything is now Apache 2.0.

- Add bin/, src/, detection tests and fixtures from CLI repo
- Merge package.json: name → "impeccable", add bin/exports/files fields
- Internal refs now read from local src/ instead of node_modules/
- Update SPDX headers, NOTICE.md, CLAUDE.md, FAQ, npm README
- Add prepack/postpack scripts for CLI-focused README on npm
- Remove terminal license labels (no longer needed)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:50:33 -07:00

46 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography — Clean Patterns</title>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Instrument Sans', system-ui, sans-serif;
background: #f9fafb;
padding: 2rem;
font-size: 16px;
color: #111827;
}
h1 {
font-family: 'Fraunces', Georgia, serif;
font-size: 48px;
font-weight: 700;
margin-bottom: 0.5rem;
}
h2 {
font-family: 'Fraunces', Georgia, serif;
font-size: 32px;
font-weight: 700;
margin: 2rem 0 0.75rem;
}
h3 { font-size: 24px; font-weight: 600; }
p { font-size: 16px; color: #6b7280; margin-top: 0.25rem; }
.caption { font-size: 12px; color: #6b7280; }
</style>
</head>
<body>
<h1>Good Typography</h1>
<p>This page uses distinctive fonts, proper pairing, and strong hierarchy.</p>
<h2>Two Font Families</h2>
<p>Fraunces (serif) for headings, Instrument Sans for body. Clear contrast in both structure and personality.</p>
<h3>Strong Size Hierarchy</h3>
<p>Sizes range from 12px to 48px — a 4:1 ratio with clear visual steps.</p>
<p class="caption">Caption text is clearly distinct from body.</p>
<script src="/js/detect-antipatterns-browser.js"></script>
</body>
</html>