HearthstoneLegacy format
Hearthstone is a design system for luxury real estate — brokerage portals, high-end listing platforms, and architectural digest-style property storytelling. The aesthetic borrows from country-estate publishing: deep forest green anchors a serif-led hierarchy, ivory paper surfaces frame hero photography, and warm tan accents add age and quiet warmth. Whitespace is treated as a luxury good — generous and unhurried — and every property listing reads like a feature story rather than a database row. The system favors editorial layouts, large photography, and confident typographic contrast over dashboards or grids of cards. Hearthstone is built for buyers who linger.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxHearthstone is a design system for luxury real estate — brokerage portals, high-end listing platforms, and architectural digest-style property storytelling. The aesthetic borrows from country-estate publishing: deep forest green anchors a serif-led hierarchy, ivory paper surfaces frame hero photography, and warm tan accents add age and quiet warmth. Whitespace is treated as a luxury good — generous and unhurried — and every property listing reads like a feature story rather than a database row. The system favors editorial layouts, large photography, and confident typographic contrast over dashboards or grids of cards. Hearthstone is built for buyers who linger.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: outline · Size: 20px
Motion
Motion in Hearthstone is slow and confident. Standard duration is 320ms with cubic-bezier(0.22, 0.61, 0.36, 1) easing — a slightly anticipated ease-out that feels intentional. Hover lifts on cards take 320ms. Image carousel transitions cross-fade over 480ms. Page transitions between listing detail and search results use a fade-and-rise of the listing card to fullscreen over 520ms. No bouncing, no spring physics. The system avoids motion entirely on photography — images do not parallax, zoom, or pan unless triggered by user intent.
Photography Guidance
Photography is the dominant visual element. Listings use editorial-grade images: wide-angle interiors with natural light, golden-hour exteriors, drone shots that emphasize land and setting. No agent thumbnails in the corner. No watermark overlays. Crops are 16:9 for hero, 3:2 for card thumbnails, 4:3 for gallery grids. Black-and-white photography is reserved for journal/editorial content, never for active listings.
Voice and Tone
• Editorial, not transactional. Property descriptions read like Architectural Digest, not Zillow.
• Specific over generic. Prefer "Carrara marble countertops" over "premium finishes."
• Avoid sales urgency. No "Hurry!" or "Won't last!" — the luxury voice is unhurried.
• Use the language of place: "Set on six acres above the river" rather than "Located in a great location."
• Pricing is stated cleanly without exclamation: "$4,275,000" not "Just $4.2M!"
Use with MCP
Don't have the MCP? Install it here