Mémoire

Overview

Mémoire is a luxury heirloom brand that transforms personal history into tangible, collectible objects—primarily notebooks and stationery designed to be passed down through generations. The design system embodies "Refined Minimalism": a sophisticated aesthetic that prioritizes restraint, legibility, and the quiet dignity of serif typography. The visual language is deliberately austere—predominantly black, white, and deep teal—allowing the product photography and the user's own content to become the focal point. The emotional response is contemplative and timeless; users feel they are engaging with something precious, not ephemeral. Voice: measured, literary, never trendy. Example: "Each page is a moment preserved—your words, your handwriting, your legacy."

Colors

The color palette operates on a principle of "elegant constraint." Primary (#000000) is the dominant action color, used for all primary CTAs ("Join the List", "Shop the Devon Notebook") and body text, creating a high-contrast, legible interface. Secondary (#1c65ad), a deep cobalt blue, appears as a subtle accent in focus states and secondary interactive elements, providing visual interest without disrupting the minimalist aesthetic. Tertiary (#2d5a7b), a muted teal, is reserved for tertiary actions and hover states on cards. The surface stack is anchored in pure white (#ffffff) for maximum clarity, with container layers stepping down through grays (#e9ecef, #d0d0d0) to create subtle depth without introducing color. Error (#cf0000) is a vivid red reserved for validation and critical alerts.

Typography

The type system is unified around WT Kormelink, a serif font that conveys heritage and permanence. Display (120px, 400 weight, -0.02em tracking) is reserved for hero headlines and brand moments; Headline-lg (80px) and Headline-md (40px) establish section hierarchy with consistent 1.1 line-height, ensuring readability at large scales. Body-lg (18px) and Body-md (16px) are used for product descriptions and marketing copy, both at 400 weight with 1.5 line-height for comfortable reading. Label-md (14px) is the workhorse for UI labels, buttons, and form text. Label-sm (12px) in Grosa Mono (a monospace font) is applied to metadata, captions, and secondary information, with 0.05em letter-spacing to enhance legibility at small sizes. All headings use text-wrap: pretty to prevent orphaned words. Ap

Layout

The layout follows a 12-column grid (24 columns on screens ≥768px) with a maximum container width of 1250px. Page margins are set to max(10px, env(safe-area-inset-left)) to respect device notches and maintain safe spacing. Section separation uses the lg spacing token (40px) between major content blocks, creating a rhythm that feels generous without being excessive. The gutter between grid columns is 5px (--grid-gap: var(--space-micro)), allowing for tight, controlled layouts. White-space is treated as a design element: the hero section uses 190px top padding (--space-large + additional breathing room) to establish visual hierarchy. Container overlays and modals use a fixed 50px horizontal padding on desktop, reducing to 20px on mobile, ensuring content never feels cramped. The spacing scal

Elevation & Depth

Depth in Mémoire is achieved through subtle shadows and layering, not through color gradients or glassmorphism. Level 1 (Base): the white background (surface: #ffffff) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, input fields, and secondary containers, creating a gentle lift. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) for modal panels and elevated surfaces, signaling primary focus. The modal overlay uses a semi-transparent black backdrop (rgba(0, 0, 0, 0.3)) without blur, maintaining the crisp, unadorned

Shapes

The shape philosophy is "Architectural Precision"—sharp, rectilinear forms that echo the geometric purity of printed books and stationery. Buttons use border-radius: 0px (no rounding), maintaining a formal, typographic quality. Input fields and cards use border-radius: 4px (DEFAULT), a minimal softening that prevents harsh corners without introducing visual softness. Modals and elevated panels also use 4px, creating consistency across interactive surfaces. The full radius (100%) is reserved for badges and circular UI elements (e.g., close buttons). This restrained approach to rounding reinforc

Components

Action Elements Primary buttons (button-primary) use background-color: rgb(0, 0, 0), color: rgb(255, 255, 255), font-size: 20px, height: 50px, border-radius: 0px, and padding: 0px (full-width by default). On hover, the background transitions to #282828 over 50ms linear, providing tactile feedback. The button text is set in WT Kormelink at 400 weight, maintaining typographic consistency. Secondary buttons (button-secondary) use a transparent background with a 1px solid border (border-color: rgba(0, 0, 0, 0.44)), white text, and 10px vertical / 20px horizontal padding. On hover, the background becomes #e0e0e0, creating a subtle fill effect.

Containers & Surfaces Cards (card) use background-color: #e9ecef, border-radius: 4px, padding: 24px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1

Do's and Don'ts

**Do**

• Do use WT Kormelink serif for all body copy and headlines—it is the voice of the brand and should never be substituted.
• Do maintain the black-and-white contrast ratio of at least 21:1 for all body text and interactive elements to ensure accessibility and legibility.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and secondary containers; use 0 8px 24px rgba(0, 0, 0, 0.18) only for modals and primary overlays.
• Do use border-radius: 0px on primary buttons and border-radius: 4px on cards and inputs to maintain the architectural precision aesthetic.
• Do transition all hover states over 50ms linear (--hover-duration: 50ms, --hover-easing: linear) to provide responsive feedback without animation fatigue.
• Do respect the spacing scale: use xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for card padding, lg (40px) for section breaks, and xl (64px) for major layout shifts.

**Don't**

• Don't use rounded corners (border-radius > 4px) on buttons or primary interactive elements—sharp edges reinforce the timeless, typographic aesthetic.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error, and surface stack)—every color must serve a clear functional purpose.
• Don't apply blur or glassmorphism effects (backdrop-filter: blur) to overlays or modals—maintain crisp, unadorned surfaces.
• Don't use sans-serif fonts for body copy or headlines—WT Kormelink is the sole serif font for all text hierarchy.
• Don't animate transitions longer than 300ms (--slide-duration: 300ms) or use easing functions other than linear or cubic-bezier(0.4, 0, 0.2, 1) to avoid a sluggish, dated feel.
• Don't use color alone to convey status or meaning—always pair color with text labels or icons to ensure clarity for colorblind users.