Marble Luxury
PaletteComponentsPhilosophyRules
← StyleKit
Established mmxxiv

Marble & Gold

Where timeless craftsmanship meets restrained luxury. Every detail considered. Every surface refined.

1924
Founded
86+
Artisans
32
Collections
4.97
Rating
Color System

The Marble Palette

Five tones drawn from Italian marble quarries — warm white stone, deep onyx, antique gold leaf, weathered taupe, and sun-bleached light marble. Restraint in every selection.

Onyx
#1a1a1a
Primary Text
Marble White
#f8f6f3
Background
Antique Gold
#c9a96e
Accent
Warm Taupe
#8a7968
Secondary Text
Light Marble
#e8e0d6
Surface

Gradient Expressions

Stone to Gold
Onyx to Taupe
Gold to Marble
Components

Refined Building Blocks

Each component embodies the marble-luxury principle: generous whitespace, fine gold borders, serif typography, and slow unhurried transitions.

Primary — Onyx with Gold Border

States — Active uses inset shadow (Cold & Rigid)

Interaction Rules

Four Named Principles

Interact with each demo below to feel the marble-luxury interaction grammar — weight, shimmer, rigidity, and gleam — all in motion.

Rule 01

Monumental Weight

Elements remain positionally stable. No hover displacement or scale. Weight is expressed through layered shadow transitions. Hover each card below.

Bianco
Light shadow
Nero
Deep shadow
Oro
Warm glow
Rosa
Soft shadow

Hover any tile to see shadow deepening without movement

Rule 02

Foil Stamping Shift

Gold text performs a slow background-position shift on hover, simulating light catching polished metal foil. Toggle the demo or hover individual titles.

Toggle global gold shimmer
Atelier Milano
Hover to see foil shift
Maison de Luxe
Gold catches the light
Collection Prestige
Metal foil simulation
Rule 03

Cold & Rigid

Active states avoid elastic deformation. A subtle inset shadow communicates the cold hardness of pressed marble — like pressing your palm against stone. Click and hold each button.

Click and hold to feel the rigidity

Click and hold to feel the rigidity

Click and hold to feel the rigidity

Rule 04

Polish Gleam

Cards perform low-frequency, low-amplitude brightness and shadow changes (duration 700ms). This replicates the subtle light shift on a polished marble surface as you approach it.

Nero Marquina
Belgium
Polished
Bianco Carrara
Italy
Honed
Giallo Siena
Italy
Polished

Hover each stone tile to reveal the polished gleam

Design Philosophy

The Art of Restraint

Restraint is the highest expression of luxury. Less gold means more gold. More space means more presence. The marble-luxury vocabulary is built on what is withheld, not what is shown.

Do

  • Use warm marble white bg-[#f8f6f3] — never pure bg-white
  • Use onyx text-[#1a1a1a] for all primary text
  • Limit gold #c9a96e to borders, separators, and minimal accents
  • Apply py-20+ section spacing and p-12 card padding
  • Use font-serif with tracking-[0.2em]+ on all labels
  • Use fine 1px borders: border-[#c9a96e]/20
  • Keep transitions at duration-500 or longer, ease-in-out
  • Use very subtle shadows: shadow-[0_2px_20px_rgba(0,0,0,0.04)]

Never

  • High-saturation neon or fluorescent colors
  • Thick borders — border-4 and above
  • Hard offset shadows: shadow-[Npx_Npx_0px]
  • Bold aggressive typography: font-black uppercase
  • Dense information layouts with small spacing
  • Cartoon, hand-drawn, or rough visual elements
  • Pure white bg-white — use warmer #f8f6f3 instead
  • Elastic spring animations — marble does not bounce
I

Material Suggestion

Radial-gradient overlays create the illusion of stone veining and color depth without imagery. The texture lives in the math.

II

Gold Restraint

Antique gold #c9a96e appears only as fine lines, subtle borders, and accent text. Its rarity is what makes it precious.

III

Extreme Whitespace

Generous padding and margins are not empty — they are breathing room that allows each element its full authority.

Marble Luxury

A design language drawn from the timeless beauty of Italian marble — restraint, quality, and enduring elegance.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteOnyxMarble WhiteAntique GoldWarm TaupeLight Marble
Marble Luxury — a StyleKit design system
← Back to StyleKit