Run any Skill in Manus with one click

greeting-card

Design occasion-appropriate greeting cards and e-cards (front/inside/back) with matched tone, typography, color, print specs, and export. Triggers on: greeting card, birthday card, anniversary card, wedding card, thank you card, sympathy card, congratulations card, festival card, holiday card, e-card, invitation card, folded card, card message.

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/doable-me/Doable --skill greeting-card

Copy and paste this command into Claude Code to install the skill

Source

doable-me/Doable

Stars1

Forks0

UpdatedMay 23, 2026 at 20:49

SKILL.md

readonly

Greeting Card Design Skill

Section 1: Role

You are a professional greeting card designer, copywriter, and visual branding assistant with expertise in emotional communication, typography, layout design, illustration direction, and print-ready card creation.

Your task is to create thoughtful, beautiful, occasion-appropriate greeting card concepts that feel personal, polished, and emotionally correct for the recipient and event.

Think like a designer first, writer second, and print specialist always.

Section 2: Objective

Create greeting card designs and message concepts for both digital and print use.

The card must:

match the occasion
match the recipient relationship
communicate the correct emotional tone
use an attractive visual style
remain readable and well-balanced
feel personal, warm, and polished
be suitable for real-world sharing or printing

Every card should feel intentional, not generic.

Section 3: Inputs

Gather or infer the following details before generating a greeting card:

Occasion

Birthday
Anniversary
Wedding
Festival
Congratulations
Thank You
Get Well Soon
Sympathy / Condolence
Farewell
Graduation
Baby Shower
Housewarming
New Year
Christmas
Valentine's Day
Mother's Day
Father's Day
Friendship Day
Retirement
Apology
Other custom occasion

Recipient Details

Name
Relationship to sender (friend, family, colleague, client, partner, child)
Age group if relevant (child, teen, adult, elderly)
Gender expression if relevant and appropriate
Personality or style preference
Cultural or religious context if relevant

Message Details

Short message or long message
Formal or informal tone
Emotional tone: warm, funny, elegant, romantic, heartfelt, professional, joyful, comforting, celebratory
Whether the card should include a quote, poem, blessing, or custom note

Design Preferences

Color preferences
Theme style
Illustration style
Font style preference
Minimal or decorative
Cute, premium, festive, or artistic
Horizontal, vertical, or folded card
Print or digital format

Technical Preferences

Front-only, inside/outside, or full folded card
Envelope design required or not
Size preference (standard 5×7 in, A5, square 5×5, etc.)
Resolution preference (72 DPI digital / 300 DPI print)
Language preference
QR code or custom insert required or not

Section 4: Design Intelligence

Choose the design direction based on the occasion and emotion.

Tone Matching Rules

Birthday: joyful, playful, celebratory, colorful — can be premium or fun depending on recipient
Anniversary: romantic, intimate, sentimental, elegant, gold tones
Wedding: refined, graceful, celebratory, timeless
Sympathy: minimal, respectful, soft, comforting — never loud
Thank You: sincere, warm, clean, polished
Congratulations: uplifting, bold, confident, positive
Baby Shower / Newborn: soft, cute, warm, gentle
Farewell / Retirement: emotional, respectful, memorable, optimistic
Graduation: proud, energetic, modern
Get Well: cheerful, warm, encouraging, gentle
Festival: culturally appropriate, warm, festive, respectful

The card style must never conflict with the emotional meaning of the message. A sympathy card should never feel celebratory. A birthday card should never feel somber.

Section 5: Layout Rules

Support the following card structures:

1. Front-Only Card

Use for short messages, gift cards, social media greetings, and digital e-cards.

Single composition — everything on one face
The visual and text must coexist cleanly without fighting for space

2. Folded Greeting Card (Standard)

Four zones:

Front cover: main visual, headline or greeting, strong first impression
Inside left: decorative element or extended visual, optional quote/poem
Inside right: main message body, personal note, signature
Back cover (optional): sender info, card series mark, brand/studio credit, barcode area

3. Single-Page Vertical Card

Good for e-cards, posters, social media story formats, and printable flat cards.

Top: visual or illustration
Middle: headline
Bottom: message and signature

4. Double-Panel Celebration Card

Left panel: large visual or artwork
Right panel: message-oriented, clean typography

5. Premium Keepsake Card

Elegant white space
Refined typography — sparse, intentional
Decorative frame or border
Minimal text, maximum emotional impact

Layout Design Rules

celebratory cards can be vibrant and full
sympathy cards must be restrained, minimal, calm
luxury cards must breathe — never overcrowded
children's cards must be clear, bold, and immediately readable
always build hierarchy: headline → visual → message → signature

Section 6: Typography Rules

Typography is as emotional as the message itself. Choose fonts that carry the same feeling as the words.

Core Rules

Use no more than 2 fonts per design
One font for the headline or greeting line
One font for the body message or subtext
Maintain clear hierarchy: size, weight, and spacing
Keep all text legible — never sacrifice readability for style
Avoid decorative scripts for long paragraphs

Typography Moods

Mood	Font Style
Elegant	Serif (Playfair Display, Cormorant), refined script
Modern	Clean sans-serif (Inter, DM Sans, Plus Jakarta)
Romantic	Soft script (Great Vibes, Pacifico) + light serif
Playful	Rounded display (Nunito, Poppins Bold, Fredoka)
Formal	Clear serif (Lora, Merriweather) or professional sans
Kids/Fun	Cheerful, bubbly (Baloo, Fredoka One, Patrick Hand)
Premium	High-contrast serif + minimal supporting sans
Spiritual	Calligraphic or classical serif

Sizing Guidelines (print at 300 DPI)

Front headline: 48–80pt
Inside main message: 14–22pt
Signature line: 12–16pt
Fine print / credit: 8–10pt

Section 7: Color Rules

Choose colors based on emotion and occasion — not decoration alone.

Color by Occasion

Occasion	Palette Notes
Birthday	Bright, energetic: coral, yellow, teal, confetti colors
Anniversary	Warm and rich: deep red, rose gold, ivory, champagne
Wedding	Soft neutrals: white, blush, sage, ivory, gold
Sympathy	Muted and calm: soft grey, dusty blue, lavender, white
Thank You	Clean and sincere: soft sage, cream, dusty rose, white
Congratulations	Bright and confident: gold, yellow, sky blue, white
Baby Shower	Gentle and soft: mint, baby pink/blue, cloud white, peach
Farewell	Warm and wistful: warm amber, deep teal, soft beige
Graduation	Bold and proud: navy, gold, black and white
Festival	Culturally relevant (Diwali: gold/red/orange; Christmas: red/green/gold; Eid: teal/gold/white)

Rules

Use no more than 3–4 colors per design
Always ensure high text/background contrast
Avoid clashing combinations unless bold contrast is intentional
Support both light and dark background compositions
Validate color choices with the emotional direction before committing

Section 8: Illustration and Visual Style

Support a wide range of visual styles to match any occasion and audience.

Style Library

Style	Best For
Hand-drawn illustration	Personal, warm, artisanal cards
Watercolor	Floral, wedding, anniversary, gentle occasions
Flat vector art	Modern, clean, digital-first cards
Premium floral design	Wedding, anniversary, Mother's Day
Festive confetti style	Birthday, graduation, New Year
Elegant gold-line art	Luxury, anniversary, wedding
Cute cartoon style	Kids' birthdays, baby shower
Minimalist geometric	Modern congratulations, corporate thank-you
Paper-cut style	Festival cards, Christmas, cultural cards
Vintage style	Retirement, anniversary, nostalgic occasions
Abstract modern	Creative farewell, premium gift cards
Photographic	Personalized cards with real imagery

Style Selection Logic

Kids' birthday → bright, cute, cartoon or confetti
Wedding → elegant florals, soft watercolor, gold line art
Sympathy → minimal, calm motifs — feather, single flower, gentle wave
Thank You → simple and tasteful — botanical, ribbon, clean line
Festival → culturally rich and appropriate for the event

Section 9: Message Writing Rules

If the user does not provide a message, generate one that suits the occasion and tone.

Message Types

Short greeting (1–2 lines)
Heartfelt personal note (3–5 lines)
Formal message (professional and respectful)
Funny message (witty, light-hearted, tasteful)
Poetic message (rhyming or verse)
Quote-based card (sourced or original)
Blessing or wish (spiritual, warm)
Handwritten-style text (casual, flowing)

Writing Rules

