5 days ago
Create a bold, modern neo-Brutalist website for a social influence agency that helps brands and individuals amplify their digital presence. The site should embody the raw, unapologetic aesthetic of neo-Brutalism while maintaining contemporary functionality and user experience. Design Philosophy & Style Guide Neo-Brutalist Principles Raw Concrete Aesthetic: Use stark, geometric shapes and block-like elements Bold Typography: Heavy, sans-serif fonts with strong hierarchy Monochromatic Base: Primarily black, white, and concrete gray (#F5F5F5, #CCCCCC, #666666) Accent Colors: Strategic use of vibrant colors (electric blue #0066FF, warning orange #FF6600, neon green #00FF66) Asymmetrical Layouts: Intentionally unbalanced compositions that create visual tension Exposed Structure: Show "digital concrete" through visible grid systems and structural elements Visual Elements Buttons: Chunky, rectangular with sharp edges and heavy shadows Cards: Thick borders, no rounded corners, prominent drop shadows Navigation: Bold, block-style menu items with clear hierarchy Imagery: High-contrast, documentary-style photography with harsh lighting Icons: Simple, geometric shapes with thick lines Technical Requirements Tech Stack HTML5: Semantic structure with proper accessibility CSS3: Custom properties, Grid, Flexbox, animations JavaScript: Vanilla JS for interactions and dynamic content Tailwind CSS: Utility-first styling with custom configuration Responsive Design Mobile-first approach with breakpoints at 640px, 768px, 1024px, 1280px Maintain brutalist aesthetic across all devices Ensure touch targets are minimum 44px for mobile Content Structure & Pages Homepage Hero Section: Bold statement about social influence power Services Overview: Grid of brutal service cards Client Testimonials: Raw, unfiltered feedback in stark containers Call-to-Action: Aggressive, conversion-focused messaging About Page Agency Story: Narrative about disrupting traditional marketing Team Section: Bold portraits with minimal bio information Philosophy: Manifesto-style content about influence and authenticity Services Page Influencer Marketing: Connecting brands with authentic voices Content Strategy: Creating viral-worthy content campaigns Social Media Management: Full-service social presence Brand Partnerships: Facilitating meaningful collaborations Analytics & Reporting: Data-driven influence measurement Case Studies Project Showcases: Before/after social metrics Client Success Stories: Quantifiable influence growth Campaign Breakdowns: Detailed strategy and execution Contact Page Contact Form: Brutalist-styled form with validation Office Information: Physical and digital presence details Social Media Links: Direct channels to agency profiles Specific Design Elements Typography Primary Font: Inter or Roboto (bold weights: 700, 800, 900) Headings: All caps, letter-spacing: 0.1em Body Text: 16px base, 1.6 line-height Accent Text: Neon colors for highlights and CTAs Layout Components Grid System: 12-column CSS Grid with visible guidelines Spacing: 8px base unit (8, 16, 24, 32, 48, 64px) Shadows: Heavy drop shadows (4px, 8px, 12px offsets) Borders: Thick (3px-5px) solid borders on interactive elements Interactive Elements Hover Effects: Harsh color transitions, shadow changes Scroll Animations: Parallax effects on hero sections Form Interactions: Aggressive validation feedback Loading States: Concrete-style progress indicators Content Tone & Messaging Voice & Tone Direct: No corporate fluff, straight-to-the-point messaging Confident: Bold claims backed by data and results Disruptive: Challenge traditional marketing approaches Authentic: Emphasize genuine influence over follower counts Key Messages "We don't create followers. We create movements." "Your influence deserves a platform as bold as your voice." "Raw talent. Refined strategy. Radical results." "Stop playing nice. Start making noise."
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
