Superdesign Editorial Waitlist
superdesignCC0-1.0Prompt onlyBlog · blogLanding · landingBrutalist · brutalistTexture · textureWarm · warmFuturistic · futuristicLuxury · luxuryExperimental · experimentalDark · darkLow (display) · lowOrange · orangeVivid · vividSerif · serifGeneral · general
Editorial waiting list landing page with a cinematic, high-fashion aesthetic. Features a deep matte #181818 background, warm beige #EBDCC4 typography, and a brutalist yet refined grid. Key elements include oversized edge-to-edge display type, subtle noise textures, and a layered text depth effect. Ideal for luxury tech, creative agency portfolios, high-end SaaS tools, architecture firms, and invite-only exclusivity campaigns. Layout utilizes strong typographic hierarchy and generous negative space with accent tones in coral, rust, and sage. Category: Waitlist & Coming Soon. 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
"Superdesign Editorial Waitlist" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/superdesign-editorial-waitlist · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A minimalist, editorial-inspired landing page designed to convey 'quiet confidence' and exclusivity. It uses a dark matte palette with warm earth-toned accents, oversized uppercase typography, and a distinct lack of traditional SaaS elements like icons or soft shadows. The focus is on typographic impact and a structured grid alignment.",
"style": {
"description": "The style is defined by a 'Cinematic Editorial' aesthetic. It uses 'Clash Grotesk' for bold, oversized headlines and 'General Sans' for legible, high-end body copy. Colors are earthy and dark: matte charcoal (#181818), warm beige (#EBDCC4), and coral-rust accents (#DC9F85). A subtle 3% opacity fractal noise overlay provides texture. No pill shapes or gradients; strictly 4px rounded corners and 1px solid borders.",
"prompt": "### Visual Language & Aesthetic\n- **Base Theme**: Dark matte editorial. Use `#181818` for the main background.\n- **Typography**: \n - **Display**: Use 'Clash Grotesk' or a similar geometric sans. Headers must be Bold, Uppercase, with `tracking-tight` and `leading-[0.85]`. Desktop size: `11.5vw`. Mobile size: `16vw`.\n - **Body**: Use 'General Sans' or a high-end neo-grotesk. Weight: 300-400 for copy, 500-700 for labels. Text color: `#EBDCC4`.\n- **Color Palette**:\n - Primary Background: `#181818` (Matte Black)\n - Primary Text: `#EBDCC4` (Warm Beige)\n - Secondary Text/Labels: `#B6A596` (Muted Sage)\n - Primary Accent/Button: `#DC9F85` (Coral Rust)\n - Borders: `#66473B` (Deep Earth)\n - Dark Details/Dividers: `#35211A` (Burnt Umber)\n- **Effects**:\n - **Noise**: Apply a global overlay using a fractal noise SVG at 0.03 opacity.\n - **Borders**: 1px solid borders using `#66473B` or `#35211A`.\n - **Corners**: Subtle rounding only (max 4px radius). No pill shapes.\n - **Depth**: Use a layered text effect with a 1px stroke outline (`#66473B`) offset behind solid text."
},
"layout_and_structure": {
"description": "A vertically structured page with a fixed minimal navigation, an oversized hero section, and a grid-based bottom container for the statement of exclusivity and the email capture form.",
"prompts": [
{
"part": "Minimal Navigation",
"prompt": "Create a high-positioned nav bar with absolute positioning. Left side: Small brand ID in `#B6A596`, uppercase, wide tracking (e.g., 'SD—PROTOCOL 01'). Center: A 1px horizontal line in `#35211A` acting as a spacer. Right side: A status label 'INVITE ONLY' in text size 10px-12px, color `#35211A`."
},
{
"part": "Hero Headline Section",
"prompt": "Central hero area with edge-to-edge typography. Start with an 'Early Access' label featuring a 24px horizontal line in `#DC9F85` followed by uppercase text in `#B6A596`. The main headline 'ACME' (or generic title) should be oversized (`11.5vw`). Layer a 1px outlined version of the text (`#66473B`) behind the solid beige text, offset by 4px for a depth effect. On mobile, the headline must stack vertically."
},
{
"part": "Bottom Content Grid",
"prompt": "Below the hero, place a horizontal divider line in `#35211A`. Below the line, create a 12-column grid. Columns 1-5: Exclusivity statement in `text-xl`, light weight, leading-relaxed. Include a status indicator below it: a 8px circle in `#DC9F85` next to label text 'Batch 003 Filling'. Columns 7-12: Email capture form."
},
{
"part": "Email Capture & Footer",
"prompt": "The form should be a unified block. Input field: Transparent background, 1px border `#66473B`, placeholder text `#66473B`, 4px top-left/bottom-left corners. Button: Solid `#DC9F85` background, `#181818` text, bold, uppercase, 4px top-right/bottom-right corners. Add a tiny caption below: 'Zero spam. Pure utility.' in `#35211A`."
}
]
},
"special_ui_components": [
{
"component": "Rotating Waitlist Badge",
"description": "An animated circular badge indicating current status.",
"prompt": "Place a 64x64px circular component in the bottom-right corner. It consists of a 1px border `#35211A` circle. Inside, animate a text path 'WAITING LIST • WAITING LIST •' rotating infinitely (12s duration). Use font size 11px, bold, uppercase, in `#35211A`."
},
{
"component": "Cinematic Text Layering",
"description": "A depth-effect headline style using outlines.",
"prompt": "Implementation: The headline is doubled. Layer 1 (Back): `-webkit-text-stroke: 1px #66473B`, color: transparent, offset by `4px 4px`. Layer 2 (Front): `color: #EBDCC4`. Both layers must share the same font-family, weight, and tracking to align perfectly."
}
],
"special_notes": "MUST DO: Ensure the background noise overlay is fixed and covers the entire viewport. MAINTAIN strictly tight line-height (0.85) for headlines. MUST NOT: Use gradients, box shadows, or rounded 'pill' buttons. Keep the color palette limited to the specified earthy tones to avoid a generic 'tech' look."
}
---
"Superdesign Editorial Waitlist" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Superdesign Editorial Waitlist. \"Superdesign Editorial Waitlist\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-superdesign-editorial-waitlist",
"license": "CC0-1.0",
"attribution": "\"Superdesign Editorial Waitlist\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#181818"
},
"foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"card": {
"$type": "color",
"$value": "#181818"
},
"card-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"primary": {
"$type": "color",
"$value": "#ebdcc4"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#dc9f85"
},
"secondary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"accent": {
"$type": "color",
"$value": "#dc9f85"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#262626"
},
"muted-foreground": {
"$type": "color",
"$value": "#a3a3a2"
},
"border": {
"$type": "color",
"$value": "#383838"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#ebdcc4"
}
},
"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 */
/* "Superdesign Editorial Waitlist" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520. */
:root {
--background: #181818;
--foreground: #fafaf9;
--card: #181818;
--card-foreground: #fafaf9;
--primary: #ebdcc4;
--primary-foreground: #1c1917;
--secondary: #dc9f85;
--secondary-foreground: #fafaf9;
--accent: #dc9f85;
--accent-foreground: #fafaf9;
--muted: #262626;
--muted-foreground: #a3a3a2;
--border: #383838;
--destructive: #dc2626;
--ring: #ebdcc4;
--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 */
/* "Superdesign Editorial Waitlist" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520. */
/** Tailwind theme extend for Superdesign Editorial Waitlist (superdesign-superdesign-editorial-waitlist) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#181818",
"foreground": "#fafaf9",
"card": "#181818",
"primary": "#ebdcc4",
"primary-foreground": "#1c1917",
"secondary": "#dc9f85",
"accent": "#dc9f85",
"muted": "#262626",
"border": "#383838",
"destructive": "#dc2626",
"ring": "#ebdcc4"
},
"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 */
/* "Superdesign Editorial Waitlist" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-editorial-waitlist @ 6c6090694520. */
@layer base {
:root {
--background: #181818;
--foreground: #fafaf9;
--card: #181818;
--card-foreground: #fafaf9;
--primary: #ebdcc4;
--primary-foreground: #1c1917;
--secondary: #dc9f85;
--secondary-foreground: #fafaf9;
--accent: #dc9f85;
--accent-foreground: #fafaf9;
--muted: #262626;
--muted-foreground: #a3a3a2;
--border: #383838;
--destructive: #dc2626;
--ring: #ebdcc4;
--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);
}
}