mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 01:26:29 +03:00
Paul BakausandClaude Opus 4.6
8a357d4754
Five new detections: - pure-black-white: flags #000/#fff in styles via regex (jsdom bg resolution unreliable for this) - gray-on-color: gray text (low chroma, mid luminance) on colored backgrounds via getComputedStyle + ancestor bg walk - low-contrast: WCAG AA violation (4.5:1 body, 3:1 large text) via computed contrast ratio with resolved effective background - gradient-text: background-clip:text + gradient combo via regex (jsdom doesn't compute background-clip) - ai-color-palette: conservative purple/violet accent detection via regex on known hex values in prominent contexts Background resolution handles jsdom limitation where background shorthand isn't decomposed — falls back to parsing raw style attribute for hex colors. Color fixtures added for both should-flag (all 5 types) and should-pass (tinted neutrals, good contrast, non-purple accents). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
46 lines
1.5 KiB
HTML
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>
|