# Viola Eva — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.viola-eva.com/
Captured: 2026-11-02
CSS measured: 2026-11-02T06:40:11.579Z at 1440×1000 — https://www.viola-eva.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: claude-sonnet-5

## Design direction

The website presents a highly illustrative and colorful design with playful typography and a soft, retro-inspired aesthetic. It relies on a distinct palette of purple, green, yellow, pink, and bright red, creating bold, solid-color sections. Typography is a mix of a clean sans-serif ('Rmneue') for body text and a compressed serif ('Fenulcompressed') for display headings. The design features large, hand-drawn-style floral illustrations, rounded corners on containers, and a custom bird cursor. Components include a sticky top navigation, expansive feature cards, a large contact form, and editorial-style testimonial cards. Spacing is generous, and the overall rhythm feels open and unconstrained.

## Classification

- Industry: marketing
- Site type: Landing
- Business model: Software, Agency
- Styles: illustrative, colourful, playful, retro, typographic, soft-edged-solid
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Fenulcompressed — weight 500; size 160px; line-height 160px; tracking normal; uppercase (95% role confidence, computed values)
- Heading: Fenulcompressed — weight 500; size 112px; line-height 112px; tracking normal; uppercase (90% role confidence, computed values)
- Body: Rmneue — weight 400; size 18px; line-height 23.4px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #9C78FF: color-1: computed rgb(156, 120, 255); AI role: Purple background used for the primary 'Services' and 'Reviews' sections. (90% role confidence, computed values)
- Text — text #FFFFFF: color-11: computed rgb(255, 255, 255); AI role: White text used extensively on the purple and green backgrounds. (90% role confidence, computed values)
- Canvas — canvas #1C734B: color-2: computed rgb(28, 115, 75); AI role: Green background used for the 'Approach' section. (85% role confidence, computed values)
- Canvas — canvas #FDE203: color-8: computed rgb(253, 226, 3); AI role: Bright yellow background used for the 'Core Values' section. (85% role confidence, computed values)
- Primary Action — primary action #DB3C2A: color-9: computed rgb(219, 60, 42); AI role: Red used for the contact form submit button. (85% role confidence, computed values)
- Canvas — canvas #D1E1FE: color-4: computed rgb(209, 225, 254); AI role: Light blue used for the initial page background and footer area. (80% role confidence, computed values)
- Text — text #4A75FF: color-6: computed rgb(74, 117, 255); AI role: Blue text used on the light blue backgrounds (Hero, Footer). (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": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 64,
    "contexts": [
      {
        "tag": "div",
        "text": "Services",
        "top": 52,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Approach",
        "top": 52,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About",
        "top": 52,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "160px",
    "lineHeight": "160px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "F",
        "top": 1182,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "U",
        "top": 1179,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "T",
        "top": 1176,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Agency",
        "top": 599,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Founder",
        "top": 599,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Marketing",
        "top": 652,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "112px",
    "lineHeight": "112px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Culti-vating",
        "top": 6931,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Flo w",
        "top": 7155,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "o",
        "top": 7136,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "88px",
    "lineHeight": "88px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Corporate training",
        "top": 2461,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Strategic consulting",
        "top": 2776,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "1 HourCall",
        "top": 3083,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Follow me",
        "top": 9692,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Services",
        "top": 9692,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Company",
        "top": 9692,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "37.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 126,
    "contexts": [
      {
        "tag": "span",
        "text": "s",
        "top": 1722,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "t",
        "top": 1722,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "r",
        "top": 1722,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": ".",
        "top": 1721,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ".",
        "top": 1721,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ".",
        "top": 1721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Corporate Training",
        "top": 9741,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Strategic Consulting",
        "top": 9776,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "The chatbot optimisation game: can we trust AI web searches?",
        "top": 4053,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Bridging the Trust Gap: B2B Tech Buying in the Age of AI Copy",
        "top": 4085,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Search, AI, Search",
        "top": 4149,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "500",
    "size": "23.4px",
    "lineHeight": "30.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Next",
        "top": 3922,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Next",
        "top": 3922,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Next",
        "top": 3922,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Let's Talk",
        "top": 46,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Let's Talk",
        "top": 58,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Submit",
        "top": 9446,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Tom Buchok",
        "top": 8411,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Jill Crawford",
        "top": 8411,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Alicia Smith",
        "top": 8387,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "400",
    "size": "112px",
    "lineHeight": "145.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Love marketing? Let’s play!",
        "top": 9362,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Love marketing? Let’s play!",
        "top": 9362,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "700",
    "size": "88px",
    "lineHeight": "88px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "AEO keynotespeaker",
        "top": 3332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Fenulcompressed",
    "fontStack": "Fenulcompressed, Arial, sans-serif",
    "weight": "700",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "practical marketing knowledge from the field.",
        "top": 4691,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Trusted by",
        "top": 2001,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Rmneue",
    "fontStack": "Rmneue, Arial, sans-serif",
    "weight": "400",
    "size": "13.2px",
    "lineHeight": "17.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "I agree to receive email communications from Flow Agency about its products and services. You can un",
        "top": 9343,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#9C78FF",
    "alpha": 1,
    "cssValue": "rgb(156, 120, 255)",
    "count": 166,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 630,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "ServicesFUTURE-PROOF YOUR MARKETING TEAM...with strategic trainings and custom consulting that enabl",
        "top": 1000,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "s",
        "top": 1722,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1C734B",
    "alpha": 1,
    "cssValue": "rgb(28, 115, 75)",
    "count": 53,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 653,
        "property": "svg-stroke"
      },
      {
        "tag": "polyline",
        "text": "",
        "top": 645,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Core ValuesEmbracingEmbracing change as space for creativity.creativityDisruption clears away the ol",
        "top": 4383,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFE2F4",
    "alpha": 1,
    "cssValue": "rgb(255, 226, 244)",
    "count": 151,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1032,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Services",
        "top": 1032,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "F",
        "top": 1182,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#D1E1FE",
    "alpha": 1,
    "cssValue": "rgb(209, 225, 254)",
    "count": 9,
    "contexts": [
      {
        "tag": "body",
        "text": "body:has(.nav_component .w-nav-button.w--open):not(:has(.nav_desktop_wrap:not(.w-condition-invisible",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 8,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "ServicesCorporate TrainingStrategic Consulting1 Hour Feedback CallAEO Keynote SpeakerApproachAboutLe",
        "top": 32,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 51,
    "contexts": [
      {
        "tag": "svg",
        "text": ".cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;}.cls-10{fill:#9c78ff;}.cls",
        "top": 220,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 653,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#4A75FF",
    "alpha": 1,
    "cssValue": "rgb(74, 117, 255)",
    "count": 124,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 48,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 60,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 1 1 1 / 0.1)",
    "count": 58,
    "contexts": [
      {
        "tag": "div",
        "text": "NextNextThe chatbot optimisation game: can we trust AI web searches?",
        "top": 3896,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "NextNextThe chatbot optimisation game: can we trust AI web searches?",
        "top": 3896,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FDE203",
    "alpha": 1,
    "cssValue": "rgb(253, 226, 3)",
    "count": 180,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 62,
        "property": "svg-fill"
      },
      {
        "tag": "line",
        "text": "",
        "top": 290,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "",
        "top": 5183,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#DB3C2A",
    "alpha": 1,
    "cssValue": "rgb(219, 60, 42)",
    "count": 39,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 617,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Let's",
        "top": 8702,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "SubmitSubmitSubmit",
        "top": 9445,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#D1E1FD",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(209, 225, 254, 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Agency Founder Marketing Leader & AEO ExpertTransform your marketing team from tactical executors to",
        "top": 597,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 41,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 218,
        "property": "svg-fill"
      },
      {
        "tag": "input",
        "text": "",
        "top": 9307,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#DF5538",
    "alpha": 1,
    "cssValue": "rgb(223, 85, 56)",
    "count": 80,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 826,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFCFEC",
    "alpha": 1,
    "cssValue": "rgb(255, 207, 236)",
    "count": 117,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 324,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#6E2F2F",
    "alpha": 1,
    "cssValue": "rgb(110, 47, 47)",
    "count": 29,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 488,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.9019607843137255,
    "cssValue": "color(srgb 1 1 1 / 0.9)",
    "count": 40,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2597,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2597,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 1 1 1 / 0.3)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Corporate trainingCustom 4-6 week trainings (delivered in-person or online) to arm your marketing te",
        "top": 2379,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#DA3C2A",
    "alpha": 0.6,
    "cssValue": "color(srgb 0.858824 0.235294 0.164706 / 0.6)",
    "count": 11,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 9123,
        "property": "border"
      },
      {
        "tag": "textarea",
        "text": "",
        "top": 9123,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 9343,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#BBC6E8",
    "alpha": 1,
    "cssValue": "color(srgb 0.733823 0.77598 0.911274)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Copyright. All Rights Reserved.Cookie settingsPrivacy PolicyImprint",
        "top": 9982,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#767676",
    "alpha": 1,
    "cssValue": "rgb(118, 118, 118)",
    "count": 4,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 9307,
        "property": "border"
      }
    ]
  }
]
```

### 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 vertical spacing between sections, often utilizing full viewport heights for transitions.
- Corner style: Rounded corners are prominent on cards, form inputs, buttons, and image containers, contrasting with the straight edges of the full-width color blocks.
- Radius: Large border-radii (likely 12px-24px range) on internal structural elements.
- Borders: Mostly borderless design, relying on background color contrasts. Thin borders are used sparingly on form inputs and some card outlines.
- Buttons: Pill-shaped (fully rounded ends) solid color buttons.
- Content width: Wide content area, but text blocks are often constrained to readable widths (approx 600-800px).
- Density: Low density. Ample whitespace (or colored space) around elements, allowing typography and illustrations to breathe.
- Evidence: Visual inspection of the crops shows large padding, rounded corners on 'Selected Works' cards and the contact form container, and pill buttons.

## Sections

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

1. **Navbar — Viola Eva Navbar** (Home)
   Few links and one pill-shaped button in a tinted bar keep choices clear and make the contact action easy to spot.
   Capture: 1440×96px; page bounds 0–96px of 10064px; source section ID: `7065b886-0ca3-458a-9ba1-ca8750e645c0`; image: https://media.designdetails.io/library/4863fcb0eb9590a90f9547b335b3b15c9ee1f30bd16f49b06297210130048773/7065b886-0ca3-458a-9ba1-ca8750e645c0.webp
   SECTION.md v3.2: `7065b886-0ca3-458a-9ba1-ca8750e645c0` (deterministic evidence; editorial review pending)
2. **Hero — Floral lettering hero with role statement** (Home)
   Oversized flower-filled letters set a memorable personal tone, while the small left-aligned text states the role and offer plainly.
   Capture: 1440×904px; page bounds 96–1000px of 10064px; source section ID: `3bf43573-91ec-46a8-8466-dd93944b10a1`; image: https://media.designdetails.io/library/debabb0c69489be53dc2928e8a23313d4d9ec448c22050f8bce891db76eae49b/3bf43573-91ec-46a8-8466-dd93944b10a1.webp
   SECTION.md v3.2: `3bf43573-91ec-46a8-8466-dd93944b10a1` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Animated headline with client logos** (Home)
   A large serif statement with highlighted key phrases explains the offer, and a row of client logos beneath adds quick credibility.
   Capture: 1440×1251px; page bounds 1000–2251px of 10064px; source section ID: `65e32b68-f21c-4ef2-9f9a-5f3b6d5515eb`; image: https://media.designdetails.io/library/7f6389548eaabf404f1875c470176303bae6a9bd291249336f4f8586e735b418/65e32b68-f21c-4ef2-9f9a-5f3b6d5515eb.webp
   SECTION.md v3.2: `65e32b68-f21c-4ef2-9f9a-5f3b6d5515eb` (deterministic evidence; editorial review pending)
4. **Features — Stacked service rows with photos** (Home)
   Each row pairs a large serif title with a photo and short text, so visitors can scan the four offers quickly.
   Capture: 1440×1489px; page bounds 2251–3740px of 10064px; source section ID: `282ab495-3643-4c4f-8f8c-5148b0dd8823`; image: https://media.designdetails.io/library/6445c40cd793c0f68c21238bda9bb9c1d11c100960014eef791c2e8020df1aeb/282ab495-3643-4c4f-8f8c-5148b0dd8823.webp
   SECTION.md v3.2: `282ab495-3643-4c4f-8f8c-5148b0dd8823` (deterministic evidence; editorial review pending)
5. **Editorial — Four press and article cards** (Home)
   Publication logos and headlines on translucent cards show where the work appeared, building authority over a bold blue background.
   Capture: 1440×852px; page bounds 3740–4592px of 10064px; source section ID: `863622ad-ba12-463a-9d64-85ebc8dc3aa6`; image: https://media.designdetails.io/library/5a9a9222ff27aafb118c10dd5cb727b5a6359d646f2b71387a81122fd84000a0/section-manual-863622ad-ba12-463a-9d64-85ebc8dc3aa6-1793681040031.webp
   SECTION.md v3.2: `863622ad-ba12-463a-9d64-85ebc8dc3aa6` (deterministic evidence; editorial review pending)
6. **Features — Three-column value statements on yellow** (Home)
   Large serif headings over small body text give three clear principles, and the strong yellow field makes them stand out.
   Capture: 1440×798px; page bounds 4614–5412px of 10064px; source section ID: `683a4311-306d-4809-8513-ce7f2bcb7196`; image: https://media.designdetails.io/library/8900ef32ab14ee8a9b1d96841972e31503e56bf3881df42ca3b9dd8e71b14b67/section-manual-683a4311-306d-4809-8513-ce7f2bcb7196-1793681052806.webp
   SECTION.md v3.2: `683a4311-306d-4809-8513-ce7f2bcb7196` (deterministic evidence; editorial review pending)
7. **Other — Philosophy statement with three columns** (Home)
   A huge centered headline with playful flower letters sets the approach, and three short text columns support it without clutter.
   Capture: 1440×1200px; page bounds 5383–6583px of 10064px; source section ID: `44990510-6fa7-4afd-bb5d-872ce543913c`; image: https://media.designdetails.io/library/387154a83e93d79bc215c8e55d83a474c796acdbe981f8b4a68e7251e8cd3090/44990510-6fa7-4afd-bb5d-872ce543913c.webp
   SECTION.md v3.2: `44990510-6fa7-4afd-bb5d-872ce543913c` (deterministic evidence; editorial review pending)
8. **Founder — Portrait beside bio text** (Home)
   A tall rounded portrait next to a big headline and short paragraphs puts a face to the name and lists credentials.
   Capture: 1440×1141px; page bounds 6583–7724px of 10064px; source section ID: `a85ff20e-b4e7-4f54-8a22-df3956ce48f8`; image: https://media.designdetails.io/library/970cb9747a47518282c68b6d537a21c2f7bb387e50cc58239f070c0d02cec849/a85ff20e-b4e7-4f54-8a22-df3956ce48f8.webp
   SECTION.md v3.2: `a85ff20e-b4e7-4f54-8a22-df3956ce48f8` (deterministic evidence; editorial review pending)
9. **Testimonials — Four client quote cards** (Home)
   Each card pairs a client logo, quote, name and title in equal columns, making the proof easy to compare and trust.
   Capture: 1440×894px; page bounds 7724–8618px of 10064px; source section ID: `f55cd03e-8d3a-4997-a885-747f9dd2df97`; image: https://media.designdetails.io/library/a84b4096ecd29459832d76ef1b3585b6632027e7832fce5cfc9a52850f22fa0b/f55cd03e-8d3a-4997-a885-747f9dd2df97.webp
   SECTION.md v3.2: `f55cd03e-8d3a-4997-a885-747f9dd2df97` (deterministic evidence; editorial review pending)
10. **Forms — Contact form beside floral graphic** (Home)
   A big heading and compact underlined fields on pink make the form simple to fill, while the bold flower graphic adds brand personality.
   Capture: 1440×962px; page bounds 8618–9580px of 10064px; source section ID: `336627c0-aa85-4d40-8a9f-8ecfd8918bd3`; image: https://media.designdetails.io/library/efca2174904470b9a0599def5eb35c72e7aca31360038afd9e2db2a3556bfe70/336627c0-aa85-4d40-8a9f-8ecfd8918bd3.webp
   SECTION.md v3.2: `336627c0-aa85-4d40-8a9f-8ecfd8918bd3` (deterministic evidence; editorial review pending)
11. **Footer — Light footer with link columns** (Home)
   Logo, social link and grouped service and company links sit in clear columns, with legal links separated below on a pale field.
   Capture: 1440×484px; page bounds 9580–10064px of 10064px; source section ID: `5fa138ca-6c97-4b5b-a27a-1bfdd6437eb9`; image: https://media.designdetails.io/library/a17d5d8c2acaab4b6cb1e90a5ee3664a0f070e630b7adbb9954499af478ca6b7/5fa138ca-6c97-4b5b-a27a-1bfdd6437eb9.webp
   SECTION.md v3.2: `5fa138ca-6c97-4b5b-a27a-1bfdd6437eb9` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/ab8a517c7e00eb1a40b2ee12a2ca63149637e7de9cfe407cff2ca9c15309fd2c/desktop_full-ebdbc066-2026-11-02T06-40-11-594Z.webp
- Mobile screenshot: https://media.designdetails.io/library/bc3d861464ef7b00d110f01d832464443bc6d40266266cb265506a8ad3294b59/mobile_full-ebdbc066-2026-11-02T06-40-57-585Z.webp
- Open Graph image: https://media.designdetails.io/library/146840d6a77643567f702ab0971c28006eed859703149055f0a4d857d4be9890/og_image-ebdbc066-2026-11-02T06-40-19-114Z.webp
- Full-page video: https://media.designdetails.io/library/603b2653ca550b23a4ae8684d464d79a7794f622dc151274e0f294e397251c4c/motion-1793602708792.mp4
- Video poster: https://media.designdetails.io/library/0cc569ff75024a5f144561748fb40e5ab730df93261c95f1e02d54db1b02a27a/motion-poster-1793602708792.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
- Feature Card
- Editorial Card
- Testimonial Card
- Contact Form
- Footer
- Primary Button
- Custom Cursor
- Full Bleed Color Sections

## Quality rubric

Overall: 59.4/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: Viola Eva's site commits fully to an illustrated, botanical brand metaphor and carries it with real consistency: flowers and vines grow through the hero wordmark, section headlines speak in the same 'cultivating/rooted/growth' language, and each scroll chapter gets its own saturated color identity bound together by rounded corners and pill buttons. That thematic coherence is the site's real asset and elevates it above a merely decorative agency template. Where it falls short of a stronger verdict is execution discipline in motion and restraint in color: the scroll-driven reveals are largely one repeated slide-up/fade gesture dressed differently per section, at least one captured frame shows a heading rendered as illegible ghost text mid-transition, and the five-plus-hue palette leans toward maximalist abundance rather than a tightly controlled system. The custom cursor, color-block chapters, and circular wipe transition are also now familiar signatures of the contemporary illustrated-agency-site genre, so while the growth metaphor is well-integrated, the delivery mechanisms themselves aren't especially hard to substitute. The result is a genuinely good, well-themed marketing site that executes its chosen idiom competently and with some conceptual ambition, but stops short of the layered, restrained, end-to-end polish required for a 'strong' or 'exceptional' rating.

- Typography (15%): 62 — A clear two-voice system is established: compressed uppercase serif (Fenulcompressed) for display sizes from 160px hero lettering down to 88px/48px section heads, paired with a plain sans (Rmneue) for body copy and UI labels. The scale steps are deliberate and the display face gives the brand a distinct editorial voice. However, legibility is compromised in at least one captured moment where a scroll-tied heading ('...MARKETING TEAM...') is rendered as faint, overlapping ghost text behind a blurred flower graphic, and the hero wordmark's heavy floral overlays partially obscure letterforms rather than complementing them cleanly.
- Color (10%): 64 — The palette is bold and role-assigned per section (purple for Services/Reviews, green for Approach, yellow for Core Values/transition, pink/red for the contact form), with consistent white or dark-green text choices for contrast on each ground. This gives each scroll chapter a distinct identity. The palette is large, however (purple, green, yellow, pink, red, light blue, plus multiple off-white tints), and while contrast per section appears to hold up, the sheer number of saturated hues edges toward decorative abundance rather than a tightly disciplined system.
- Layout (20%): 63 — The page follows a conventional long-scroll agency structure (sticky nav, hero, service list, card grid, value props, about, testimonials, contact, footer) but adds a distinguishing structural device: full-bleed solid-color sections stitched together with a circular wipe/expansion transition, plus consistent rounded-corner treatment on cards, images, inputs, and buttons. Content width is reasonably controlled (~600-800px text blocks) within very wide color fields, and spacing is generous throughout. The organizing idea (color-block chapters) is carried through multiple sections, which is a genuine system rather than a one-off hero trick, but the underlying page skeleton itself (cards → testimonials → big CTA form → footer) is standard template logic.
- Motion (20%): 56 — Motion is extensive and section-spanning: slide-up/fade reveals for each new chapter, a circular background expansion as a scene transition, continuously rotating floral graphics, a persistent cursor-following bird, and confirmed reverse-scroll playback. This breadth shows ambition and some systemic thinking (the circle-wipe recurs as a connective device). However, per-section the primary technique described is a generic slide-up-and-fade reveal repeated across nearly every section, which is a very common scroll-animation pattern rather than something distinctive, and no evidence supports smoothness, easing quality, or restraint — one observed frame shows overlapping/ghosted text mid-transition, suggesting the choreography can momentarily compromise readability rather than enhance it.
- Originality (25%): 56 — The strongest original thread is the horticultural growth metaphor threaded consistently through copy ('Rooted in Clarity, Designed for Growth', 'Cultivating Flow', 'Embracing change as space for creativity'), illustration (vines and flowers growing through the hero letterforms), and section pacing. That conceptual consistency is a genuine, hard-to-fake idea tying name, brand, and visuals together. However, the executional vocabulary used to deliver it — a custom cursor, full-bleed color-block scroll chapters, and a circular wipe transition — are now common tropes in the contemporary illustrated-agency-website genre, which limits how distinctive the overall experience feels relative to current web design trends.
- Content (10%): 59 — Content is organized into clearly labeled, color-coded chapters (Services, Selected Works, Approach, About, Reviews, Contact) with supporting imagery (service photos, a video portrait, press/client logos, testimonial avatars) placed inside the rounded-card system. The integration is coherent and readable, but is largely conventional case-study/testimonial/CTA sequencing rather than content shaping the form in a novel way; the press-mention cards and testimonial grid are standard B2B marketing-site fare dressed in the illustrated palette.

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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Giant hand-illustrated flowers climbing the founder's name set against periwinkle blue bring warmth to a B2B marketing site, while bold serif headlines and flat color blocks of purple, yellow and green pace the long page into distinct chapters. Service cards with small circular photos and short labels keep the credentials and offerings easy to scan despite the playful tone.

## 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.