Guides
Try Gifty Wow

Internal

Guides design system

Tokens live in global.css (@theme). Reusable UI lives in src/components/guides/. This page is noindex and disallowed in robots.txt.

Foundations

Use gw-* and semantic aliases ( primary, secondary, accent) from the theme. Meta and secondary copy: text-gw-on-surface-variant.

gw-background

gw-on-surface

primary

secondary

accent (= gw-accent, #e879f9)

gw-primary-container (lavender fills)

gw-surface-lowest

gw-surface-container-low

gw-surface-container-high

gw-surface-container-highest

gw-ink (marketing band)

Typography

font-sans — Plus Jakarta Sans (body, UI)

font-display — Baloo 2 (headlines, emphasis)

Scale (see @theme in global.css): text-xs 13px, text-sm 14px, text-base 16px, text-lg 18px — with tuned line-heights. Interactive controls (buttons, tab buttons, CTA links): minimum text-base (16px); never 14px on those surfaces.

Utilities

.editorial-shadow on panels

.gw-brand-gradient-text — logotype (#7c3aed → #e879f9)

Drop cap on the first paragraph of a scenario opener using the drop-cap class.

Marketing / hub backgrounds

Defined in global.css. Prefer these classes over ad-hoc bg-[radial-gradient(…)] on production pages. See docs/DESIGN_SYSTEM.md for pairing (typography, CTAs).

.gw-surface-panel-soft

Default light panel for profiles, celebrity masthead, app bridge card — purple-50 → white → blush border. Card shell: .gw-ds-try-app-panel in global.css ( src/components/ds/TryGiftyWowPanel.astro).

.gw-hero-gradient-band

Light Content Hub hero (pale purple → blush, full-bleed bands).

.gw-occasions-hero-spotlight

Ink base (#1a0b2e), top-center spotlight (#4c1d95 → ink), soft purple bloom. Used on /occasions (OccasionsHero.astro).

Typography and reading

Guide narrative and long-form pages use gw-reading-body (16px with relaxed leading on small screens, 18px from md up, in global.css) with text-gw-on-surface. Optional md:text-lg on marketing sections when you need an explicit 18px band without that class. Chrome and meta: at least text-xs (~13px from theme); do not use smaller arbitrary sizes for required reading. The home masthead on index.astro is a deliberate display-size exception; guide heroes use up to md:text-4xl.

Buttons and links

Control minimum: any <button>, tab control (role="tab"), or CTA-styled link (filled or outline pill) must use at least text-base (16px). Do not use text-sm (14px) for those labels.

Primary CTA Secondary CTA Text link (hover)

gw-btn-primary: gradient fill, text-base font-bold. gw-btn-secondary: outline pill (same padding rhythm), lower emphasis — both in src/styles/global.css.

Flexible gift mosaic (simple and reusable)

Use this on Celebrity Gift Edit layouts when the gift count can vary between 5 and 12. The pattern keeps one clear featured tile, avoids repetitive equal-card grids, and preserves semantic list structure for accessibility and crawlability.

Usage rules

  • Gift count support: 5 to 12.
  • Mobile: single-column rhythm, then 2-column with one occasional featured span.
  • Desktop: 12-column controlled variation (hero, wide, standard).
  • Editorial tiles capped to 2 max (headline + optional supporting copy).

SEO / AEO / speed

  • Keep semantic tags (`section`, heading, `ul/li`) and descriptive button labels.
  • Keep concise human-readable context near the grid (not image-only content).
  • Load first visible images eagerly; lazy-load the rest.
  • No additional dependencies or heavy runtime layout logic.

Demo: 6 gifts

Demo: 9 gifts

Demo: 12 gifts

Material swatches (gw-swatch--*)

CSS-first chips live in src/styles/swatches.css. Slugs match swatch-queries.json material labels (e.g. “delicate lace” → gw-swatch--delicate-lace). Sequin shimmer respects prefers-reduced-motion.

gw-swatch--sequins

gw-swatch--rhinestones

gw-swatch--delicate-lace

gw-swatch--fringe

gw-swatch--velvet

gw-swatch--satin

gw-swatch--fur

gw-swatch--linen

gw-swatch--canvas

gw-swatch--denim

gw-swatch--leather

gw-swatch--brass

gw-swatch--marble

Guide components

Imported from src/components/guides/. Hub-wide primitives that are not guide-scenario-specific live in src/components/ds/ (tokens for those live in global.css). Category map: categoryPillClasses.ts.

BrandGiftBadgeIcon

48×48 artboard, rx="14" tile, white gift glyph at translate(12,12). Light variant fills the tile with the brand gradient tokens; dark uses a translucent white tile. Same geometry as the hub bridge gift badge.

Light
Dark surface

BrandLogo

Wordmark plus BrandGiftBadgeIcon.

GuideHero

Demo subheadline

Demo guide headline for the design system

This is sample intro copy. Real guides pull strings from JSON.

Sample occasion 10 May 2026 12 stories

ScenarioDivider

GiverReceiverRow

AK
JL

Alex Kim for Jordan Lee

Friend to friend · Melbourne

ScenarioDek

A short italic deck that sets the emotional frame before the story.

CategoryPill

Want Need Feed Read Experience

GiftShowcaseCard

Experience
88% match · 92% context · 70% surprise

A headline that sells the gift idea in one line.

Sample product name · $49 AUD · Example Retailer

View at Example Retailer
sample demo guides

PullQuote

Guide narratives: gradient display text + soft vertical rule. Not the same as editorial cited quotes on /about.

Pull quotes use gradient text and a vertical accent bar.

EditorialCitedQuote

Long-form attributed quotes (problem section, founder bios). Styled via .editorial-cited-quote in global.css (default bottom spacing: --spacing-gw-editorial-cited-quote-after). Pass flush to remove outer margins.

"Short sample quote body in italic, with a left primary bar and muted attribution below." — Demo Name, Role

GuideOutroCTA

Your Story is Different

Personalized matches based on context, not just categories.

Sample outro copy. Wire to guide JSON outro fields on real pages.

Try GiftyWow
Private by default
How it works

TryGiftyWowPanel

Light “get your edit” / app bridge card (celebrity page masthead, occasions). Use src/components/ds/TryGiftyWowPanel.astro only. Below lg: centered card + secondary button; at lg and up: horizontal layout with QR (same href). Shell and copy tokens: .gw-ds-try-app-panel, .gw-ds-try-app-panel__title, .gw-ds-try-app-panel__copy, and .gw-ds-try-app-panel--desktop* in global.css; mobile CTA uses gw-btn-secondary plus .gw-ds-try-app-panel__cta.

Ready to find the perfect gift?

Snap a photo. Let me read their vibe. You get a curated gift edit in under two minutes.

Start Matching

About & marketing patterns

Used on /about. Same tokens as the rest of the hub; reference implementation: src/pages/about.astro.

Stat highlight

of all gifts end up unused, returned, or thrown away

Editorial cited quote

"Same component as founder bios: surface panel, 4px primary left border, 16px italic body, 13px semibold cite." — Octavia, Co-Founder

Numbered step

Upload two photos. That's it.

Sample step copy. Real pages use multiple steps with dividers between them.

Feature card (clay-style)

Short card title

Supporting copy in the marketing grid pattern.

FAQ row (details + chevron)

Sample question for the About-style accordion?

Use group on details and group-open:rotate-180 on the chevron. Match visible answers to any FAQPage JSON-LD.

SEO patterns for published guides

Use these on guides/[slug] (or future templates)—not to optimize this internal page.

  • Exactly one h1 per guide (hero headline).
  • Each scenario: article with stable id for deep links.
  • Gift recommendation title: h3 under that article.
  • Prefer real headings and paragraphs; use content alt for images.

AEO-friendly patterns (guide content)

Optional blocks for clear, extractable answers. Use factual, specific copy—avoid thin duplicate FAQs.

FAQ (details / summary)

When is Mother’s Day in Australia?

In 2026, Mother’s Day in Australia is Sunday 10 May (second Sunday in May).

How were gifts chosen for this guide?

Sample answer: scenarios reflect fictionalised family contexts; each product is illustrative for the narrative.

Definitions

Context fit
How well the gift matches the story’s setting and relationship.

Occasion hub components

Reusable primitives for occasion landing hubs (for example anniversary, Mother's Day, or graduation). Keep pages data-driven and compose from these blocks instead of duplicating layout markup.

Callouts (Bow and Top Tip)

Product teaser card

Experience $170

Melbourne Rooftop Cocktail Masterclass Voucher

Hands-on cocktail session with skyline views.

See in GiftyWow

App bridge CTA (banner and compact)

Not sure which direction to go?

Use this between product sections to bring users into matching.

Get personalized matches ->

Takes about 2 minutes.

Ready to stop scrolling and start matching?

Compact end-of-page variant.

Try GiftyWow free ->

FAQ + newsletter modules

Occasion hub FAQ

What makes an occasion hub reusable?

Stable layout blocks, typed content data, and consistent CTA patterns.

Should every hub have FAQ schema?

Only when the page includes visible FAQ content that matches the JSON-LD.

Get gifting gold, delivered.

Weekly ideas, occasion guides, and practical recommendations.

We respect your inbox. Unsubscribe anytime.

JSON-LD (guides)

Add structured data in the guide layout when URLs and schema are finalised. Use FAQPage only if the page includes visible FAQ content that matches the markup. 

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Mother's Day 2026: Gifts She'll Actually Love (AU)",
  "description": "Stuck for Mother's Day gift ideas? …",
  "datePublished": "2026-02-13",
  "author": { "@type": "Organization", "name": "GiftyWow" }
}