# Navia — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.thenavia.com/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:58:17.778Z at 1440×1000 — https://www.thenavia.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Navia presents an editorial and sophisticated design, characterized by a muted, earthy color palette of warm off-whites, browns, and accents of bright yellow and orange. The typography mixes a classic serif for headings ('Lora') with a clean sans-serif for body text ('Publicsans'), contributing to a balanced, professional yet approachable feel. The layout makes use of substantial whitespace, split sections, and layered imagery. The interactive elements include custom animated features, such as hovering social icons and scroll-triggered content reveals, adding a dynamic layer to the user experience.

## Classification

- Industry: technology
- Site type: Landing, Blog
- Business model: E-commerce, AI, Software
- Styles: editorial, minimal, corporate, earthy, dynamic
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Lora Variablefont Wght — weight 400; size 56px; line-height 61.6px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Lora Variablefont Wght — weight 400; size 48px; line-height 57.6px; tracking normal; Regular (90% role confidence, computed values)
- Body: Publicsans Variablefont Wght — weight 400; size 16px; line-height 24px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #FAF4E6: color-4: computed rgb(250, 244, 230); AI role: Warm off-white background color ('#FAF4E6') dominating the majority of the page sections. (100% role confidence, computed values)
- Text — text #36312A: color-2: computed rgb(54, 49, 42); AI role: Dark brown ('#36312A') used for most text, including headings and body copy, providing high contrast against the canvas. (100% role confidence, computed values)
- Primary Action — primary action #E8FF39: color-7: computed rgb(232, 255, 57); AI role: Bright yellow ('#E8FF39') used for the main 'Get started' CTA buttons. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Pure white ('#FFFFFF') used as the background for input fields, product UI mockups, and specific cards. (95% role confidence, computed values)
- Accent — accent #F88450: color-8: computed rgb(248, 132, 80); AI role: Orange ('#F88450') used for secondary CTA buttons, highlights, and specific UI elements. (90% role confidence, computed values)
- Border — border #CDC7B8: color-11: computed rgb(205, 199, 184); AI role: Muted beige/grey ('#CDC7B8') used for subtle borders around pricing plans and input elements. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "76.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "h2",
        "text": "4 steps is all it takes",
        "top": 5240,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "4",
        "top": 5237,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Loved by business owners just like you",
        "top": 6168,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "31.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "What is Navia?",
        "top": 16659,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Who is Navia for?",
        "top": 16747,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "How does Navia get to know my business?",
        "top": 16835,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "41.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Get your custom plan",
        "top": 5248,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Create and post content",
        "top": 5418,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Grow your business",
        "top": 5587,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "61.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h1",
        "text": "The marketing tool built for business owners with too much on their plate.",
        "top": 549,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Free forever",
        "top": 12222,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "$49/mo",
        "top": 12233,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "26.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Your marketing to-do list, planned for you",
        "top": 7728,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Effortlessly create content that stays on brand",
        "top": 7813,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "A writer that speaks in your voice",
        "top": 7867,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "57.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Get a full, custom marketing plan across all of your channels",
        "top": 1659,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Resources to help you grow your business",
        "top": 17519,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "You didn’t build your business to spend your time wondering about what to post tomorrow",
        "top": 18529,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "80px",
    "lineHeight": "96px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "You were meant to",
        "top": 10730,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Not stress about marketing",
        "top": 11284,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Notemakersmark",
    "fontStack": "Notemakersmark, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "112px",
    "lineHeight": "33.6px",
    "letterSpacing": "-6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "run your business",
        "top": 10826,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "46.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "You didn't start your business to become a marketing expert.",
        "top": 7189,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 65,
    "contexts": [
      {
        "tag": "p",
        "text": "Give Navia your Instagram and website, and she builds a custom marketing plan made for your business",
        "top": 5306,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Navia writes all of your content for you - captions, emails, blogs, website copy, and posts in your ",
        "top": 5475,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Stay consistent without being overwhelmed, and watch your following, engagement, and confidence buil",
        "top": 5645,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Navia learns your business and builds you a day-by-day marketing plan, so you can get more customers",
        "top": 766,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Navia helps you get your marketing done in minutes so you have more time to live life on your own te",
        "top": 11396,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Right now, you can join Navia for $49 a month, and that rate is yours for life. This is exclusive fo",
        "top": 11943,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Notemakersmark",
    "fontStack": "Notemakersmark, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "We have humans for that too",
        "top": 13310,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Join the out of office club",
        "top": 15655,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Navia is a whole marketing team in one, from strategist and copywriter to social media manager to co",
        "top": 1863,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Get started",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Get started for free",
        "top": 864,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "↗︎",
        "top": 864,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Lora Variablefont Wght",
    "fontStack": "\"Lora Variablefont Wght\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "20.8px",
    "lineHeight": "29.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "div",
        "text": "\"Taylor [and Navia] was an absolute rockstar. I highly recommend hiring her for all your marketing n",
        "top": 6782,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "\"There are a lot of AI marketing tools, but Navia actually helps with a strategic lens and has great",
        "top": 6782,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "\"Using Navia has helped me get all my thoughts in one place and has given me tasks that I can realis",
        "top": 6782,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "View plans",
        "top": 13576,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Schedule a meeting",
        "top": 13788,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Schedule a meeting",
        "top": 14001,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Navia. All rights reserved.",
        "top": 19236,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 19236,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Terms and conditions",
        "top": 19236,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Platform",
        "top": 36,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Pricing",
        "top": 36,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 36,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Notemakersmark",
    "fontStack": "Notemakersmark, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Basic plan",
        "top": 12166,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Growth plan",
        "top": 12166,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Notemakersmark",
    "fontStack": "Notemakersmark, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Business plan",
        "top": 12177,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Publicsans Variablefont Wght",
    "fontStack": "\"Publicsans Variablefont Wght\", Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Drag",
        "top": 21,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 74,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 38,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "Platform",
        "top": 36,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 68,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#36312A",
    "alpha": 1,
    "cssValue": "rgb(54, 49, 42)",
    "count": 157,
    "contexts": [
      {
        "tag": "div",
        "text": "Get started",
        "top": 32,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Get a full, custom marketing plan across all of your channels",
        "top": 1659,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Navia is a whole marketing team in one, from strategist and copywriter to social media manager to co",
        "top": 1863,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(0, 0, 0, 0.3)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FAF4E6",
    "alpha": 1,
    "cssValue": "rgb(250, 244, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "body",
        "text": "We value your privacyWe use cookies to enhance your browsing experience, serve personalised ads or c",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(0, 0, 0, 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 18209,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#37322C",
    "alpha": 0.1803921568627451,
    "cssValue": "color(srgb 0.211765 0.192157 0.164706 / 0.18)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Your marketing to-do list, planned for youOpen Navia and your marketing task for today is already si",
        "top": 7728,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#E8FF39",
    "alpha": 1,
    "cssValue": "rgb(232, 255, 57)",
    "count": 25,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "Get started",
        "top": 20,
        "property": "background"
      },
      {
        "tag": "h2",
        "text": "run your business",
        "top": 10826,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F88450",
    "alpha": 1,
    "cssValue": "rgb(248, 132, 80)",
    "count": 28,
    "contexts": [
      {
        "tag": "div",
        "text": "Get started for free",
        "top": 1949,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Basic plan",
        "top": 12166,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 12416,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(255, 255, 255, 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "PlatformPricingResourcesGet started for free↗︎",
        "top": 15,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Drag",
        "top": 21,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Please accept cookies to access this content",
        "top": 19100,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Please accept cookies to access this content",
        "top": 19100,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#CDC7B8",
    "alpha": 1,
    "cssValue": "rgb(205, 199, 184)",
    "count": 30,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1247,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Basic planFree foreverOne clear strategy, a simple plan across two channels, and daily top-of-funnel",
        "top": 12125,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#635A4F",
    "alpha": 1,
    "cssValue": "rgb(99, 90, 79)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 12463,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#0056A7",
    "alpha": 1,
    "cssValue": "rgb(0, 86, 167)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 940,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "nav",
        "text": "PlatformPricingResourcesGet started for free↗︎",
        "top": 15,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#C99DDD",
    "alpha": 1,
    "cssValue": "rgb(201, 157, 221)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "5 stars on google",
        "top": 6094,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#E98D58",
    "alpha": 1,
    "cssValue": "rgb(233, 141, 88)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7728,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#B2AFAF",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(178, 176, 176, 0.35)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Please accept cookies to access this content",
        "top": 19289,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing, utilizing large margins between major sections and padding within cards, creating a breathable layout.
- Corner style: Combination of rounded (pill-shaped buttons, some cards) and sharp (product UI mockups, some images) corners.
- Radius: Buttons feature a fully rounded (pill) radius. Some cards and images have smaller radii (e.g., 8px or 16px).
- Borders: Subtle, thin borders (1px) used on some cards (pricing, resources) and navigation elements, often in muted tones.
- Buttons: Pill-shaped, solid fill with high-contrast text. Primary buttons are bright yellow; secondary buttons vary (white or orange). Often accompanied by a circular icon button.
- Content width: Restricted central content column for readability, spanning a max width typical of modern desktops, while backgrounds occasionally stretch full width.
- Density: Low density; the design favors ample whitespace and large typography over packing information tightly.
- Evidence: Observed via the layout of sections, button shapes, text styling, and spacing between elements.

## Sections

Gallery section count: 15. Each entry corresponds to one gallery capture.

1. **Hero — Marketing Plan Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with integrated navigation, full-bleed lifestyle imagery, a clear value proposition, supporting copy, and two conversion actions.
   Capture: 1440×1001px; page bounds 0–1001px of 19290px; source section ID: `6aa42ea5-e6b4-4df5-8e11-6e9ceffaa39b`; image: https://media.designdetails.io/library/bfee5c800f1bc30986c95a7f7d9c053c0f49824524d9d7e15dfe1458c1ed5cc8/section-manual-6aa42ea5-e6b4-4df5-8e11-6e9ceffaa39b-1791701530772.webp
   SECTION.md v3.2: `6aa42ea5-e6b4-4df5-8e11-6e9ceffaa39b` (deterministic evidence; editorial review pending)
2. **Pricing — Get a full, custom marketing plan across all of your channels** (Home)
   Pricing composition from Home, organized around “Get a full, custom marketing plan across all of your channels”.
   Capture: 1440×834px; page bounds 2866–3700px of 19290px; source section ID: `de4ef455-e6fc-4004-b2bd-7c62987ec40b`; image: https://media.designdetails.io/library/fe78a2da57ae4ec47864890e35c737eabc5848285816e12d11169feab61e5986/section-manual-de4ef455-e6fc-4004-b2bd-7c62987ec40b-1791701568931.webp
   SECTION.md v3.2: `de4ef455-e6fc-4004-b2bd-7c62987ec40b` (deterministic evidence; editorial review pending)
3. **Features — 4 steps is all it takes** (Home)
   Reusable feature composition from Home, organized around “4 steps is all it takes”.
   Capture: 1440×832px; page bounds 5181–6013px of 19290px; source section ID: `9bffaa84-e6f1-4f6c-9367-4b7b3ec3a5d2`; image: https://media.designdetails.io/library/552cf11f22b4e05659958bf4dd77fead4de220a0ed64d37f2af308e53820c7c3/section-manual-9bffaa84-e6f1-4f6c-9367-4b7b3ec3a5d2-1791701584505.webp
   SECTION.md v3.2: `9bffaa84-e6f1-4f6c-9367-4b7b3ec3a5d2` (deterministic evidence; editorial review pending)
4. **Features — You didn't start your business to become a marketing expert.** (Home)
   Reusable feature composition from Home, organized around “You didn't start your business to become a marketing expert.”.
   Capture: 1440×1044px; page bounds 7109–8153px of 19290px; source section ID: `b0924b3f-b087-42fc-acc6-03a5e648cccc`; image: https://media.designdetails.io/library/2a79e3dae8c6e3d84152b117bfc811a5488820a51a0efebd7ef0aed3645425d1/section-manual-b0924b3f-b087-42fc-acc6-03a5e648cccc-1791701614768.webp
   SECTION.md v3.2: `b0924b3f-b087-42fc-acc6-03a5e648cccc` (deterministic evidence; editorial review pending)
5. **Features — There's more to life than just work** (Home)
   Reusable feature composition from Home, organized around “There's more to life than just work”.
   Capture: 1440×915px; page bounds 15399–16314px of 19290px; source section ID: `d996bc4c-44e5-4778-a691-ac4426682b98`; image: https://media.designdetails.io/library/6cdcb549630710cc0c72603f7b1c82f170550d8c118e5d53c98fe5239ec4dbd2/section_crop-d996bc4c-2026-10-10T05-58-41-228Z.webp
   SECTION.md v3.2: `d996bc4c-44e5-4778-a691-ac4426682b98` (deterministic evidence; editorial review pending)
6. **Footer — Navia Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Navia Footer”.
   Capture: 1440×1000px; page bounds 18290–19290px of 19290px; source section ID: `27af3b57-13d7-4da9-b85a-ffddd9b74afb`; image: https://media.designdetails.io/library/1a44c03f41d70a54c81cc245082b4e240ac1c5437228ba04945b032a00998302/section_crop-27af3b57-2026-10-10T05-58-47-632Z.webp
   SECTION.md v3.2: `27af3b57-13d7-4da9-b85a-ffddd9b74afb` (deterministic evidence; editorial review pending)
7. **Logo Cloud — Trusted Businesses Logo Row** (Home)
   AI suggestion (96% confidence): Complete trust strip with a contextual label and a single row of customer brand logos, clearly bounded by the hero and divider below.
   Capture: 1440×105px; page bounds 1172–1277px of 19290px; source section ID: `2742ea9e-1f97-4f3f-9100-c083b037f0e8`; image: https://media.designdetails.io/library/3bfc36bcaf9896543574a9a2474c0a9f643b7c88eb713a11cf4b512e73393872/section-manual-2742ea9e-1f97-4f3f-9100-c083b037f0e8-1791701554685.webp
   SECTION.md v3.2: `2742ea9e-1f97-4f3f-9100-c083b037f0e8` (deterministic evidence; editorial review pending)
8. **Hero — Custom Marketing Plan Product Hero** (Home)
   AI suggestion (87% confidence): Complete value proposition with supporting copy, primary CTA, and a substantial product dashboard surrounded by channel-specific campaign mockups. It is the stronger, more contextual representative of the repeated headline treatment above.
   Capture: 1440×1224px; page bounds 3830–5054px of 19290px; source section ID: `71abef45-5db4-49d3-8af1-6ac656a2f900`; image: https://media.designdetails.io/library/a716da016000e293ad7013eeed2e6801c5a80d9342a280841ca958061c290a77/71abef45-5db4-49d3-8af1-6ac656a2f900.webp
   SECTION.md v3.2: `71abef45-5db4-49d3-8af1-6ac656a2f900` (deterministic evidence; editorial review pending)
9. **Testimonials — Loved by business owners** (Home)
   AI suggestion (96% confidence): Complete testimonial section with a Google rating badge, prominent heading, customer portraits, quotes, and attribution details; it has clear whitespace separating it from adjacent sections.
   Capture: 1440×1015px; page bounds 6036–7051px of 19290px; source section ID: `75e03578-e351-41ed-9fa4-05ad4fad819e`; image: https://media.designdetails.io/library/f04e73fb6989212f5ae2d0fbbe84dad9cc8c5832e1e36cd1cd376c9f33cd505d/section-manual-75e03578-e351-41ed-9fa4-05ad4fad819e-1791701593790.webp
   SECTION.md v3.2: `75e03578-e351-41ed-9fa4-05ad4fad819e` (deterministic evidence; editorial review pending)
10. **CTA — Run Your Business, Not Marketing CTA** (Home)
   AI suggestion (96% confidence): Complete full-width image-led conversion section with a clear headline, supporting copy, and prominent “Get started for free” button.
   Capture: 1440×1014px; page bounds 10634–11648px of 19290px; source section ID: `88971605-87e5-4bd5-805d-343791470525`; image: https://media.designdetails.io/library/5d348681d10898fa7e1982f862ea1b962521fe17b466729d26f2f2b713adebc8/section-manual-88971605-87e5-4bd5-805d-343791470525-1791701642866.webp
   SECTION.md v3.2: `88971605-87e5-4bd5-805d-343791470525` (deterministic evidence; editorial review pending)
11. **Pricing — Founder Pricing Plans** (Home)
   AI suggestion (98% confidence): Complete pricing section with its heading, founder-rate explanation, and full three-tier plan comparison including benefits and signup actions.
   Capture: 1440×1365px; page bounds 11651–13016px of 19290px; source section ID: `b7ec20e0-1ab8-402b-9f80-7f22e88dbc01`; image: https://media.designdetails.io/library/a7d005cd8b989c03b6a92ea7c1f475276f94b3a3aaa61a194f5064fed85f4cc4/b7ec20e0-1ab8-402b-9f80-7f22e88dbc01.webp
   SECTION.md v3.2: `b7ec20e0-1ab8-402b-9f80-7f22e88dbc01` (deterministic evidence; editorial review pending)
12. **Comparison — Hands-On Marketing Support Options** (Home)
   AI suggestion (97% confidence): Complete side-by-side section pairing a lifestyle portrait with three clearly differentiated service levels and their actions.
   Capture: 1440×1245px; page bounds 13087–14332px of 19290px; source section ID: `6ab440e1-41fe-4d6c-aa6b-00da0a090086`; image: https://media.designdetails.io/library/ba3d61644e88e80e1b2f78d936a67e48168781eebcbea7ef73d51f0c08db691b/section-manual-6ab440e1-41fe-4d6c-aa6b-00da0a090086-1791701654385.webp
   SECTION.md v3.2: `6ab440e1-41fe-4d6c-aa6b-00da0a090086` (deterministic evidence; editorial review pending)
13. **CTA — Businesses Navia Supports** (Home)
   AI suggestion (90% confidence): Self-contained dark conversion section combining a concise platform pitch, prominent free-trial CTA, industry list, and contextual retail image.
   Capture: 1440×1041px; page bounds 14353–15394px of 19290px; source section ID: `b3c37996-f46d-434b-ab6f-cd4c9516545b`; image: https://media.designdetails.io/library/8c323bc1ab85ccd4273db50c3c15f42b632be687e5ce1f7277170ccb452cea77/b3c37996-f46d-434b-ab6f-cd4c9516545b.webp
   SECTION.md v3.2: `b3c37996-f46d-434b-ab6f-cd4c9516545b` (deterministic evidence; editorial review pending)
14. **FAQ — Frequently Asked Questions Accordion** (Home)
   AI suggestion (98% confidence): Complete FAQ component with a prominent heading and eight consistently styled expandable question rows, bounded by the preceding collage and the following resources area.
   Capture: 1440×1122px; page bounds 16320–17442px of 19290px; source section ID: `ebb984cd-864e-4d8b-b02f-67ee8fb529d2`; image: https://media.designdetails.io/library/29d3f632d62dacfb2d66d9e1c1ae6cdb3ae25db6aae5d61b003b92957073b455/ebb984cd-864e-4d8b-b02f-67ee8fb529d2.webp
   SECTION.md v3.2: `ebb984cd-864e-4d8b-b02f-67ee8fb529d2` (deterministic evidence; editorial review pending)
15. **Editorial — Business Growth Resources** (Home)
   AI suggestion (97% confidence): Self-contained resource section with heading, archive link, and a complete four-item article grid with imagery and titles.
   Capture: 1440×775px; page bounds 17445–18220px of 19290px; source section ID: `f6ec46ef-6223-4eed-af90-86fd201f1c70`; image: https://media.designdetails.io/library/76981090685b62208b1d9ed2ce7f929f38b77900040ecd65a061ddb74010eb48/section-manual-f6ec46ef-6223-4eed-af90-86fd201f1c70-1791701662510.webp
   SECTION.md v3.2: `f6ec46ef-6223-4eed-af90-86fd201f1c70` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/b11e81137e33348f3c46e04fe378085061bb8702f761b6ec40665d66c9d5d3cb/desktop_full-cd72997e-2026-10-10T05-58-17-818Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/67bfad9d0bae5d90efc92bf696283922aeab758fac6d731b445792427aa2416a/mobile_full-cd72997e-2026-10-10T05-59-39-520Z.jpg
- Open Graph image: https://media.designdetails.io/library/ba14f2dd8308987a949bdef8f930f41817d7befa4430ae8500c1febc02a1524e/og_image-cd72997e-2026-10-10T05-58-31-259Z.webp
- Full-page video: https://media.designdetails.io/library/679bc12ddfde707120d3d27cbf739d25ca146889f8dbdddfe4b817eb5c31aee5/motion-1791695234188.mp4
- Video poster: https://media.designdetails.io/library/d0dd25e645af06daf093d29a1583b440c254394f76bef15c05066cc3f9f3ab7f/motion-poster-1791695234188.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Primary Button
- Outline Button
- Icon Button
- Feature Collection
- Split Hero
- Product UI
- Testimonial Card
- Pricing Table
- Editorial Card
- FAQ Accordion
- Footer
- Chat Widget
- Interactive Floating Elements
- Scroll Linked Feature Swap

## Quality rubric

Overall: 54.55/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Navia executes a warm, editorial SaaS template competently: the earthy palette, serif/sans/script type system, and layered scroll animations work together coherently and are applied consistently across hero, features, testimonials, pricing, and FAQ sections. However, nearly every component and motion technique—split-hero features, scroll-linked image swaps, staggered card reveals, floating hover icons, pill-button CTAs—is a widely used convention in current AI-marketing-tool landing pages, leaving the site pleasant and well-assembled but not distinctive enough to exceed a competent rating.

- Typography (15%): 61 — A deliberate three-tier system is visible: Lora serif for display/headings at multiple scales (56–80px), Public Sans for body copy, and a handwritten 'Notemakersmark' script reserved for emphasis words ('run your business', 'We have humans for that too'). The pairing creates clear hierarchy and a warm editorial voice, but it is a well-worn serif+sans+script combination common to current SaaS/DTC branding rather than a distinctive typographic system.
- Color (10%): 64 — A cohesive warm-neutral palette (off-white canvas #FAF4E6, dark brown text #36312A, muted beige borders #CDC7B8) is punctuated by a high-contrast acid-yellow primary CTA (#E8FF39) and a secondary orange (#F88450), giving the brand a recognizable, energetic accent against its earthy base. Execution is consistent across buttons, section backgrounds, and the single blue utility icon, but the overall warm-neutral-plus-bright-accent formula is now a common SaaS convention.
- Layout (20%): 58 — The page follows a comprehensive but highly conventional SaaS long-scroll structure: hero, logo strip, feature list, testimonials, split-image feature sections, pricing table, services tiers, photo collage with modal, FAQ accordion, resources, and footer CTA. Whitespace and alternating split-section composition are handled competently, and content density stays low throughout, but the sequence and components themselves (pricing cards, FAQ accordion, testimonial cards, resource cards) are stock patterns assembled without an unusual structural idea tying the whole page together.
- Motion (20%): 56 — Observed motion spans a nav-bar state change on scroll, a hover-triggered dispersal of floating social icons, a scroll-linked text-highlight/image-swap sequence, and a staggered card reveal. This is a genuine multi-moment system rather than a single hero effect, which is a point in its favor, but each individual technique (nav solidify-on-scroll, staggered fade-up cards, scroll-synced feature illustration) is a widely used current pattern; no evidence of easing quality, frame rate, or exceptional choreography was established.
- Originality (25%): 40 — The overall concept—warm-neutral earthy palette, serif/sans/script type system, pill buttons, split feature sections, scroll-synced illustration swaps, and a floating-icon hover flourish—closely matches the prevailing template aesthetic of current AI/SaaS marketing sites (frequently seen in Framer-style startup templates). The floating social-icon dispersal and the photo-collage 'out of office club' modal are the closest things to a distinguishing idea, but neither is hard to substitute or rare enough to lift the site out of genre-typical territory.
- Content (10%): 62 — Content sections (testimonials, pricing tiers, resource cards, FAQ, photo collage) are visually unified through consistent color tokens, button styles, and typography, and copy is tailored to the specific audience (busy business owners) with matching UI mockups illustrating each claimed feature. This gives the content a cohesive presentation, though the content itself follows standard SaaS marketing copy conventions (feature list, social proof, pricing, FAQ) without a distinctive editorial voice beyond the script-font asides.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A warm, lamp-lit photo of a real business owner sets an intimate mood before a serif headline and acid yellow buttons take over, giving the page a human, approachable tone. Repeated section titles and scattered icon tiles break the long scroll into bite-sized chapters, so visitors can skim without losing the thread.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.