1# Design System: Furniture Collections List
2**Project ID:** 13534454087919359824
3 
4## 1. Visual Theme & Atmosphere
5 
6The Furniture Collections List embodies a **sophisticated, minimalist sanctuary** that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation. The interface feels **spacious and tranquil**, prioritizing breathing room and visual clarity above all else. The design philosophy is gallery-like and photography-first, allowing each furniture piece to command attention as an individual art object.
7 
8The overall mood is **airy yet grounded**, creating an aspirational aesthetic that remains approachable and welcoming. The interface feels **utilitarian in its restraint** but elegant in its execution, with every element serving a clear purpose while maintaining visual sophistication. The atmosphere evokes the serene ambiance of a high-end furniture showroom where customers can browse thoughtfully without visual overwhelm.
9 
10**Key Characteristics:**
11- Expansive whitespace creating generous breathing room between elements
12- Clean, architectural grid system with structured content blocks
13- Photography-first presentation with minimal UI interference
14- Whisper-soft visual hierarchy that guides without shouting
15- Refined, understated interactive elements
16- Professional yet inviting editorial tone
17 
18## 2. Color Palette & Roles
19 
20### Primary Foundation
21- **Warm Barely-There Cream** (#FCFAFA) – Primary background color. Creates an almost imperceptible warmth that feels more inviting than pure white, serving as the serene canvas for the entire experience.
22- **Crisp Very Light Gray** (#F5F5F5) – Secondary surface color used for card backgrounds and content areas. Provides subtle visual separation while maintaining the airy, ethereal quality.
23 
24### Accent & Interactive
25- **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette. Used exclusively for primary call-to-action buttons (e.g., "Shop Now", "View all products"), active navigation links, selected filter states, and subtle interaction highlights. This sophisticated anchor color creates visual focus points without disrupting the serene neutral foundation.
26 
27### Typography & Text Hierarchy
28- **Charcoal Near-Black** (#2C2C2C) – Primary text color for headlines and product names. Provides strong readable contrast while being softer and more refined than pure black.
29- **Soft Warm Gray** (#6B6B6B) – Secondary text used for body copy, product descriptions, and supporting metadata. Creates clear typographic hierarchy without harsh contrast.
30- **Ultra-Soft Silver Gray** (#E0E0E0) – Tertiary color for borders, dividers, and subtle structural elements. Creates separation so gentle it's almost imperceptible.
31 
32### Functional States (Reserved for system feedback)
33- **Success Moss** (#10B981) – Stock availability, confirmation states, positive indicators
34- **Alert Terracotta** (#EF4444) – Low stock warnings, error states, critical alerts
35- **Informational Slate** (#64748B) – Neutral system messages, informational callouts
36 
37## 3. Typography Rules
38 
39**Primary Font Family:** Manrope  
40**Character:** Modern, geometric sans-serif with gentle humanist warmth. Slightly rounded letterforms that feel contemporary yet approachable.
41 
42### Hierarchy & Weights
43- **Display Headlines (H1):** Semi-bold weight (600), generous letter-spacing (0.02em for elegance), 2.75-3.5rem size. Used sparingly for hero sections and major page titles.
44- **Section Headers (H2):** Semi-bold weight (600), subtle letter-spacing (0.01em), 2-2.5rem size. Establishes clear content zones and featured collections.
45- **Subsection Headers (H3):** Medium weight (500), normal letter-spacing, 1.5-1.75rem size. Product names and category labels.
46- **Body Text:** Regular weight (400), relaxed line-height (1.7), 1rem size. Descriptions and supporting content prioritize comfortable readability.
47- **Small Text/Meta:** Regular weight (400), slightly tighter line-height (1.5), 0.875rem size. Prices, availability, and metadata remain legible but visually recessive.
48- **CTA Buttons:** Medium weight (500), subtle letter-spacing (0.01em), 1rem size. Balanced presence without visual aggression.
49 
50### Spacing Principles
51- Headers use slightly expanded letter-spacing for refined elegance
52- Body text maintains generous line-height (1.7) for effortless reading
53- Consistent vertical rhythm with 2-3rem between related text blocks
54- Large margins (4-6rem) between major sections to reinforce spaciousness
55 
56## 4. Component Stylings
57 
58### Buttons
59- **Shape:** Subtly rounded corners (8px/0.5rem radius) – approachable and modern without appearing playful or childish
60- **Primary CTA:** Deep Muted Teal-Navy (#294056) background with pure white text, comfortable padding (0.875rem vertical, 2rem horizontal)
61- **Hover State:** Subtle darkening to deeper navy, smooth 250ms ease-in-out transition
62- **Focus State:** Soft outer glow in the primary color for keyboard navigation accessibility
63- **Secondary CTA (if needed):** Outlined style with Deep Muted Teal-Navy border, transparent background, hover fills with whisper-soft teal tint
64 
65### Cards & Product Containers
66- **Corner Style:** Gently rounded corners (12px/0.75rem radius) creating soft, refined edges
67- **Background:** Alternates between Warm Barely-There Cream and Crisp Very Light Gray based on layering needs
68- **Shadow Strategy:** Flat by default. On hover, whisper-soft diffused shadow appears (`0 2px 8px rgba(0,0,0,0.06)`) creating subtle depth
69- **Border:** Optional hairline border (1px) in Ultra-Soft Silver Gray for delicate definition when shadows aren't present
70- **Internal Padding:** Generous 2-2.5rem creating comfortable breathing room for content
71- **Image Treatment:** Full-bleed at the top of cards, square or 4:3 ratio, seamless edge-to-edge presentation
72 
73### Navigation
74- **Style:** Clean horizontal layout with generous spacing (2-3rem) between menu items
75- **Typography:** Medium weight (500), subtle uppercase, expanded letter-spacing (0.06em) for refined sophistication
76- **Default State:** Charcoal Near-Black text
77- **Active/Hover State:** Smooth 200ms color transition to Deep Muted Teal-Navy
78- **Active Indicator:** Thin underline (2px) in Deep Muted Teal-Navy appearing below current section
79- **Mobile:** Converts to elegant hamburger menu with sliding drawer
80 
81### Inputs & Forms
82- **Stroke Style:** Refined 1px border in Soft Warm Gray
83- **Background:** Warm Barely-There Cream with transition to Crisp Very Light Gray on focus
84- **Corner Style:** Matching button roundness (8px/0.5rem) for visual consistency
85- **Focus State:** Border color shifts to Deep Muted Teal-Navy with subtle outer glow
86- **Padding:** Comfortable 0.875rem vertical, 1.25rem horizontal for touch-friendly targets
87- **Placeholder Text:** Ultra-Soft Silver Gray, elegant and unobtrusive
88 
89### Product Cards (Specific Pattern)
90- **Image Area:** Square (1:1) or landscape (4:3) ratio filling card width completely
91- **Content Stack:** Product name (H3), brief descriptor, material/finish, price
92- **Price Display:** Emphasized with semi-bold weight (600) in Charcoal Near-Black
93- **Hover Behavior:** Gentle lift effect (translateY -4px) combined with enhanced shadow
94- **Spacing:** Consistent 1.5rem internal padding below image
95 
96## 5. Layout Principles
97 
98### Grid & Structure
99- **Max Content Width:** 1440px for optimal readability and visual balance on large displays
100- **Grid System:** Responsive 12-column grid with fluid gutters (24px mobile, 32px desktop)
101- **Product Grid:** 4 columns on large desktop, 3 on desktop, 2 on tablet, 1 on mobile
102- **Breakpoints:** 
103  - Mobile: <768px
104  - Tablet: 768-1024px  
105  - Desktop: 1024-1440px
106  - Large Desktop: >1440px
107 
108### Whitespace Strategy (Critical to the Design)
109- **Base Unit:** 8px for micro-spacing, 16px for component spacing
110- **Vertical Rhythm:** Consistent 2rem (32px) base unit between related elements
111- **Section Margins:** Generous 5-8rem (80-128px) between major sections creating dramatic breathing room
112- **Edge Padding:** 1.5rem (24px) mobile, 3rem (48px) tablet/desktop for comfortable framing
113- **Hero Sections:** Extra-generous top/bottom padding (8-12rem) for impactful presentation
114 
115### Alignment & Visual Balance
116- **Text Alignment:** Left-aligned for body and navigation (optimal readability), centered for hero headlines and featured content
117- **Image to Text Ratio:** Heavily weighted toward imagery (70-30 split) reinforcing photography-first philosophy
118- **Asymmetric Balance:** Large hero images offset by compact, refined text blocks
119- **Visual Weight Distribution:** Strategic use of whitespace to draw eyes to hero products and primary CTAs
120- **Reading Flow:** Clear top-to-bottom, left-to-right pattern with intentional focal points
121 
122### Responsive Behavior & Touch
123- **Mobile-First Foundation:** Core experience designed and perfected for smallest screens first
124- **Progressive Enhancement:** Additional columns, imagery, and details added gracefully at larger breakpoints
125- **Touch Targets:** Minimum 44x44px for all interactive elements (WCAG AAA compliant)
126- **Image Optimization:** Responsive images with appropriate resolutions for each breakpoint, lazy-loading for performance
127- **Collapsing Strategy:** Navigation collapses to hamburger, grid reduces columns, padding scales proportionally
128 
129## 6. Design System Notes for Stitch Generation
130 
131When creating new screens for this project using Stitch, reference these specific instructions:
132 
133### Language to Use
134- **Atmosphere:** "Sophisticated minimalist sanctuary with gallery-like spaciousness"
135- **Button Shapes:** "Subtly rounded corners" (not "rounded-md" or "8px")
136- **Shadows:** "Whisper-soft diffused shadows on hover" (not "shadow-sm")
137- **Spacing:** "Generous breathing room" and "expansive whitespace"
138 
139### Color References
140Always use the descriptive names with hex codes:
141- Primary CTA: "Deep Muted Teal-Navy (#294056)"
142- Backgrounds: "Warm Barely-There Cream (#FCFAFA)" or "Crisp Very Light Gray (#F5F5F5)"
143- Text: "Charcoal Near-Black (#2C2C2C)" or "Soft Warm Gray (#6B6B6B)"
144 
145### Component Prompts
146- "Create a product card with gently rounded corners, full-bleed square product image, and whisper-soft shadow on hover"
147- "Design a primary call-to-action button in Deep Muted Teal-Navy (#294056) with subtle rounded corners and comfortable padding"
148- "Add a navigation bar with generous spacing between items, using medium-weight Manrope with subtle uppercase and expanded letter-spacing"
149 
150### Incremental Iteration
151When refining existing screens:
1521. Focus on ONE component at a time (e.g., "Update the product grid cards")
1532. Be specific about what to change (e.g., "Increase the internal padding of product cards from 1.5rem to 2rem")
1543. Reference this design system language consistently
155