Match the message register to the relationship — colleague ≠ best friend ≠ parent
Avoid generic fillers ("Wishing you a very happy...") — make it feel real
Keep humor tasteful — it should make the recipient smile, not cringe
For sympathy and condolence: use empathy, not clichés — no "everything happens for a reason"
Use the recipient's name when known — personalization matters
Short messages can be powerful — don't pad to fill space

Folded Card Message Structure

Front:   [Headline greeting or visual trigger]
Inside left:  [Optional quote or extended thought]
Inside right: [Main message body — personal note]
            [Signature line]
            [Optional: P.S. or closing note]
Back:    [Sender credit or card series mark]

Section 10: Emotional Design System

Every card must communicate one clear feeling. Design, message, and typography must all reinforce the same emotional direction.

Emotional Direction Map

Emotion	Triggers to use
Joyful	Bright colors, bold type, confetti motifs, upbeat message
Comforting	Soft pastels, gentle illustration, warm words, breathing space
Romantic	Script typography, blush/gold palette, flowers, intimate message
Grateful	Clean layout, warm tone, sincere message, modest decoration
Festive	Cultural motifs, saturated color, celebratory language
Respectful	Minimal decoration, structured layout, measured language
Playful	Rounded fonts, illustrative elements, fun message, color pop
Elegant	Serif type, white space, gold detail, refined message
Nostalgic	Vintage palette, classic type, memory-referencing message
Inspiring	Bold statement text, strong visual, clean motivational message
Encouraging	Warm tone, positive language, gentle visual
Warm & Personal	Handwritten feel, soft colors, personal reference in message

Section 11: Print and Digital Output Rules

Print-Ready Rules

Standard greeting card proportions: 5×7 in, 4×6 in, A5 (5.8×8.3 in), 5×5 in square
Include 3mm bleed on all sides (full-bleed designs)
Keep all critical text and visuals inside 3mm safe margin from trim edge
Minimum 300 DPI for all image exports
Use CMYK-safe colors (avoid saturated RGB values that shift in print)
Export formats: PDF (print-ready), PNG (300 DPI), SVG (editable)
Folded card: design at full unfolded size, then split at center fold line

Digital / E-Card Rules

Social story format: 1080×1920 px
Square post format: 1080×1080 px
Landscape e-card: 1920×1080 px
Keep all text readable at mobile screen size
Avoid very light text on white — mobile screens vary in brightness
Optimise file size: PNG under 500 KB, JPG under 200 KB for sharing
Easy forwarding format: WhatsApp, email, Instagram, social DM

Section 12: Premium Design Enhancements

When the occasion or client calls for it, include these elevated touches:

Print Premium Finishes (describe in spec notes)

Foil stamping: gold, silver, rose gold — for name, logo, or headline
Embossing / debossing: for borders, monograms, or logo marks
Spot UV gloss: on illustrations or headline text
Soft-touch matte lamination: on card stock — rich, velvet feel
Die cutting: custom shaped edges, window cutouts

Visual Premium Enhancements

Gold or silver line art details
Watercolor wash textures
Paper grain overlay
Ribbon or fabric-style frame
Layered paper effect (depth through shadow)
Soft gradient backgrounds
Confetti or botanical scattered elements
Elegant drop shadow on typography

Rules for Enhancements

Enhancements must support the emotion, not compete with it
Never add decoration just to fill space
Sympathy cards should use enhancement sparingly — one gentle texture maximum
Children's cards can be more freely decorated, but keep it legible
Premium cards use enhancement as elevation, not clutter

Section 13: Occasion-Specific Intelligence

Birthday

Default to energetic and joyful unless recipient context says otherwise
Child: bright colors, cartoon art, big fun fonts, rhyming or playful message
Teen: bold, pop-art or modern design, cultural references if known
Adult: can shift to premium or elegant depending on relationship
Milestone (30, 40, 50, 60): humor + nostalgia; honor the achievement

Anniversary

Number of years matters: first anniversary = fresh and romantic; 25th = silver, nostalgic; 50th = gold, grand
Couples context: use their names when possible
Avoid generic "Happy Anniversary" — reference the journey

Wedding

Tone: graceful, refined, celebratory, timeless
Avoid overly casual language
Use the couple's names when known
Design: clean and elegant — this card may be kept for years

Sympathy / Condolence

Never use bright colors
Never use humor
Never use clichés ("they're in a better place", "everything happens for a reason")
Use simple, honest, warm language: "I'm deeply sorry for your loss."
Design: minimal, calm — a single flower, a soft texture, open space
Leave room for the sender's personal message

Thank You

Sincere tone, not over-effusive
Clean design — the message does the work
Works well as a simple horizontal card with generous white space

Congratulations

Bold, uplifting, energetic
Match to the achievement: graduation ≠ promotion ≠ new baby
Personalize to the achievement when possible

Baby Shower / Newborn

Soft colors, cute illustration
Message can be for parents or for the baby (future-tense, whimsical)
Avoid gender-specific colors unless explicitly requested

Farewell / Retirement

Blend of warmth, gratitude, and forward-looking optimism
Can include a memory reference or inside language if the relationship is personal
Design: warm palette, typography-led or photo-ready

Graduation

Pride + possibility + encouragement
Energetic design: bold type, strong palette (navy/gold, black/white/gold)
Message: acknowledge the effort, celebrate the milestone, point toward the future

Festival Cards

Research and respect cultural context
- Diwali: warm gold, deep red/orange, diyas, lotus
- Christmas: red, green, gold, star, snow, evergreen
- Eid: crescent moon, geometric pattern, teal/gold/white
- Holi: burst of color, playful, joyful
- Pongal / Onam / Navratri: culturally specific motifs, regional warmth
Greet in the correct language or script when relevant
Never mix festival symbolism from different traditions

Section 14: Variation Rules

When multiple variations are requested, follow this structure:

Variation A — Safe and classic. Familiar, proven, works for most people.
Variation B — More modern or bold. A stronger visual statement.
Variation C — Most creative or premium. Maximum craft and intentionality.

Every variation must:

Match the same occasion
Match the same recipient
Maintain message correctness
Feel intentionally different in layout, style, or palette
Not simply repeat the same layout with different colors

Each variation should feel like a distinct design decision, not a recolor.

Section 15: Output Format

For every greeting card request, provide:

Card concept summary — one paragraph overview
Occasion and tone interpretation — what emotional direction this is
Front design description — visual + type + hierarchy
Inside or back description (if applicable)
Typography recommendations — font names, sizes, weights
Color palette — primary, secondary, accent, with hex values
Illustration or visual style direction — what artwork should look like
Message text — ready to use, appropriately written
Print/digital guidance — dimensions, DPI, export format
Optional premium enhancements — finishes and treatments
Variation set — if multiple versions requested
HTML/CSS/JS output — when code-first output is requested

Section 16: What to Avoid

Never:

Use an emotionally inappropriate tone for the occasion
Overcrowd the card with text or illustration
Mix clashing or discordant fonts
Use more than 4 colors without a strong reason
Ignore the recipient relationship (colleague ≠ best friend ≠ grandparent)
Generate generic message text when something personal is possible
Make sympathy or condolence cards bright, loud, or decorative
Use childish visuals for formal or professional cards
Skip print safety rules (bleed, margins, DPI) for print-intended cards
Make digital cards unreadable on mobile
Apply design trends that conflict with the emotional intent

Section 17: Design Thinking Framework

Before creating any card, process in this exact order:

What occasion is this? → Lock the emotional direction
Who is the recipient? → Calibrate relationship register and personal tone
What emotion should the card communicate? → Define the feeling to deliver
What style best expresses that emotion? → Choose illustration, typography, color
What layout best supports the message? → Folded, single, portrait, landscape
What typography and colors reinforce the tone? → Match every detail to the emotion
Is the final output beautiful, readable, and appropriate? → Review all elements together

A greeting card is not just decoration. It is a small emotional experience delivered in design, words, and layout. The best cards are ones the recipient keeps for years.

Section 18: Recommended Tech Stack

When generating greeting card output as code, use the following preferred stack.

Core Stack (default for all HTML output)

HTML5 — semantic structure
CSS3 — layout, animation, visual design
JavaScript ES6+ — interactivity, flip effects, export triggers

Optional Framework Stack

React — for card builders with live preview, variation switching
Next.js — for full-stack card generation tools with server rendering
Vue — lighter alternative to React for interactive card builders

Styling Options

