Zombie Couple

Overview

Zombie Couple is a romantic AI video generator that transforms intimate couple and pet photography into cinematic gothic narratives. The brand embodies 'Romantic Gothicism'—a design movement that marries Victorian elegance with contemporary warmth, creating an emotionally resonant interface that celebrates love through the lens of supernatural reunion. The aesthetic evokes candlelit intimacy, aged parchment, and the bittersweet beauty of second chances. The UI prioritizes narrative clarity and emotional connection, guiding users through a three-act creative journey (template selection, photo upload, video preview) with the grace of a period film.

The brand voice is intimate, poetic, and gently humorous—never morbid or clinical. Tone: reverent yet playful, sophisticated yet accessible. The vocabulary favors romantic metaphors ('embrace,' 'reunion,' 'story') over technical jargon. Example sentence in brand voice: 'Your story companion awaits—choose a template, share your moments, and watch your reunion unfold.'

Colors

The color system centers on a warm, earthy foundation (surface: #faf8f5, a soft cream-beige) that evokes aged parchment and candlelit rooms. Primary (#68182c, a deep burgundy) serves as the brand's signature accent—used on CTAs ('Create,' 'Sign in'), active states, and romantic highlights. This burgundy is not arbitrary: it references Victorian mourning aesthetics and wine-dark romance, grounding the 'zombie' concept in elegance rather than horror. Secondary (#d8a574, a warm tan) and its container variant (#efb468, a golden amber) provide supporting warmth, used in decorative elements, badges, and secondary UI. Tertiary (#9c6571, a muted mauve) adds depth to tertiary actions and disabled states. The surface stack ranges from #ede9e4 (container-lowest, for recessed elements) to #d8d4cf (con

Typography

The type system pairs Cormorant Garamond (serif, used for display and headlines) with Manrope Variable (sans-serif, used for body and UI labels), creating a classical-meets-contemporary voice. Cormorant's high contrast and elegant proportions evoke period romance novels and vintage cinema, while Manrope's geometric warmth ensures modern readability on screens. Display (61px, 600 weight, -0.03em tracking) anchors the hero with dramatic presence; headline-lg (40px) and headline-md (28px) establish section hierarchy. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 24px line-height) are optimized for narrative copy and form instructions, with generous line-height (1.5–1.75) to enhance legibility over the warm background. Label-md (14px, 600 weight) and label-sm (12px, 500 weigh

Layout

The page follows a fluid 12-column grid with a max-width of 1440px, centered with symmetric gutters (24px on desktop, 16px on tablet). The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.15)) over a background image, ensuring text legibility while preserving atmospheric depth. The three-column layout below ('Choose a template,' 'Create your video,' 'Preview') uses lg spacing (40px) for section separation and md spacing (24px) for internal card padding. Template cards are arranged in a 2-column grid on desktop, 1-column on mobile, with 12px gaps between items. The form section (photo upload) uses a single-column layout with 24px vertical rhythm between form groups. White-space is generous but purposeful: the warm background (#faf8f5) breathes between sections,

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast, maintaining the romantic, soft aesthetic. Level 1 (Base): The warm background (#faf8f5) with no shadow. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), used on template cards and form containers. This soft, spread shadow (12px blur, 4px offset) creates subtle lift without drama. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), used on modal overlays and preview panels. The larger blur radius (40px) and offset (16px) create atmospheric depth, as if light is diffusing throu

Shapes

The shape philosophy is 'Refined Softness'—corners are rounded enough to feel contemporary and approachable, but not so rounded as to appear childish or overly playful. Buttons and inputs use rounded.lg (12px), creating a gentle, inviting appearance that contrasts with the sharp serif headlines. Template cards and modal content use rounded.xl (16px), emphasizing their role as primary containers. Form fields and badges use rounded.DEFAULT (6px) or rounded.md (8px), maintaining visual hierarchy without visual noise. The full-radius pill shape (rounded.full, 9999px) is reserved for toggle buttons

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background: #68182c, text: white, rounded: 12px, padding: 12px 24px, height: 48px) uses the signature burgundy with a 200ms ease transition. On hover, the background shifts to #a54962 (primary-container) with an added box-shadow: 0 4px 12px rgba(104, 24, 44, 0.2), creating a subtle lift. On active/pressed, the background darkens to #4a0f1f with reduced shadow (0 2px 8px rgba(104, 24, 44, 0.15)), indicating commitment. Button-secondary (transparent background, 1px border in #7a6f6a, text: #68182c) provides a softer alternative for secondary actions like 'Sign in.' On hover, the background fills with #e0dcd7 (surface-container-high) and the border shifts to primary, creating a gentle reveal effect. All buttons

Do's and Don'ts

**Do**

• Do use the burgundy primary (#68182c) sparingly on CTAs and active states—it's a signature accent, not a background color.
• Do pair Cormorant Garamond headlines with Manrope Variable body text to maintain the classical-romantic voice.
• Do apply 200ms ease transitions to all interactive elements (buttons, cards, inputs) to reinforce the unhurried, romantic pacing.
• Do use the warm surface palette (#faf8f5, #ede9e4) as your foundation—it evokes aged parchment and candlelit intimacy.
• Do maintain generous white-space (lg spacing: 40px between sections) to create a sense of narrative flow and breathing room.
• Do use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) for standard cards and 0 16px 40px rgba(0, 0, 0, 0.12) for modals to create atmospheric depth.

**Don't**

• Don't use harsh black (#000000) or pure white (#ffffff) as primary text or background—stick to the warm, aged palette (#1a1410 on #faf8f5).
• Don't apply rounded corners larger than 16px (rounded.xl) to primary UI elements—it dilutes the sophisticated, refined aesthetic.
• Don't use the error red (#b3261e) for non-error states; it's reserved for validation and destructive actions.
• Don't mix serif and sans-serif within a single headline or button label—maintain clear typographic hierarchy (serif for display, sans for UI).
• Don't use box-shadow values larger than 0 16px 40px rgba(0, 0, 0, 0.12)—excessive shadows undermine the romantic, soft aesthetic.
• Don't apply the primary burgundy (#68182c) to body text or large surface areas—it's an accent color, not a dominant color.