# ▷ Doko Studio — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://doko.studio/
Captured: 2026-11-05
CSS measured: 2026-11-05T15:59:40.220Z at 1440×1000 — https://doko.studio/
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

Doko Studio utilizes a playful, illustrative design approach with brutalist typographic elements and a highly colorful, high-contrast palette. The layout relies on chunky typography, vibrant neon and pastel accents, and scroll-linked animations to guide users through its services and portfolio.

## Classification

- Industry: creative
- Site type: Landing, Blog
- Business model: Software, Agency
- Styles: playful, typographic, colourful, brutalist, dark-mode-default
- Platform: Custom code
- Technology: Astro, Tailwind CSS

## Typography

- Display: Monigue — weight 400; size 140px; line-height 140px; tracking normal; uppercase (95% role confidence, computed values)
- Heading: Hanken Grotesk — weight 400; size 24px; line-height 33.6px; tracking normal; Regular (85% role confidence, computed values)
- Body: Hanken Grotesk — weight 400; size 16px; line-height 19.2px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Text — text #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary text color against the dark canvas. (95% role confidence, computed values)
- Canvas — canvas #000000: color-1: computed rgb(0, 0, 0); AI role: Black (#000000) is used as the base background for many sections, alongside the dark purple body background. (90% role confidence, computed values)
- Primary Action — primary action #D3FF43: color-6: computed rgb(211, 255, 67); AI role: Neon green (#D3FF43) is used for call-to-action buttons ('See all', 'Send it') and highlight badges. (90% role confidence, computed values)
- Surface — surface #D9D9D9: color-3: computed rgb(217, 217, 217); AI role: Light gray (#D9D9D9) is used for the background of pricing cards and service detail cards. (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": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "p",
        "text": "Before: seven apps to run a venue. Now: bookings, menu, orders, tills and delivery in just one, for ",
        "top": 4802,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Before: every truffle went to wholesalers. Now: a brand of its own and an online shop that takes it ",
        "top": 5178,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Before: a molar in the logo and a hacked website. Now: a brand that sells care and a brand-new websi",
        "top": 5555,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "33.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Subscriptions",
        "top": 6634,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Projects",
        "top": 6634,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Branding",
        "top": 6798,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "What we do",
        "top": 3496,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Websites, online shops, web apps and mobile apps. No templates: designed and built for your brand, s",
        "top": 3789,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "And the results.",
        "top": 4687,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "120px",
    "lineHeight": "108px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Common",
        "top": 7588,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "questions",
        "top": 7696,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Hear it from them.",
        "top": 9584,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "63.9px",
    "lineHeight": "70.3px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "€3,600",
        "top": 6929,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "€4,200",
        "top": 6929,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "€6,000",
        "top": 6929,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Branding, software and security. One team.",
        "top": 326,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Pricing",
        "top": 6466,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "140px",
    "lineHeight": "140px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 327,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I",
        "top": 327,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "s",
        "top": 327,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "Strategy, visual identity and brand assets.",
        "top": 6848,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Social media: +€600",
        "top": 7001,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "✓",
        "top": 7065,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "Stories from real projects, including the ones we'd rather not tell. And tips on branding, software ",
        "top": 12215,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Website",
        "top": 12182,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Your email",
        "top": 12301,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "54px",
    "lineHeight": "83.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Hi, I’m Your nameyour name and I work at Your companyyour company. I need What you needa brand, a we",
        "top": 11418,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your name",
        "top": 11456,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your companyyour company.",
        "top": 11424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "300",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Case 1/4",
        "top": 4687,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Case",
        "top": 4686,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Case 2/4",
        "top": 5063,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "600",
    "size": "23px",
    "lineHeight": "27.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "“The project ran really smoothly and they took my opinions on board at every step. Ten out of ten!”",
        "top": 9807,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Doko Studio expanded our visual world with illustrations and a design system, and did our website a",
        "top": 9794,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“They designed my website with so much care you can tell the moment you land. If you don’t know who ",
        "top": 9816,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Newsletter",
        "top": 12182,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Contact",
        "top": 12182,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Socials",
        "top": 12292,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "apps for one fee",
        "top": 4896,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "online orders",
        "top": 5272,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "on Google My Business",
        "top": 5668,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "49.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 Doko Studio",
        "top": 12573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "42px",
    "lineHeight": "52.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "A project is a fixed scope, price and date. You know what you're getting before we start.",
        "top": 6467,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "42px",
    "lineHeight": "50.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "There",
        "top": 2894,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "are",
        "top": 2894,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "brand",
        "top": 2894,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Let's talk",
        "top": 918,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "See all",
        "top": 6178,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "I want my brand",
        "top": 7186,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "500",
    "size": "17.1px",
    "lineHeight": "20.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Carla Fons",
        "top": 10114,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ana Fialho",
        "top": 10105,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Marta Berdún",
        "top": 10124,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "14.5px",
    "lineHeight": "17.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "CEO at Clínica Fons Badal",
        "top": 10140,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Director at Cor de Suro",
        "top": 10131,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CEO at Ixeia Cosméticos",
        "top": 10150,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "23.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Work",
        "top": 35,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 35,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Doko Flex",
        "top": 35,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "27.9px",
    "lineHeight": "36.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Is it expensive?",
        "top": 7921,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I need to think about it.",
        "top": 7998,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Why do you publish your prices?",
        "top": 8076,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "7x1",
        "top": 4883,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "+200",
        "top": 5260,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "4.9",
        "top": 5656,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "240px",
    "lineHeight": "240px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "No smoke.",
        "top": 8665,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Just",
        "top": 8905,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "fire.",
        "top": 8905,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "600",
    "size": "36px",
    "lineHeight": "43.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Craft",
        "top": 3756,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Shield",
        "top": 3754,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "15.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "See Code",
        "top": 3985,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Code",
        "top": 3983,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "I accept the privacy policy",
        "top": 12338,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "privacy policy",
        "top": 12337,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "205.4px",
    "lineHeight": "164.3px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Good-looking work",
        "top": 4315,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Monigue",
    "fontStack": "Monigue, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Good-looking work",
        "top": 4314,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "PilloSitio",
        "top": 4757,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pura Trufa",
        "top": 5133,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Fons Badal",
        "top": 5510,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Hanken Grotesk",
    "fontStack": "\"Hanken Grotesk\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "See all articles",
        "top": 10579,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 86,
    "contexts": [
      {
        "tag": "body",
        "text": "Work Services Doko Flex About Insights Contact EN Craft Brand, UX/UI and design Code Websites, apps ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Let's talk",
        "top": 918,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1219,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 245,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Work",
        "top": 35,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 41,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#D9D9D9",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 217)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Code Code Websites, online shops, web apps and mobile apps. No templates: designed and built for you",
        "top": 3573,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "7x1",
        "top": 4883,
        "property": "background"
      },
      {
        "tag": "li",
        "text": "Branding Strategy, visual identity and brand assets. €3,600 Social media: +€600 ✓ Brand strategy ✓ V",
        "top": 6746,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#121214",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 20)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10647,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F197EA",
    "alpha": 1,
    "cssValue": "rgb(241, 151, 234)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Craft Craft Brand strategy, visual identity and design systems. So your logo, website and socials al",
        "top": 3613,
        "property": "background"
      },
      {
        "tag": "figure",
        "text": "“The project ran really smoothly and they took my opinions on board at every step. Ten out of ten!” ",
        "top": 9778,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 10121,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#D3FF43",
    "alpha": 1,
    "cssValue": "rgb(211, 255, 67)",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "See all",
        "top": 6178,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Security included",
        "top": 6728,
        "property": "background"
      },
      {
        "tag": "figure",
        "text": "“They designed my website with so much care you can tell the moment you land. If you don’t know who ",
        "top": 9788,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#ED4025",
    "alpha": 1,
    "cssValue": "rgb(237, 64, 37)",
    "count": 4,
    "contexts": [
      {
        "tag": "figure",
        "text": "“Doko Studio expanded our visual world with illustrations and a design system, and did our website a",
        "top": 9766,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 10096,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#141414",
    "alpha": 1,
    "cssValue": "rgb(20, 20, 20)",
    "count": 1,
    "contexts": [
      {
        "tag": "li",
        "text": "Made to measure. Small project? Buy the time you need. €50/h for design and development 10 h of desi",
        "top": 6746,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#6130EB",
    "alpha": 1,
    "cssValue": "rgb(97, 48, 235)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6634,
        "property": "background"
      },
      {
        "tag": "figure",
        "text": "“Javier and his team stick to every phase of the project and are on top of every detail, with the be",
        "top": 9757,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 10104,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#8A8A99",
    "alpha": 1,
    "cssValue": "rgb(138, 138, 153)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Subscriptions",
        "top": 6634,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 0.4,
    "cssValue": "color(srgb 0 0 0 / 0.4)",
    "count": 7,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "Carla Fons CEO at Clínica Fons Badal",
        "top": 10089,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "color(srgb 1 1 1 / 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Your email",
        "top": 12290,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "color(srgb 1 1 1 / 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "Ricardo Sigés CEO at Sanikey",
        "top": 10068,
        "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 major sections, allowing the large typography and scroll animations to breathe.
- Corner style: Mostly rounded corners (e.g., pill buttons, portfolio image cards, pricing cards).
- Radius: Significant border-radius is applied to cards and buttons to soften the brutalist typography.
- Borders: Thin, subtle borders on some elements (like FAQ dividers or input fields) but generally relying on contrasting background colors for separation.
- Buttons: Pill-shaped, solid fill, high-contrast text.
- Content width: Restricted central column for text content, with wider bounds for image galleries and horizontal scroll sections.
- Density: Moderate density; large typography commands space while content blocks are kept relatively concise.
- Evidence: Visual inspection of the layout: large display text, rounded pricing cards, pill buttons, wide margins.

## Sections

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

1. **Navbar — ▷ Doko Studio Navbar** (Home)
   A small logo on the left and a few spaced links on the right keep the dark bar quiet and easy to scan.
   Capture: 1440×99px; page bounds 0–99px of 12787px; source section ID: `27c0cf97-a021-4026-8a4f-8e59512b630e`; image: https://media.designdetails.io/library/f4e34e79beac990ff439a56c119b523d3703db7b10163ab41c02097f1b954c49/27c0cf97-a021-4026-8a4f-8e59512b630e.webp
   SECTION.md v3.2: `27c0cf97-a021-4026-8a4f-8e59512b630e` (deterministic evidence; editorial review pending)
2. **Hero — Bold centered headline with mascot** (Home)
   Large condensed white type on a deep purple field states one message instantly, while the small illustrated mascot adds personality.
   Capture: 1440×901px; page bounds 99–1000px of 12787px; source section ID: `5531cc30-410e-4212-ae83-38cc761876d7`; image: https://media.designdetails.io/library/778aea6a9fe6a9f1acc1fe2749688a2048faf244f0b64e2b90a1e9cda96f751f/5531cc30-410e-4212-ae83-38cc761876d7.webp
   SECTION.md v3.2: `5531cc30-410e-4212-ae83-38cc761876d7` (deterministic evidence; editorial review pending)
3. **Other — Animated logo mark expanding to fullscreen** (Home)
   A single symbol on a teal panel grows to fill the screen, giving the scroll a branded pause with a persistent contact button.
   Capture: 1440×866px; page bounds 1000–1866px of 12787px; source section ID: `ddce29f5-79a0-4ce2-9f49-66e336d199a0`; image: https://media.designdetails.io/library/0c58dc021ea939f91102b908470fb3fd0d4ad4c1dccf817db759a4d957bfc8e3/section-manual-ddce29f5-79a0-4ce2-9f49-66e336d199a0-1793903486938.webp
   SECTION.md v3.2: `ddce29f5-79a0-4ce2-9f49-66e336d199a0` (deterministic evidence; editorial review pending)
4. **Other — Positioning statement beside illustration** (Home)
   A short paragraph of plain text next to a playful illustration explains the all-in-one offer without clutter.
   Capture: 1440×602px; page bounds 2874–3476px of 12787px; source section ID: `e50cad94-1300-4490-b852-d05510bc8694`; image: https://media.designdetails.io/library/e84c23d82d8c73d38ed591baa9bce8ca240f4169dcd180d15885641b2a5fa217/e50cad94-1300-4490-b852-d05510bc8694.webp
   SECTION.md v3.2: `e50cad94-1300-4490-b852-d05510bc8694` (deterministic evidence; editorial review pending)
5. **Features — Tabbed service cards with side pills** (Home)
   Craft, code and shield sit as vertical pills around one open card, so visitors see one service in detail and the others at hand.
   Capture: 1440×797px; page bounds 3476–4273px of 12787px; source section ID: `6c7f72dd-f965-4435-8476-0a2659d47267`; image: https://media.designdetails.io/library/091e9a00b7a08951fc1b93e9918e675665c7b5be9c6123f9b11a3e72f01621c1/6c7f72dd-f965-4435-8476-0a2659d47267.webp
   SECTION.md v3.2: `6c7f72dd-f965-4435-8476-0a2659d47267` (deterministic evidence; editorial review pending)
6. **Testimonials — Numbered case studies with results** (Home)
   Each project pairs a photo with a before-and-after line and one highlighted metric, so results can be judged at a glance.
   Capture: 1440×2175px; page bounds 4273–6448px of 12787px; source section ID: `f5cad0ce-a55e-4933-bcdf-90cf77321abb`; image: https://media.designdetails.io/library/13636248a38fad4649712a39babe10922b22ed55f171f3ec86af85434be456d2/f5cad0ce-a55e-4933-bcdf-90cf77321abb.webp
   SECTION.md v3.2: `f5cad0ce-a55e-4933-bcdf-90cf77321abb` (deterministic evidence; editorial review pending)
7. **Pricing — Fixed-price project cards with toggle** (Home)
   Three cards share the same structure of price, description and checklist, with a toggle and a custom card covering other needs.
   Capture: 1440×1121px; page bounds 6448–7569px of 12787px; source section ID: `49a112aa-0c62-49e9-a894-e26089f5c729`; image: https://media.designdetails.io/library/9387a68bf9e2dcba376c817ad44e5df2549acf05a29430e75deb0a55c3a27a70/49a112aa-0c62-49e9-a894-e26089f5c729.webp
   SECTION.md v3.2: `49a112aa-0c62-49e9-a894-e26089f5c729` (deterministic evidence; editorial review pending)
8. **FAQ — Accordion questions with side prompt** (Home)
   Ruled rows with plus icons keep common objections compact, and the side image and button offer reassurance next to them.
   Capture: 1440×1036px; page bounds 7569–8605px of 12787px; source section ID: `403b6015-023f-4404-af62-fec483aadc51`; image: https://media.designdetails.io/library/e500100e11e2ad9a6fb3e84ba198c82e701f76595f732f9b71c0d23279eec57a/403b6015-023f-4404-af62-fec483aadc51.webp
   SECTION.md v3.2: `403b6015-023f-4404-af62-fec483aadc51` (deterministic evidence; editorial review pending)
9. **CTA — Large closing statement with flame** (Home)
   Big white type and a small flame illustration deliver a punchy promise, with a quiet supporting line below it.
   Capture: 1440×915px; page bounds 8605–9520px of 12787px; source section ID: `e613529b-6654-4f1d-a65c-ec2ef7da3619`; image: https://media.designdetails.io/library/79ffb8731c7463d085a6117750af70eb1be49eadc6de154b66b5c69d8fe5cb9b/e613529b-6654-4f1d-a65c-ec2ef7da3619.webp
   SECTION.md v3.2: `e613529b-6654-4f1d-a65c-ec2ef7da3619` (deterministic evidence; editorial review pending)
10. **Testimonials — Fanned colorful client quote cards** (Home)
   Overlapping bright cards with names and roles make the quotes feel varied and real while staying inside one compact strip.
   Capture: 1440×930px; page bounds 9520–10450px of 12787px; source section ID: `3dd0a5d5-8e14-46c3-9d75-d113129f24a6`; image: https://media.designdetails.io/library/cfc22c0014851e39ad325c62fdceabafc9c6916b922b5d0574058c45a54efed5/3dd0a5d5-8e14-46c3-9d75-d113129f24a6.webp
   SECTION.md v3.2: `3dd0a5d5-8e14-46c3-9d75-d113129f24a6` (deterministic evidence; editorial review pending)
11. **Editorial — Horizontal blog post card row** (Home)
   Image-led cards with small dates and titles in a scrolling row invite browsing, and a see-all link sits beside the heading.
   Capture: 1440×873px; page bounds 10450–11323px of 12787px; source section ID: `9a8a246d-9979-42e7-81f2-0b2f05be94f6`; image: https://media.designdetails.io/library/aeade9555dbd3353c4a473e9524c353911eb3fb969362e03f3d1b863e17b0a7e/9a8a246d-9979-42e7-81f2-0b2f05be94f6.webp
   SECTION.md v3.2: `9a8a246d-9979-42e7-81f2-0b2f05be94f6` (deterministic evidence; editorial review pending)
12. **Forms — Fill-in-the-blank sentence contact form** (Home)
   The form reads as a sentence with highlighted bracketed fields, making it feel conversational, while a short note and a bright button finish it.
   Capture: 1440×919px; page bounds 11323–12242px of 12787px; source section ID: `255ae644-ba25-485c-bfcf-4d444fb97c03`; image: https://media.designdetails.io/library/9fea2edf9818a997e51411b7b0f75ae8ffd04a3be8bf5f06a1f108a990fe2102/255ae644-ba25-485c-bfcf-4d444fb97c03.webp
   SECTION.md v3.2: `255ae644-ba25-485c-bfcf-4d444fb97c03` (deterministic evidence; editorial review pending)
13. **Footer — Multi-column footer with newsletter** (Home)
   Small type in clear columns groups contact, social, sitemap and legal links, with a newsletter field and a large copyright line.
   Capture: 1440×545px; page bounds 12242–12787px of 12787px; source section ID: `7e82ef80-d8d1-4db0-8b29-05ce934a7195`; image: https://media.designdetails.io/library/ed3b47a16e5c5a9344f65f46f9d32e4c33787194ae2207c4e103769b197283a2/7e82ef80-d8d1-4db0-8b29-05ce934a7195.webp
   SECTION.md v3.2: `7e82ef80-d8d1-4db0-8b29-05ce934a7195` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/9c2f923405122653e0c71f90aee5caf5c92bb10ef9cdc921f15b644adb0357fc/desktop_full-e0d4481e-2026-11-05T15-59-40-236Z.webp
- Mobile screenshot: https://media.designdetails.io/library/f3da2179e64f1921f60ef7591116be44b5c416602d4fe705c48e079f561b19e1/mobile_full-e0d4481e-2026-11-05T16-00-07-634Z.webp
- Open Graph image: https://media.designdetails.io/library/b9ded80a0f1f25fe9165b848fa845d83aa5a62e7bb657726d150f77a2a655145/og_image-e0d4481e-2026-11-05T15-59-48-450Z.webp
- Full-page video: https://media.designdetails.io/library/ff6567835d79ec513e87759e0b8b73dd4948c8504ef12bcc4674f656f7261f03/motion-1793896214094.mp4
- Video poster: https://media.designdetails.io/library/9d3d935f3f435e152d23cbdfb84f28ab0019b6c287bea13b52e58d7044d0f0e2/motion-poster-1793896214094.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
- Pricing Table
- Testimonial Card
- FAQ Accordion
- Primary Button
- Contact Form
- Footer
- Conversational Form
- Overlapping Testimonial Stack

## Quality rubric

Overall: 60.15/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Doko Studio executes a lively, high-contrast brand identity with real craft: a bold Monigue/Hanken Grotesk typographic system, a coordinated neon-on-dark palette, and scroll-driven motion that reaches beyond the hero into testimonials and case-study reveals. Content is well-matched to the design — transparent pricing, stat-led case studies, and a conversational contact form all reflect the studio's plain-spoken brand voice. What keeps this from the 'strong' tier is that the underlying architecture is a familiar long-scroll agency template (feature cards, pricing grid, accordion, testimonial deck) rather than a structural idea unique to the brand's three-in-one positioning, and the motion vocabulary — while applied consistently — is built from a narrow set of translate/reveal gestures rather than varied choreography. Originality rests on two genuinely nice ideas (the mad-libs form, the color-coded card stack) inside an otherwise recognizable 'playful dark-mode studio' idiom. The result is a competent, good-humored execution that is enjoyable to use but not yet a landmark or highly distinctive system end to end.

- Typography (15%): 68 — A clear two-family system pairs the condensed, uppercase display face Monigue (ranging from 120px to a 240px 'NO SMOKE. JUST FIRE.' statement) against Hanken Grotesk for body and UI text. The scale is used consistently for section openers ('Common Questions', 'Hear it from them.', 'Good-looking work'), giving the site a punchy editorial voice. However, the system leans on one blunt trick (oversized uppercase condensed type) repeated many times rather than a more varied typographic hierarchy, and price figures reuse the display face in a slightly awkward tabular context (€3,600 at 63.9px).
- Color (10%): 66 — A confident palette of near-black/dark-purple canvas with neon green (#D3FF43), pink (#F197EA), orange (#ED4025) and purple (#6130EB) accents is applied with intent — color-coding testimonial cards, flagging the 'Security included' badge, and driving CTA buttons. The high-saturation combination is bold and legible against the dark ground. It is a fashionable palette rather than a surprising one, and some sections (price cards on #D9D9D9 gray) break the dark-mode consistency without clear rationale.
- Layout (20%): 56 — The structure follows a conventional long-scroll agency template: hero, services cards, portfolio list, pricing table, FAQ accordion, testimonial deck, blog grid, conversational form, footer. Execution is competent — generous spacing, a restrained content column against full-bleed galleries — but the overall architecture is a familiar sequence of established component patterns (feature cards, pricing grid, accordion, testimonial cards) without a distinguishing structural idea tying sections together beyond repeated typographic banners.
- Motion (20%): 60 — Motion is used across multiple sections, not just the hero: a curtain-style section reveal, a vertically-translating object tied to scroll, a horizontal scroll-driven testimonial deck, and a horizontally-translating image sequence, each of which reportedly reverses coherently on scroll-up. This breadth suggests a deliberate scroll-driven system rather than a single decorative hero animation. However, the observation describes effects as largely translation-based (enter/exit, shrink, horizontal slide) without evidence of more intricate choreography, and smoothness/easing/performance cannot be verified from the evidence.
- Originality (25%): 55 — The mad-libs style conversational contact form and the color-coded overlapping testimonial card stack are the most distinctive ideas, each giving a recognizable brand personality to otherwise standard UI patterns (forms, testimonials). The broader visual language — dark mode, neon-on-black, oversized condensed display type, hand-drawn flat illustrations — is a now-common 'confident indie studio' idiom seen across many agency sites, so the site reads as well-executed within a familiar trend rather than introducing hard-to-substitute ideas of its own.
- Content (10%): 64 — Content and design reinforce each other reasonably well: case studies pair a photo, a plain-language before/after narrative, and a single standout stat (7x1, +200, 4.9, 11) in a consistent card format; pricing is transparent with itemized inclusions; the FAQ addresses real objections (price, trust); the conversational form personality matches the brand's informal copy voice ('No smoke. Just fire.'). The blog thumbnails (eye icon, sunglasses, surgical scene, terminal code) are visually distinct per article, aiding scannability.

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

## Curator notes

A deep purple to teal gradient and chunky condensed headlines give the page a bold, confident mood, while flat quirky illustrations of characters at laptops keep the cybersecurity subject approachable rather than technical. Pricing cards and a colourful testimonial wall near the bottom build trust by making costs and client opinions easy to scan before contact.

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