[refactor] Consolidate hand-rolled eyebrow labels into <Eyebrow>

[joshestein]

Closes #2795

What changed

The "uppercase + small + letter-spaced" label recipe was hand-rolled at ~26 call sites with drifting tracking (0.05–0.18em), weight (medium/semibold), and size (12–16px). This PR converts them all to <Eyebrow> from @bluedot/ui, so they now share one voice.

• Eyebrow gains id + style pass-through: id for the aria-labelledby target in MyBlueDotSidebar; style for runtime colours (HeroSection category labels, Congratulations course accent, puzzles prize accent) that Tailwind classes can't express (arbitrary-value classes must be build-time literals).
• Storybook: added Muted and DynamicAccent stories.
• CertificateCard keeps its explicit sizes (text-size-xs/sm) — the certificate is a fixed-proportion artifact whose labels scale with the document, not the UI ramp.

Deliberately not converted

• Heading-role eyebrows: the puzzles pages' <h2 className={EYEBROW_CLASS}> section headings, /courses "Projects" <h2>, and the CourseSchedule sidebar <H2> group labels. Each is its section's only heading; converting to Eyebrow's <p> would remove them from the document outline. Decision: leave as-is rather than add an as prop. They keep their current styling until the designer question below is settled.
• Badges/chips (calendar-tile month labels, lander tag chips, program-page pills), Nav "NEW" tags, AnnouncementBanner — non-label uppercase, out of scope per the issue.
• RoundGroup's inline lead-in label (mid-sentence span; a <p> would break the flow).

Open questions

1. Canonical tracking: 0.04em (this PR) vs the ~0.12–0.18em the newer pages used
2. Weight: medium (this PR) vs semibold (was the majority)
3. Size: 12px only, or 14px allowed in larger contexts
4. Sanctioned colour alternates

Whichever way these land, it's a one-line change to Eyebrow.tsx's class string. Note the puzzles page currently shows both voices (parked h2s at 0.18em, converted prize labels at 0.04em) until then.

Screenshots (after)

Homepage (ladder step labels, events, newsletter):

Puzzles winners (converted prize labels vs parked h2 eyebrows):

AGI Strategy lander ("Cohort based course" hero eyebrow):

/alumni ("More stories"):

Rapid grants mobile (stats strip + step labels):

Testing

• Website suite: 999/999 after updating 8 snapshots (diffs are exactly the class swaps + one span→p)
• Website typecheck clean; libraries/ui typecheck failures are pre-existing (Footer/IconButton stories, Login.test — none touch Eyebrow)
• Viewport check at 390px and 1440px on the 5 pages above: no horizontal scroll, no layout breakage
• Auth-gated surfaces (course unit page, my-courses, congratulations, facilitator-feedback) covered by snapshots only — worth a staging click-through

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0643ccf2-b770-4e6b-856d-b585b45fac85

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch josh/2795-consolidate-eyebrow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[joshestein]

@greptile-apps review

[greptile-apps]

Greptile Summary

This PR consolidates website eyebrow labels onto the shared Eyebrow component. The main changes are:

• Replaces hand-rolled label styles across website pages and components.
• Adds id and inline style forwarding for accessibility labels and dynamic colors.
• Preserves explicit certificate label sizes through caller overrides.
• Adds muted and dynamic-accent Storybook examples.
• Updates affected snapshots for the shared typography.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.
• The new props are optional and correctly forwarded.
• Dynamic colors and accessibility labeling remain intact.
• Converted elements remain in valid flow-content containers.
• Caller typography overrides are preserved by the shared class-merging utility.

Important Files Changed

Filename	Overview
libraries/ui/src/Eyebrow.tsx	Adds optional id and style props and forwards them to the rendered paragraph.
libraries/ui/src/Eyebrow.stories.tsx	Adds examples for muted text and runtime accent colors.
apps/website/src/components/lander/components/HeroSection.tsx	Moves four category-label variants to Eyebrow while preserving computed colors.
apps/website/src/components/certificate/CertificateCard.tsx	Consolidates certificate labels while retaining their explicit size, spacing, alignment, and color overrides.
apps/website/src/components/my-bluedot/MyBlueDotSidebar.tsx	Uses Eyebrow for the navigation label while preserving the ID referenced by aria-labelledby.
apps/website/src/components/homepage/NewsletterBanner.tsx	Replaces the standalone newsletter label with the shared paragraph-based component.
apps/website/src/components/courses/UnitLayout.tsx	Moves the course-unit label from the general paragraph component to canonical eyebrow typography.

_{Reviews (1): Last reviewed commit: "[chore] Remove PR screenshots after embe..." | Re-trigger Greptile}