MarbleCrest Design System

MarbleCrest Design System mockup preview
Click to expand

MarbleCrest is a light, marble-textured design system evoking old-money elegance and enduring sophistication. Built for high-end real estate, fine jewelry, and prestigious auction houses, it pairs classic serif typography with a restrained charcoal-and-gold palette. The generous spacing and barely-there border radii create an atmosphere of quiet confidence, where content speaks louder than ornamentation.

Surface Base#F5F5F0
Charcoal#27272A
Gold#B8860B
Success#16A34A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Cormorant Garamond · 48px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Cormorant Garamond · 36px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Cormorant Garamond · 28px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Cormorant Garamond · 22px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 16px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tinyInter · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoIBM Plex Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 16px

MarbleCrest is a light, marble-textured design system evoking old-money elegance and enduring sophistication. Built for high-end real estate, fine jewelry, and prestigious auction houses, it pairs classic serif typography with a restrained charcoal-and-gold palette. The generous spacing and barely-there border radii create an atmosphere of quiet confidence, where content speaks louder than ornamentation.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

FilterStatus-AvailableStatus-ReservedStatus-SoldStatus-Featured

List

Default

Default

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-gold

Do's & Don'ts

Do

Use Cormorant Garamond exclusively for headings; pair with Inter for all body text.
Use gold only for accent moments: a price, a badge, a featured indicator.
Maintain extremely generous spacing; let content breathe on every screen.
Use uppercase letter-spaced labels for navigation and form labels.
Size images large and uncropped; this system values visual real estate.

Don't

Round corners beyond 4px -- sharp edges convey the precision of luxury.
Use bold weights in body text; keep it at 300-400 for editorial grace.
Apply colored backgrounds to large sections; the marble-white surface is the canvas.
Introduce additional accent colors beyond the charcoal-gold-marble triad.
Use shadows heavier than shadow-lg; subtlety defines MarbleCrest.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/marblecrest and implement it in my code

Don't have the MCP? Install it here