Dillard-Jones

Overview

Dillard-Jones embodies Architectural Minimalism with a heritage-luxury sensibility—a design language that prioritizes restraint, proportion, and the quiet confidence of timeless craftsmanship. The brand serves discerning homeowners across the Carolinas who value bespoke design and meticulous execution. The UI evokes a sense of refined permanence: warm earth tones (terracotta #c3855d, deep charcoal #1c1d1d, soft cream #e4e0de) anchor a clean, uncluttered interface that lets the work speak for itself. Every element—from typography to spacing—reflects the precision and care applied to each home.

The voice is authoritative yet approachable, grounded in expertise without pretension. Vocabulary favors concrete, sensory language: 'crafted,' 'enduring,' 'locally sourced,' 'bespoke.' The brand speaks to homeowners as partners in creation, not consumers. Example sentence in brand voice: 'We design homes that age beautifully—where every detail serves both beauty and function.'

Colors

The color palette draws from natural materials and the Carolinas landscape: warm terracotta (primary #c3855d) represents the brand's signature accent and appears on all primary CTAs and interactive focus states. Deep charcoal (secondary #1c1d1d) anchors typography and structural elements, providing 7:1 contrast against light surfaces for accessibility. Tertiary earth-brown (#af683e) adds depth to secondary interactions and hover states. The surface stack uses near-white (#ffffff) as the base, with subtle warm grays (#e4e0de, #eaeaea, #cccccc) creating visual separation without harsh contrast. Error red (#cf2e2e) is reserved for critical alerts and validation failures. All interactive elements use the primary terracotta on hover/focus, with a 3px rgba(195, 133, 93, 0.15) focus ring for keyb

Typography

The type system pairs Playfair Display (serif, heritage-forward) for headlines and display text with Poppins (humanist sans-serif) for body and UI labels. This pairing communicates both tradition and contemporary clarity. Display and headline levels use Playfair at weights 600–700 with tight letter-spacing (-0.04em to -0.01em) to create visual authority and elegance. Body text uses Poppins at 400 weight, 16–18px, with 24–28px line-height for comfortable reading. Labels and buttons use Poppins 600 at 12–14px with 0.01–0.05em letter-spacing for crisp, scannable UI. On small labels over busy backgrounds or image overlays, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Hierarchy is reinforced through size, weight, and color—never through all-caps or excessive decoration

Layout

The layout uses a 12-column fluid grid with a 1280px max-width container, centered with equal margins. The gutter is 24px, maintaining consistent breathing room between sections. White-space is generous: section separation uses lg spacing (40px) vertically, creating a rhythm that mirrors the pacing of architectural drawings. The hero spans full-width with a 50/50 split (Coastal SC | Upstate SC & Western NC), each section 632px wide at max-width. Cards and content blocks use md spacing (24px) internally for padding. Input fields and form elements maintain 12px horizontal padding and 44px minimum height for touch accessibility. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently across all components; never deviate to arbitrary values like 18px or 32px

Elevation & Depth

Depth is achieved through subtle layering and restraint, not dramatic shadows. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to create a hairline separation from the background. Level 3 (modals, dropdowns, hover states) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) for gentle lift. Level 4 (critical overlays) uses elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)). Focus states on interactive elements use a 3px solid border in primary color (#c3855d) with a 3px spread box-shadow at rgba(1

Shapes

The shape philosophy is 'Refined Geometry'—sharp enough to feel contemporary and precise, yet softened at the edges to avoid coldness. Buttons and primary CTAs use 4px border-radius (rounded.sm / 0.25rem), a subtle rounding that suggests craft without whimsy. Input fields and secondary containers use 6px border-radius (rounded.DEFAULT / 0.5rem) for a slightly more approachable feel. Cards and larger containers use 12px border-radius (rounded.md / 0.75rem) to create visual breathing room. Badges and pills use full border-radius (9999px) for a soft, friendly accent. The reasoning: sharp corners

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use terracotta background (#c3855d) with white text, 12px horizontal padding, 48px height, and 4px border-radius. On hover, the background shifts to tertiary earth-brown (#af683e) with a smooth 200ms transition. Focus state adds a 3px solid border in primary color plus a 3px spread box-shadow at rgba(195, 133, 93, 0.15). Secondary buttons use transparent background with a 1px solid outline in gray (#aaaaaa), white text, and the same padding/height. On hover, the background becomes surface-container-high (#dddddd) and the outline shifts to primary. Ghost buttons (minimal, text-only) use transparent background and primary text; on hover, background becomes surface-container-low (#eaeaea). All buttons use Poppins

Do's and Don'ts

**Do**

• Do use Playfair Display for all headlines and display text; it signals heritage and craftsmanship.
• Do apply the primary terracotta (#c3855d) sparingly—only on CTAs, focus states, and key interactive elements; overuse dilutes impact.
• Do maintain generous white-space: use lg spacing (40px) between major sections and md spacing (24px) within cards.
• Do use the full 3px focus ring (border + box-shadow) on all keyboard-interactive elements for accessibility.
• Do keep shadows subtle (elevation.sm to elevation.md); avoid harsh black shadows that contradict the luminous aesthetic.

**Don't**

• Don't use system fonts or generic sans-serifs; always load Playfair Display and Poppins from Google Fonts.
• Don't apply border-radius greater than 12px on cards or containers; it softens the refined, architectural character.
• Don't use the secondary charcoal (#1c1d1d) as a background; reserve it for text and structural elements only.
• Don't mix tertiary earth-brown (#af683e) and primary terracotta (#c3855d) in the same interactive element; choose one per component.
• Don't add decorative gradients or textures; the brand relies on clean surfaces and precise typography for visual interest.