njaa-frontend/Gemini/style.md

Website Style Guide for NotJustAn.Agency

This style guide outlines the visual design, tone, and interaction principles for the NotJustAn.Agency website. It is designed to ensure a cohesive, professional, and lead-generating online presence, providing clear instructions for LLMs to create a great-looking and effective website.

Brand Essence

• Core Identity: Expert, results-driven, growth-focused, trustworthy, modern, and professional.
• Target Audience: B2B clients in hospitality and e-commerce seeking to scale their businesses.
• Key Message: NotJustAn.Agency solves critical business growth challenges (revenue, conversions, visibility) through specialized digital marketing and web development services, helping clients achieve 'Fully Booked Restaurants', 'Sold-Out Collections', and 'Brands Built to Last'.
• Tone: Professional, confident, clear, authoritative, yet accessible. Emphasizes a problem/solution approach and tangible business outcomes.

Visual Design Principles

• Aesthetic: Clean, modern, professional, and uncluttered. The design should convey competence and sophistication, allowing the content to shine. Prioritize user experience and clear communication.
• Color Palette:
  • Primary: Deep Navy/Blue (#0A2540) - Conveys trust, professionalism, and depth. Use for backgrounds, primary text, and key structural elements.
  • Secondary: Off-White/Light Gray (#F8FAFC) - Provides a clean, spacious canvas for content. Use for backgrounds of content sections or cards.
  • Accent: Teal (#06B6D4) - A modern, energetic color for calls-to-action, key interactive elements, and highlights. Use sparingly to draw attention to important actions.
  • Text:
    • Headings: Dark Grey/Near Black (#0F172A) - High contrast for immediate visibility.
    • Body Copy: Slightly lighter Dark Grey (#1E293B) - Excellent readability for longer text blocks.
• Typography:
  • Headings: Utilize a modern, strong sans-serif font family (e.g., Inter, Poppins, Montserrat) with clear hierarchy via font weights and sizes.
  • Body Text: Employ a highly readable sans-serif font family (e.g., Inter, Open Sans, Lato) for optimal legibility.
• Layout & Responsiveness:
  • Grid System: Utilize a flexible grid system (leveraging Tailwind CSS) for consistent alignment and spacing.
  • Responsiveness: Design must be fully responsive, adapting flawlessly to all screen sizes (desktop, tablet, mobile). Prioritize mobile-first principles.
  • Whitespace: Incorporate generous use of whitespace to improve readability, reduce cognitive load, and enhance the premium feel.
• Imagery & Visuals:
  • Quality: Use high-resolution, professional, and relevant imagery. Visuals should align with themes of growth, scale, and expertise.
  • Placeholder Strategy: If placeholder graphics are needed, use abstract geometric shapes or minimalist, sophisticated placeholder images that convey professionalism rather than looking amateurish. Avoid default stock photos.

Interactivity & Animation

• Purposeful Animation: Employ Framer Motion for animations that enhance UX, guide attention, and convey dynamism without being distracting.
  • Use Cases: Smooth page transitions, subtle entrance animations, hover effects on CTAs and cards, micro-interactions.
  • Style: Animations should be quick, smooth, and subtle. Avoid jarring or lengthy effects.
• Performance: Animations must be performant and not impede loading times or user interaction.

Content Presentation

• Hierarchy: Employ clear, distinct heading levels (H1, H2, H3) to structure content logically.
• Copywriting Style: Adhere to the problem/solution framing and results-oriented language from the copywriting documents. Emphasize benefits and tangible business outcomes.
• Emphasis: Use bold text strategically for key terms, benefits, and CTAs.
• Lists: Utilize bullet points and numbered lists for clarity and scannability when outlining services, features, or steps.

Key Components & Elements

• Buttons (Calls to Action - CTAs):
  • Design: Prominent, clear, and action-oriented. Use the accent color (#06B6D4) for primary CTAs ("Get in Contact," "See Portfolio"). Secondary buttons can be outlined or use a less saturated version of the accent color.
  • Placement: Strategically placed in hero sections, after content sections, and in footers.
  • States: Design clear hover and active states for buttons.
• Forms:
  • Contact & Newsletter Forms: Clean, simple, and easy to use. Minimize required fields. Clearly indicate required fields. Use professional input field styling via Tailwind CSS.
  • Submission Feedback: Provide clear success or error messages upon form submission.
• User Authentication Elements: For gated content (e.g., ebook downloads):
  • Clear login/signup forms and modals.
  • Integration with Strapi's user management.
  • Clear feedback on authentication status.
• Ebook Download Links: Should be visually distinct once a user has authenticated and met the newsletter signup criteria.

LLM Development Guidance

• Persona: Act as a skilled UI/UX designer and frontend developer specializing in modern web applications.
• Frameworks: Utilize Astro.js for page structure and SSR/static generation, React for interactive components, Tailwind CSS for styling, and Framer Motion for animations.
• Code Generation:
  • Apply the defined color palette (#0A2540, #F8FAFC, #06B6D4, #0F172A, #1E293B) and typography consistently.
  • Implement responsive layouts using Tailwind's utility classes.
  • Integrate Framer Motion for subtle, purposeful animations.
  • Design forms and buttons to be clear, actionable, and visually aligned with the brand.
  • Structure content semantically, emphasizing clear headings and readable body text.
  • Ensure components are accessible and performant.
  • For download gating, interact with Strapi's API for authentication and file retrieval, and Listmonk's API for newsletter subscriptions.
• Output: Generate clean, well-structured React components and Astro pages adhering to these guidelines.