Sunset Glow Wordmark Mega Footer
superdesignCC0-1.0Prompt onlyLanding · landingGradient · gradientDark · darkMedium · mediumPink · pinkMedium · mediumSerif · serifGeneral · generalProfessional · professional
A dark mega footer with a radial orange-to-magenta sunset glow, a giant gradient wordmark, newsletter capture, three link columns, and a legal bar. Category: Forms & Contact. Prompt author listed upstream: Jason Zhou.
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
"Sunset Glow Wordmark Mega Footer" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/sunset-glow-wordmark-mega-footer · 6c6090694520 · © Superdesign
Prompt
{"summary": "Build a dark, full-bleed website mega-footer with a radial sunset glow, an oversized gradient wordmark, an email newsletter capture, three sitelink columns, and a legal/social bar.", "style": "Near-black ink base #0a0608. Signature radial 'sunset glow' anchored low-center: warm core #ffa23a fading through #ff7322, #ff4a2a, magenta #ed2a7e, deep plum #7a1648, into #1b0a14 then #0a0608. Accent gradients use ember #ff6a2c, flare #ff8a3d, rose #ff4d8d, magenta #e8228e (subscribe button is a flare->rose linear gradient; link underlines sweep #ff8a3d->#ff4d8d). Fonts via Google Fonts: Space Grotesk (display, headings, wordmark) + Inter (body, links). Mood: cinematic, warm, premium. Text is white at graded opacities (white/90 body, white/65 muted, white/60 column heads). Subtle 5% fractal-noise grain over the glow; a soft blurred glow-bloom highlight behind the wordmark.", "layout_and_structure": "Frameless, full-width footer; inner content centered in a max-width 1280px container with px-6 (sm px-10) gutters. Top region is a 12-col grid: brand+newsletter block spans 5 cols on the left, three sitelink columns span the remaining 7 cols (each column is one third). Below that, a giant centered/left wordmark spanning the width. At the bottom, a legal bar separated by a top hairline (white/15). Desktop: brand-left, 3 columns right, wordmark large left-aligned, legal bar as a single horizontal row. Tablet (sm): newsletter full width, the 3 columns become a 3-up row. Mobile (<640px): single column; the 3 sitelink groups collapse into tap-to-expand accordions (plus/minus icons), first column open by default for crawlability; wordmark center-aligned and fluid (18.5vw); legal items stack. A dark gradient scrim sits under the legal bar (transparent->ink) so the divider and legal text stay legible over the bright glow and wordmark descenders.", "special_ui_components": "Newsletter: pill-shaped capture with an envelope icon, email input (italic placeholder you@studio.com), and a gradient 'Subscribe' button with an arrow icon, plus a 'No spam. Unsubscribe anytime.' microcopy line and a 'New prompts, every Friday.' label. Three link columns with uppercase wide-tracked heads (Product, Resources, Company), each link with an animated gradient underline on hover. Oversized gradient-clipped wordmark (white->cream fade) over the glow. Legal bar: copyright, Privacy/Terms/Status links, and a row of four circular social chips (X, GitHub, Discord, YouTube) that lift on hover. A small top context bar with logo, nav, and an 'Open canvas' pill.", "special_notes": "Frameless: render the bare footer section only, no browser chrome or device mockup. Full-bleed background glow edge to edge while content stays in the 1280px container. The radial glow must be anchored low-center (at 50% 120%) so the brightest point sits below the fold and blooms upward. Keep all legal/footer text WCAG-legible by darkening the area beneath it with the ink scrim. Use the warm ember/magenta sunset palette exactly; do NOT default to generic indigo/violet AI-slop gradients. No em-dashes in any copy."}
---
"Sunset Glow Wordmark Mega Footer" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Sunset Glow Wordmark Mega Footer. \"Sunset Glow Wordmark Mega Footer\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-sunset-glow-wordmark-mega-footer",
"license": "CC0-1.0",
"attribution": "\"Sunset Glow Wordmark Mega Footer\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#0a0608"
},
"foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"card": {
"$type": "color",
"$value": "#0a0608"
},
"card-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"primary": {
"$type": "color",
"$value": "#0a0608"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#ffa23a"
},
"secondary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"accent": {
"$type": "color",
"$value": "#ffa23a"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#191517"
},
"muted-foreground": {
"$type": "color",
"$value": "#a3a3a2"
},
"border": {
"$type": "color",
"$value": "#2c292b"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#0a0608"
}
},
"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 */
/* "Sunset Glow Wordmark Mega Footer" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520. */
:root {
--background: #0a0608;
--foreground: #fafaf9;
--card: #0a0608;
--card-foreground: #fafaf9;
--primary: #0a0608;
--primary-foreground: #fafaf9;
--secondary: #ffa23a;
--secondary-foreground: #fafaf9;
--accent: #ffa23a;
--accent-foreground: #fafaf9;
--muted: #191517;
--muted-foreground: #a3a3a2;
--border: #2c292b;
--destructive: #dc2626;
--ring: #0a0608;
--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 */
/* "Sunset Glow Wordmark Mega Footer" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520. */
/** Tailwind theme extend for Sunset Glow Wordmark Mega Footer (superdesign-sunset-glow-wordmark-mega-footer) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#0a0608",
"foreground": "#fafaf9",
"card": "#0a0608",
"primary": "#0a0608",
"primary-foreground": "#fafaf9",
"secondary": "#ffa23a",
"accent": "#ffa23a",
"muted": "#191517",
"border": "#2c292b",
"destructive": "#dc2626",
"ring": "#0a0608"
},
"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 */
/* "Sunset Glow Wordmark Mega Footer" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sunset-glow-wordmark-mega-footer @ 6c6090694520. */
@layer base {
:root {
--background: #0a0608;
--foreground: #fafaf9;
--card: #0a0608;
--card-foreground: #fafaf9;
--primary: #0a0608;
--primary-foreground: #fafaf9;
--secondary: #ffa23a;
--secondary-foreground: #fafaf9;
--accent: #ffa23a;
--accent-foreground: #fafaf9;
--muted: #191517;
--muted-foreground: #a3a3a2;
--border: #2c292b;
--destructive: #dc2626;
--ring: #0a0608;
--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);
}
}