Plush Past

Overview

Plush Past is a curated marketplace for authenticated pre-owned luxury fashion that embodies **Heritage Minimalism**—a design philosophy that honors timeless craftsmanship through restrained, warm aesthetics. The brand serves discerning collectors and conscious luxury consumers who value provenance, authenticity, and the patina of well-loved designer pieces. The visual identity evokes the tactile warmth of vintage leather, the refined restraint of a gallery, and the quiet confidence of heritage brands. Every interface element—from the warm taupe accent (#c8ad89) to the generous whitespace—communicates expertise without pretension, inviting users to explore curated collections with the same care a museum curator would apply to a collection.

The brand voice is knowledgeable yet approachable, authoritative without gatekeeping. Plush Past speaks in the language of fashion insiders but welcomes newcomers: precise about provenance, generous with context, never breathless or hyperbolic. The tone favors active verbs, concrete details, and the language of craft. Example: "This 2008 Hermès Birkin shows the patina of daily wear—a mark of authenticity and love." Typography pairs the serif warmth of Boska (used for headlines and hero moments) with the clean, modern Jost sans-serif (for body copy and interface labels), creating a visual conversation between heritage and contemporary clarity.

Colors

The color system centers on a warm, sophisticated palette rooted in the tactile world of luxury leather and natural materials. **Primary (#c8ad89)** is the brand's signature taupe—a warm, desaturated brown that appears on all call-to-action buttons, interactive states, and key brand moments. This color is never aggressive; it whispers rather than shouts, reflecting the brand's curatorial restraint. It is used for: primary buttons (background: #c8ad89, text: #ffffff), focus states on inputs (border: #c8ad89, shadow: rgba(200, 173, 137, 0.1)), and accent badges marking authenticated or featured items. **Secondary (#ffbb54)** is a warm golden-amber, reserved for star ratings, limited-time badges, and secondary accent moments; it adds energy without disrupting the warm-neutral palette. **Terti

Typography

The type system pairs two distinct voices: **Boska** (a custom serif in Light and Regular weights) anchors headlines and hero moments with heritage authority, while **Jost** (a geometric sans-serif) handles body copy, labels, and interface text with contemporary clarity. Display (60px, Boska Light, -0.02em tracking) is reserved for homepage hero and major section titles, commanding attention through scale and weight rather than color. Headline-lg (40px, Boska Regular, -0.01em) and headline-md (28px, Boska Regular) are used for product category headers, collection titles, and major content sections. Body-lg (18px, Jost, 400 weight, 28px line-height) is used for product descriptions and long-form content, while body-md (16px, Jost, 400 weight, 24px line-height) handles standard interface cop

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive rhythm across breakpoints. The gutter between columns is 24px (md spacing), and section separation uses lg spacing (40px) to create breathing room between major content blocks. The container padding follows a mobile-first approach: 12px (sm) on mobile, 24px (md) on tablet, and 40px (lg) on desktop. Product grids use a 2-column layout on mobile, 3 columns on tablet, and 4 columns on desktop, with consistent 24px gaps between items. The homepage hero spans full-width with a max-width constraint to prevent text from becoming unwieldy on ultra-wide displays. Whitespace is treated as a design material: generous margins around featured collections (40px top/bottom), breathing room inside cards (24

Elevation & Depth

Depth in this system is achieved through subtle layering and soft shadows rather than dramatic contrast. **Level 1 (Base)**: The background is pure white (#ffffff) with no shadow; this is the canvas. **Level 2 (Standard Cards & Containers)**: Cards use background: #fdf9f2 (warm off-white) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) and a 1px border at rgba(24, 24, 24, 0.1) to define edges without visual weight. On hover, the shadow elevates to 0 4px 12px rgba(0, 0, 0, 0.08), and the background shifts to #efefef, signaling interactivity. **Level 3 (Modals, Dropdowns, Elevated Surfaces)**: Th

Shapes

The shape language is **Refined Geometry**—a balance between the sharp precision of contemporary design and the soft approachability of heritage aesthetics. Buttons use rounded: lg (1rem / 16px) for a modern, friendly appearance that avoids both sharp corners and excessive roundness. Cards and containers use rounded: xl (1.5rem / 24px) to create a sophisticated, gallery-like feel. Input fields use rounded: DEFAULT (0.5rem / 8px) for a subtle, understated presence that doesn't compete with content. Badges and small accent elements use rounded: full (9999px) to create perfect circles or pills, e

Components

Action Elements **Button-Primary** (background: #c8ad89, text: #ffffff, height: 48px, padding: 12px 24px, rounded: 1rem) is the primary call-to-action for all critical user flows: "Add to Cart," "Buy Now," "View Collection." On hover, the background shifts to #b49c7b (inverse-primary) and gains a soft shadow (0 4px 12px rgba(200, 173, 137, 0.2)), creating a tactile sense of depth. The transition uses 0.15s linear timing for snappy feedback. **Button-Secondary** (background: transparent, border: 1px solid #d1d1d1, text: #c8ad89, height: 48px, padding: 12px 24px, rounded: 1rem) is used for secondary actions like "View All," "Learn More," or "Cancel." On hover, the background becomes #efefef and the border shifts to #c8ad89, maintaining visual hierarchy without competing with primary acti

Do's and Don'ts

**Do**

• Do use the warm taupe primary (#c8ad89) exclusively for call-to-action buttons and interactive focus states—it is the brand's signature accent and should never be diluted or overused.
• Do maintain generous whitespace (40px lg spacing) between major content sections to create a gallery-like, curatorial feel that respects the user's attention.
• Do pair Boska serif headlines with Jost sans-serif body copy to create a visual conversation between heritage and contemporary clarity—never reverse this pairing.
• Do apply soft, spread shadows (0 4px 12px rgba(0, 0, 0, 0.08)) on hover states to create a sense of tactile elevation without visual drama.
• Do use the warm off-white surface-container-lowest (#fdf9f2) for accent backgrounds and card containers to echo the primary color's warmth and create visual cohesion.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—always use on-primary (#ffffff) or on-surface (#181818) to maintain the refined, warm aesthetic.
• Don't apply heavy shadows (box-shadow: 0 16px 40px) to standard cards or containers—reserve Level 3 shadows for modals and elevated surfaces only.
• Don't use the secondary color (#ffbb54) as a primary accent or button background—it is reserved for ratings, badges, and secondary highlights to avoid visual chaos.
• Don't apply border-radius values smaller than 0.5rem (8px) to buttons or major interactive elements—the refined geometry philosophy requires at least 1rem (16px) for primary CTAs.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph—maintain clear typographic hierarchy by using Boska for all headlines and Jost for all body copy.