Luxury-focused Design System
superdesignCC0-1.0Prompt onlyLanding · landingGlassmorphism · glassmorphismMinimal · minimalLuxury · luxuryLight · lightLow (display) · lowPink · pinkVivid · vividSerif · serifGeneral · general
A refined, editorial-style design system characterized by heavy geometric sans-serif typography, a sophisticated dusty rose and charcoal palette, and staggered grid layouts. This aesthetic is optimized for high-end luxury services, boutique hospitality, premium fashion brands, or architectural portfolios. It features scroll-triggered reveal animations, grayscale-to-color image transitions, and a 'glassmorphism' navigation bar. The layout focuses on massive, bold headlines paired with hyper-minimalist utility text, creating a contrast that feels modern yet timeless. Category: Design Systems & Styles. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Luxury-focused Design System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/luxury-focused-design-system · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A luxury-focused, high-contrast design system called 'Super Travel' that uses bold geometric typography, a signature #e4a4bd accent, and a staggered grid to create a premium editorial feel.",
"style": {
"description": "The style is built on 'League Spartan' sans-serif, using weight and letter-spacing for hierarchy. The color palette is a warm off-white (#fdf8f3), charcoal (#262626), and a dusty rose accent (#e4a4bd). It uses smooth transitions (cubic-bezier) and grayscale-to-color hover effects to signify premium quality.",
"prompt": "Use 'League Spartan' as the primary font family for all elements. Primary background: #fdf8f3; Secondary background: #f5f0eb; Accent color: #e4a4bd; Primary text: #262626. For headings, use font-weight 700-900, tracking-tighter, and line-height 0.8. For utility labels, use font-size 10px, font-weight 900, and tracking 0.4em. Animations must use `cubic-bezier(0.16, 1, 0.3, 1)` with a 1s duration. Hover states on images should transition from grayscale(100%) to grayscale(0%) and scale up to 1.08. Navigation should be a glassmorphism effect with `backdrop-filter: blur(12px)` and a subtle 1px border at 5% opacity."
},
"layout_and_structure": {
"description": "The layout uses a 12-column grid system with significant whitespace. It features a high-impact hero section, a clean 3-column service grid, and a signature staggered gallery for portfolio items.",
"prompts": [
{
"part": "Navigation",
"prompt": "Fixed top navigation, 80px height. Use 'ACME TRAVEL' in bold uppercase on the left. Center menu items in 10px uppercase tracking-widest (0.2em). Far right: a pill-shaped CTA button (#e4a4bd background, #262626 text) with 32px padding-x and 12px padding-y. Apply glassmorphism effect: background rgba(253, 248, 243, 0.8) and blur(12px)."
},
{
"part": "Hero Section",
"prompt": "Full viewport height. Left side: Massive headline at 15vw font-size, line-height 0.8. Include one word in lowercase italics with #e4a4bd color. Below headline: 2xl body text in #262626/70 and an arrow-cta with a border-bottom-2px #e4a4bd. Right side: Large card with 24px border-radius, containing a grayscale-to-color image. Floating circular badge (160px diameter) in #e4a4bd with '01' italic text, positioned off-center with a slow 4s vertical bounce animation."
},
{
"part": "Services Grid",
"prompt": "Background #f5f0eb. Headline should be 8xl font-size. Below, a grid of 3 columns separated by 1px borders. Each card has 40px padding. On hover, the card background shifts from #fdf8f3 to #e4a4bd. Icons should be 4xl size, transitioning from #e4a4bd to #262626 on hover. Text within cards: h3 bold uppercase, p small leading-relaxed."
},
{
"part": "Portfolio Staggered Grid",
"prompt": "Two-column grid layout where every even item (right column) is offset downwards by 100px. Each item consists of a 3:4 aspect-ratio image with 16px border-radius. On hover, show a centered 96px black circle with white 'View Case' text in 10px font. Below images: category label in 10px #e4a4bd bold tracking-widest, followed by 3xl title and tag metadata separated by bullet points."
},
{
"part": "Footer",
"prompt": "Background #f5f0eb. 12-column split: left 5 columns for brand logo and mission statement; right 7 columns split into 3 sub-columns for navigation, social, and locations. Use 10px bold uppercase headers with #e4a4bd color and a 8px offset underline. Bottom bar: thin 1px border, 9px font-size for copyright and legal links with #262626/30 color."
}
]
},
"special_ui_components": [
{
"component": "Floating Concierge Badge",
"description": "A floating circular element used for highlighting status or rank.",
"prompt": "A 160px by 160px circle with background #e4a4bd and text #262626. Includes a 3xl font-size italic '01' and 8px font-size uppercase tracking-widest text. Implementation: `animation: bounce-slow 4s ease-in-out infinite;` where keyframes shift translateY from -5% to 5%."
},
{
"component": "Reveal-Up Wrapper",
"description": "Scroll-triggered entrance animation for all content blocks.",
"prompt": "Apply a class that starts with `opacity: 0; transform: translateY(40px);`. When active, transition to `opacity: 1; transform: translateY(0);` using `transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);`. Use intersection observer with 0.15 threshold to trigger."
}
],
"special_notes": "MUST use 'League Spartan' for both body and headers to maintain geometric consistency. MUST NOT use vibrant gradients; keep colors solid and muted. ALL reveal animations must use the specific cubic-bezier(0.16, 1, 0.3, 1) to ensure a high-end, 'weighted' motion feel. Images MUST be grayscale by default and reveal color only on interaction."
}
---
"Luxury-focused Design System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Luxury-focused Design System. \"Luxury-focused Design System\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-luxury-focused-design-system",
"license": "CC0-1.0",
"attribution": "\"Luxury-focused Design System\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#fdf8f3"
},
"foreground": {
"$type": "color",
"$value": "#262626"
},
"card": {
"$type": "color",
"$value": "#fdf8f3"
},
"card-foreground": {
"$type": "color",
"$value": "#262626"
},
"primary": {
"$type": "color",
"$value": "#e4a4bd"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#262626"
},
"secondary-foreground": {
"$type": "color",
"$value": "#262626"
},
"accent": {
"$type": "color",
"$value": "#fdf8f3"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#eee9e4"
},
"muted-foreground": {
"$type": "color",
"$value": "#727272"
},
"border": {
"$type": "color",
"$value": "#dad5d1"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#e4a4bd"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Luxury-focused Design System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520. */
:root {
--background: #fdf8f3;
--foreground: #262626;
--card: #fdf8f3;
--card-foreground: #262626;
--primary: #e4a4bd;
--primary-foreground: #fafaf9;
--secondary: #262626;
--secondary-foreground: #262626;
--accent: #fdf8f3;
--accent-foreground: #1c1917;
--muted: #eee9e4;
--muted-foreground: #727272;
--border: #dad5d1;
--destructive: #dc2626;
--ring: #e4a4bd;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Luxury-focused Design System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520. */
/** Tailwind theme extend for Luxury-focused Design System (superdesign-luxury-focused-design-system) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#fdf8f3",
"foreground": "#262626",
"card": "#fdf8f3",
"primary": "#e4a4bd",
"primary-foreground": "#fafaf9",
"secondary": "#262626",
"accent": "#fdf8f3",
"muted": "#eee9e4",
"border": "#dad5d1",
"destructive": "#dc2626",
"ring": "#e4a4bd"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Luxury-focused Design System" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/luxury-focused-design-system @ 6c6090694520. */
@layer base {
:root {
--background: #fdf8f3;
--foreground: #262626;
--card: #fdf8f3;
--card-foreground: #262626;
--primary: #e4a4bd;
--primary-foreground: #fafaf9;
--secondary: #262626;
--secondary-foreground: #262626;
--accent: #fdf8f3;
--accent-foreground: #1c1917;
--muted: #eee9e4;
--muted-foreground: #727272;
--border: #dad5d1;
--destructive: #dc2626;
--ring: #e4a4bd;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}