Tool	When to use
Plain CSS	Single-file output, print-ready HTML
TailwindCSS	Rapid prototyping, class-utility layout
SCSS	Larger projects with shared variables and tokens
CSS Modules	React/Vue component-scoped styling

Animation and Interaction Libraries

Library	Use case
Framer Motion	React-based card flip animations, entrance effects
GSAP	Complex timeline animations, scroll-driven reveals
Web Animations API (WAAPI)	Native browser, zero dependencies, `element.animate()`
CSS `@keyframes` + `animation`	Simple loop animations (confetti, shimmer, fade-in)

Export and Preview Support

html2canvas — screenshot card view to PNG/JPG
jsPDF — HTML to PDF download
SVG export — for editable vector output
Blob URL download — programmatic file save from browser

Performance Rules for Animated Cards

Only animate transform and opacity — never layout properties (width, top, etc.)
Use will-change: transform JIT (apply just before animation, remove after)
GPU-force elements with translateZ(0) or translate3d(0,0,0) on 3D containers
Never apply overflow: hidden, filter, or opacity < 1 to a transform-style: preserve-3d element — doing so flattens the 3D context
Use requestAnimationFrame for smooth lerp/tween loops — never setInterval
Respect prefers-reduced-motion in all animated outputs

Section 19: Reusable Component Structure

When generating card output as modular code, use this component architecture.

Component Hierarchy

<CardApp>
  ├── <VariationSwitcher />       — toggle between A / B / C variants
  ├── <CardPreview>               — wraps front+back with 3D context
  │   ├── <CardFront />           — front face: visual, headline, tagline
  │   └── <CardBack />            — back face: message, signature, contact
  ├── <TypographyBlock />         — renders text hierarchy with correct styles
  ├── <ColorPaletteBlock />       — shows palette swatches and hex codes
  ├── <IllustrationBlock />       — holds SVG, image, or CSS art visual
  ├── <ContactInfoBlock />        — for cards needing sender contact details
  ├── <QRCodeBlock />             — renders QR code if required
  ├── <LogoBlock />               — sender/brand logo placement
  ├── <EnvelopePreview />         — optional matching envelope design
  └── <ExportButton />            — triggers PNG/PDF save

Component Rules

Each component receives data via props or data attributes — no hardcoded content
Components must work with any occasion without structural changes
Typography and color are tokens, not hardcoded values — change at root level
Export button must target the correct DOM node, not the full page
Variation switcher must smoothly transition without full reload

CSS Custom Property Token System

:root {
  /* Occasion tokens — override per-card */
  --card-bg:        #FFFFFF;
  --card-accent:    #E8160A;
  --card-text:      #1A1A1A;
  --card-subtext:   #6B7280;
  --card-font-head: 'Playfair Display', serif;
  --card-font-body: 'Inter', sans-serif;

  /* Layout tokens */
  --card-w:         5in;     /* change per size spec */
  --card-h:         7in;
  --card-padding:   0.3in;
  --card-radius:    6px;
  --card-bleed:     3mm;
}

Section 20: Code Snippet Library

Reference snippets for consistent implementation across all card outputs.

Snippet 1: Card Shell (print-safe HTML structure)

<div class="card-wrapper">
  <div class="card-face card-front">
    <!-- Visual, headline, tagline -->
  </div>
  <div class="card-face card-back">
    <!-- Message, signature, optional contact -->
  </div>
</div>

.card-wrapper {
  width: var(--card-w, 5in);
  height: var(--card-h, 7in);
  position: relative;
  transform-style: preserve-3d;    /* DO NOT add overflow:hidden here */
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;                /* Safe to put overflow on the face */
  border-radius: var(--card-radius, 6px);
  backface-visibility: hidden;
  padding: var(--card-padding, 0.3in);
  box-sizing: border-box;
}

.card-back {
  transform: rotateY(180deg);
}

Snippet 2: WAAPI Flip (front/back toggle)

let faceIsBack = false;
let activeFlip = null;

async function flipCard(wrapper) {
  if (activeFlip) activeFlip.cancel();
  const from = faceIsBack ? 180 : 0;
  const to   = faceIsBack ?   0 : 180;

  wrapper.style.willChange = 'transform'; // JIT
  activeFlip = wrapper.animate([
    { transform: `perspective(800px) rotateY(${from}deg)` },
    { transform: `perspective(800px) rotateY(${to}deg)`   }
  ], {
    duration: 600,
    easing:   'cubic-bezier(0.4, 0, 0.2, 1)',
    fill:     'forwards'
  });

  await activeFlip.finished;
  faceIsBack = !faceIsBack;
  wrapper.style.willChange = 'auto'; // remove after
}

Snippet 3: 3D Tilt on Hover (mouse parallax)

function init3DTilt(card, maxDeg = 12) {
  const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (REDUCED) return;

  let raf = null;
  let tx = 0, ty = 0, cx = 0, cy = 0;

  card.addEventListener('mousemove', e => {
    const r  = card.getBoundingClientRect();
    tx = (e.clientX - r.left  - r.width  / 2) / (r.width  / 2);
    ty = (e.clientY - r.top   - r.height / 2) / (r.height / 2);
  });
  card.addEventListener('mouseenter', () => {
    card.style.willChange = 'transform';
    raf = requestAnimationFrame(function tick() {
      cx += (tx - cx) * 0.14;
      cy += (ty - cy) * 0.14;
      card.style.transform =
        `perspective(900px) rotateX(${-cy * maxDeg}deg) rotateY(${cx * maxDeg}deg) scale(1.02)`;
      raf = requestAnimationFrame(tick);
    });
  });
  card.addEventListener('mouseleave', () => {
    cancelAnimationFrame(raf);
    tx = 0; ty = 0;
    const anim = card.animate(
      [{ transform: 'perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)' }],
      { duration: 440, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards' }
    );
    anim.finished.then(() => {
      card.style.transform = '';
      card.style.willChange = 'auto';
    });
  });
}

Snippet 4: Holographic Shimmer Overlay

@property --holo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card-holo {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent 0%,
    rgba(255, 80,  80,  0.05)  10%,
    rgba(255, 200, 0,   0.05)  20%,
    rgba(80,  255, 80,  0.05)  30%,
    rgba(0,   200, 255, 0.06)  40%,
    rgba(80,  80,  255, 0.05)  50%,
    rgba(255, 0,   200, 0.05)  60%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 5;
}

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const angle = Math.atan2(
    e.clientY - r.top  - r.height / 2,
    e.clientX - r.left - r.width  / 2
  ) * (180 / Math.PI);
  card.style.setProperty('--holo-angle', `${angle}deg`);
  holoEl.style.opacity = '1';
});
card.addEventListener('mouseleave', () => { holoEl.style.opacity = '0'; });

Snippet 5: PNG Export via html2canvas

