MilaMartBd

Overview

MilaMartBd is a luxury vinyl skin brand that transforms interior surfaces through premium, removable design. The brand serves design-conscious homeowners and renters who reject permanent renovation in favor of intentional, temporary personalization. The aesthetic is 'Architectural Minimalism with Warm Materiality'—a fusion of clean geometric precision (Space Grotesk's sharp letterforms, 88px headlines with -0.04em tracking) and tactile warmth (the signature gold-tan primary #c6a87a, inspired by natural materials and vinyl texture). The UI evokes calm confidence: surfaces feel substantial yet approachable, with generous whitespace and deliberate contrast. Voice: precise, never precious. Example: 'MilaMartBd crafts premium, bubble-free vinyl skins for fridges, tables, deep freezers & furniture. Change your space in minutes, not months. Removable, wipe-clean, landlord-friendly.'

Colors

The color system balances a luminous, neutral foundation with two strategic accent layers. The surface stack (#f5f5f7 → #ededeb → #d0d0d3) creates subtle depth without darkness, supporting the brand's 'light luxury' positioning. Primary (#c6a87a) is the signature warm gold—applied to CTAs, accent text ('Stick your story'), and interactive focus states. It appears sparingly but decisively, commanding attention on the white 'EXPLORE STICKER ARCHIVE' button and in hero typography. Secondary (#121212) is near-black, used for the dark CTA button and navigation hover states, providing maximum contrast for accessibility and visual weight. Tertiary (#bfff00) is a neon lime accent reserved for status indicators and premium badges ('7-YEAR PEEL-PROOF'), creating a subtle luxury signal. Error (#d32f2

Typography

The type system pairs Space Grotesk (geometric, architectural) for display and headlines with Inter (humanist, warm) for body and labels. This pairing communicates 'precision meets approachability'—the brand's core tension. Display (88px, 700 weight, -0.04em tracking) commands hero space with dramatic presence; Headline-lg (52px) scales for section breaks. Body-md (16px, 400 weight) ensures readability at 24px line-height, critical for product descriptions and trust-building copy. Label-md (14px, 600 weight, 0.02em tracking) is used for navigation and CTAs, where the slight letter-spacing reinforces intentionality. On dark backgrounds (hero section), apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to small labels to maintain legibility over photographic imagery. All headlines use -0.02em t

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered with 24px gutters on desktop and 16px on mobile. The hero section breaks this constraint intentionally—it spans full-width (92vh height, 640px minimum) to create immersive impact. Section separation uses 40px (lg spacing) for breathing room between product grids, testimonials, and CTAs. The navigation bar floats fixed at top-5 (20px from top), using a glass-morphic container (backdrop-filter: blur(40px), rgba(255,255,255,0.7) background) to maintain visual hierarchy without blocking content. Product grids use auto-rows-[340px] with 3-column layout on desktop, collapsing to 2 columns at tablet and 1 on mobile. Whitespace is generous—never cramped—reflecting the brand's 'Objects of Intention' philosophy: every el

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of glass-morphism. Level 1 (Base): flat surfaces with no shadow, used for the main background (#f5f5f7) and card interiors. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards and input fields, creating subtle separation. Level 3 (Elevated/Glass): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8), used for the navigation bar and modal overlays. The inset highlight (1px white at top) mimics light refraction on glass, reinforcing the glass-morphic aesth

Shapes

The shape philosophy is 'Soft-Technical Precision'—sharp enough to feel intentional, rounded enough to feel approachable. Buttons use full radius (9999px / border-radius: 28px in computed styles) to create pill-shaped forms that feel premium and modern. Cards use lg radius (16px) for a balanced, architectural feel—not too sharp (which reads cold), not too soft (which reads casual). Inputs use DEFAULT radius (8px) for subtle definition without distraction. The logo mark uses a perfect circle (rounded-full, 32px diameter) to anchor the brand identity. Navigation items use full radius (28px) for

Components

Action Elements Buttons are the primary interaction pattern. The primary button (background: #c6a87a, color: #121212, padding: 12px 28px, border-radius: 28px, font-weight: 600) is used for high-intent CTAs like 'EXPLORE STICKER ARCHIVE' and 'Add to Bag'. On hover, the background transitions to #d4c4b0 (primary-fixed-dim) over 200ms, maintaining warmth while signaling state change. The secondary button (background: #121212, color: #f5f5f7, border-radius: 28px) provides maximum contrast for alternative actions. Ghost buttons (background: rgba(255,255,255,0.1), border: 1px solid rgba(255,255,255,0.15), backdrop-filter: blur(20px)) are used in the hero section for low-priority actions, maintaining visual lightness over dark backgrounds.

Containers & Surfaces Cards (background: #f5f5f7

Do's and Don'ts

**Do**

• Do use the primary gold (#c6a87a) sparingly on CTAs and accent text to maintain its luxury impact—never as a background fill for large surfaces.
• Do apply -0.02em to -0.04em letter-spacing on all headlines to reinforce the geometric, architectural aesthetic.
• Do use 24px (md spacing) as the default padding for cards and containers; never compress below 12px (sm spacing) except in dense data tables.
• Do layer glass-morphic elements (backdrop-filter: blur(40px), rgba(255,255,255,0.7)) over dark backgrounds to create visual separation without harsh shadows.
• Do transition all interactive states (hover, focus, active) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, intentional motion.

**Don't**

• Don't use the secondary black (#121212) as a primary background—reserve it for CTAs, navigation hover states, and dark hero overlays only.
• Don't mix Space Grotesk and Inter in the same line; use Space Grotesk for headlines/display and Inter for body/labels exclusively.
• Don't apply shadows larger than 0 8px 32px rgba(0,0,0,0.15)—the brand favors subtle depth over dramatic drop shadows.
• Don't use the tertiary lime (#bfff00) for large UI surfaces; it's a status/premium accent only, applied to small badges and indicators.
• Don't round corners below 8px (DEFAULT) on interactive elements—the brand's soft-technical aesthetic requires at least 8px minimum radius for buttons and inputs.