Price & Pierce

Overview

Price & Pierce is a heritage-driven timber and panel products distributor rooted in 150 years of industrial expertise. The design system embodies 'Architectural Restraint'—a philosophy that prioritizes clarity, authenticity, and functional elegance over ornament. The brand serves professional builders, architects, and contractors who demand precision and reliability. The visual language is deliberately understated: warm, earthy neutrals (taupe #988c6c, charcoal #21211e, cream #f7f3ef) paired with geometric precision and generous whitespace create an environment that feels both authoritative and approachable. The UI evokes the tactile, honest materiality of timber itself—no unnecessary flourishes, no digital gloss, just clear information architecture and purposeful interaction.

The brand voice is measured, knowledgeable, and direct. Price & Pierce speaks as a trusted partner with deep industry knowledge, never condescending, never breathless. Vocabulary favors specificity: 'sustainably sourced European softwood' rather than 'quality timber'; 'global supply chain spanning 12 major regions' rather than 'worldwide reach'. The tone is confident without arrogance, professional without coldness. Example sentence: 'We've sourced C24 carcassing from Scandinavia for three generations—consistency you can build on.'

Colors

The color system is rooted in natural materials and industrial heritage. Primary (#988c6c) is a warm, sophisticated taupe derived from timber tones—it appears on CTAs, key interactive elements, and brand accents. It is never used for body text or large surface areas; its restraint reinforces its authority. Secondary (#21211e) is a deep charcoal that anchors headings, borders, and structural elements, providing the visual weight that grounds the design. Tertiary (#e6e5e2) is a soft greige used for subtle surface differentiation and secondary containers.

The surface stack is deliberately minimal: surface (#ffffff) is the primary canvas, surface-dim (#f7f3ef) provides gentle contrast for secondary regions, and surface-container (#e6e5e2) is reserved for elevated or grouped content. On-surfac

Typography

The type system uses a single typeface family—neue-haas-grotesk-display—across all scales, reinforcing the brand's commitment to clarity and consistency. This geometric sans-serif, available in weights 400 (light), 500 (roman), and 600 (semibold), communicates precision and modernity while maintaining warmth through its humanist proportions. Display (72px, weight 400, line-height 80px, letter-spacing -0.02em) is reserved for hero headlines and major section breaks; its generous leading and negative letter-spacing create visual drama without sacrificing readability. Headline-lg (52px, weight 400) and headline-md (40px, weight 400) are used for section titles and card headers, maintaining the light weight to preserve the brand's restraint. Body-lg (20px, weight 500) and body-md (16px, weight

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, allowing flexibility across desktop, tablet, and mobile viewports. The grid spacing (gutter) is 24px on desktop, reducing to 15px on mobile, maintaining visual rhythm while respecting smaller screens. Section separation follows a semantic spacing scale: lg (40px) is used between major sections (hero to features, features to testimonials), md (24px) for subsection breaks, and sm (12px) for component-level spacing. The design favors generous whitespace—no section should feel cramped. Container max-widths are responsive: 1440px on desktop (1280px+), 1230px on tablet (1281–1440px), and full-width minus gutter on mobile (≤670px). Padding within containers is consistent: md (24px) on desktop, sm (12px) on mobile. T

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic elevation. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for interactive elements like buttons and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdowns, and lg (0 10px 30px color-mix(in srgb, #000000 16%, transparent)) for modals and overlays. Shadows are warm-tinted (using color-mix to blend black with the surface) rather than pure black, maintaining the brand's warmth. Borders are preferred over shadows for structural hierarchy: a 1px solid border at color-mix(in srgb, #21211e 2

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—sharp enough to feel contemporary and professional, rounded enough to feel approachable. Buttons use full (9999px) border-radius, creating pill-shaped forms that feel friendly and modern; this is the brand's signature shape and should be applied consistently to all primary and secondary CTAs. Cards and containers use DEFAULT (4px) or md (8px) border-radius, providing subtle rounding that softens the grid without compromising structure. Input fields use DEFAULT (4px) to align with cards and maintain visual consistency. Icon buttons and s

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct. Button-primary uses background: {colors.primary} (#988c6c), color: {colors.on-primary} (#ffffff), padding: 12px 32px, height: 48px, border-radius: 9999px, and box-shadow: {elevation.md}. On hover, transition to background: {colors.primary-fixed-dim} (#b8b0a0) over 200ms ease. Button-secondary uses a transparent background with a 2px solid border at {colors.outline} (#21211e), same padding and height, and no shadow; on hover, add background: {colors.surface-container-high} (#ddd9d4). Button-ghost is used for tertiary actions: transparent background, text-color: {colors.primary}, no border, no shadow, padding: 12px 24px. All buttons must use typography: {typography.label-md} (14px, weight 600, le

Do's and Don'ts

**Do**

• Do use the full (9999px) border-radius exclusively on buttons—it is the brand's signature shape and immediately recognizable.
• Do apply the primary color (#988c6c) sparingly: CTAs, key links, focus states, and brand accents only. Never use it for body text or large surface areas.
• Do maintain generous whitespace (lg spacing: 40px) between major sections; the brand's authority comes from clarity and breathing room, not density.
• Do use neue-haas-grotesk-display at weight 400 for headlines and weight 500 for body text; this pairing is consistent and intentional across all scales.
• Do apply subtle shadows (md: 0 3px 8px rgba(0, 0, 0, 0.15)) to cards and interactive elements; avoid stacking multiple shadows or using pure black.
• Do use 1px borders at 20% opacity (color-mix(in srgb, #21211e 20%, transparent)) for structural separation; they are less visually heavy than shadows and align with the industrial aesthetic.

**Don't**

• Don't use rounded corners on input fields beyond DEFAULT (4px)—they should feel structured and precise, not playful.
• Don't mix typefaces; neue-haas-grotesk-display is the only approved font family. System fonts (Arial, sans-serif) are fallbacks only.
• Don't apply the primary color (#988c6c) to body text, backgrounds, or non-interactive elements—it dilutes its impact and confuses the visual hierarchy.
• Don't use shadows heavier than lg (0 10px 30px) except in rare cases like full-screen modals; the brand favors restraint and clarity over dramatic depth.
• Don't create buttons with mixed border-radius values (e.g., 4px on top, 9999px on bottom)—consistency in shape is essential to brand recognition.
• Don't reduce padding or spacing below sm (12px) in components; the brand's luxury comes from generosity, not compression.