Internal Reference

Havjoy Keepsake Design System

v1.0 · Warm editorial luxury · Scoped under .hk-theme

1 CSS Tokens

Reference tokens through var(--hk-*). Future Keepsake sections should not hard-code palette, spacing, radius, or font decisions.

--hk-ivory#F7F1E7
--hk-paper#EFE4D4
--hk-warm-cream#FBF7EF
--hk-espresso#2A1710
--hk-deep-brown#3A2418
--hk-walnut#7A4E2D
--hk-muted-gold#B18455
--hk-antique-gold#C6A16A
--hk-soft-taupe#B8A99A
--hk-sage#8F9A86
--hk-ink#17120F
Radiussm 10px · md 14px · card 22px · card-lg 26px
Containers1320px standard · 1480px wide · 720px narrow
Sectionscompact 40-96px · medium 56-120px · large 72-160px

2 Typography

Editorial serif for emotion and hierarchy. Clean sans for body, labels, and UI. Use theme font variables through --hk-font-heading and --hk-font-body.

Heirloom Gift Studio

A keepsake he will keep close.

Short body copy should explain the product quickly, then move the customer toward personalization.

Hero42-54px mobile · 76-104px desktop
Section34-44px mobile · 56-84px desktop
Body15-18px
Label11-13px uppercase tracked

3 Buttons & CTAs

Primary CTAs are espresso and solid. Secondary CTAs are quiet. Text CTAs should feel editorial and lightweight.

Create Yours View Details See craftsmanship
<a class="hk-btn hk-btn--primary hk-hover-lift"><span class="hk-cta-arrow">Create Yours</span></a>

4 Card Styles

Cards should be editorial and image-first. Use variants to create contrast without inventing campaign-specific styles.

Core Card Variants

.hk-card--cream

Default warm surface for content blocks.

.hk-card--paper + elevated

Useful for proof, value props, and quiet callouts.

.hk-card--framed

Subtle heirloom frame without heavy shadows.

.hk-card--espresso

Use sparingly for premium contrast moments.

.hk-card--edge-gold

Small editorial emphasis, not a loud badge.

.hk-card--edge-sage

Good for shipping, trust, and calm assurances.

Product Card Patterns

Product image

Image-first

Personalized Keepsake

Short product clarity, restrained metadata.

Create Yours
Square image

Compact

Mobile product tile

Use in grids and campaign collections.

Lifestyle crop

Editorial

Story + product block

Useful below PDP hero or in campaign storytelling once product clarity is established.

Use this pattern

Proof Cards

Default Proof

“It felt like an heirloom, not another personalized gift.”
Verified customer

Quote Proof

“The packaging alone made it feel special.”
Gift buyer

Minimal Proof

“Clean enough for PDP trust rows.”
Usage: compact sections

5 Blocks, Badges & Banners

Reusable block definitions for future OS2 sections. Use these instead of one-off campaign cards.

01

Step Card

.hk-step-card for how-it-works, production, and shipping steps.

Material Card

For wood, paper, wrapping, packaging, and tactile details.

Info Card

Small value proposition, trust note, or product detail.

Crafted to last Gift ready Ships fast Preview first
Father's DayFree preview before you payShips from our studio
Quiet bannerUse for deadlines or shipping assurances

6 Form & Option Styles

Keep product options scannable, tactile, and mobile-friendly. Avoid dense variant grids.

7 Background Patterns

Use subtle pattern classes per section. Product imagery and copy should always remain dominant.

hk-bg-paper-grain
hk-bg-floral-faint
hk-bg-bookbinding-grid
hk-bg-ornament-corners
hk-bg-soft-vignette

8 Before / After Slider

Use this pattern for preview vs delivered, raw photo vs finished keepsake, or packaging before and after. The demo is CSS-first and uses a range input only to move the handle.

Before
After
Before After
<div class="hk-compare" style="--hk-compare-pos:50%">...</div>

9 Motion & Effects

Each utility has a distinct role. Use restrained motion to clarify interaction and state. All utilities respect reduced motion.

Breathe

.hk-motion-breathe
Gentle CTA emphasis.

Sway

.hk-motion-sway
Small tactile tags or seals.

Shine

.hk-motion-shine
Premium sweep on dark/solid surfaces.

Stamped

.hk-motion-stamp
One-shot badge entrance.

&

.hk-motion-drift
Slow ornamental drift.

Slide left

.hk-motion-slide-left
Step or card entrance.

In production now

.hk-pulse-dot
Live but quiet state.

Soft pan

.hk-motion-soft-pan
Slow texture movement.

Crafted Packed Shipped
HandcraftedPreview firstGift readyShips from our studio HandcraftedPreview firstGift readyShips from our studio

10 Layout & Spacing

.hk-section--largeHero or major campaign sections: 72-160px.
.hk-sectionDefault content sections: 56-120px.
.hk-section--compactPDP, FAQ, trust rows: 40-96px.
.hk-containerStandard max width 1320px with responsive side padding.

11 Mobile & Brand Rules

Mobile conversion has priority over extended luxury storytelling.

Do

Show product fast, use one-column cards, short emotional copy, sticky CTA where useful, and a quick upload path.

Don't

Avoid POD mockups, Etsy clutter, bright white surfaces, excessive badges, and long paragraphs before product clarity.