# DUNA Digital: Web-, App- & KI-Entwicklung aus Berlin — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://duna.digital/en/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:22:45.989Z at 1440×1000 — https://duna.digital/en/
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

DUNA Digital's website showcases an editorial, typographic design with a distinct code-inspired aesthetic. It relies on a muted, natural color palette anchored by off-whites (color-2, color-4) and deep olive greens (color-1), offset by electric lime green accents (color-3). Typography features a stark contrast between a modern grotesque sans-serif (PP Mori) and an expressive, high-contrast serif (Glazier), frequently mixed within the same heading for emphasis. The layout is structured with delicate hairline rules, generous padding, and prominent code blocks.

## Classification

- Industry: technology
- Site type: Store, Portfolio
- Business model: E-commerce, Shopping, AI
- Styles: editorial, typographic, minimal, code-aesthetic
- Platform: WordPress
- Technology: Astro

## Typography

- Display: Glazier — weight 400; size 60px; line-height 61.2px; tracking normal; Regular (90% role confidence, computed values)
- Heading: PP Mori — weight 600; size 60px; line-height 61.2px; tracking -1.2px; Regular (95% role confidence, computed values)
- Body: PP Mori — weight 400; size 17px; line-height 27.2px; tracking normal; Regular (95% role confidence, computed values)
- Mono: Unidentified — weight 400; size 20px; line-height 36px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #232B16: color-1: computed rgb(35, 43, 22); AI role: #232B16 (dark olive), used for primary text and headings on light backgrounds. (95% role confidence, computed values)
- Canvas — canvas #F3F5EE: color-2: computed rgb(243, 245, 238); AI role: #F3F5EE, used as the primary background color for the page body. (90% role confidence, computed values)
- Primary Action — primary action #D4FF86: color-3: computed rgb(212, 255, 134); AI role: #D4FF86 (lime green), used for prominent CTA buttons and syntax highlighting. (85% role confidence, computed values)
- Muted Text — muted text #666C5B: color-5: computed rgb(102, 108, 91); AI role: #666C5B, used for secondary text, labels, and inactive language toggles. (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": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "46px",
    "lineHeight": "46.9px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Echo Poster",
        "top": 4922,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Finoa",
        "top": 5062,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "NURI",
        "top": 5201,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "30px",
    "lineHeight": "34.5px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Strategy & Consulting",
        "top": 4105,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Design & Prototyping",
        "top": 4105,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Platforms & Web Apps",
        "top": 4373,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "22px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Understand",
        "top": 6168,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Design",
        "top": 6168,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Build",
        "top": 6168,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "60px",
    "lineHeight": "61.2px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Every discipline, one team.",
        "top": 3861,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Results, not promises.",
        "top": 4788,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "One step, 60 seconds.",
        "top": 9134,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "48px",
    "lineHeight": "50.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "No curtain. No trick.",
        "top": 6693,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "No oracle. A tool.",
        "top": 7867,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "51.8px",
    "lineHeight": "54.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Four steps to a running product.",
        "top": 5999,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "51.8px",
    "lineHeight": "53.9px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Straight answers.",
        "top": 8350,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "22px",
    "lineHeight": "26.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Tell us about your project",
        "top": 9143,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "27.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Discovery, tech audit, roadmap. We clarify what needs to be built - and what does not - before budge",
        "top": 4155,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "UX/UI, clickable prototypes, design systems. Tested with real users before the first line of code is",
        "top": 4155,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Scalable platforms, shops and web apps. Laravel, PHP, React and Next.js - maintainable, documented, ",
        "top": 4423,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "28.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Honest answer: it depends on scope. Smaller websites start in the low five figures, platforms and we",
        "top": 8403,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A marketing website: 4 to 8 weeks. A platform or web app: 3 to 6 months to the first live version. W",
        "top": 8624,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A fixed team, one direct contact, weekly demos. You need no technical background - we translate ever",
        "top": 8705,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Free first consultation: goals, context, feasibility. Afterwards you know what your project really n",
        "top": 6209,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Concept and clickable prototype - you see your product before it gets built.",
        "top": 6209,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Development in two-week sprints. Every demo shows real progress.",
        "top": 6209,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "From the first assessment to live operation. We take care of the technology - and explain every deci",
        "top": 3899,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A reply within 24 hours - with a clear assessment of your project.",
        "top": 9278,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "We use your details to handle your inquiry. More in our privacy policy.",
        "top": 9820,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "privacy policy",
        "top": 9821,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "200",
    "size": "40px",
    "lineHeight": "52px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "“entsorgo is a fast-growing start-up in the waste-management industry. In DUNA we found a highly rel",
        "top": 7205,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "19px",
    "lineHeight": "29.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Strategy, design and engineering for companies that take digital products seriously. Transparent, in",
        "top": 567,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": null,
    "fontStack": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "400",
    "size": "20px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 33,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 518,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "// duna.transform.ts",
        "top": 519,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 522,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 4075,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 4075,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 4343,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "I",
        "top": 8356,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "II",
        "top": 8577,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "III",
        "top": 8658,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "Learn more",
        "top": 4234,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Learn more",
        "top": 4234,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Learn more",
        "top": 4556,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "The city as a canvas - bookable in three clicks.",
        "top": 4977,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Web platform for a regulated environment.",
        "top": 5116,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Bitwala becomes NURI - a web rebrand under time pressure.",
        "top": 5256,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "DE",
        "top": 23,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 29,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "EN",
        "top": 29,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Advanced Web, App & AI Development",
        "top": 235,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "01 - Services",
        "top": 3833,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02 - Selected work",
        "top": 4760,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "22px",
    "lineHeight": "28.6px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "What does a project cost with you?",
        "top": 8348,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How long does a typical project take?",
        "top": 8569,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "What does the collaboration look like?",
        "top": 8650,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Services",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "AI",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tech stack",
        "top": 28,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Booking platform",
        "top": 4952,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Web platform",
        "top": 5092,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Web rebrand",
        "top": 5232,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Studio",
        "top": 10130,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 10130,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Disciplines",
        "top": 10130,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "46.1px",
    "lineHeight": "46.1px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "40+",
        "top": 3419,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "10",
        "top": 3419,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "< 24 h",
        "top": 3419,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "projects delivered",
        "top": 3475,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "years of experience",
        "top": 3475,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "reply to every inquiry",
        "top": 3475,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "60px",
    "lineHeight": "61.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "em",
        "text": "one team.",
        "top": 3857,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "not promises.",
        "top": 4784,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "60 seconds.",
        "top": 9130,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "24.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 9385,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 9443,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 9500,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "61.9px",
    "lineHeight": "69.4px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "DUNA is a digital agency from Berlin and Budapest.",
        "top": 2457,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We build websites, platforms and AI solutions for start-ups and Mittelstand companies - strategy, de",
        "top": 2526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "50.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "em",
        "text": "No trick.",
        "top": 6691,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "A tool.",
        "top": 7865,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Pause",
        "top": 914,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ": client logos",
        "top": 920,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "TypeScript · DUNA",
        "top": 482,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Companies that trust us",
        "top": 915,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "69.4px",
    "lineHeight": "77.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "alchemy behind them.",
        "top": 3013,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "PP Mori",
    "fontStack": "\"PP Mori\", \"PP Mori Fallback\", Inter, system-ui, sans-serif",
    "weight": "600",
    "size": "66px",
    "lineHeight": "63.4px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Translating business",
        "top": 279,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "66px",
    "lineHeight": "66px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "into the world of tech",
        "top": 411,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "51.8px",
    "lineHeight": "54.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "running product.",
        "top": 5996,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "51.8px",
    "lineHeight": "53.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "answers.",
        "top": 8347,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Glazier",
    "fontStack": "Glazier, \"Glazier Fallback\", \"PP Mori\", serif",
    "weight": "400",
    "size": "30px",
    "lineHeight": "30px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→ business into tech.",
        "top": 557,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#232B16",
    "alpha": 1,
    "cssValue": "rgb(35, 43, 22)",
    "count": 161,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -80,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 23,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 28,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F3F5EE",
    "alpha": 1,
    "cssValue": "rgb(243, 245, 238)",
    "count": 3,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to content Services Services the disciplines From the first assessment to ongoing operations - ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "header",
        "text": "Services Services the disciplines From the first assessment to ongoing operations - strategy, design",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "Studio ProjectsAbout usMagazineContact Services All servicesWeb developmentAI HubTech stack Discipli",
        "top": 10025,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#D4FF86",
    "alpha": 1,
    "cssValue": "rgb(212, 255, 134)",
    "count": 63,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -80,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 18,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "duna.transform.ts",
        "top": 481,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F3F4ED",
    "alpha": 1,
    "cssValue": "rgb(243, 244, 237)",
    "count": 4,
    "contexts": [
      {
        "tag": "section",
        "text": "duna.transform.ts TypeScript · DUNA 1 // duna.transform.ts 2 import { idea } from \"your-business\"; 3",
        "top": 72,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 892,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Pause: client logos",
        "top": 904,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#666C5B",
    "alpha": 1,
    "cssValue": "rgb(102, 108, 91)",
    "count": 60,
    "contexts": [
      {
        "tag": "a",
        "text": "DE",
        "top": 23,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 29,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 914,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#E2E5DD",
    "alpha": 1,
    "cssValue": "rgb(226, 229, 221)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Play: Video",
        "top": 6553,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#78914C",
    "alpha": 1,
    "cssValue": "rgb(120, 145, 76)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "// duna.transform.ts",
        "top": 519,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EDEFE8",
    "alpha": 1,
    "cssValue": "color(srgb 0.928471 0.93702 0.907922)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "astro-island,astro-slot,astro-static-slot{display:contents}(()=>{var a=(s,i,o)=>{let r=async()=>{awa",
        "top": 9102,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#A7FF8D",
    "alpha": 1,
    "cssValue": "rgb(167, 255, 141)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 487,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 483,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "import",
        "top": 523,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#212C16",
    "alpha": 0.1803921568627451,
    "cssValue": "rgba(35, 43, 22, 0.18)",
    "count": 98,
    "contexts": [
      {
        "tag": "header",
        "text": "Services Services the disciplines From the first assessment to ongoing operations - strategy, design",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 920,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Pause: client logos",
        "top": 904,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#3D7131",
    "alpha": 1,
    "cssValue": "rgb(61, 113, 49)",
    "count": 25,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 518,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 235,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#91AE5B",
    "alpha": 1,
    "cssValue": "rgb(145, 174, 91)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "TypeScript · DUNA",
        "top": 482,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D5FF87",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(212, 255, 134, 0.14)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 481,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#EEEDE6",
    "alpha": 1,
    "cssValue": "rgb(238, 237, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Pause: hero animation",
        "top": 832,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#D5FF87",
    "alpha": 0.25882352941176473,
    "cssValue": "rgba(212, 255, 134, 0.26)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "40+ projects delivered 10 years of experience < 24 h reply to every inquiry 100 % development in the",
        "top": 3390,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#D4FF85",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(212, 255, 134, 0.28)",
    "count": 4,
    "contexts": [
      {
        "tag": "li",
        "text": "01 Understand Free first consultation: goals, context, feasibility. Afterwards you know what your pr",
        "top": 6118,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#D4FF87",
    "alpha": 0.4,
    "cssValue": "rgba(212, 255, 134, 0.4)",
    "count": 8,
    "contexts": [
      {
        "tag": "button",
        "text": "Play: Video",
        "top": 6569,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 5,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 27,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#B5FF8B",
    "alpha": 1,
    "cssValue": "rgb(181, 255, 139)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "\"your-business\"",
        "top": 523,
        "property": "text"
      }
    ]
  }
]
```

### 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; large vertical gaps between sections (often 100px+), structured internal padding within grid items.
- Corner style: Sharp and pill-shaped; structural elements and borders are sharp, while CTA buttons use fully rounded pill shapes.
- Radius: Buttons use border-radius for a pill effect (e.g., 999px), inputs use small rounding (e.g., 4px-8px).
- Borders: Extensive use of 1px solid hairline borders (color-10) to create grids, separate list items, and define structural sections.
- Buttons: Pill-shaped, filled buttons; primary buttons use color-1 background with color-2 text, sometimes with a colored icon/badge.
- Content width: Max-width container (approx 1200px-1440px) with fluid margins.
- Density: Low to medium density; ample whitespace is used to emphasize typography and structure.
- Evidence: DOM structure and visible styling confirm sharp grid lines contrasting with pill buttons, large typographic scales, and consistent hairline dividers.

## Sections

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

1. **Hero — Translating Business Into the World of Tech** (Home)
   AI suggestion (98% confidence): Complete agency hero with navigation, strong headline, supporting copy, dual CTAs, distinctive desert/laptop artwork, and an integrated client-logo trust row.
   Capture: 1440×1005px; page bounds 0–1005px of 10776px; source section ID: `6d3800d4-175d-4002-ac4c-646dc286229e`; image: https://media.designdetails.io/library/6b217c4f157510adbf0c1d71331b020751539c893e4782122d2b02ec398257a8/6d3800d4-175d-4002-ac4c-646dc286229e.webp
   SECTION.md v3.2: `6d3800d4-175d-4002-ac4c-646dc286229e` (deterministic evidence; editorial review pending)
2. **Features — DUNA Digital: Web-, App- & KI-Entwicklung aus Berlin Features** (Home)
   Reusable feature composition from Home, organized around “DUNA Digital: Web-, App- & KI-Entwicklung aus Berlin Features”.
   Capture: 1440×1446px; page bounds 2259–3705px of 10776px; source section ID: `ffc8b745-2360-465a-8a9b-192cea604d7d`; image: https://media.designdetails.io/library/2dc54a52746d874b3ba4c12b08d57c40badb94317c03c5c71855df1926cb207d/section_crop-ffc8b745-2026-10-10T05-22-56-953Z.webp
   SECTION.md v3.2: `ffc8b745-2360-465a-8a9b-192cea604d7d` (deterministic evidence; editorial review pending)
3. **Features — DUNA Digital is part of a group of companies led by Tim Bierlein, Marton…** (About us)
   Reusable feature composition from About us, organized around “DUNA Digital is part of a group of companies led by Tim Bierlein, Marton…”.
   Capture: 1440×861px; page bounds 1580–2441px of 5467px; source section ID: `f9a82c8a-89ea-4342-ba84-682d50103c0a`; image: https://media.designdetails.io/library/14e1d07a4b496e70de0ae413323fa9e97aa98cd4f7cf18a08b00dc4709dce03c/section_crop-f9a82c8a-2026-10-10T06-19-45-444Z.webp
   SECTION.md v3.2: `f9a82c8a-89ea-4342-ba84-682d50103c0a` (deterministic evidence; editorial review pending)
4. **Features — Results, not promises.** (Home)
   Reusable feature composition from Home, organized around “Results, not promises.”.
   Capture: 1440×1146px; page bounds 4625–5771px of 10776px; source section ID: `fdc7a89e-dda6-44ef-a875-6376c174c691`; image: https://media.designdetails.io/library/bdbdf0aa58d3e07a3df39457478f51034184660fdcfa446df1352cb24e2fa38f/section_crop-fdc7a89e-2026-10-10T05-22-58-972Z.webp
   SECTION.md v3.2: `fdc7a89e-dda6-44ef-a875-6376c174c691` (deterministic evidence; editorial review pending)
5. **Features — Locations** (About us)
   Reusable feature composition from About us, organized around “Locations”.
   Capture: 1440×745px; page bounds 2441–3186px of 5467px; source section ID: `8dc637a6-ae2d-45c5-8d0d-6ef9eaff94fc`; image: https://media.designdetails.io/library/6911b6839db083367c8d47290be991341db9bc20988b630c00fe815b2f9ee0f0/section_crop-8dc637a6-2026-10-10T06-19-46-418Z.webp
   SECTION.md v3.2: `8dc637a6-ae2d-45c5-8d0d-6ef9eaff94fc` (deterministic evidence; editorial review pending)
6. **Features — Owner-managed. By Marton Molnar and his team.** (About us)
   Reusable feature composition from About us, organized around “Owner-managed. By Marton Molnar and his team.”.
   Capture: 1440×500px; page bounds 3186–3686px of 5467px; source section ID: `ba285596-2332-4def-8359-20f70b27973c`; image: https://media.designdetails.io/library/fe4340f3e5fb62fea42ef525edbf28bb10cd5e988f99b245420bef1635400362/section_crop-ba285596-2026-10-10T06-19-47-324Z.webp
   SECTION.md v3.2: `ba285596-2332-4def-8359-20f70b27973c` (deterministic evidence; editorial review pending)
7. **Features — No curtain. No trick.** (Home)
   Reusable feature composition from Home, organized around “No curtain. No trick.”.
   Capture: 1440×608px; page bounds 6425–7033px of 10776px; source section ID: `a03b6488-e9dd-4065-9ac6-3976453f6b2c`; image: https://media.designdetails.io/library/e16dfd6cb4a67c7ccbe23462705ebce2a0fb076206870a860dd53f7be72807b6/section_crop-a03b6488-2026-10-10T05-23-00-860Z.webp
   SECTION.md v3.2: `a03b6488-e9dd-4065-9ac6-3976453f6b2c` (deterministic evidence; editorial review pending)
8. **Features — Platforms we work with.** (About us)
   Reusable feature composition from About us, organized around “Platforms we work with.”.
   Capture: 1440×382px; page bounds 3686–4068px of 5467px; source section ID: `faf5a025-c80e-4760-a17d-339bb5b5ccc0`; image: https://media.designdetails.io/library/aa61011df1fa6a8d2bea2be034fdec9f536d153a5d81f9566fe1c536a0b20ea1/section_crop-faf5a025-2026-10-10T06-19-48-175Z.webp
   SECTION.md v3.2: `faf5a025-c80e-4760-a17d-339bb5b5ccc0` (deterministic evidence; editorial review pending)
9. **Features — No oracle. A tool.** (Home)
   Reusable feature composition from Home, organized around “No oracle. A tool.”.
   Capture: 1440×608px; page bounds 7586–8194px of 10776px; source section ID: `7c727515-4be9-4e05-a95f-5ab32b279bae`; image: https://media.designdetails.io/library/29b2a31d19e8719456fbca80c1d1365c2470dbf7d099857b9a07ab4a578c9bd0/section_crop-7c727515-2026-10-10T05-23-02-699Z.webp
   SECTION.md v3.2: `7c727515-4be9-4e05-a95f-5ab32b279bae` (deterministic evidence; editorial review pending)
10. **Footer — DUNA Digital: Web-, App- & KI-Entwicklung aus Berlin Footer** (Home)
   Closing footer and call-to-action from Home, organized around “DUNA Digital: Web-, App- & KI-Entwicklung aus Berlin Footer”.
   Capture: 1440×751px; page bounds 10025–10776px of 10776px; source section ID: `616b9a4e-af5b-4d81-8fbb-5e843427e770`; image: https://media.designdetails.io/library/4eedfcc879e40ca018cb76a99edfa713393944bc33ddd13071b05d8f456cc260/section_crop-616b9a4e-2026-10-10T05-23-06-660Z.webp
   SECTION.md v3.2: `616b9a4e-af5b-4d81-8fbb-5e843427e770` (deterministic evidence; editorial review pending)
11. **Hero — Entrepreneurs Who Build Software Hero** (About us)
   AI suggestion (98% confidence): Complete opening hero with eyebrow, distinctive headline, company summary, decorative graphic, and two clear calls to action.
   Capture: 1440×648px; page bounds 72–720px of 5467px; source section ID: `739c6357-43eb-41bd-8091-8763956a495a`; image: https://media.designdetails.io/library/527e9a29192a1e95dcc84333c33f6a2d95fa97f0c583233daee14c83a8bc115e/739c6357-43eb-41bd-8091-8763956a495a.webp
   SECTION.md v3.2: `739c6357-43eb-41bd-8091-8763956a495a` (deterministic evidence; editorial review pending)
12. **Editorial — DUNA Spin-Off Origin Story** (About us)
   AI suggestion (96% confidence): Self-contained dark editorial panel explaining the company’s 2017 origin, with a strong typographic statement and supporting narrative.
   Capture: 1440×858px; page bounds 723–1581px of 5467px; source section ID: `b7b5cf68-1d96-4590-8f1f-b5239963ef1b`; image: https://media.designdetails.io/library/9ca50100d467bc5f16621b975f7682c484e92ce3990c90c69130b7edd9a201a4/b7b5cf68-1d96-4590-8f1f-b5239963ef1b.webp
   SECTION.md v3.2: `b7b5cf68-1d96-4590-8f1f-b5239963ef1b` (deterministic evidence; editorial review pending)
13. **Feature Grid — Services Discipline Grid** (Home)
   AI suggestion (97% confidence): Complete services section with its heading, supporting introduction, and a clearly bounded 2×2 grid covering strategy, design, platforms, and AI development.
   Capture: 1440×858px; page bounds 3788–4646px of 10776px; source section ID: `6591d492-ef12-42fb-b124-6c337c2d8cf2`; image: https://media.designdetails.io/library/448d935aab4244234f7721cde3dab8d653e9549aa0735bd1b13537173d2b7cd2/6591d492-ef12-42fb-b124-6c337c2d8cf2.webp
   SECTION.md v3.2: `6591d492-ef12-42fb-b124-6c337c2d8cf2` (deterministic evidence; editorial review pending)
14. **CTA — Careers hiring callout** (About us)
   AI suggestion (97% confidence): Complete, high-impact recruitment CTA with a clear label, headline, supporting copy, dual actions, and distinctive patterned dark-green container.
   Capture: 1440×436px; page bounds 4188–4624px of 5467px; source section ID: `35b902e4-f922-4225-bbd5-bd56d4d9fa4d`; image: https://media.designdetails.io/library/546f087b904b1f8eca62760bc91799f36b8642887f43cb6a17109c619c79c7c5/35b902e4-f922-4225-bbd5-bd56d4d9fa4d.webp
   SECTION.md v3.2: `35b902e4-f922-4225-bbd5-bd56d4d9fa4d` (deterministic evidence; editorial review pending)
15. **Footer — Oversized brand footer** (About us)
   AI suggestion (98% confidence): Complete footer combining organized navigation and contact columns, legal links, an oversized typographic brand mark, and copyright information.
   Capture: 1440×751px; page bounds 4716–5467px of 5467px; source section ID: `156ca759-01d1-4f32-a029-8c9939074a07`; image: https://media.designdetails.io/library/948a6baff4d92eec8ed297b7f661ad41f340526fd0e9a05768beb39362cbcf36/156ca759-01d1-4f32-a029-8c9939074a07.webp
   SECTION.md v3.2: `156ca759-01d1-4f32-a029-8c9939074a07` (deterministic evidence; editorial review pending)
16. **Process — Four-Step Product Delivery Process** (Home)
   AI suggestion (98% confidence): Complete dark process panel with a clear heading, four numbered stages, supporting descriptions, and a closing delivery promise.
   Capture: 1440×531px; page bounds 5899–6430px of 10776px; source section ID: `331187a1-7d1b-4398-995f-3630ed629daf`; image: https://media.designdetails.io/library/900b44f2ac3def2acd0e9a3ce39f47452d020aae8cd1ebdd5d70b5e7059d5fdd/331187a1-7d1b-4398-995f-3630ed629daf.webp
   SECTION.md v3.2: `331187a1-7d1b-4398-995f-3630ed629daf` (deterministic evidence; editorial review pending)
17. **Testimonials — entsorgo Client Voice** (Home)
   AI suggestion (97% confidence): Self-contained testimonial section featuring a prominent customer quote, attribution, company, and relationship context.
   Capture: 1440×687px; page bounds 7033–7720px of 10776px; source section ID: `580b43fc-328b-475d-acec-325986340825`; image: https://media.designdetails.io/library/af91e4ce371ee44361c125e7b7114da6c9010818122e080ca34942cc03b34643/580b43fc-328b-475d-acec-325986340825.webp
   SECTION.md v3.2: `580b43fc-328b-475d-acec-325986340825` (deterministic evidence; editorial review pending)
18. **FAQ — Straight Answers FAQ Accordion** (Home)
   AI suggestion (98% confidence): Complete two-column FAQ section with its own heading and a six-item accordion, including one expanded answer for useful interaction context.
   Capture: 1440×762px; page bounds 8249–9011px of 10776px; source section ID: `497d95f4-54f6-4464-9c23-003715d1cd5f`; image: https://media.designdetails.io/library/a8e48155b5b0f45ca0519f3b0bc2ed1fff0506d40daba3a915402e83a83b108a/497d95f4-54f6-4464-9c23-003715d1cd5f.webp
   SECTION.md v3.2: `497d95f4-54f6-4464-9c23-003715d1cd5f` (deterministic evidence; editorial review pending)
19. **Contact — One Step, 60 Seconds Contact Form** (Home)
   AI suggestion (99% confidence): Self-contained contact section pairing response expectations and service assurances with a comprehensive project inquiry form and clear submission action.
   Capture: 1440×964px; page bounds 9062–10026px of 10776px; source section ID: `9538e54a-7de2-413c-b2d9-94d0366916de`; image: https://media.designdetails.io/library/ef0c085550309c43a726678c9e9607c353321e9b2c7d704c2c399098de3acd8a/9538e54a-7de2-413c-b2d9-94d0366916de.webp
   SECTION.md v3.2: `9538e54a-7de2-413c-b2d9-94d0366916de` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/bbe50fdf0c049c64995a6fb38a5c1de6a869f686190b33c672681a51107f6d62/desktop_full-6235b80a-2026-10-10T05-22-46-005Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3823949f8a945dcb443da61fd524799d8b2d06b517d96495bac368a012c1cf53/mobile_full-6235b80a-2026-10-10T05-23-41-780Z.webp
- Open Graph image: https://media.designdetails.io/library/a46f6b6076a42cc2c913bc1d11cfd344706db76274dc99e096659258f4305b5f/og_image-6235b80a-2026-10-10T05-22-55-185Z.webp
- Full-page video: https://media.designdetails.io/library/fb81218b58385e0f34608d39eb71ce8a4ee021252b4c6cba0d33d8b890d1d39d/motion-1791619392351.mp4
- Video poster: https://media.designdetails.io/library/b170332e415fb7728569da213191d4a666fa7b38f1e482e515ab8c16adf42bac/motion-poster-1791619392351.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
- Stat Block
- Feature Collection
- Editorial Card
- Testimonial Card
- FAQ Accordion
- Contact Form
- Footer
- Code Snippet Section
- Split Heading (Serif/Sans)

## Quality rubric

Overall: 61.5/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: DUNA Digital executes a coherent, typographically-led editorial system — pairing a grotesque sans with a high-contrast serif across headings, and reinforcing it with a disciplined hairline-grid layout, numbered section labels, and specific, well-fitted copy. The dune/code conceptual thread is a nice touch, but much of the component vocabulary (stat band, four-step process, FAQ accordion, testimonial card) follows established agency-site conventions, and motion could not be assessed at all, keeping the overall result solidly in the 'good' tier rather than higher.

- Typography (15%): 72 — A genuine, repeated system — not a one-off hero flourish — mixes a grotesque sans (PP Mori) with a high-contrast serif (Glazier) inside the same heading line across at least six distinct sections (hero, 'one team.', 'not promises.', 'No trick.', 'A tool.', 'answers.', '60 seconds.'). Scale is carefully graded (11px labels up to 69px display) with tightened negative letter-spacing at large sizes (-0.7 to -1.5px) and a dedicated monospace stack for the code-block motif. Hierarchy is legible and consistently applied through stats, FAQ, and footer.
- Color (10%): 60 — A controlled, legible palette (olive text #232B16, off-white canvas #F3F5EE, lime accent #D4FF86) is applied consistently for CTAs, section inversions, and syntax-highlighting inside the code block, giving the palette a functional tie to the 'code' concept. However the muted-olive-plus-lime-accent combination is a common contemporary agency formula, and the palette offers little beyond the core four roles plus tonal variants.
- Layout (20%): 65 — A coherent editorial grid is sustained across the full page: numbered section labels (01–04), hairline-divided service/project rows, a stat band, a four-step process grid, and a footer sitemap all share consistent spacing and border logic. Alternation between dark inverted sections and light sections gives the long page a clear rhythm, and the oversized footer wordmark is a considered closing gesture.
- Motion (20%): Not_assessed — No recording or interaction trace was supplied for this reference, so motion quality, easing, or responsiveness cannot be judged.
- Originality (25%): 52 — The desert/dune imagery paired with the 'DUNA' name and a literal TypeScript code block as a metaphor for 'translating business into tech' is a legible conceptual thread, and the recurring serif/sans mixing is a specific authored device. However the overall component inventory — stat band, four-step process, FAQ accordion, testimonial card, numbered project list, pill CTA buttons — closely follows an established template common to web/app agency sites, limiting how distinctive the experience feels beyond its typographic signature.
- Content (10%): 64 — Copy is specific rather than generic — FAQ answers give concrete figures and caveats ('low five figures', '4 to 8 weeks', 'no hidden items'), the testimonial names a real contact and company, and project rows pair a proper noun with a one-line outcome description. This content is well fitted to its typographic and layout containers rather than feeling like filler.

Coverage: 80% 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
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A bold serif headline paired with a desert photo sets an exotic mood, then the page drops into a dark olive code block styled like an actual editor, grounding the agency's claims in something literal. Short stat rows, numbered service cards and a four-step process keep the long scroll organised into clear, scannable chunks for a visitor comparing agencies.

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