| name | frontend-designer |
| description | Provides rules and guidelines for design and UI/UX. Must be referred to when working on frontend or user facing elements. |
| license | Proprietary. |
Frontend Designer
The landing page will be the primary conversion funnel for leads.
- NO purple/blue gradients on white backgrounds
- NO generic fonts (Inter, Roboto, Arial, system-ui)
- NO predictable hero-CTA-features-testimonials templates
- NO generic geometric shapes or abstract blobs
- NO stock-looking imagery or clichéd visuals
Option A: Bento Grid Minimalism
Inspired by the Japanese bento box, this style organizes content into discrete, rounded rectangular cells of varying sizes. It provides a highly structured, modular layout that is inherently responsive.
Why it works: It creates a clear visual hierarchy and makes complex dashboards or portfolios feel organized and "clickable" without overwhelming the user with a sea of text.
Option B: Neo-Brutalism
This aesthetic rejects the soft gradients and shadows of modern design in favor of harsh shadows, bold outlines, and high-contrast colors. It often uses "raw" web elements like default system fonts and bright yellows or greens.
Why it works: The high contrast makes buttons and interactive elements impossible to miss. It feels honest, energetic, and loads quickly because it relies on CSS rather than heavy image assets.
Option C: Glassmorphism (Frosted Glass)
Characterized by semi-transparent backgrounds with a soft blur, this style mimics the look of frosted glass. It uses multi-layered approaches to create a sense of vertical depth (Z−index) and hierarchy.
Why it works: It allows for vibrant background colors or patterns to show through without distracting from the text. It makes interfaces feel light, airy, and premium.
Option D: Claymorphism
A evolution of "Neumorphism," this style uses soft, rounded corners and double inner/outer shadows to make elements look like 3D clay or inflated plastic. It is often paired with playful 3D illustrations.
Why it works: The "tactile" nature of the buttons provides excellent affordance—users instinctively know what is interactive because it looks physically pushable. It is particularly effective for friendly, approachable brands.
Option E: Type-Centric Maximalism
This approach strips away almost all imagery and decoration, making massive, expressive typography the primary design element. It uses variable fonts and creative kerning to build the visual identity.
Why it works: It is incredibly fast-loading and accessible for screen readers. By removing visual "noise," the user’s focus is directed entirely toward the message and the content, making for a very efficient reading experience.
Option F: Editorial Academicism
This aesthetic borrows from the world of high-end publishing and research journals. It swaps the typical "tech blue" and sleek dark modes for creamy off-white backgrounds, serif typography, and earthy, muted color palettes.
Why it works: It establishes immediate trust and authority by feeling scholarly rather than corporate. The use of paper-like textures and "slow-reading" layouts reduces digital eye strain and signals that the content is deeply considered, making it perfect for AI, research, or mission-driven brands.
Pick the most unexpected yet appropriate choice and execute it with conviction.
Hero Section
- A hook that creates immediate intrigue
- Interactive element that demonstrates capability
- Clear value proposition in ≤12 words
- Primary CTA: "REPLACE_ME:PRIMARY_CTA"
- Trust signals (logos, security badges)
Problem/Solution Narrative
- Tell a story, don't list features
- Use scroll-triggered reveals for dramatic effect
- Include real-world scenario visualization
Product Showcase
- Interactive demo preview or animated mockup
- Show the product in action visually
- Technical credibility indicators
Social Proof
- Testimonials from target personas
- Metrics that matter to REPLACE_ME:TARGET_AUDIENCE
- Customer grid with hover states
Technical Differentiators
- Clean comparison or feature grid
- Integration/API preview (if applicable)
- Security & compliance badges
Conversion Section
- Secondary CTA with urgency
- Quick form (Name, Email, Company)
- Alternative action: "REPLACE_ME:SECONDARY_CTA"
Footer
- Minimal, sophisticated
- Essential links only
- Newsletter capture
- Use the related frontend libraries (likely React or vanilla Typescript)
- Mobile-first with desktop-responsive (fluid typography, adaptive layouts)
- Smooth scroll behavior
- Page load animations with staggered reveals (use animation-delay)
- Intersection Observer for scroll-triggered effects
- Micro-interactions on hover states
- CSS custom properties for theming
- Semantic HTML5 structure
- Performance-optimized (no heavy libraries)
- Load Google Fonts for typography
- Ensure full accessibility with
ariaelements, proper structure etc.
- Page Load: Orchestrated reveal sequence (0ms → 200ms → 400ms stagger)
- Scroll: Fade-in-up with subtle parallax on key visuals
- Hover: Scale transforms, color transitions, underline animations
- Interactive: Cursor-following effects, magnetic buttons
- Background: Subtle ambient motion (floating particles, gradient shifts)
Make sure to respect prefers-reduced-motion with @media queries.
- Deep background: #0a0a0f to #12121a range
- Text: Pure white (#ffffff) for headlines, muted (#a0a0a0) for body
- Accent: ONE bold color used sparingly (electric cyan, hot coral, acid green)
If you choose a light theme:
- Background: Off-white or cream (not pure white)
- Text: Deep charcoal (not pure black)
- Accent: Bold, unexpected (terracotta, forest, sapphire)
- Headlines: Display serif (Playfair Display) or Geometric sans (Clash Display, Cabinet Grotesk)
- Body: Readable with character (Source Serif Pro, Satoshi)
- Mono: JetBrains Mono, IBM Plex Mono for technical elements
Avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans
- Is modular (in small modules)
- Follows best practices including passing
biomelinting - Uses realistic placeholder content (not "Lorem ipsum")
- Is production-ready quality
- Which aesthetic direction you're choosing and why
- The specific font pairing if not already chosen
- The color palette (hex values) if not already chosen
- The hero hook concept
- One unique interactive element you'll implement
Then write the code. Use @browser or playwright-mcp to check how it looks.
Make sure the style guide is also updated with colours, font pairings and other essential design knowledge.