async function exportCardAsPNG(cardElement, filename = 'greeting-card.png') {
  const canvas = await html2canvas(cardElement, {
    scale: 3,                      // 3× for sharp export
    useCORS: true,
    backgroundColor: null,         // preserve transparency
    logging: false
  });
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

Snippet 6: PDF Export via jsPDF

async function exportCardAsPDF(cardElement, filename = 'greeting-card.pdf') {
  const { jsPDF } = window.jspdf;
  const canvas = await html2canvas(cardElement, { scale: 4, useCORS: true });
  const imgData = canvas.toDataURL('image/jpeg', 1.0);

  // Portrait 5×7 in card
  const pdf = new jsPDF({ unit: 'in', format: [5, 7], orientation: 'portrait' });
  pdf.addImage(imgData, 'JPEG', 0, 0, 5, 7);
  pdf.save(filename);
}

Snippet 7: Print-Safe CSS Wrapper

/* Screen preview */
.card-print-wrapper {
  width: 5in;
  height: 7in;
  box-sizing: border-box;
  position: relative;
}

/* Actual print output */
@media print {
  body { margin: 0; }
  .card-print-wrapper {
    width: 5in; height: 7in;
    page-break-inside: avoid;
    box-shadow: none;
  }
  /* Bleed: extend 3mm beyond card edge */
  .card-face {
    margin: -3mm;
    padding: calc(var(--card-padding) + 3mm);
  }
}

Snippet 8: Shimmer / Confetti Entrance Animation

@keyframes confettiRain {
  from { translate: 0 -40px; opacity: 0; scale: 0.8; }
  to   { translate: 0 0;     opacity: 1; scale: 1;   }
}

.card-entrance {
  animation: confettiRain 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger multiple elements */
.card-entrance:nth-child(1) { animation-delay: 0.05s; }
.card-entrance:nth-child(2) { animation-delay: 0.12s; }
.card-entrance:nth-child(3) { animation-delay: 0.20s; }

Snippet 9: Folded Card Structure (full 4-panel)

<div class="folded-card-wrapper">

  <!-- Outer spread (back cover left, front cover right) -->
  <div class="fold-outer">
    <div class="panel back-cover"><!-- back cover content --></div>
    <div class="spine"></div>
    <div class="panel front-cover"><!-- front cover content --></div>
  </div>

  <!-- Inner spread (inside-left, inside-right) -->
  <div class="fold-inner">
    <div class="panel inside-left"><!-- visual/quote --></div>
    <div class="spine"></div>
    <div class="panel inside-right"><!-- main message --></div>
  </div>

</div>

.folded-card-wrapper { font-family: var(--card-font-body); }

.fold-outer,
.fold-inner {
  display: flex;
  width: calc(var(--card-w) * 2);
  height: var(--card-h);
}

.panel {
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  position: relative;
  padding: var(--card-padding);
  box-sizing: border-box;
}

.spine {
  width: 4px;
  background: linear-gradient(180deg, #DDD 0%, #BBB 50%, #DDD 100%);
  flex-shrink: 0;
}

Section 21: Reference Examples

Concrete reference patterns to guide generation across common scenarios.

Example 1: Minimalist Birthday Card (Adult, Elegant)

Concept: A clean, premium birthday card for a professional adult — restrained color, strong typography, no confetti.

Front:

Dark linen texture background (#1A1A1A)
Single centered headline: "Another Year of Being Extraordinary"
Font: Playfair Display, 54pt, white
Thin gold rule below (#C9A96E)

Inside:

Light cream background (#FAFAF6)
Handwritten-feel message in Inter Light 16pt, charcoal
Signature in italic serif

Color palette: #1A1A1A / #FAFAF6 / #C9A96E / #5C5248

Message example:

"Another year wiser, funnier, and somehow even more yourself. Happy birthday — here's to everything the next one brings."

Example 2: Wedding Card (Classic, Timeless)

Concept: Refined florals, script headline, ivory and blush.

Front:

Ivory background with watercolor floral wreath (top)
Script headline: "With Love on Your Wedding Day" (Great Vibes, 48pt)
Thin rose gold rule

Inside left: Extended floral motif, mirrored from front Inside right: Message in Cormorant Garamond 16pt, couple's names in script

Color palette: #FAF6F0 / #D4A5A5 / #C9A86C / #4A3728

Example 3: Kids' Birthday Card (Playful, Colorful)

Concept: Bold, loud, joyful — balloons, confetti, round fonts.

Front:

Bright teal background
Rainbow confetti CSS animation (entrance fade-in on load)
Big chunky text: "IT'S YOUR DAY!" (Fredoka One, 68pt, white)
Cartoon balloon SVGs at the top

Message example:

"Happy happy happy birthday! 🎂 You're [age] today and that's the most awesome thing ever!"

Color palette: #00BCD4 / #FFD700 / #FF6B6B / #FFFFFF

Example 4: Sympathy Card (Minimal, Gentle)

Concept: White and soft grey, single botanical element, honest message.

Front:

Clean white background
Single olive branch illustration (centre, restrained scale)
Headline: "With Deep Sympathy" — Lora serif, 28pt, #4A4A4A

Inside:

No decorative border
Message in Inter Light 15pt, generous line height
Ample white space — the emptiness carries feeling

Color palette: #F8F8F8 / #4A4A4A / #8A9E8A (olive green) / #CCCCCC

Message example:

"There are no words that make this easier. Please know you're held in our thoughts and that we're here for you, in whatever way you need."

Example 5: Thank You Card (Clean Professional)

Concept: Horizontal format, single accent color, clean grid.

Front:

White background with soft sage left border stripe (#7A9E7E, 8px)
Headline: "Thank You" — Playfair Display Bold, 44pt
Subline: "We genuinely appreciate you." — Inter 13pt, #888

Message example:

"Your help made all the difference. Thank you — truly."

Color palette: #FFFFFF / #7A9E7E / #1A1A1A / #888888

Example 6: Graduation Card (Bold, Modern)

Concept: Navy and gold, bold display type, forward-looking message.

Front:

Deep navy background (#0D1B2A)
Gold confetti entrance animation on load
Headline: "CONGRATULATIONS GRADUATE" — Bebas Neue or Oswald, 64pt, white
Year in gold: "2026"

Message example:

"All those early mornings, late nights, and moments of doubt led to exactly this. Congratulations — what you've achieved is real, and what's coming is even better."

Color palette: #0D1B2A / #C9A96E / #FFFFFF / #1C3A5A

Section 22: Implementation Rules

Rules for generating greeting card HTML/CSS/JS that is production-quality and print-safe.

Structural Rules

Use semantic HTML — <article>, <header>, <section>, <footer> inside card structure
Keep every card in a self-contained wrapper with scoped class names (no global overrides)
Never hardcode names, messages, or colors directly in logic — use data-* attributes or a JS config object at the top of the script

Layout Rules

All dimensions must use in or mm units for print-intended output
All dimensions must use px with proper 96 DPI conversion for screen-first output (1in = 96px)
Folded cards are designed at full unfolded width and split at center fold line
Maintain 3mm bleed on all sides for print; add bleed as negative margin on the inner face

Typography Rules

Load fonts from Google Fonts with display=swap to prevent FOUT
Define all font variables in :root so they can be swapped per occasion
Minimum body text size: 14px on screen, 10pt at print
Headlines must pass AA contrast against background (minimum 4.5:1 ratio)

Animation Rules

All entrance animations must trigger after fonts and images are loaded — use document.fonts.ready
Use @keyframes with individual transform properties (translate, scale, rotate) over compound transform where supported (Chrome 104+, Firefox 72+, Safari 14.1+)
WAAPI flip animations must use fill: 'forwards' and cancel the animation after anim.finished to return style control to CSS
Every animation file must include a prefers-reduced-motion fallback

Export Rules

Export function must target only the card element — not the full page
PNG export: use html2canvas with scale: 3 minimum for print-quality output
PDF export: use jsPDF with correct format set to card dimensions
File names must include the occasion and variant: birthday-card-varA.png

Security and Safety Rules

Never embed user-provided text into innerHTML — use .textContent or sanitize before insertion
Never load external images from user-provided URLs without validation
QR codes must be generated client-side (e.g., qrcode.js) — never proxy URLs
Export functions should not transmit card data to any server

Code Quality Rules

Extract shared card data (name, message, palette, fonts) into a single config object at the top of the script
Avoid !important in CSS — use specificity correctly
Group related CSS in clearly labelled comment blocks
Every interactive feature (flip, tilt, export) must have a keyboard-accessible equivalent

Example Config Object Pattern

const CARD_CONFIG = {
  recipient:  'Priya Sharma',
  occasion:   'birthday',
  tone:       'elegant',
  message:    'Another year wiser, funnier, and somehow even more yourself.',
  signatures: ['With love', 'Rajan'],
  palette: {
    bg:      '#1A1A1A',
    accent:  '#C9A96E',
    text:    '#FFFFFF',
    subtext: '#AAA8A0'
  },
  fonts: {
    headline: "'Playfair Display', serif",
    body:     "'Inter', sans-serif"
  }
};

Skill file: greeting-card.md — Covers occasions: birthdays, anniversaries, weddings, festivals, thank-you, sympathy, congratulations, get-well, baby shower, farewell, graduation. Tones: funny, emotional, elegant, premium, playful, minimalist, spiritual. Audiences: friends, family, kids, colleagues, clients, partner. Formats: folded card, single-sided card, e-card, print-ready.

name	greeting-card
description	Design occasion-appropriate greeting cards and e-cards (front/inside/back) with matched tone, typography, color, print specs, and export. Triggers on: greeting card, birthday card, anniversary card, wedding card, thank you card, sympathy card, congratulations card, festival card, holiday card, e-card, invitation card, folded card, card message.

Greeting Card Design Skill

Section 1: Role

Your task is to create thoughtful, beautiful, occasion-appropriate greeting card concepts that feel personal, polished, and emotionally correct for the recipient and event.

Think like a designer first, writer second, and print specialist always.

Section 2: Objective

Create greeting card designs and message concepts for both digital and print use.

The card must:

match the occasion
match the recipient relationship
communicate the correct emotional tone
use an attractive visual style
remain readable and well-balanced
feel personal, warm, and polished
be suitable for real-world sharing or printing

Every card should feel intentional, not generic.

Section 3: Inputs

Gather or infer the following details before generating a greeting card:

Occasion

Birthday
Anniversary
Wedding
Festival
Congratulations
Thank You
Get Well Soon
Sympathy / Condolence
Farewell
Graduation
Baby Shower
Housewarming
New Year
Christmas
Valentine's Day
Mother's Day
Father's Day
Friendship Day
Retirement
Apology
Other custom occasion

Recipient Details

Name
Relationship to sender (friend, family, colleague, client, partner, child)
Age group if relevant (child, teen, adult, elderly)
Gender expression if relevant and appropriate
Personality or style preference
Cultural or religious context if relevant

Message Details

Short message or long message
Formal or informal tone
Emotional tone: warm, funny, elegant, romantic, heartfelt, professional, joyful, comforting, celebratory
Whether the card should include a quote, poem, blessing, or custom note

Design Preferences

Color preferences
Theme style
Illustration style
Font style preference
Minimal or decorative
Cute, premium, festive, or artistic
Horizontal, vertical, or folded card
Print or digital format

Technical Preferences

Front-only, inside/outside, or full folded card
Envelope design required or not
Size preference (standard 5×7 in, A5, square 5×5, etc.)
Resolution preference (72 DPI digital / 300 DPI print)
Language preference
QR code or custom insert required or not

Section 4: Design Intelligence

Choose the design direction based on the occasion and emotion.

Tone Matching Rules

Birthday: joyful, playful, celebratory, colorful — can be premium or fun depending on recipient
Anniversary: romantic, intimate, sentimental, elegant, gold tones
Wedding: refined, graceful, celebratory, timeless
Sympathy: minimal, respectful, soft, comforting — never loud
Thank You: sincere, warm, clean, polished
Congratulations: uplifting, bold, confident, positive
Baby Shower / Newborn: soft, cute, warm, gentle
Farewell / Retirement: emotional, respectful, memorable, optimistic
Graduation: proud, energetic, modern
Get Well: cheerful, warm, encouraging, gentle
Festival: culturally appropriate, warm, festive, respectful

The card style must never conflict with the emotional meaning of the message. A sympathy card should never feel celebratory. A birthday card should never feel somber.

Section 5: Layout Rules

Support the following card structures:

1. Front-Only Card

Use for short messages, gift cards, social media greetings, and digital e-cards.

Single composition — everything on one face
The visual and text must coexist cleanly without fighting for space

2. Folded Greeting Card (Standard)

Four zones:

Front cover: main visual, headline or greeting, strong first impression
Inside left: decorative element or extended visual, optional quote/poem
Inside right: main message body, personal note, signature
Back cover (optional): sender info, card series mark, brand/studio credit, barcode area

3. Single-Page Vertical Card

Good for e-cards, posters, social media story formats, and printable flat cards.

Top: visual or illustration
Middle: headline
Bottom: message and signature

4. Double-Panel Celebration Card

Left panel: large visual or artwork
Right panel: message-oriented, clean typography

5. Premium Keepsake Card

Elegant white space
Refined typography — sparse, intentional
Decorative frame or border
Minimal text, maximum emotional impact

Layout Design Rules

celebratory cards can be vibrant and full
sympathy cards must be restrained, minimal, calm
luxury cards must breathe — never overcrowded
children's cards must be clear, bold, and immediately readable
always build hierarchy: headline → visual → message → signature

Section 6: Typography Rules

Typography is as emotional as the message itself. Choose fonts that carry the same feeling as the words.

Core Rules

Use no more than 2 fonts per design
One font for the headline or greeting line
One font for the body message or subtext
Maintain clear hierarchy: size, weight, and spacing
Keep all text legible — never sacrifice readability for style
Avoid decorative scripts for long paragraphs

Typography Moods

Mood	Font Style
Elegant	Serif (Playfair Display, Cormorant), refined script
Modern	Clean sans-serif (Inter, DM Sans, Plus Jakarta)
Romantic	Soft script (Great Vibes, Pacifico) + light serif
Playful	Rounded display (Nunito, Poppins Bold, Fredoka)
Formal	Clear serif (Lora, Merriweather) or professional sans
Kids/Fun	Cheerful, bubbly (Baloo, Fredoka One, Patrick Hand)
Premium	High-contrast serif + minimal supporting sans
Spiritual	Calligraphic or classical serif

Sizing Guidelines (print at 300 DPI)

Front headline: 48–80pt
Inside main message: 14–22pt
Signature line: 12–16pt
Fine print / credit: 8–10pt

Section 7: Color Rules

Choose colors based on emotion and occasion — not decoration alone.

Color by Occasion

Occasion	Palette Notes
Birthday	Bright, energetic: coral, yellow, teal, confetti colors
Anniversary	Warm and rich: deep red, rose gold, ivory, champagne
Wedding	Soft neutrals: white, blush, sage, ivory, gold
Sympathy	Muted and calm: soft grey, dusty blue, lavender, white
Thank You	Clean and sincere: soft sage, cream, dusty rose, white
Congratulations	Bright and confident: gold, yellow, sky blue, white
Baby Shower	Gentle and soft: mint, baby pink/blue, cloud white, peach
Farewell	Warm and wistful: warm amber, deep teal, soft beige
Graduation	Bold and proud: navy, gold, black and white
Festival	Culturally relevant (Diwali: gold/red/orange; Christmas: red/green/gold; Eid: teal/gold/white)

Rules

Use no more than 3–4 colors per design
Always ensure high text/background contrast
Avoid clashing combinations unless bold contrast is intentional
Support both light and dark background compositions
Validate color choices with the emotional direction before committing

Section 8: Illustration and Visual Style

Support a wide range of visual styles to match any occasion and audience.

Style Library

Style	Best For
Hand-drawn illustration	Personal, warm, artisanal cards
Watercolor	Floral, wedding, anniversary, gentle occasions
Flat vector art	Modern, clean, digital-first cards
Premium floral design	Wedding, anniversary, Mother's Day
Festive confetti style	Birthday, graduation, New Year
Elegant gold-line art	Luxury, anniversary, wedding
Cute cartoon style	Kids' birthdays, baby shower
Minimalist geometric	Modern congratulations, corporate thank-you
Paper-cut style	Festival cards, Christmas, cultural cards
Vintage style	Retirement, anniversary, nostalgic occasions
Abstract modern	Creative farewell, premium gift cards
Photographic	Personalized cards with real imagery

Style Selection Logic

Kids' birthday → bright, cute, cartoon or confetti
Wedding → elegant florals, soft watercolor, gold line art
Sympathy → minimal, calm motifs — feather, single flower, gentle wave
Thank You → simple and tasteful — botanical, ribbon, clean line
Festival → culturally rich and appropriate for the event

Section 9: Message Writing Rules

If the user does not provide a message, generate one that suits the occasion and tone.

Message Types

Short greeting (1–2 lines)
Heartfelt personal note (3–5 lines)
Formal message (professional and respectful)
Funny message (witty, light-hearted, tasteful)
Poetic message (rhyming or verse)
Quote-based card (sourced or original)
Blessing or wish (spiritual, warm)
Handwritten-style text (casual, flowing)

Writing Rules

Match the message register to the relationship — colleague ≠ best friend ≠ parent
Avoid generic fillers ("Wishing you a very happy...") — make it feel real
Keep humor tasteful — it should make the recipient smile, not cringe
For sympathy and condolence: use empathy, not clichés — no "everything happens for a reason"
Use the recipient's name when known — personalization matters
Short messages can be powerful — don't pad to fill space

Folded Card Message Structure

Front:   [Headline greeting or visual trigger]
Inside left:  [Optional quote or extended thought]
Inside right: [Main message body — personal note]
            [Signature line]
            [Optional: P.S. or closing note]
Back:    [Sender credit or card series mark]

Section 10: Emotional Design System

Every card must communicate one clear feeling. Design, message, and typography must all reinforce the same emotional direction.

Emotional Direction Map

Emotion	Triggers to use
Joyful	Bright colors, bold type, confetti motifs, upbeat message
Comforting	Soft pastels, gentle illustration, warm words, breathing space
Romantic	Script typography, blush/gold palette, flowers, intimate message
Grateful	Clean layout, warm tone, sincere message, modest decoration
Festive	Cultural motifs, saturated color, celebratory language
Respectful	Minimal decoration, structured layout, measured language
Playful	Rounded fonts, illustrative elements, fun message, color pop
Elegant	Serif type, white space, gold detail, refined message
Nostalgic	Vintage palette, classic type, memory-referencing message
Inspiring	Bold statement text, strong visual, clean motivational message
Encouraging	Warm tone, positive language, gentle visual
Warm & Personal	Handwritten feel, soft colors, personal reference in message

Section 11: Print and Digital Output Rules

Print-Ready Rules

Standard greeting card proportions: 5×7 in, 4×6 in, A5 (5.8×8.3 in), 5×5 in square
Include 3mm bleed on all sides (full-bleed designs)
Keep all critical text and visuals inside 3mm safe margin from trim edge
Minimum 300 DPI for all image exports
Use CMYK-safe colors (avoid saturated RGB values that shift in print)
Export formats: PDF (print-ready), PNG (300 DPI), SVG (editable)
Folded card: design at full unfolded size, then split at center fold line

Digital / E-Card Rules

Social story format: 1080×1920 px
Square post format: 1080×1080 px
Landscape e-card: 1920×1080 px
Keep all text readable at mobile screen size
Avoid very light text on white — mobile screens vary in brightness
Optimise file size: PNG under 500 KB, JPG under 200 KB for sharing
Easy forwarding format: WhatsApp, email, Instagram, social DM

Section 12: Premium Design Enhancements

When the occasion or client calls for it, include these elevated touches:

Print Premium Finishes (describe in spec notes)

Foil stamping: gold, silver, rose gold — for name, logo, or headline
Embossing / debossing: for borders, monograms, or logo marks
Spot UV gloss: on illustrations or headline text
Soft-touch matte lamination: on card stock — rich, velvet feel
Die cutting: custom shaped edges, window cutouts

Visual Premium Enhancements

Gold or silver line art details
Watercolor wash textures
Paper grain overlay
Ribbon or fabric-style frame
Layered paper effect (depth through shadow)
Soft gradient backgrounds
Confetti or botanical scattered elements
Elegant drop shadow on typography

Rules for Enhancements

Enhancements must support the emotion, not compete with it
Never add decoration just to fill space
Sympathy cards should use enhancement sparingly — one gentle texture maximum
Children's cards can be more freely decorated, but keep it legible
Premium cards use enhancement as elevation, not clutter

Section 13: Occasion-Specific Intelligence

Birthday

Default to energetic and joyful unless recipient context says otherwise
Child: bright colors, cartoon art, big fun fonts, rhyming or playful message
Teen: bold, pop-art or modern design, cultural references if known
Adult: can shift to premium or elegant depending on relationship
Milestone (30, 40, 50, 60): humor + nostalgia; honor the achievement

Anniversary

Number of years matters: first anniversary = fresh and romantic; 25th = silver, nostalgic; 50th = gold, grand
Couples context: use their names when possible
Avoid generic "Happy Anniversary" — reference the journey

Wedding

Tone: graceful, refined, celebratory, timeless
Avoid overly casual language
Use the couple's names when known
Design: clean and elegant — this card may be kept for years

Sympathy / Condolence

Never use bright colors
Never use humor
Never use clichés ("they're in a better place", "everything happens for a reason")
Use simple, honest, warm language: "I'm deeply sorry for your loss."
Design: minimal, calm — a single flower, a soft texture, open space
Leave room for the sender's personal message

Thank You

Sincere tone, not over-effusive
Clean design — the message does the work
Works well as a simple horizontal card with generous white space

Congratulations

Bold, uplifting, energetic
Match to the achievement: graduation ≠ promotion ≠ new baby
Personalize to the achievement when possible

Baby Shower / Newborn

Soft colors, cute illustration
Message can be for parents or for the baby (future-tense, whimsical)
Avoid gender-specific colors unless explicitly requested

Farewell / Retirement

Blend of warmth, gratitude, and forward-looking optimism
Can include a memory reference or inside language if the relationship is personal
Design: warm palette, typography-led or photo-ready

Graduation

Pride + possibility + encouragement
Energetic design: bold type, strong palette (navy/gold, black/white/gold)
Message: acknowledge the effort, celebrate the milestone, point toward the future

Festival Cards

Research and respect cultural context
- Diwali: warm gold, deep red/orange, diyas, lotus
- Christmas: red, green, gold, star, snow, evergreen
- Eid: crescent moon, geometric pattern, teal/gold/white
- Holi: burst of color, playful, joyful
- Pongal / Onam / Navratri: culturally specific motifs, regional warmth
Greet in the correct language or script when relevant
Never mix festival symbolism from different traditions

Section 14: Variation Rules

When multiple variations are requested, follow this structure:

Variation A — Safe and classic. Familiar, proven, works for most people.
Variation B — More modern or bold. A stronger visual statement.
Variation C — Most creative or premium. Maximum craft and intentionality.

Every variation must:

Match the same occasion
Match the same recipient
Maintain message correctness
Feel intentionally different in layout, style, or palette
Not simply repeat the same layout with different colors

Each variation should feel like a distinct design decision, not a recolor.

Section 15: Output Format

For every greeting card request, provide:

Card concept summary — one paragraph overview
Occasion and tone interpretation — what emotional direction this is
Front design description — visual + type + hierarchy
Inside or back description (if applicable)
Typography recommendations — font names, sizes, weights
Color palette — primary, secondary, accent, with hex values
Illustration or visual style direction — what artwork should look like
Message text — ready to use, appropriately written
Print/digital guidance — dimensions, DPI, export format
Optional premium enhancements — finishes and treatments
Variation set — if multiple versions requested
HTML/CSS/JS output — when code-first output is requested

Section 16: What to Avoid

Never:

Use an emotionally inappropriate tone for the occasion
Overcrowd the card with text or illustration
Mix clashing or discordant fonts
Use more than 4 colors without a strong reason
Ignore the recipient relationship (colleague ≠ best friend ≠ grandparent)
Generate generic message text when something personal is possible
Make sympathy or condolence cards bright, loud, or decorative
Use childish visuals for formal or professional cards
Skip print safety rules (bleed, margins, DPI) for print-intended cards
Make digital cards unreadable on mobile
Apply design trends that conflict with the emotional intent

Section 17: Design Thinking Framework

Before creating any card, process in this exact order:

What occasion is this? → Lock the emotional direction
Who is the recipient? → Calibrate relationship register and personal tone
What emotion should the card communicate? → Define the feeling to deliver
What style best expresses that emotion? → Choose illustration, typography, color
What layout best supports the message? → Folded, single, portrait, landscape
What typography and colors reinforce the tone? → Match every detail to the emotion
Is the final output beautiful, readable, and appropriate? → Review all elements together

A greeting card is not just decoration. It is a small emotional experience delivered in design, words, and layout. The best cards are ones the recipient keeps for years.

Section 18: Recommended Tech Stack

When generating greeting card output as code, use the following preferred stack.

Core Stack (default for all HTML output)

HTML5 — semantic structure
CSS3 — layout, animation, visual design
JavaScript ES6+ — interactivity, flip effects, export triggers

Optional Framework Stack

React — for card builders with live preview, variation switching
Next.js — for full-stack card generation tools with server rendering
Vue — lighter alternative to React for interactive card builders

Styling Options

Tool	When to use
Plain CSS	Single-file output, print-ready HTML
TailwindCSS	Rapid prototyping, class-utility layout
SCSS	Larger projects with shared variables and tokens
CSS Modules	React/Vue component-scoped styling

Animation and Interaction Libraries

Library	Use case
Framer Motion	React-based card flip animations, entrance effects
GSAP	Complex timeline animations, scroll-driven reveals
Web Animations API (WAAPI)	Native browser, zero dependencies, `element.animate()`
CSS `@keyframes` + `animation`	Simple loop animations (confetti, shimmer, fade-in)

Export and Preview Support

html2canvas — screenshot card view to PNG/JPG
jsPDF — HTML to PDF download
SVG export — for editable vector output
Blob URL download — programmatic file save from browser

Performance Rules for Animated Cards

Only animate transform and opacity — never layout properties (width, top, etc.)
Use will-change: transform JIT (apply just before animation, remove after)
GPU-force elements with translateZ(0) or translate3d(0,0,0) on 3D containers
Never apply overflow: hidden, filter, or opacity < 1 to a transform-style: preserve-3d element — doing so flattens the 3D context
Use requestAnimationFrame for smooth lerp/tween loops — never setInterval
Respect prefers-reduced-motion in all animated outputs

Section 19: Reusable Component Structure

When generating card output as modular code, use this component architecture.

Component Hierarchy

<CardApp>
  ├── <VariationSwitcher />       — toggle between A / B / C variants
  ├── <CardPreview>               — wraps front+back with 3D context
  │   ├── <CardFront />           — front face: visual, headline, tagline
  │   └── <CardBack />            — back face: message, signature, contact
  ├── <TypographyBlock />         — renders text hierarchy with correct styles
  ├── <ColorPaletteBlock />       — shows palette swatches and hex codes
  ├── <IllustrationBlock />       — holds SVG, image, or CSS art visual
  ├── <ContactInfoBlock />        — for cards needing sender contact details
  ├── <QRCodeBlock />             — renders QR code if required
  ├── <LogoBlock />               — sender/brand logo placement
  ├── <EnvelopePreview />         — optional matching envelope design
  └── <ExportButton />            — triggers PNG/PDF save

Component Rules

Each component receives data via props or data attributes — no hardcoded content
Components must work with any occasion without structural changes
Typography and color are tokens, not hardcoded values — change at root level
Export button must target the correct DOM node, not the full page
Variation switcher must smoothly transition without full reload

CSS Custom Property Token System

:root {
  /* Occasion tokens — override per-card */
  --card-bg:        #FFFFFF;
  --card-accent:    #E8160A;
  --card-text:      #1A1A1A;
  --card-subtext:   #6B7280;
  --card-font-head: 'Playfair Display', serif;
  --card-font-body: 'Inter', sans-serif;

  /* Layout tokens */
  --card-w:         5in;     /* change per size spec */
  --card-h:         7in;
  --card-padding:   0.3in;
  --card-radius:    6px;
  --card-bleed:     3mm;
}

Section 20: Code Snippet Library

Reference snippets for consistent implementation across all card outputs.

Snippet 1: Card Shell (print-safe HTML structure)

<div class="card-wrapper">
  <div class="card-face card-front">
    <!-- Visual, headline, tagline -->
  </div>
  <div class="card-face card-back">
    <!-- Message, signature, optional contact -->
  </div>
</div>

.card-wrapper {
  width: var(--card-w, 5in);
  height: var(--card-h, 7in);
  position: relative;
  transform-style: preserve-3d;    /* DO NOT add overflow:hidden here */
}

.card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;                /* Safe to put overflow on the face */
  border-radius: var(--card-radius, 6px);
  backface-visibility: hidden;
  padding: var(--card-padding, 0.3in);
  box-sizing: border-box;
}

.card-back {
  transform: rotateY(180deg);
}

Snippet 2: WAAPI Flip (front/back toggle)

let faceIsBack = false;
let activeFlip = null;

async function flipCard(wrapper) {
  if (activeFlip) activeFlip.cancel();
  const from = faceIsBack ? 180 : 0;
  const to   = faceIsBack ?   0 : 180;

  wrapper.style.willChange = 'transform'; // JIT
  activeFlip = wrapper.animate([
    { transform: `perspective(800px) rotateY(${from}deg)` },
    { transform: `perspective(800px) rotateY(${to}deg)`   }
  ], {
    duration: 600,
    easing:   'cubic-bezier(0.4, 0, 0.2, 1)',
    fill:     'forwards'
  });

  await activeFlip.finished;
  faceIsBack = !faceIsBack;
  wrapper.style.willChange = 'auto'; // remove after
}

Snippet 3: 3D Tilt on Hover (mouse parallax)

function init3DTilt(card, maxDeg = 12) {
  const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (REDUCED) return;

  let raf = null;
  let tx = 0, ty = 0, cx = 0, cy = 0;

  card.addEventListener('mousemove', e => {
    const r  = card.getBoundingClientRect();
    tx = (e.clientX - r.left  - r.width  / 2) / (r.width  / 2);
    ty = (e.clientY - r.top   - r.height / 2) / (r.height / 2);
  });
  card.addEventListener('mouseenter', () => {
    card.style.willChange = 'transform';
    raf = requestAnimationFrame(function tick() {
      cx += (tx - cx) * 0.14;
      cy += (ty - cy) * 0.14;
      card.style.transform =
        `perspective(900px) rotateX(${-cy * maxDeg}deg) rotateY(${cx * maxDeg}deg) scale(1.02)`;
      raf = requestAnimationFrame(tick);
    });
  });
  card.addEventListener('mouseleave', () => {
    cancelAnimationFrame(raf);
    tx = 0; ty = 0;
    const anim = card.animate(
      [{ transform: 'perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)' }],
      { duration: 440, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards' }
    );
    anim.finished.then(() => {
      card.style.transform = '';
      card.style.willChange = 'auto';
    });
  });
}

Snippet 4: Holographic Shimmer Overlay

@property --holo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card-holo {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent 0%,
    rgba(255, 80,  80,  0.05)  10%,
    rgba(255, 200, 0,   0.05)  20%,
    rgba(80,  255, 80,  0.05)  30%,
    rgba(0,   200, 255, 0.06)  40%,
    rgba(80,  80,  255, 0.05)  50%,
    rgba(255, 0,   200, 0.05)  60%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 5;
}

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const angle = Math.atan2(
    e.clientY - r.top  - r.height / 2,
    e.clientX - r.left - r.width  / 2
  ) * (180 / Math.PI);
  card.style.setProperty('--holo-angle', `${angle}deg`);
  holoEl.style.opacity = '1';
});
card.addEventListener('mouseleave', () => { holoEl.style.opacity = '0'; });

Snippet 5: PNG Export via html2canvas

async function exportCardAsPNG(cardElement, filename = 'greeting-card.png') {
  const canvas = await html2canvas(cardElement, {
    scale: 3,                      // 3× for sharp export
    useCORS: true,
    backgroundColor: null,         // preserve transparency
    logging: false
  });
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

Snippet 6: PDF Export via jsPDF

async function exportCardAsPDF(cardElement, filename = 'greeting-card.pdf') {
  const { jsPDF } = window.jspdf;
  const canvas = await html2canvas(cardElement, { scale: 4, useCORS: true });
  const imgData = canvas.toDataURL('image/jpeg', 1.0);

  // Portrait 5×7 in card
  const pdf = new jsPDF({ unit: 'in', format: [5, 7], orientation: 'portrait' });
  pdf.addImage(imgData, 'JPEG', 0, 0, 5, 7);
  pdf.save(filename);
}

Snippet 7: Print-Safe CSS Wrapper

/* Screen preview */
.card-print-wrapper {
  width: 5in;
  height: 7in;
  box-sizing: border-box;
  position: relative;
}

/* Actual print output */
@media print {
  body { margin: 0; }
  .card-print-wrapper {
    width: 5in; height: 7in;
    page-break-inside: avoid;
    box-shadow: none;
  }
  /* Bleed: extend 3mm beyond card edge */
  .card-face {
    margin: -3mm;
    padding: calc(var(--card-padding) + 3mm);
  }
}

Snippet 8: Shimmer / Confetti Entrance Animation

@keyframes confettiRain {
  from { translate: 0 -40px; opacity: 0; scale: 0.8; }
  to   { translate: 0 0;     opacity: 1; scale: 1;   }
}

.card-entrance {
  animation: confettiRain 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger multiple elements */
.card-entrance:nth-child(1) { animation-delay: 0.05s; }
.card-entrance:nth-child(2) { animation-delay: 0.12s; }
.card-entrance:nth-child(3) { animation-delay: 0.20s; }

Snippet 9: Folded Card Structure (full 4-panel)

<div class="folded-card-wrapper">

  <!-- Outer spread (back cover left, front cover right) -->
  <div class="fold-outer">
    <div class="panel back-cover"><!-- back cover content --></div>
    <div class="spine"></div>
    <div class="panel front-cover"><!-- front cover content --></div>
  </div>

  <!-- Inner spread (inside-left, inside-right) -->
  <div class="fold-inner">
    <div class="panel inside-left"><!-- visual/quote --></div>
    <div class="spine"></div>
    <div class="panel inside-right"><!-- main message --></div>
  </div>

</div>

.folded-card-wrapper { font-family: var(--card-font-body); }

.fold-outer,
.fold-inner {
  display: flex;
  width: calc(var(--card-w) * 2);
  height: var(--card-h);
}

.panel {
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  position: relative;
  padding: var(--card-padding);
  box-sizing: border-box;
}

.spine {
  width: 4px;
  background: linear-gradient(180deg, #DDD 0%, #BBB 50%, #DDD 100%);
  flex-shrink: 0;
}

Section 21: Reference Examples

Concrete reference patterns to guide generation across common scenarios.

Example 1: Minimalist Birthday Card (Adult, Elegant)

Concept: A clean, premium birthday card for a professional adult — restrained color, strong typography, no confetti.

Front:

Dark linen texture background (#1A1A1A)
Single centered headline: "Another Year of Being Extraordinary"
Font: Playfair Display, 54pt, white
Thin gold rule below (#C9A96E)

Inside:

Light cream background (#FAFAF6)
Handwritten-feel message in Inter Light 16pt, charcoal
Signature in italic serif

Color palette: #1A1A1A / #FAFAF6 / #C9A96E / #5C5248

Message example:

"Another year wiser, funnier, and somehow even more yourself. Happy birthday — here's to everything the next one brings."

Example 2: Wedding Card (Classic, Timeless)

Concept: Refined florals, script headline, ivory and blush.

Front:

Ivory background with watercolor floral wreath (top)
Script headline: "With Love on Your Wedding Day" (Great Vibes, 48pt)
Thin rose gold rule

Inside left: Extended floral motif, mirrored from front Inside right: Message in Cormorant Garamond 16pt, couple's names in script

Color palette: #FAF6F0 / #D4A5A5 / #C9A86C / #4A3728

Example 3: Kids' Birthday Card (Playful, Colorful)

Concept: Bold, loud, joyful — balloons, confetti, round fonts.

Front:

Bright teal background
Rainbow confetti CSS animation (entrance fade-in on load)
Big chunky text: "IT'S YOUR DAY!" (Fredoka One, 68pt, white)
Cartoon balloon SVGs at the top

Message example:

"Happy happy happy birthday! 🎂 You're [age] today and that's the most awesome thing ever!"

Color palette: #00BCD4 / #FFD700 / #FF6B6B / #FFFFFF

Example 4: Sympathy Card (Minimal, Gentle)

Concept: White and soft grey, single botanical element, honest message.

Front:

Clean white background
Single olive branch illustration (centre, restrained scale)
Headline: "With Deep Sympathy" — Lora serif, 28pt, #4A4A4A

Inside:

No decorative border
Message in Inter Light 15pt, generous line height
Ample white space — the emptiness carries feeling

Color palette: #F8F8F8 / #4A4A4A / #8A9E8A (olive green) / #CCCCCC

Message example:

"There are no words that make this easier. Please know you're held in our thoughts and that we're here for you, in whatever way you need."

Example 5: Thank You Card (Clean Professional)

Concept: Horizontal format, single accent color, clean grid.

Front:

White background with soft sage left border stripe (#7A9E7E, 8px)
Headline: "Thank You" — Playfair Display Bold, 44pt
Subline: "We genuinely appreciate you." — Inter 13pt, #888

Message example:

"Your help made all the difference. Thank you — truly."

Color palette: #FFFFFF / #7A9E7E / #1A1A1A / #888888

Example 6: Graduation Card (Bold, Modern)

Concept: Navy and gold, bold display type, forward-looking message.

Front:

Deep navy background (#0D1B2A)
Gold confetti entrance animation on load
Headline: "CONGRATULATIONS GRADUATE" — Bebas Neue or Oswald, 64pt, white
Year in gold: "2026"

Message example:

"All those early mornings, late nights, and moments of doubt led to exactly this. Congratulations — what you've achieved is real, and what's coming is even better."

Color palette: #0D1B2A / #C9A96E / #FFFFFF / #1C3A5A

Section 22: Implementation Rules

Rules for generating greeting card HTML/CSS/JS that is production-quality and print-safe.

Structural Rules

Use semantic HTML — <article>, <header>, <section>, <footer> inside card structure
Keep every card in a self-contained wrapper with scoped class names (no global overrides)
Never hardcode names, messages, or colors directly in logic — use data-* attributes or a JS config object at the top of the script

Layout Rules

All dimensions must use in or mm units for print-intended output
All dimensions must use px with proper 96 DPI conversion for screen-first output (1in = 96px)
Folded cards are designed at full unfolded width and split at center fold line
Maintain 3mm bleed on all sides for print; add bleed as negative margin on the inner face

Typography Rules

Load fonts from Google Fonts with display=swap to prevent FOUT
Define all font variables in :root so they can be swapped per occasion
Minimum body text size: 14px on screen, 10pt at print
Headlines must pass AA contrast against background (minimum 4.5:1 ratio)

Animation Rules

All entrance animations must trigger after fonts and images are loaded — use document.fonts.ready
Use @keyframes with individual transform properties (translate, scale, rotate) over compound transform where supported (Chrome 104+, Firefox 72+, Safari 14.1+)
WAAPI flip animations must use fill: 'forwards' and cancel the animation after anim.finished to return style control to CSS
Every animation file must include a prefers-reduced-motion fallback

Export Rules

Export function must target only the card element — not the full page
PNG export: use html2canvas with scale: 3 minimum for print-quality output
PDF export: use jsPDF with correct format set to card dimensions
File names must include the occasion and variant: birthday-card-varA.png

Security and Safety Rules

Never embed user-provided text into innerHTML — use .textContent or sanitize before insertion
Never load external images from user-provided URLs without validation
QR codes must be generated client-side (e.g., qrcode.js) — never proxy URLs
Export functions should not transmit card data to any server

Code Quality Rules

Extract shared card data (name, message, palette, fonts) into a single config object at the top of the script
Avoid !important in CSS — use specificity correctly
Group related CSS in clearly labelled comment blocks
Every interactive feature (flip, tilt, export) must have a keyboard-accessible equivalent

Example Config Object Pattern

const CARD_CONFIG = {
  recipient:  'Priya Sharma',
  occasion:   'birthday',
  tone:       'elegant',
  message:    'Another year wiser, funnier, and somehow even more yourself.',
  signatures: ['With love', 'Rajan'],
  palette: {
    bg:      '#1A1A1A',
    accent:  '#C9A96E',
    text:    '#FFFFFF',
    subtext: '#AAA8A0'
  },
  fonts: {
    headline: "'Playfair Display', serif",
    body:     "'Inter', sans-serif"
  }
};

greeting-card

More from this repository

More from this repository

Greeting Card Design Skill

Section 1: Role

Section 2: Objective

Section 3: Inputs

Occasion

Recipient Details

Message Details

Design Preferences

Technical Preferences

Section 4: Design Intelligence

Tone Matching Rules

Section 5: Layout Rules

1. Front-Only Card

2. Folded Greeting Card (Standard)

3. Single-Page Vertical Card

4. Double-Panel Celebration Card

5. Premium Keepsake Card

Layout Design Rules

Section 6: Typography Rules

Core Rules

Typography Moods

Sizing Guidelines (print at 300 DPI)

Section 7: Color Rules

Color by Occasion

Rules

Section 8: Illustration and Visual Style

Style Library

Style Selection Logic

Section 9: Message Writing Rules

Message Types

Writing Rules

Folded Card Message Structure

Section 10: Emotional Design System

Emotional Direction Map

Section 11: Print and Digital Output Rules

Print-Ready Rules

Digital / E-Card Rules

Section 12: Premium Design Enhancements

Print Premium Finishes (describe in spec notes)

Visual Premium Enhancements

Rules for Enhancements

Section 13: Occasion-Specific Intelligence

Birthday

Anniversary

Wedding

Sympathy / Condolence

Thank You

Congratulations

Baby Shower / Newborn

Farewell / Retirement

Graduation

Festival Cards

Section 14: Variation Rules

Section 15: Output Format

Section 16: What to Avoid

Section 17: Design Thinking Framework

Section 18: Recommended Tech Stack

Core Stack (default for all HTML output)

Optional Framework Stack

Styling Options

Animation and Interaction Libraries

Export and Preview Support

Performance Rules for Animated Cards

Section 19: Reusable Component Structure

Component Hierarchy

Component Rules

CSS Custom Property Token System

Section 20: Code Snippet Library

Snippet 1: Card Shell (print-safe HTML structure)

Snippet 2: WAAPI Flip (front/back toggle)

Snippet 3: 3D Tilt on Hover (mouse parallax)

Snippet 4: Holographic Shimmer Overlay

Snippet 5: PNG Export via html2canvas

Snippet 6: PDF Export via jsPDF

Snippet 7: Print-Safe CSS Wrapper

Snippet 8: Shimmer / Confetti Entrance Animation

Snippet 9: Folded Card Structure (full 4-panel)