JDS Flooring Associates LLC

Overview

JDS Flooring Associates LLC operates at the intersection of commercial construction and interior design, serving contractors, developers, and property managers across New Hampshire and beyond. The brand aesthetic is **Architectural Minimalism with Craft Heritage**—a design language that prioritizes clarity, precision, and the inherent beauty of materials. The visual identity reflects the company's core values: quality, integrity, and dependability. The UI evokes professionalism without coldness, combining deep burgundy accents (#710139) with clean whites and grays to create an atmosphere of trust and expertise.

The brand voice is direct, knowledgeable, and reassuring. Tone vocabulary includes terms like "premium," "flawless," "proven," and "crafted"—never trendy or casual. The personality is that of a seasoned contractor who speaks plainly about materials and outcomes. Example sentence in brand voice: "We've installed over two decades of commercial flooring—from hospital corridors to luxury hotel lobbies—with zero compromises on durability or aesthetics."

Colors

The color system anchors on a sophisticated burgundy primary (#710139), derived from the brand's logo and used exclusively for interactive elements, CTAs, and focus states. This deep, warm accent signals authority and craftsmanship without aggression. Secondary blue (#337ab7) provides a complementary accent for secondary actions and highlights, evoking trust and professionalism. The tertiary color is a near-black (#101820), reserved for typography and structural elements, ensuring maximum legibility on light backgrounds.

The surface stack is deliberately neutral: whites (#ffffff) and grays (#dddddd, #cccccc, #999999) dominate, creating a calm, material-focused canvas. The on-surface text color is a warm dark gray (#333333, not pure black), reducing eye strain while maintaining contrast (W

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys modern professionalism while maintaining warmth. Display (56px, 700 weight) is reserved for hero headlines and major section breaks; headline-lg (40px, 700) anchors page sections; headline-md (28px, 700) introduces subsections. Body text (16px, 400 weight) is set at 24px line-height for comfortable reading on screens; body-lg (18px) is used for introductory paragraphs and callouts. All headings use -0.015em to -0.02em letter-spacing to create visual tightness and authority. Labels (12–14px, 600 weight) are used for buttons, badges, and form fields with 0.02–0.03em letter-spacing for clarity. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.08) on white text over image overlays (hero sections) to ensure readability; u

Layout

The page grid follows a 12-column responsive model with a max-width of 1280px, centered with equal gutters (24px on desktop, 16px on tablet, 12px on mobile). The spacing scale uses semantic tokens: lg (40px) separates major sections (hero to content, content to footer); md (24px) creates breathing room within cards and between related elements; sm (12px) is used for internal padding and component spacing. The container rhythm emphasizes white space: hero sections occupy 60–70% of viewport height with centered text overlays (using the hero-overlay component with rgba(16,24,32,0.75) and 4px blur); content sections use 40px vertical padding between blocks. The design avoids full-width elements except for hero backgrounds; all content containers maintain the 1280px max-width to preserve readab

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. The elevation system defines three levels: Level 1 (Base) uses no shadow—flat surfaces like body background (#ffffff) and input fields. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0,0,0,0.15), creating a soft lift of 3px; this is used on cards, modals, and navigation dropdowns. Level 3 (Elevated/Hover) applies box-shadow: 0 8px 24px rgba(0,0,0,0.12), creating a 8px lift for interactive hover states and prominent modals. Transitions between levels use 200ms ease-in-out timing to avoid jarring jum

Shapes

The shape philosophy is **Architectural Sharpness with Functional Softness**—a balance between the precision of construction and the approachability of modern design. Buttons and form inputs use 4px border-radius (0.25rem), a subtle rounding that feels intentional without appearing playful. Cards and containers use 12px (0.75rem) for a slightly softer appearance that invites interaction. The full-radius (9999px) is reserved for badges and pill-shaped elements. This hierarchy reflects the brand's dual nature: sharp, professional edges for primary interactions; softer curves for secondary, infor

Components

Action Elements Buttons follow a strict hierarchy. Primary buttons use the burgundy background (#710139) with white text, 12px horizontal padding, 44px height, and 4px border-radius. On hover, the background shifts to #8a3a35 (primary-fixed-dim) with a 200ms transition; no shadow is added, maintaining flatness. Secondary buttons use the blue accent (#337ab7) with identical sizing and spacing. Ghost buttons have a transparent background with a 1px burgundy border and burgundy text; on hover, the background fills with light gray (#dddddd). All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing) and disable state uses 50% opacity with cursor: not-allowed.

Containers & Surfaces Cards are the primary container component: white background (#ffffff), 12px border-rad

Do's and Don'ts

**Do**

• Do use the primary burgundy (#710139) exclusively for interactive elements—CTAs, links, focus states, and hover indicators—to create a consistent, recognizable interaction model.
• Do maintain 24px gutters and 40px section spacing to create breathing room and guide the eye through content hierarchy.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do use Montserrat at 16px body size with 24px line-height and -0.015em letter-spacing on headlines to ensure legibility and visual authority.
• Do layer shadows subtly (0 3px 8px for standard, 0 8px 24px for elevated) rather than relying on color shifts to convey depth.

**Don't**

• Don't use pure black (#000000) for text; use the warm dark gray (#333333) to reduce eye strain and maintain the brand's approachable professionalism.
• Don't apply border-radius greater than 12px to cards or buttons—the brand's architectural aesthetic demands precision, not softness.
• Don't mix typefaces; Montserrat is the exclusive font family across all scales and weights.
• Don't use the secondary blue (#337ab7) or tertiary black (#101820) as primary CTA colors; reserve the burgundy (#710139) for all primary interactive elements to maintain brand recognition.
• Don't animate opacity or scale on hover; use only background-color and box-shadow transitions to keep interactions predictable and professional.