Pink Noise Winery

Overview

Pink Noise Winery embodies a philosophy of sonic minimalism applied to natural winemaking. The brand serves discerning wine enthusiasts who reject commercial polish in favor of authentic terroir expression—people who understand that complexity emerges from restraint, not amplification. The aesthetic movement is 'Refined Minimalism with Organic Precision': a lavender-and-pink color story paired with serif-and-sans typography that evokes both classical wine tradition and contemporary design sophistication. The UI conveys calm authority, inviting users into a world where every design decision reflects the winemaking philosophy—nothing superfluous, everything intentional.

The brand voice is precise, poetic, and unapologetically German in its directness. Vocabulary favors technical wine language (spontanvergoren, unfiltriert, Schiefer) alongside metaphorical language (frequency, moment, depth). The tone is never breathless or trendy; instead, it speaks with the confidence of someone who has spent decades understanding a single hillside. Example sentence: 'Alte Reben haben tiefe Wurzeln, die durch Jahrzehnte von Gestein gewachsen sind—jede Traube trägt die Mineralität von 50 Jahren.'

Colors

The color system balances a soft, sophisticated surface palette with a bold, unmissable primary accent. The background (#e8e4f0) is a warm lavender-gray that evokes both the Mosel's misty mornings and the refined restraint of minimalist design. Surface variants range from the brightest (#f5f3f8, used for headers and elevated surfaces) to the deepest container (#d9d4e0, for subtle depth). The primary color (#f04cad) is a vivid, saturated pink—the brand's sonic signature, used exclusively on CTAs, active states, and brand-critical interactions. This pink is never diluted; it appears at full saturation to command attention without apology. Secondary (#5c45a5, a deep purple) provides supporting emphasis for secondary actions and highlights, while tertiary (#6bc749, a fresh green) is reserved f

Typography

The type system pairs Playfair Display (serif, for headlines and brand-critical text) with Roboto Flex (sans-serif, for body and UI). Playfair Display carries the brand's classical wine heritage—its high contrast and italic forms evoke both 19th-century wine labels and contemporary luxury design. Headlines use Playfair at 400 weight (not bold) to maintain elegance; only the display size (60px, 700 weight) uses full boldness for maximum impact. Body text uses Roboto Flex at 400 weight (16px, 24px line-height) for comfortable reading at 1.6 line-height ratio. Labels and buttons use Roboto Flex at 600 weight with 0.08em letter-spacing (2px at 14px size) and uppercase transformation, creating a technical, precise feel that mirrors the winemaking process. The display size (60px, -0.04em letter-

Layout

The layout uses a 12-column fluid grid with a fixed max-width of 1200px, centered on the viewport. Container padding is 90% width with 24px gutter, creating breathing room on mobile while maintaining focus on desktop. Section spacing follows a consistent rhythm: 64px (xl) between major sections, 40px (lg) between subsections, and 24px (md) for component-level spacing. The hero section occupies 100vh with centered content, establishing an immersive entry point. Wine cards use a 3-column grid (auto-fit, minmax 300px) with 48px gap, collapsing to single column on mobile. The about section constrains text to 800px max-width, centered, to maintain readability and focus. White space is treated as a design material, not a void—the lavender background (#e8e4f0) is never 'empty,' but rather a calm,

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness or opacity reduction. The elevation system uses three levels: sm (0 2px 8px rgba(0, 0, 0, 0.05)) for cards and input fields at rest, md (0 4px 12px rgba(138, 107, 138, 0.3)) for hovered cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and hero-adjacent elements. The header uses a subtle backdrop-filter: blur(20px) with rgba(245, 243, 248, 0.95) background and a 1px bottom border at rgba(138, 107, 138, 0.15) to create a frosted-glass effect without visual heaviness. Wine cards transition f

Shapes

The shape philosophy is 'Architectural Precision with Organic Softness'—sharp enough to feel intentional, soft enough to feel approachable. Border-radius follows a minimal scale: 2px (sm) for subtle rounding on inputs and small components, 4px (DEFAULT) for cards and buttons (the most-used radius, reflecting the brand's preference for near-sharp edges), 6px (md) for list items and secondary containers, 8px (lg) for modals and elevated surfaces, and 12px (xl) for rare, premium components. The full (9999px) radius is used only for badges and pill-shaped elements. Buttons use 4px radius to mainta

Components

Action Elements Buttons are the primary interaction mechanism and use a border-first approach. The button-primary (48px height, 14px vertical padding, 40px horizontal padding) has a transparent background with a 1px border at {colors.primary} and text in {colors.primary}. On hover, the background fills with {colors.primary}, text inverts to white, and a box-shadow (0 4px 12px rgba(240, 76, 173, 0.3)) creates lift. The transition uses cubic-bezier(0.4, 0, 0.2, 1) over 0.4s for a snappy, intentional feel. Button-secondary is smaller (36px height, 8px vertical padding, 24px horizontal padding, 12px font-size) and uses the same border-first pattern but with reduced letter-spacing (1.5px vs 2px). Both buttons include a ::before pseudo-element that creates a ripple effect on hover: width and

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f04cad) exclusively for CTAs, active states, and brand-critical moments—never dilute it with opacity or secondary uses.
• Do maintain the 4px border-radius DEFAULT across all interactive elements (buttons, inputs, cards) to create visual consistency and reinforce the architectural precision aesthetic.
• Do apply uppercase text-transform and 2px letter-spacing (0.08em) to all button labels and navigation text to evoke technical precision and German design tradition.
• Do use Playfair Display at 400 weight (not bold) for headlines to maintain elegance; reserve 700 weight for display-size hero moments only.
• Do layer shadows using the outline color (rgba(138, 107, 138, 0.3)) rather than pure black to maintain the warm, cohesive color story.
• Do constrain body text to 800px max-width and use 1.8 line-height for readability; apply {typography.body-lg} (18px) for introductory paragraphs and {typography.body-md} (16px) for standard body copy.

**Don't**

• Don't use rounded corners larger than 4px on buttons or cards—the brand's minimalist aesthetic demands architectural precision, not soft pills.
• Don't apply opacity or tints to {colors.primary} (#f04cad); it must appear at full saturation to maintain its sonic signature and command attention.
• Don't mix serif and sans-serif within a single headline or button—use Playfair Display for brand-critical text and Roboto Flex for UI and body copy exclusively.
• Don't use pure black (#000000) or pure white (#ffffff) for backgrounds; always use the surface palette (#e8e4f0, #f5f3f8) to maintain the warm, cohesive lavender story.
• Don't apply text-shadow or drop-shadow to body text; reserve shadows for small labels (12px and below) over textured backgrounds only.
• Don't exceed 2px letter-spacing on body text—the brand's precision is expressed through typography weight and size, not excessive spacing.