Royal Stranger

Overview

Royal Stranger is a designer handcrafted furniture brand that embodies 'Refined Minimalism with Sculptural Boldness'—a design philosophy that marries austere, clean geometry with unexpected material contrasts and saturated accent colors. The brand serves discerning customers who reject mass production and seek furniture as intimate narrative objects. The visual identity evokes calm sophistication through a warm, cream-toned canvas (rgb(251, 241, 231)) punctuated by a vibrant lime-yellow accent (rgb(228, 249, 70)) that commands attention without aggression. Depth is achieved through material authenticity—brass, black lacquer, pale ceramics—rendered in photography with precise lighting that emphasizes form over decoration.

The brand voice is poetic yet grounded: precise, unhurried, and deeply intentional. Vocabulary favors terms like 'intimate narrative,' 'empowerment,' 'bold creativity,' and 'elegance'—never trendy, never breathless. Tone is conversational but authoritative, speaking to the customer as a peer who understands that furniture is autobiography. Example sentence: 'The Ma'am Collection unveils the intimate narrative of empowerment through form and material.'

Colors

The color system operates on a principle of 'Warm Neutrality with Accent Punctuation.' The primary surface is a soft, warm cream (#fbf1e7, rgb(251, 241, 231)) that serves as the default page background and evokes natural linen and aged paper—materials aligned with the brand's handcrafted ethos. This surface stack ranges from near-white (#fef9f3) for the lowest container to deeper warm grays (#e9e1d9) for elevated surfaces, creating subtle depth without harsh contrast.

The primary accent color is a vivid, saturated lime-yellow (#e4f946, rgb(228, 249, 70))—used exclusively on Call-To-Action buttons, key interactive elements, and brand-critical highlights. This color is intentionally bold and slightly acidic, breaking the warm-neutral palette to signal urgency and brand personality. On-prima

Typography

The type system is built on PP Rightsgrotesk (Light and Narrow Light weights), a contemporary geometric sans-serif that balances minimalist geometry with warmth. Display sizes (81px, 400 weight, -0.03em tracking) are reserved for hero headlines and collection names, using the Narrow variant for maximum impact in tight spaces. Headline-lg (48px, 400 weight) is used for section titles and major content blocks, while headline-md (32px) handles subsection headers. Body text is set at 16px with 24px line-height and 0.01em tracking, ensuring readability across the warm cream background without appearing cramped. Labels and button text use 15px at 500 weight with 0.02em tracking for clarity and emphasis. All typography avoids heavy weights (600+) to maintain the brand's refined, unhurried aesthet

Layout

The layout follows a fluid, 12-column grid system with a maximum container width of 1280px (1280px), allowing content to breathe on large screens while maintaining focus on smaller viewports. The gutter spacing is 40px (lg spacing token), creating generous white space between sections that reinforces the brand's minimalist philosophy. Page rhythm is established through lg spacing (40px) between major sections (hero, collection showcase, product grid), md spacing (24px) for component-level separation, and sm spacing (12px) for internal element padding. The hero section spans full-width with asymmetric image-text layout, using 40px padding on left/right to create breathing room. Product cards and content blocks use md spacing (24px) internally, with lg spacing (40px) between card rows. This

Elevation & Depth

Depth in Royal Stranger is achieved through restrained, naturalistic shadows that mimic soft studio lighting rather than harsh digital drop-shadows. The elevation system uses three levels: Level 1 (Base) has no shadow—flat surfaces on the warm cream background. Level 2 (Standard Card/Container) applies box-shadow: 0 3px 8px rgba(0,0,0,0.15), creating a subtle lift that suggests the card is 4–6px above the background. Level 3 (Elevated/Modal/Hover) uses box-shadow: 0 8px 24px rgba(0,0,0,0.12), a softer, more diffuse shadow that indicates significant depth—approximately 12–16px elevation. Hover

Shapes

The shape philosophy is 'Architectural Sharpness with Selective Softness'—a deliberate rejection of universal border-radius in favor of contextual rounding. Buttons and primary CTAs use 0px border-radius (sharp corners), emphasizing their role as decisive, architectural elements that command attention through form rather than decoration. Input fields and secondary containers also default to 0px, maintaining the brand's minimalist, grid-aligned aesthetic. Badges and tertiary elements use 9999px (full circle) for visual distinction and to signal secondary importance. Cards and elevated surfaces

Components

Action Elements Buttons are the primary interaction mechanism and must convey confidence and clarity. The primary button uses the lime-yellow accent (#e4f946) with dark text (#181724), 15px label-md typography at 500 weight, 10px vertical and 24px horizontal padding, and 44px height for touch-target compliance. No border-radius (0px) emphasizes architectural precision. On hover, the background shifts to the darker primary-container (#d4e830) over 200ms ease-out, creating a tactile response without animation. The secondary button uses near-white (#f9f9f9) with a 1px outline in outline-variant (#cac7d0), maintaining visual hierarchy while offering an alternative action path. Focus states on both buttons apply a 3px outline in the primary color with 200ms transition timing.

Container

Do's and Don'ts

**Do**

• Do use the lime-yellow primary (#e4f946) sparingly and strategically—reserve it for CTAs, key interactive states, and brand-critical moments to maintain its visual impact.
• Do maintain 40px gutter spacing between major sections and 24px padding within cards to preserve the gallery-like, breathing aesthetic.
• Do apply 0px border-radius to buttons, inputs, and primary containers to reinforce the architectural, minimalist brand identity.
• Do use PP Rightsgrotesk Light at 400 weight for body text and headlines to preserve the refined, unhurried tone—avoid heavy weights (600+).
• Do transition hover states over 200–250ms using cubic-bezier(0.4,0,0.2,1) easing to create tactile, intentional interactions.
• Do layer shadows using the three-level elevation system (0px, 0 3px 8px, 0 8px 24px) to create depth without visual chaos.

**Don't**

• Don't apply universal border-radius across all components—the brand's strength lies in selective, contextual rounding (0px for buttons, 9999px for badges only).
• Don't use the primary yellow (#e4f946) for body text, backgrounds, or decorative elements; it is reserved exclusively for CTAs and critical interactive states.
• Don't exceed 24px box-shadow blur-radius or use shadows with opacity greater than 15%—the warm cream background must remain the visual anchor.
• Don't use system fonts or generic sans-serifs; PP Rightsgrotesk is essential to the brand's refined, contemporary identity.
• Don't apply animations or transitions longer than 250ms—the brand voice is decisive and unhurried, not sluggish.
• Don't reduce padding or spacing below the sm token (12px) in primary containers; white space is a core brand asset.