Snurble's design system derives its color system, typography, and component patterns from the WorkV2 webclient (mattriley.work). This page renders every aligned component at a glance alongside its WorkV2 acceptance criteria. Use it to spot regressions after token or component changes.

WorkV2 uses Catppuccin Mocha as its palette, routed through Tailwind utilities. Snurble re-exposes that palette via --snurble-palette-* tokens and maps them to semantic roles in packages/tokens/src/semantic.css.

Acceptance criteria

• Peach (#fab387) — brand names and h1 text (--snurble-brand-primary)
• Mauve (#cba6f7) — card titles and section headings (--snurble-brand-heading)
• Green (#a6e3a1) — avatar ring, focus outlines, success (--snurble-accent-success)
• Red (#f38ba8) — SVG decorative fill, danger (--snurble-accent-danger)
• Surface1 (#45475a) — card backgrounds (--snurble-surface-card)
• Surface2 (#585b70) — badge backgrounds, card borders (--snurble-surface-badge, --snurble-border-card)
• Subtext0 (#a6adc8) — secondary / muted text (--snurble-text-muted)
• Overlay1 (#7f849c) — tertiary text (--snurble-text-tertiary)

Live swatches

WorkV2 acceptance criteria

• Avatar has a green ring (--snurble-accent-success)
• Name renders in peach with Montserrat Black weight (--snurble-brand-primary, --snurble-font-weight-display: 900)
• Subtitle renders in muted text (--snurble-text-muted)

WorkV2 acceptance criteria

• Focus outline uses green (--snurble-accent)
• Hover scale is 1.3×
• Per-platform hover color: GitHub → subtext0 (grey), LinkedIn → blue, Email → peach
• Links rendered inside a <nav> landmark

WorkV2 acceptance criteria

• SVG text fill is red/danger (--snurble-accent-danger)
• SVG outline/flood is green/success (--snurble-accent-success)
• Colors routed via component-local vars (--snurble-decorated-heading-fill / --snurble-decorated-heading-outline) so consumers can override per instance
• WCAG note: All-caps SVG text fails SC 1.4.8 (visual presentation) at WCAG 2.1 AAA. Snurble uses this as decorative / presentational text only; the semantic heading must be provided by the consumer (Section decorated prop or manual sr-only h2).

WorkV2 acceptance criteria

• When decorated={true}, the section renders DecoratedHeading visually and a sr-only h2 for screen readers
• Aria landmark still points to the sr-only heading id so assistive technology gets a meaningful label
• When decorated is omitted or false, the normal visible h2 renders as before (no regression)

Usage

<Section title="About Me" headingId="about-me" decorated={true}>
  <!-- content -->
</Section>

WorkV2 acceptance criteria

• Background uses surface-card (--snurble-surface-card)
• Title renders in mauve (--snurble-brand-heading)
• Company name uses muted text (--snurble-text-muted), no opacity hack
• Header border-bottom uses card border token (--snurble-border-card)

WorkV2 acceptance criteria

• Background uses surface-card (--snurble-surface-card)
• Title renders in mauve (--snurble-brand-heading)
• Topic pills use badge surface (--snurble-surface-badge) — Phase 0 bug fix

All phases complete when:

• ✓ Phase 0 — --snurble-surface-badge token added; topic pills render on dark surface
• ✓ Phase 1 — SkipLink present in Layout; SkillIcon is aria-hidden; SocialLinks focus uses green
• ✓ Phase 2 — 24-token semantic layer maps all Catppuccin Mocha roles to Snurble names
• ✓ Phase 3 — ProfileHero green ring + peach name; ExperienceCard mauve title + surface-card bg; ProjectCard mauve title + surface-card bg; DecoratedHeading red fill + green outline; Section decorated prop; SocialLinks platform colors