74 lines
6.2 KiB
Markdown
74 lines
6.2 KiB
Markdown
# 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. |