The design system.

The one button. Three variants, renders <a> or <button>.

Two buttons spaced together — horizontal or vertical.

Standalone forward link — three body sizes, arrow on the right.

A link set inside a sentence — underlined text, no arrow.

Plain navigation link for the menu and footer.

The startpage glass "Talk to Miriam" pill — portrait + two-line prompt.

Single-line text field — label, states, helper & error.

Password field with an inline show/hide toggle.

Multi-line text field that resizes vertically.

Single-choice dropdown on the native select, styled to the field system.

Classic square control with a label.

Classic circle control for one-of-many.

Selectable radio card — a big-choice option with room for text.

On/off switch for an instant setting.

Pill for tag & option pickers — multi-select (checkbox) or single-select (radio).

Pill row that switches between views — pick one.

Lays fields in 1–3 columns; stacks on mobile.

Month calendar + time-slot picker for bookings. Writes date & time to hidden inputs.

A wrapping row of filter pills — solid-violet active, quiet greys. Filters a list.

Meaning pill — Success, Attention, Important, Highlighted, Neutral.

Card marker — primary or secondary, light or dark.

A person’s picture — photo or initials, five sizes, circle or rounded.

A thin progress bar with an optional label — value / max or percent.

A row of pagination dots — active pill, clickable, light or dark.

Clickable image tile — shade, label & hover arrow. Tile or showcase.

Portfolio card — image on top, caption below.

Bordered surface — marker, title & body. Light or dark.

Frosted card that floats over imagery — serif quote & person.

Pricing tier — badge, price, feature list & CTA.

Dark hardware card — badge, brand, serif model & spec.

Deep case-study card — tag, company, title, image & CTA.

Shop offering — image with a category tag, title, description, price & request Button.

Expandable rows on native <details> — FAQ & disclosure.

A hairline rule — horizontal or vertical, with set spacing.

Top nav with over-hero and solid modes, per-page logo.

Sticky dashboard sidebar — logo, grouped rows, divider & user chip.

One sidebar row — stroke icon + label, hover & active states.

Signed-in identity block — avatar, name & role. Built from Avatar.

The page openers — one per page type. Pick a variant below.

The startpage opener — a fixed image that blurs on scroll, with the hero and frosted testimonials floating over it.

Inner-page opener — eyebrow & headline, then a framed image that grows to full-bleed on scroll with a statement overlay.

The Sparklin opener — a fixed portrait that blurs on scroll, with the hero copy and a big quote statement floating over it.

A heading & a row of Nav Card image tiles, revealed on scroll (the "we help you with" section).

A big centered statement over a blurred, dimmed image — eyebrow + serif-accent heading, revealed on scroll.

An image that grows to full-bleed on scroll, with an ad overlay — headline, optional sub-line & CTA.

A compact violet page header — eyebrow, big title & lead. Opens inner pages.

Fanned deck of Case Cards with prev/next arrows.

A full pricing block — Eyebrow, heading & a row of 2–3 Pricing Cards.

A full FAQ section — Eyebrow, heading & an Accordion of Q&As.

A full sign-in section built from Input, Password, Checkbox & Button.

A full 404 page — code, heading, back-home Button. Same washed-image shell.

A quiz intro page — eyebrow, heading, meta, start Button & how-it-works.

The Sparklin Shop — Half Hero, Filter Tabs & a live-filtered grid of Product Cards.

A fixed A4 invoice — logo, parties, line-item table, totals & bank footer.

The export canvas — portrait 1080×1350, story 1080×1920 or LinkedIn 1200×627, five surfaces, brand footer.

Shows off a client’s finished brand over a photo of their assets — "Distilled by Alchemy", rotating badge. Story & LinkedIn.

A swipe-through Instagram carousel in two styles — classic (text-led) and surreal (text on art). Portrait 1080×1350.

The intentional "ugly ad" — raw, meme-like, highlighter marks & a red circle. Breaks the brand rules on purpose to convert. Portrait & story.

An ugly ad that looks like a real chat screenshot — WhatsApp, Instagram DM or iMessage. Native, not brand-designed. Portrait & story.

An ugly ad that looks like a screenshot of the Notes app (iOS or Samsung) — a note-to-self with a checklist. Native, not brand-designed. Portrait & story.

An ugly ad that looks like a photo of a yellow Post-it — the options crossed off, one left standing & circled. Handwritten, not brand-designed. Portrait & story.

An ugly ad that looks like a screenshot of a Twitter/X post — verified name, tweet body & the engagement row. Light or dim. Native, not brand-designed. Portrait & story.

An ugly ad that looks like a screenshot of a Reddit post — subreddit line, title, body & the upvote/comments row. Light or dark. Native, not brand-designed. Portrait & story.

An ugly ad that looks like a screenshot of an email (Gmail style) — subject, sender row, body & reply/forward buttons. Best as a client inquiry. Native, not brand-designed. Portrait & story.

A page from the Alchemy Lab notebook — a jotted insight, script accents, a hand-underlined word. Portrait & story.

The email system: a brand-designed shell (ink/violet header, hero band, footer) + body blocks (heading, text, button, code, receipt). The whole set of emails we send.