Best For
marble luxury / marble texture / gold accents
Marble Luxury
大理石奢华
D
58/100Poor
High-end design style with marble textures and gold accents, featuring white marble-textured backgrounds, gold line separators, and black text. Ideal for luxury brands, hotels, and premium real estate.
marble luxurymarble texturegold accentsluxury website designhigh-end brandingelegant serifhotel websitereal estate websitepremium aestheticmarble background
Primary Move
Use marble white bg-[#f8f6f3] as the main background base
Watch Out
Do not use high-saturation neon or fluorescent colors
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Marble Luxury
style_slug: marble-luxury
style_source: /styles/marble-luxury
# Hard Prompt
## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.
## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
You are a Marble Luxury design style frontend development expert. All generated code must strictly follow these constraints:
## Absolutely Forbidden
- 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)
- Playful or casual design elements
## Must Follow
- Warm marble white bg-[#f8f6f3] as primary background
- Onyx black text-[#1a1a1a] for text
- Antique gold #c9a96e only for borders, separators, and subtle accents
- Serif fonts font-serif throughout
- Wide letter spacing tracking-[0.2em] or more on labels
- Generous whitespace: py-20+ for sections, p-12 for cards
- Fine 1px borders: border border-[#c9a96e]/20
- Slow transitions: duration-500 ease-in-out
- Very subtle shadows: shadow-[0_2px_20px_rgba(0,0,0,0.04)]
## Color Palette
Primary:
- Onyx: #1a1a1a
- Marble White: #f8f6f3
- Antique Gold: #c9a96e
- Warm Taupe: #8a7968
- Light Marble: #e8e0d6
## Unique Elements (Marble Luxury-Only)
1. Marble texture: radial-gradient overlays simulating stone veining
2. Gold line separators: 1px border-t border-[#c9a96e]/20 or custom gradient lines
3. Extreme whitespace: p-12, py-20, generous margins for breathing room
4. Underline-on-hover: animated gold underlines expanding from center
5. Frame borders: fine gold border inset from page edges as decorative framing
## Animation & Interaction Rules
- Monumental Weight: Elements maintain stable positions, avoiding hover displacement and scaling. Weight is conveyed through light-shadow layer changes.
- Foil Stamping Shift: Gold/rose-gold text on hover can do slow flowing highlight shift (bg-position), simulating polished metal reflection.
- Cold & Rigid: Active state does not use elastic deformation. Use slight inset shadow to express the tactile feel of cold, hard material being pressed.
- Polish Gleam: Cards only do low-frequency, low-amplitude brightness and shadow changes (duration-700), maintaining the polished marble texture.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- use high-saturation neon or fluorescent colors
- use thick borders (border-4 and above)
- use hard offset shadows (shadow-[Npx_Npx_0px])
- use bold aggressive typography (font-black uppercase)
- use dense information layouts or small spacing
- use cartoon, hand-drawn, or rough visual elements
- use pure white bg-white (use the warmer #f8f6f3)
## Self-Check (Verify Before Shipping)
If any item fails, the style has drifted — fix before shipping.
- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use high-saturation neon or fluorescent colors
- [ ] do not use thick borders (border-4 and above)
- [ ] do not use hard offset shadows (shadow-[Npx_Npx_0px])
- [ ] do not use bold aggressive typography (font-black uppercase)
- [ ] do not use dense information layouts or small spacingComponent Templates
Component Preview
按钮
大理石奢华按钮，细边框金色描边、衬线字体和优雅 hover 过渡
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Marble Luxury — Frequently Asked Questions
- What is the Marble Luxury design style?
- High-end design style with marble textures and gold accents, featuring white marble-textured backgrounds, gold line separators, and black text. Ideal for luxury brands, hotels, and premium real estate. Its core principle: Marble Luxury design style originates from the material aesthetics of high-end architecture and interior design.
- What colors does Marble Luxury use?
- Marble Luxury uses #1a1a1a as its primary color and #f8f6f3 as its secondary color, with accent colors #c9a96e, #8a7968, #e8e0d6, #85bd73. Every hex value can be copied from the palette on this page.
- How do I apply Marble Luxury correctly?
- Key practices: Use marble white bg-[#f8f6f3] as the main background base. Use pure black text-[#1a1a1a] as the primary text color. Use antique gold border-[#c9a96e] for dividers and fine border decorations.
- What are common mistakes with Marble Luxury?
- Avoid: Do not use high-saturation neon or fluorescent colors. Do not use thick borders (border-4 and above). Do not use hard offset shadows (shadow-[Npx_Npx_0px]).
- How do I prompt AI to generate Marble Luxury UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: marble luxury, marble texture, gold accents, luxury website design.
Global Styles
Global CSS
css
/* Marble Luxury Global Styles */
:root {
--ml-onyx: #1a1a1a;
--ml-marble: #f8f6f3;
--ml-gold: #c9a96e;
--ml-taupe: #8a7968;
--ml-light: #e8e0d6;
}
/* Marble texture background */
.ml-marble-bg {
background-color: var(--ml-marble);
background-image:
radial-gradient(ellipse at 20% 50%, rgba(138, 121, 104, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(201, 169, 110, 0.02) 0%, transparent 40%),
radial-gradient(ellipse at 50% 80%, rgba(138, 121, 104, 0.03) 0%, transparent 45%);
}
/* Gold line separator */
.ml-gold-line {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--ml-gold) 20%,
var(--ml-gold) 80%,
transparent 100%
);
opacity: 0.3;
}
/* Luxury text spacing */
.ml-luxury-text {
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: 0.1em;
line-height: 1.8;
}
/* Elegant hover underline */
.ml-underline-hover {
position: relative;
}
.ml-underline-hover::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background: var(--ml-gold);
transition: all 0.5s ease-in-out;
transform: translateX(-50%);
}
.ml-underline-hover:hover::after {
width: 100%;
}
/* Subtle marble card shadow */
.ml-card-shadow {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.5s ease-in-out;
}
.ml-card-shadow:hover {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Marble Luxury design style originates from the material aesthetics of high-end architecture and interior design. Since ancient Rome, marble has symbolized power, wealth, and timeless beauty, with its natural gray veining against a warm white base creating a uniquely rhythmic visual pattern.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
58
Overall Score
Grade: D - Poor
Contrast Ratios
Score: 49/100Average Ratio: 6.4:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#1a1a1a / #f8f6f3 | 16.13:1 | ||
| Secondary text on background | /#c9a96e / #f8f6f3 | 2.07:1 | ||
| Muted text on background | /#8a7968 / #f8f6f3 | 3.88:1 | ||
| Text on secondary background | /#1a1a1a / #1a1a1a | 1:1 | ||
| Secondary text on secondary | /#c9a96e / #1a1a1a | 7.78:1 | ||
| Button primary | /#f8f6f3 / #1a1a1a | 16.13:1 | ||
| Text on accent 1 | /#1a1a1a / #c9a96e | 7.78:1 | ||
| Alt text on accent 1 | /#c9a96e / #c9a96e | 1:1 | ||
| Text on accent 2 | /#1a1a1a / #8a7968 | 4.16:1 | ||
| Alt text on accent 2 | /#c9a96e / #8a7968 | 1.87:1 | ||
| Text on accent 3 | /#1a1a1a / #e8e0d6 | 13.31:1 | ||
| Alt text on accent 3 | /#c9a96e / #e8e0d6 | 1.71:1 |
Readability
Score
80/100
Font Size
text-sm md:text-base
Font Weight
font-serif tracking-wide
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.