Studio Ashby

Overview

Studio Ashby operates within the aesthetic tradition of Architectural Minimalism with a deep reverence for heritage craft—a design philosophy that privileges authenticity, restraint, and the patina of time. The brand serves discerning clients seeking interiors that layer art, antiques, and bespoke craftsmanship into spaces with lasting character and soul. The UI evokes a curatorial, editorial sensibility: warm earth tones (terracotta #d4845c, warm taupe #633b2f, cream #f9f3f0) paired with jewel-tone accents (deep blue #45519f, ochre #b19e18) create a visual language that feels both sophisticated and deeply human—never cold, never trendy, always considered.

The brand voice is precise, unhurried, and rooted in expertise. Studio Ashby speaks with the confidence of a practice that has spent decades understanding how light moves through a room, how a single antique piece can anchor an entire interior, and how restraint is the ultimate luxury. Vocabulary patterns favor specificity over hyperbole: 'St James's Park Apartment' not 'stunning London flat'; 'layered materiality' not 'texture'; 'considered proportions' not 'beautiful balance.' The tone is conversational yet authoritative, warm yet uncompromising. Example sentence in brand voice: 'We sourced the marble from the same quarry that supplied the original 1920s building—continuity matters.'

Colors

The color system is rooted in the tactile, earthy palette of heritage interiors and fine art. Primary (#d4845c, a warm terracotta) is the signature accent—used sparingly on CTAs, key links, and interactive states to signal intentionality and craft. It appears on 'Contact' buttons and hover states, commanding attention without aggression. The background surface (#f9f3f0, a warm cream) provides the canvas—a deliberately imperfect off-white that echoes aged linen and plaster, never sterile. Body text (#633b2f, a deep warm brown) sits comfortably on this surface with 18px Georgia serif at 400 weight, achieving a 7:1 contrast ratio for accessibility while maintaining warmth.

Secondary (#45519f, a deep cobalt blue) and tertiary (#b19e18, a muted ochre) function as supporting accents—the blue ap

Typography

The type system pairs Georgia serif (display, headlines, body) with Matter sans-serif (labels, UI controls), creating a hierarchy that balances editorial authority with functional clarity. Georgia at 64px / 72px line-height (display) commands hero sections with -0.02em letter-spacing, creating a sophisticated, slightly condensed rhythm. Headlines drop to 40px (headline-lg) and 28px (headline-md), maintaining 400 weight throughout—no bold headlines, respecting the brand's restraint. Body copy sits at 18px / 28px line-height with 0em letter-spacing, ensuring readability across devices while preserving the serif's warmth and character.

Matter sans-serif handles all interactive labels (14px / 20px, 500 weight, 0.01em tracking) and small UI text (12px / 16px, 500 weight, 0.05em tracking), prov

Layout

The layout system employs a 12-column fluid grid with a 1280px container max-width, allowing responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter is consistently 24px, creating breathing room without excess. White-space philosophy prioritizes generous margins around content blocks: lg spacing (40px) separates major sections (hero, portfolio, contact), md spacing (24px) separates cards and list items, sm spacing (12px) separates inline elements. This hierarchy of silence mirrors the brand's editorial approach—every element earns its place.

Portfolio grids typically use 2–3 columns on desktop, collapsing to 1 on mobile, with 24px gaps between items. Hero sections employ full-width backgrounds (cream #f9f3f0) with centered content at c

Elevation & Depth

Depth in Studio Ashby's design is achieved through subtle shadow and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for overlays and floating elements. These soft, spread shadows preserve the warm, tactile aesthetic—no harsh black shadows, only warm grays with low opacity. Hover states transition smoothly (0.3s ease) from sm to md elevation, signaling interactivity without jarring movement

Shapes

The shape philosophy is 'Refined Minimalism'—sharp enough to feel contemporary and precise, rounded enough to feel approachable and human. Border-radius follows a deliberate scale: sm (2px) for subtle definition on badges and small controls, DEFAULT (4px) for buttons and inputs, md (8px) for cards and larger containers, lg (12px) for modals and prominent surfaces, xl (16px) for hero sections and full-width containers, and full (9999px) for circular elements (avatars, icon buttons). This progression mirrors the brand's own design philosophy: small details are refined and precise, while larger s

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background #d4845c (primary), white text, 14px Matter 500 weight, 4px radius, 12px vertical / 24px horizontal padding, and 44px height. On hover, the background shifts to #c97550 (a 10% darker terracotta) with a 0.2s ease transition—no shadow lift, just a subtle color shift that feels considered. The secondary button mirrors the primary but with a transparent background, 1px solid #d4845c border, and on-primary text color; on hover, it fills with primary-container (#f4d4c4) and shifts text to on-primary-container (#5c3a2a). Ghost buttons (used for tertiary actions like 'Learn More') have transparent backgrounds, on-surface text, and on hover shift to surface-container-high (#e7e1dd) with primary text—a

Do's and Don'ts

**Do**

• Do use Georgia serif for all body copy and headlines—it carries the brand's editorial authority and warmth. Never substitute with system fonts or sans-serif for body text.
• Do apply the primary color (#d4845c) sparingly and intentionally: CTAs, key links, focus states, and hover indicators only. Overuse dilutes its power.
• Do maintain 24px gutters and 40px section spacing consistently. White space is a design material—treat it with the same care as color and typography.
• Do use soft shadows (0 1px 2px rgba(0, 0, 0, 0.06) for base, 0 4px 12px rgba(0, 0, 0, 0.08) for hover) and avoid harsh black shadows. All shadows should feel warm and diffuse.
• Do transition interactive states over 0.2–0.3s ease. Abrupt changes feel jarring and undermine the brand's considered, unhurried pace.
• Do use Matter sans-serif exclusively for UI labels, buttons, and small text. Never mix serif and sans-serif within a single component.
• Do test all interactive elements for keyboard navigation and screen reader compatibility. Focus states must be visible (3px inset glow, never outline: none).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary surfaces. The warm cream (#f9f3f0) and off-whites are intentional—they evoke heritage and warmth.
• Don't apply border-radius greater than 16px to any component except full-circle elements. Excessive rounding undermines the brand's precision and craft focus.
• Don't use sans-serif for body copy or headlines. Georgia serif is non-negotiable—it's the visual anchor of the brand's editorial identity.
• Don't stack multiple shadows or use blur effects (backdrop-filter, text-shadow on body text). The aesthetic is refined, not atmospheric or glassmorphic.
• Don't animate elements on scroll or use parallax effects. The brand values clarity and restraint—motion should be purposeful and minimal.
• Don't mix the primary color (#d4845c) with secondary (#45519f) or tertiary (#b19e18) in the same component. Each color has a distinct role; conflating them creates visual noise.
• Don't use hover states that dramatically change size, position, or shadow. Subtle color shifts and shadow elevation are sufficient—respect the user's spatial awareness.