Strahlborn and De Rionzini

Overview

Strahlborn and De Rionzini is a design system for an archival historical narrative, embodying the aesthetic of 'Aristocratic Restraint'—a movement that privileges scholarly authenticity, warm earth-tone palettes, and classical serif typography over contemporary minimalism. The brand serves readers and researchers seeking immersion in 18th-century Russian nobility through a visual language that feels both timeless and meticulously curated. The interface evokes the tactile quality of aged parchment and leather-bound manuscripts, with a warm cream base (#f4ecd0) anchoring all surfaces and a muted gold accent (#d4c5a3) reserved for interactive moments. The emotional response is one of intellectual curiosity tempered by reverence—users feel they are handling something precious, not merely scrolling.

The voice is formal yet conversational, scholarly without pedantry. Vocabulary favors period-appropriate language ('saga,' 'archival,' 'nobility,' 'cast') and avoids marketing hyperbole. Tone is measured and deliberate, with sentences that breathe. Example: 'The Lyalins and Tregubovs appear alongside Strahlborn—a constellation of families whose stories interweave across decades.'

Colors

The color system is rooted in a warm, desaturated palette inspired by historical documents and aristocratic interiors. Primary (#d4c5a3) is a muted gold used exclusively for interactive elements—buttons, links, and focus states—creating a subtle but unmistakable call to action against the cream background. Secondary (#cf2e2e) is a restrained crimson reserved for error states, alerts, and rare moments of visual urgency; it appears infrequently to maintain its impact. Tertiary (#685e4e) is a warm taupe used for secondary text, dividers, and supporting UI elements, ensuring visual hierarchy without harshness. The surface stack ranges from the brightest cream (#faf7f0) for elevated containers to the darkest parchment (#e6dcc8) for subtle depth. On-surface text (#1c2532) is a near-black with wa

Typography

The type system is anchored in Merriweather, a high-contrast serif that communicates scholarly authority and historical authenticity. Display (56px, 700 weight, -0.02em tracking) is reserved for the main saga title and hero headlines, commanding attention through scale rather than color. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure page sections with decreasing emphasis. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading at 1.5–1.6 line-height ratios, essential for long-form narrative content. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 500 weight, 0.03em tracking) are used for UI labels, buttons, and metadata. All serif text receives a subtle text-shadow (0 1px 2px rg

Layout

The layout follows a 12-column grid with a fixed max-width of 1200px, ensuring readability for long-form content while maintaining visual breathing room on ultra-wide displays. The gutter is 24px, applied consistently between columns and as the outer margin on desktop. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero and footer spacing. Container max-width is enforced at 1200px to prevent line lengths from exceeding 75–80 characters, a critical constraint for serif body text. White-space is generous: section padding is lg (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. The rhythm is unhurried, reflecting the contemplativ

Elevation & Depth

Depth is conveyed through subtle shadows and tonal shifts rather than dramatic layering. Level 1 (Base) uses no shadow, relying on the warm cream surface (#f4ecd0) as the foundation. Level 2 (Standard Cards) applies a soft shadow (0 3px 3px rgba(0, 0, 0, 0.2)) with a 1px border in outline-variant (#a48149), creating a gentle lift without visual aggression. Level 3 (Modals and Elevated Containers) uses a deeper shadow (0 12px 50px rgba(0, 0, 0, 0.4)) with a 1px border in primary (#d4c5a3), signaling prominence. Hover states on interactive elements trigger a transition to the md shadow (0 6px 9p

Shapes

The shape philosophy is 'Classical Precision'—favoring subtle, functional rounding over organic curves. Buttons and inputs use DEFAULT (0.5rem / 8px) border-radius, a gentle softening that feels refined rather than playful. Cards and containers use md (0.75rem / 12px) for slightly more visual warmth. Modals and elevated surfaces use lg (1rem / 16px) to signal hierarchy. Full (9999px) is reserved for badges and pill-shaped elements, used sparingly. No element uses sharp corners (0px radius); the minimum is DEFAULT (8px). This restraint reflects the aristocratic aesthetic: precision without cold

Components

Action Elements Buttons are the primary interactive affordance. Button-primary uses primary (#d4c5a3) background with on-primary text (#1c2532), a 1px outline-variant border (#a48149), and DEFAULT rounding (8px). Padding is 12px horizontal, 12px vertical, yielding a 44px height. On hover, the background transitions to primary-fixed-dim (#d4c5a3 darkened 10%) with a soft shadow (0 3px 3px rgba(0, 0, 0, 0.2)) over 150ms. Button-secondary is transparent with a 2px secondary border (#cf2e2e) and secondary text, used for destructive or secondary actions. On hover, it fills with secondary-container (#f4c4c4) and transitions text to on-secondary-container (#5a1515). Both button variants use label-md typography (14px, 600 weight, 0.02em tracking).

Containers & Surfaces Cards are the prima

Do's and Don'ts

**Do**

• Do use Merriweather serif for all body and headline text—it is the voice of the brand and must not be substituted with sans-serif.
• Do apply the primary gold (#d4c5a3) exclusively to interactive elements (buttons, links, focus states) to maintain its visual authority.
• Do maintain the warm cream surface (#f4ecd0) as the dominant background; it is the foundation of the archival aesthetic.
• Do use the full spacing scale (xs through xl) to create rhythm and breathing room; never compress sections below md (24px) gaps.
• Do apply soft shadows (0 3px 3px rgba(0, 0, 0, 0.2)) to cards and elevated elements; never use harsh or blurred shadows.
• Do preserve the near-black on-surface text (#1c2532) for body copy; pure black (#000000) breaks the warm aesthetic.

**Don't**

• Don't use sans-serif fonts for body or headlines; the serif is non-negotiable and defines the brand voice.
• Don't apply primary gold (#d4c5a3) to backgrounds or large surface areas; it is an accent and loses impact when overused.
• Don't use the secondary crimson (#cf2e2e) for non-error states; it is reserved for alerts and destructive actions.
• Don't apply sharp corners (0px radius) to any interactive element; minimum rounding is DEFAULT (8px).
• Don't use pure white (#ffffff) for backgrounds; always use surface-container (#f4ecd0) or surface-container-low (#f9f3e8) to maintain warmth.
• Don't apply glassmorphism, blur effects, or transparency overlays; the aesthetic is grounded in classical print, not contemporary digital trends.