Umbra Footer
Website SectionDrop-in block with staggered entrance and a grid that survives every breakpoint.
darkgrainpricing
117k5.6k3.6k4.2
Drop-in block with staggered entrance and a grid that survives every breakpoint.
You are an award-winning product designer and senior frontend engineer.
Build "{{Headline}}" for {{Brand}}, a {{Industry}} company.
Reference: Palladium Proof — a website sections in a luxury, minimal, startup register.
Non-negotiables
- Grayscale only. Background near-black, surfaces one step lighter, text white and #A1A1AA. No colored gradients.
- Typography carries the design: thin display weights, tight tracking, oversized headlines, generous leading.
- Whitespace is the layout. Never fill space just because it exists.
- Motion is restrained: staggered entrances, scroll reveals, hover lift. Respect prefers-reduced-motion.
- Primary accent is {{Primary Color}} used sparingly on a single call to action.
Structure
1. Fullscreen hero with badge, one headline, one supporting line, and the CTA "{{CTA}}".
2. Proof band with four short factual points, no logos invented.
3. Three content sections, each making exactly one argument.
4. A closing section that repeats the CTA and nothing else.
Forbidden
- Purple-to-indigo gradients, emoji, stock illustration, "Trusted by" filler, duplicate CTAs in the hero.
- Default component styling left untouched.
Deliver production-quality React and Tailwind with reusable components and semantic design tokens.overview
detail
motion
responsive
Comments and reviews arrive with accounts in the next phase.
Related
Drop-in block with staggered entrance and a grid that survives every breakpoint.
Self-contained block with copy slots, media frame and hover choreography.
Drop-in block with staggered entrance and a grid that survives every breakpoint.
Scroll-linked reveal with spring physics and a reduced-motion path built in.