Havjoy seasonal design system · Halloween

Cute, spooky, still Havjoy.

A scoped seasonal layer for campaign landing pages. Typography, spacing, borders, radii and component anatomy remain identical to the core system.

Seasonal layer QA reference

01 · Foundation

Seasonal palette

Core token names stay unchanged so every existing hj__* component inherits the Halloween treatment automatically.

Midnight ink#100C14
Aged bone#F4E3C7
Burnt pumpkin#F47A1F
Deep witch plum#67346F
Dusty lavender#A98DB2

Usage: apply hj__theme--halloween to the landing-page wrapper. Never override component geometry or copy component CSS into a seasonal stylesheet.

02 · Decorative accents

Halloween accents

Use sparse patterns or transparent decor on campaign heroes, banners and feature sections only. Keep forms, product options and checkout surfaces clean.

Hero right

Pumpkin hero corner

Anchors a hero image without filling its background.

Feature right

Moon & bats

A quiet upper-edge accent for dark feature sections.

Feature left

Web & spider

Frames one corner while keeping the content area clear.

CTA left

Pumpkin & candle

A low-profile anchor for final conversion banners.

Section edge

Haunted landscape divider

Runs once along the bottom edge between two dark chapters.

hj__decor--halloween-hero · hj__decor--halloween-moon-bats · hj__decor--halloween-web-spider · hj__decor--halloween-cta-pumpkins · hj__decor--halloween-section-divider

Constraint: image decor reserves ::before, uses transparent PNG assets and never repeats. Apply one decor utility per section.

03 · Landing page composition

Build campaigns in dark and light chapters

The reference rhythm is intentionally richer: dark story sections frame warm product sections, while burnt pumpkin carries every primary action.

Halloween collection

Turn a favorite photo into spooky art.

Campaign headline, supporting promise and one primary action. Keep the product promise clear even when the seasonal art is expressive.

Visual slot Campaign image slot Use a real product mockup, approved lifestyle image or generated campaign visual.

Collection preview

Choose your artwork style

4 styles
PortraitFrom $29.95
VintageFrom $29.95
ComicFrom $29.95
ClassicFrom $29.95
1
Upload a photoUse the existing personalization entry point.
2
Preview the designApproval remains before purchase.
3
Print and shipReuse the standard order timeline.

Recommended rhythm: dark hero → aged-bone collection grid → deep-plum story section → aged-bone proof/timeline → dark final CTA. Do not apply patterns behind product names, prices or form fields.

04 · Core components

Same anatomy, seasonal color

These examples use the exact Button, Card, Pill, Badge and Form primitives from the core Design System.

Buttons

hj__button + existing color and size modifiers

Pills & badges

NewSpooky seasonLimited
Preview readyLow stockErrorApproved
HalloweenDark surface

Forms

1

Dark card

Bone cream text and pumpkin accents maintain the same editorial Havjoy voice.

4.9 ★ rating

05 · Commerce

Product options

Interactive mock data only. No cart request or Shopify API call is made.

Only 4 left
$39.95$49.95Save 20%
Product typeCanvas
SizeXL unavailable
StyleColor swatches
Finish
Quantity
1

Select options, then try the mock button.

State gallery

DefaultInfoLow stockSold outAvailable
Variant unavailable. Choose another option.
Same hj__option-* markup as the core library

06 · Flow coverage

Personalization, upsell & cart

Seasonal color is inherited while functional surfaces remain quiet and readable.

1Photo
2Details
3Preview
ProcessingApproved

Upsell cards

2 items
15% bundle discountSave $9.74
$55.16

Your cart

1 item
B&L
Cute spooky portraitCanvas · 12 × 16 · Approved design

$39.95

1
Subtotal$39.95
Savings−$4.00
Total$35.95

Documentation only. This control does not submit or navigate.

07 · Post-purchase

Order lifecycle

The same order state model remains available in the seasonal layer.

Order #BOO-1031

Cute spooky canvas · Mock order

Order Received
1
Order ReceivedPayment confirmed
2
Awaiting ProductionFinal review
3
In ProductionYour item is being made
4
ShippedTracking becomes available
5
DeliveredDelivered to your address

Design, size, address and cancellation can still be requested.

08 · Campaign assets

What can be generated and used

Choose the asset method by how closely the image must represent the real product.

Decorative SVGBats, webs, moon, stars, pumpkins and graveyard silhouettes. Best for scalable section edges and backgrounds.
Campaign lifestyle imageCan be generated for hero and story sections. Supply the real product mockup when print accuracy matters.
Product and UGC imageryUse approved product exports or customer photos. Generated imagery must not invent artwork customers will receive.

Suggested delivery: hero 1600 × 1200 WebP, square story image 1200 × 1200 WebP, transparent decorations as SVG. Keep text out of generated raster images so campaign copy remains editable and accessible.