● Guidelines / Site composition

Site composition.

Small helpers that keep route pages consistent but are not part of the Superbloom public API. They live under src/lib/components and are documented here so they are not mistaken for missing primitives.

How this fits the system

Superbloom covers tokens, primitives, and patterns. Site composition covers repeated route-level markup that does not need Storybook stories or exports from $lib/system.

Source of truth

Implementation files listed below. No Storybook category, so verify in context on /about and /contact.

Helpers

SectionLabel

src/lib/components/section-label.svelte

Muted section eyebrows on long-form pages (about, contact). Applies the label utility with consistent spacing.

ContactLinks

src/lib/components/sections/contact-links.svelte

Shared contact list: email plus Calendly, GitHub, and LinkedIn via ExternalLink. Used on about and contact.

link utility

src/app.css (@utility link)

Underlined in-copy links for internal routes and prose. Use on plain <a> tags inside paragraphs.

In practice

Live examples from the current site.

How to reach me

Email me Book 20 minutes GitHub LinkedIn

Prose links

See the documentation overview or the Storybook deploy for external targets.

Guidelines

Import SectionLabel and ContactLinks from $lib/components, not from $lib/system.
Use class="link" for internal navigation inside running text; use ExternalLink for http(s) URLs that need the ↗ icon and new-tab semantics.
Keep mailto links as plain anchors with text-md hover styles (see ContactLinks), not ExternalLink.
Do not promote one-off section eyebrows to Superbloom patterns unless they appear in three or more places with the same structure.
Prefer Superbloom patterns and primitives for anything that belongs in Storybook or the pattern library.

Quick checks

Long-form section title on about/contact?

SectionLabel with label="…".

Same contact list on about and contact?

ContactLinks; pass emailLabel if copy differs.

Link to /work/mermaid in a paragraph?

class="link" on <a href={resolve(...)}>.

Link to GitHub or Storybook?

ExternalLink (variant md in lists, underline in prose).

Reusable across the design system?

Add a primitive or pattern instead of extending this page.