Luminary
Memory & Gift
Design Documentation

Brand Identity Direction

Luminary exists at the intersection of artistry and emotion — where handcrafted gifts become keepsakes that outlast lifetimes. The brand voice is poetic, unhurried, and deeply personal.

Visual Design System

A design language built on warmth, restraint, and organic texture. Inspired by Japanese wabi-sabi aesthetics, Scandinavian minimalism, and the warm tones of aged parchment and burnished gold.

Design Principles

Color Palette

A warm, restrained palette inspired by aged ivory, candlelight, burnished gold, and the natural patina of handcrafted objects. No primary colors. No vibrancy for its own sake.

Typography System

Two complementary typefaces that together create a feeling of editorial luxury and emotional intimacy. The serif carries the heart; the sans-serif carries the message.

Homepage Structure

The homepage is not a storefront. It is an emotional journey. Each section builds desire, establishes trust, and gently guides the visitor toward the product that is meant for them.

Emotional Storytelling Strategy

The most powerful purchase motivator is not logic — it is identity. "What does it say about me if I give this?" Design every touchpoint to answer: "I am someone who truly sees the people I love."

Hero Copy Concepts

Product Page Architecture

The product page is where emotion converts to action. It must do three things: make the visitor feel it's for them, make the product feel worth its price, and make the path to purchase effortless.

Product Cards — Style

Checkout Flow

The checkout must feel like an extension of the gift experience, not an interruption. Progress should feel gentle, trust should be constant, and the confirmation should feel like a celebration.

Navbar & Footer

Navbar — Desktop

Footer — Dark Premium

Buttons & UI Components

Luxury Spacing System

In luxury design, space communicates worth. Every spacing decision is an investment in perceived value.

Glassmorphism Usage

Used sparingly and purposefully — never as decoration, always to layer information on rich visual backgrounds. Glass says "premium" when used correctly.

.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}

.glass-gold {
  background: rgba(201,169,110,0.06);
  border-color: rgba(201,169,110,0.2);
}

Animation & Micro-interaction System

Every animation should feel like a breath — natural, unhurried, purposeful. Animations build the emotional experience; they are never decorative.

Product Customisation Experience

Personalisation is not a form field — it is part of the gift experience. The customisation flow should feel as meaningful as the product itself.

User Dashboard — Memory Vault

The user account is not "My Account" — it is the "Memory Vault." A personal archive of moments, orders, and reminders. It should feel like a private journal, not a utility screen.

Admin Panel Design

The admin panel serves the artisan team, not just the business owner. It must handle custom order management, personalisation review, and production workflow as a priority.

AI-Powered Personalisation

AI is invisible here. It works behind the scenes to make every visitor feel like the site was built for them. The customer should feel understood, not tracked.

Mobile-First Experience

Mobile is not a shrunk-down desktop. It is the primary canvas. Emotional buyers discover on Instagram, land on a product page, and purchase — all on a phone. Design for that journey.

React + Tailwind Architecture

A component hierarchy designed for emotional experiences. State is managed close to where it matters. The architecture is lean, purposeful, and extensible.

// tailwind.config.js — Luminary tokens
module.exports = {
  theme: {
    extend: {
      colors: {
        ivory:   '#FAF7F2',
        cream:   '#F3EDE3',
        gold: {
          DEFAULT: '#C9A96E',
          light:   '#E8D5B0',
          dark:    '#9A7840',
        },
        charcoal: '#1C1A17',
        stone:    '#6B6460',
        blush:    '#E8D5D0',
      },
      fontFamily: {
        display: ['Cormorant Garamond', 'Georgia'],
        heading: ['Playfair Display', 'Georgia'],
        body:    ['DM Sans', 'sans-serif'],
      },
      spacing: {
        'section': '96px',
        'hero':    '128px',
      }
    }
  }
}

// ScrollReveal component
const ScrollReveal = ({ children, delay=0 }) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => entry.isIntersecting 
        && setVisible(true),
      { threshold: 0.15 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible 
        ? 'none' 
        : 'translateY(24px)',
      transition: `all 700ms 
        cubic-bezier(.25,.46,.45,.94) 
        ${delay}ms`
    }}>
      {children}
    </div>
  );
};

Category & Occasion Pages

SEO Landing Pages

Trust & Social Proof

Image & Visual Direction

Every photograph must carry the emotional weight of the brand. These prompts guide product photography, lifestyle shots, and AI-generated supporting visuals.

Conversion Optimisation

Emotional products convert when the visitor feels seen. The strategy is not persuasion — it is resonance. Make them feel understood, and the purchase follows naturally.