mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-16 16:16:32 +03:00
203 lines
7.0 KiB
HTML
203 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Hero-Eyebrow-Chip — Should Flag vs Should Pass</title>
|
|
<style>
|
|
/* ─── Layout convention: two-column fixture ─────────────────────────
|
|
Left column = patterns the rule SHOULD flag.
|
|
Right column = legitimate patterns the rule should NOT flag.
|
|
Each test case is annotated with a unique <h1> text so the test
|
|
can match snippets back to expectations.
|
|
──────────────────────────────────────────────────────────────── */
|
|
body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
|
|
.col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
|
|
.case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
|
|
.case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }
|
|
.case h1 { margin: 0; font-family: 'Inter', sans-serif; line-height: 1.05; }
|
|
|
|
/* Hero size used by most cases */
|
|
.hero { font-size: 88px; font-weight: 600; }
|
|
|
|
/* ── FLAG cases ── */
|
|
|
|
.eyebrow-classic {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.eyebrow-span {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 11px;
|
|
color: #475569;
|
|
font-weight: 600;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.eyebrow-pill {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
font-size: 12px;
|
|
background: #f1f5f9;
|
|
color: #334155;
|
|
border-radius: 999px;
|
|
padding: 4px 12px;
|
|
font-weight: 600;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.eyebrow-already-uppercase {
|
|
letter-spacing: 0.18em;
|
|
font-size: 11px;
|
|
color: #b45309;
|
|
font-weight: 700;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* ── PASS cases ── */
|
|
|
|
.pass-eyebrow-no-tracking {
|
|
text-transform: uppercase;
|
|
letter-spacing: normal;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.pass-body-heading {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
font-family: 'Inter', sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.pass-card-caption {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
font-weight: 600;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.pass-bare-hero {
|
|
font-size: 64px;
|
|
}
|
|
|
|
.pass-h2-above-h1 {
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
font-weight: 700;
|
|
color: #475569;
|
|
margin: 0 0 16px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.pass-long-uppercase {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
font-size: 12px;
|
|
color: #475569;
|
|
font-weight: 600;
|
|
margin: 0 0 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
|
|
<!-- ════════════════════════════════════════════════════════════════
|
|
LEFT COLUMN: should flag
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<div class="col" data-col="flag">
|
|
<h2 class="col-label">Should flag</h2>
|
|
|
|
<div class="case">
|
|
<div class="eyebrow-classic">AI-NATIVE WORKFLOWS</div>
|
|
<h1 class="hero">Eyebrow Above Hero</h1>
|
|
<p>Classic uppercase tracked div eyebrow above an 88px hero.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<span class="eyebrow-span">NEW IN 2026</span>
|
|
<h1 class="hero">Span Eyebrow Above Hero</h1>
|
|
<p>Span variant with the same uppercase + tracking + small-size shape.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<span class="eyebrow-pill">FEATURED</span>
|
|
<h1 class="hero">Pill Chip Above Hero</h1>
|
|
<p>Pill-shaped chip with background, border-radius, padding.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<span class="eyebrow-already-uppercase">NEW</span>
|
|
<h1 class="hero">Already Uppercase Text</h1>
|
|
<p>Text typed uppercase, no text-transform, but matching tracking and size.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<div class="pass-long-uppercase">A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER</div>
|
|
<h1 class="hero">Long Uppercase Sentence Above Hero</h1>
|
|
<p>46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════════════════════
|
|
RIGHT COLUMN: should pass
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<div class="col" data-col="pass">
|
|
<h2 class="col-label">Should pass</h2>
|
|
|
|
<div class="case">
|
|
<div class="pass-eyebrow-no-tracking">UPPERCASE LABEL</div>
|
|
<h1 class="hero">Eyebrow With Normal Tracking</h1>
|
|
<p>Uppercase label above a hero but with letter-spacing: normal.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<div class="pass-card-caption">CARD CAPTION</div>
|
|
<p>Plain body text below the caption.</p>
|
|
<h1 class="hero" style="margin-top:32px">Uppercase Caption Far From Hero</h1>
|
|
<p>Hero exists, but its preceding sibling is a paragraph, not the eyebrow.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<h1 class="pass-bare-hero">Hero With No Eyebrow</h1>
|
|
<p>Bare h1 at 64px, nothing above it.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<h2 class="pass-h2-above-h1">SECTION HEADING</h2>
|
|
<h1 class="hero">Heading Above Heading</h1>
|
|
<p>An h2 styled like an eyebrow above an h1 — heading-tag exclusion must skip this.</p>
|
|
</div>
|
|
|
|
<div class="case">
|
|
<div class="eyebrow-classic">SECTION KICKER</div>
|
|
<h1 class="pass-body-heading">Body-Sized Heading Below Eyebrow</h1>
|
|
<p>A compact product/page heading is not an oversized marketing hero.</p>
|
|
</div>
|
|
|
|
<div class="case" role="tabpanel" aria-label="Saved station">
|
|
<div class="eyebrow-classic">NEXT FROM</div>
|
|
<h1 class="hero">Application Panel Heading</h1>
|
|
<p>Context labels inside tab panels describe application state rather than decorating a marketing hero.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|