Havjoy design system · Pet owner edition

Big love.
Little paw prints.

Meet Pet Pop. A playful color and hand-drawn doodle layer for the people who love their pets like family. Same Havjoy bones. A new kind of joy.

Explore the elements See compositions

01 · Foundation

A little color therapy.

Cream leads. Cobalt anchors. Yellow invites action. Pink adds a small dose of fun.

Cream#FFFCF3 · --hj-cream-2
Ink#010101 · --hj-ink
Cobalt#2547D0 · --hj-blue
Sunshine#FDCD62 · --hj-yellow
Pop pink#FB5780 · --hj-pink

Typography, spacing, radii, borders and hard shadows come from core. No replacement fonts or resized commerce components. Use ink on pink/yellow and cream on cobalt.

Core typography · unchanged

Their face. Your favorite tee.

Display headings keep the Havjoy serif; supporting copy and controls retain the core sans serif.

02 · Approved doodle collection

A little scribble.
A lot of love.

Loose ink lines, playful color patches and familiar pet things. Hand-drawn character replaces the geometric silhouettes.

Six lightweight, original SVG doodles, redrawn from the approved direction. Dogs, cats and paw prints are vector too — no embedded PNGs. Colors follow Pet Pop tokens.

Dog · Inline SVGhj-pet-doodle · dog
Cat · Inline SVGhj-pet-doodle · cat
Paw · Inline SVGhj-pet-doodle · paw
Bone · Inline SVGhj-pet-doodle · bone
Bowl · Inline SVGhj-pet-doodle · bowl
Yarn · Inline SVGhj-pet-doodle · yarn
{% render 'hj-pet-doodle', name: 'dog', decorative: false, label: 'Happy walking dog' %}

Real vector paths, rounded ink strokes and opaque cream fills stay crisp on both surfaces. Each drawing uses CSS color tokens, with no image downloads or filters. Decorative SVGs are hidden from assistive technology; meaningful artwork has an accessible label.

03 · Pattern & background

Room to breathe.

Sparse accents, generous negative space. Never decorate behind product options, prices or form fields.

One quiet corner

Light surface

Keep the story in the clear space.

Cobalt surface

Same shapes. Theme-aware colors.

{% render 'hj-pet-decor', composition: 'corner' %} · parent: hj__pet-stage

Split Corners · 35% × 35%

Light surface

Keep the story in the clear space.

Cobalt surface

Same shapes. Theme-aware colors.

{% render 'hj-pet-decor', composition: 'split' %} · parent: hj__pet-stage

A sparse paw trail

Light surface

Keep the story in the clear space.

Cobalt surface

Same shapes. Theme-aware colors.

{% render 'hj-pet-decor', composition: 'trail' %} · parent: hj__pet-stage

Best friends divider

Light surface

Keep the story in the clear space.

Cobalt surface

Same shapes. Theme-aware colors.

{% render 'hj-pet-decor', composition: 'divider' %} · parent: hj__pet-stage

Corner art stays within its reserved area; on mobile the clusters shrink to 26% × 28%. Artwork sits directly on the section surface with no background wash or faded panel.

Cobalt → Ink

A dark chapter, not a wall of black. Keep foreground text cream.

hj__pet-surface--dark hj__pet-surface--gradient

04 · Core components

Familiar by design.

Core components, Pet Pop colors. These are documentation examples, not a live checkout.

Dog peopleCat peopleAll pet people
Demo only. Nothing is uploaded or submitted.
Info: Preview your artwork first.
Check: Keep both ears inside the photo.
Error example: Choose a clearer photo.
Ready: Your photo looks great.
15%OFF · Example
PET15

Visual coupon sample only. No active discount or cart action.

1
Photo receivedPreview before print
2
Made for youPersonalized with care
3
On its wayFollow your delivery

05 · Campaign composition

For their favorite human.

A product row stays clean. Art belongs in the image area, not underneath the price or button.

Best friend portraitExample product · $32.95
Cat person clubExample product · $32.95
Walks & good companyExample product · $32.95

Pet Pop · Final CTA example

Wear your heart.
And your pet.

A little bold. A lot of love. Always Havjoy.

Back to the palette