# Komma Komma — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://kommakomma.is/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:28:52.816Z at 1440×1000 — https://kommakomma.is/
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

Komma Komma is a creative studio website exhibiting a minimal, typographic design language. The layout is anchored by a light grey canvas with stark black text, using large headings and generous whitespace to create an editorial feel. A full-bleed hero image contrasts with the otherwise sparse, structured layout that features thin horizontal dividers and subtle red accents.

## Classification

- Industry: creative
- Site type: Portfolio, Landing
- Business model: Software, Agency
- Styles: minimal, typographic, editorial, swiss-inspired
- Platform: Custom code
- Technology: Astro, GSAP, Three.js

## Typography

- Display: BDO Grotesk — weight 500; size 68px; line-height 68px; tracking normal; Regular (95% role confidence, computed values)
- Heading: BDO Grotesk — weight 400; size 28.8px; line-height 31.1px; tracking normal; Regular (90% role confidence, computed values)
- Body: BDO Grotesk — weight 400; size 20px; line-height 28px; tracking normal; Regular (95% role confidence, computed values)
- Mono: Unidentified — weight 500; size 6px; line-height 6px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #EAEAEA: color-1: computed rgb(234, 234, 234); AI role: The primary background color (#EAEAEA) used throughout the majority of the page. (95% role confidence, computed values)
- Text — text #131313: color-2: computed rgb(19, 19, 19); AI role: Primary dark color (#131313) used for headings, body text, and button backgrounds. (95% role confidence, computed values)
- Accent — accent #EB4B3D: color-6: computed rgb(235, 75, 61); AI role: Vibrant red (#EB4B3D) used sparingly for tags like 'Merla' to draw attention. (90% 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": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "57.6px",
    "lineHeight": "57.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "You We only quote design",
        "top": 1200,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "You",
        "top": 1258,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We",
        "top": 1316,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Introduction",
        "top": 1700,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Komma Komma is a product design and web experience studio run by Óliver & Freyr. We make visual iden",
        "top": 1700,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Óliver",
        "top": 1728,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Kristín Eva Ólafsdóttir",
        "top": 4157,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "CEO at Gagarín",
        "top": 4181,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "500",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "01/03",
        "top": 4069,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "01",
        "top": 4071,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "hello@kommakomma.is",
        "top": 5757,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "hello@kommakomma.is",
        "top": 5776,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Book a call",
        "top": 5776,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "FEATURED PROJECT",
        "top": 493,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "MERLA",
        "top": 463,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HANNA",
        "top": 463,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "15.8px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "M",
        "top": 2343,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 2344,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "r",
        "top": 2345,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Where we can add value",
        "top": 3150,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "(01)",
        "top": 3261,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "(02)",
        "top": 3474,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "68px",
    "lineHeight": "68px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Brand Strategy",
        "top": 3234,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Brand Identity",
        "top": 3447,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Brand Presence",
        "top": 3524,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "15.8px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Hanna Stína",
        "top": 2453,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Dagsins",
        "top": 2497,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tölum íslensku",
        "top": 2541,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.9px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "CONTACT INFO",
        "top": 5674,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "NAVIGATION",
        "top": 5674,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "STUDIO",
        "top": 5674,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "28.8px",
    "lineHeight": "31.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Komma Komma is a product design &",
        "top": 878,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "web-experience creative studio created",
        "top": 909,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "for brands that refuse to blend in.",
        "top": 940,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Before anything visual, we work out what the brand stands for and",
        "top": 3352,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "who it is actually talking to. Skip this part and the design becomes",
        "top": 3371,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "decoration with nothing underneath it.",
        "top": 3390,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "”We have worked with Komma Komma on a couple of projects now,",
        "top": 4125,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "and somehow they always delivered beyond what we expected. They",
        "top": 4146,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "are consistent, easy to work with, and have great attention to detail.”",
        "top": 4167,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "57.6px",
    "lineHeight": "57.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Do you have a",
        "top": 5037,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "project in mind?",
        "top": 5095,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "An RFID inventory platform that counts a warehouse in",
        "top": 2656,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "seconds instead of days, with the brand and site to match.",
        "top": 2677,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Let's talk",
        "top": 5201,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "15.2px",
    "lineHeight": "15.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Book a call",
        "top": 43,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "BDO Grotesk",
    "fontStack": "\"BDO Grotesk\", -apple-system, \"system-ui\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "12.5px",
    "lineHeight": "12.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Click to view",
        "top": 2849,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "500",
    "size": "6px",
    "lineHeight": "6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "pre",
        "text": ";|xj]]]]]]]]]]???+i!, jvvvvvvvvvvvvvvvvvvvvvvvvvvuuuuunn] i?++!, Xvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvu",
        "top": 4903,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#EAEAEA",
    "alpha": 1,
    "cssValue": "rgb(234, 234, 234)",
    "count": 32,
    "contexts": [
      {
        "tag": "body",
        "text": "Book a call Home Work Studio Contact Legal Terms of use Terms of use Transparency Statement Transpar",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 40,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Book a call",
        "top": 43,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#131313",
    "alpha": 1,
    "cssValue": "rgb(19, 19, 19)",
    "count": 79,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 32,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 47,
        "property": "svg-fill"
      },
      {
        "tag": "section",
        "text": "FEATURED PROJECT MERLAHANNA STÍNATÖLUM ÍSLENSKU 202620262026 VIEW PROJECT Komma Komma is a product d",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(0, 0, 0, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#141414",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(19, 19, 19, 0.5)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "(02)",
        "top": 3474,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "CONTACT INFO",
        "top": 5674,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "FEATURED PROJECT",
        "top": 493,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "MERLA",
        "top": 463,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#EB4B3D",
    "alpha": 1,
    "cssValue": "rgb(235, 75, 61)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 79,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Merla",
        "top": 2330,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#151515",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(19, 19, 19, 0.14)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Merla Hanna Stína Dagsins Tölum íslensku Perla",
        "top": 2394,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Merla",
        "top": 2394,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#141414",
    "alpha": 0.14901960784313725,
    "cssValue": "color(srgb 0.0745098 0.0745098 0.0745098 / 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4257,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#EBEBEB",
    "alpha": 0.25098039215686274,
    "cssValue": "color(srgb 0.917647 0.917647 0.917647 / 0.25)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 969,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EBEBEB",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.917647 0.917647 0.917647 / 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 950,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between distinct sections, with tighter grouping within logical units (like lists or paragraphs).
- Corner style: Predominantly sharp, squared corners on images and layout elements, with slight rounding on specific small tags.
- Radius: 0px for most elements; small border-radius (likely ~4px) observed on the red accent tag.
- Borders: Thin, subtle 1px solid borders (color-7, low opacity black) used as horizontal dividers in lists.
- Buttons: Solid dark background with sharp corners, containing light text and an accompanying arrow icon.
- Content width: Content is constrained to a central column (likely max-width around 1200px-1400px), with the exception of the full-bleed hero image.
- Density: Very low density, heavily relying on negative space to give the large typography room to breathe.
- Evidence: Visual inspection of layout structure, button shapes, and CSS data for colors and fonts.

## Sections

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

1. **Hero — Featured Project Studio Hero** (Home)
   AI suggestion (97% confidence): Complete full-bleed opening hero with project imagery, compact navigation, project metadata, CTA, and a clear studio positioning statement.
   Capture: 1440×999px; page bounds 0–999px of 6503px; source section ID: `e31e5589-e8b5-4143-bf70-46bf4a5f1bea`; image: https://media.designdetails.io/library/6c51782de7be2a569ef31e55f7e255e9c7a7f8fc829c5c5584a5f7036a344090/e31e5589-e8b5-4143-bf70-46bf4a5f1bea.webp
   SECTION.md v3.2: `e31e5589-e8b5-4143-bf70-46bf4a5f1bea` (deterministic evidence; editorial review pending)
2. **Contact — Let's Get You Dreaming Contact Form** (CONTACT CONTACT)
   AI suggestion (98% confidence): Complete dark contact section with a prominent headline, structured inquiry form, required-field note, and send-message action.
   Capture: 1440×1000px; page bounds 0–1000px of 2000px; source section ID: `3bf66941-ee8b-4be0-9307-b7401848b479`; image: https://media.designdetails.io/library/01555675febf4af2e0fcf163e2cc048e0d3da03cdf03150b8f7fc8d3c7289dca/3bf66941-ee8b-4be0-9307-b7401848b479.webp
   SECTION.md v3.2: `3bf66941-ee8b-4be0-9307-b7401848b479` (deterministic evidence; editorial review pending)
3. **Features — Featured Projects** (Home)
   Reusable feature composition from Home, organized around “Featured Projects”.
   Capture: 1440×1000px; page bounds 2000–3000px of 6503px; source section ID: `52b78edd-15c7-414c-ab33-91c3050b2fdd`; image: https://media.designdetails.io/library/2c0adf6ca9ea1f9e242f6929dcb6c957e99cda0a4aee5389561dbe8d76e8b544/section_crop-52b78edd-2026-10-10T05-29-01-101Z.webp
   SECTION.md v3.2: `52b78edd-15c7-414c-ab33-91c3050b2fdd` (deterministic evidence; editorial review pending)
4. **Footer — Komma Komma Footer** (CONTACT CONTACT)
   Closing footer and call-to-action from CONTACT CONTACT, organized around “Komma Komma Footer”.
   Capture: 1440×1000px; page bounds 750–1750px of 2000px; source section ID: `ceef5b9c-1429-4529-a2d3-32c85ae872cf`; image: https://media.designdetails.io/library/dcfcda19211bb589948bdf7c1297256cafb97cf3a31934e6a533fe7fa4e654eb/section_crop-ceef5b9c-2026-10-10T06-37-25-697Z.webp
   SECTION.md v3.2: `ceef5b9c-1429-4529-a2d3-32c85ae872cf` (deterministic evidence; editorial review pending)
5. **Features — Komma Komma Features** (Home)
   Reusable feature composition from Home, organized around “Komma Komma Features”.
   Capture: 1440×867px; page bounds 3896–4763px of 6503px; source section ID: `38660b29-dddc-44f6-9816-a011dff90ddd`; image: https://media.designdetails.io/library/b8f096798c58eeaf0f5015aadc84fc048738199e16f3c626f8c6ee955d6091b0/section_crop-38660b29-2026-10-10T05-29-02-991Z.webp
   SECTION.md v3.2: `38660b29-dddc-44f6-9816-a011dff90ddd` (deterministic evidence; editorial review pending)
6. **Features — Do you have a project in mind?** (Home)
   Reusable feature composition from Home, organized around “Do you have a project in mind?”.
   Capture: 1440×741px; page bounds 4763–5504px of 6503px; source section ID: `6be0cd36-3280-4b14-9039-ce12be5c0049`; image: https://media.designdetails.io/library/d2fdfa9798f5a2fdcafb88710a4623428ce04755a46960e859b311cacff95c08/section_crop-6be0cd36-2026-10-10T05-29-03-970Z.webp
   SECTION.md v3.2: `6be0cd36-3280-4b14-9039-ce12be5c0049` (deterministic evidence; editorial review pending)
7. **Footer — Studio Information Footer** (CONTACT CONTACT)
   AI suggestion (97% confidence): Complete, substantial footer with contact details, navigation, studio location, policy links, and oversized branded wordmark.
   Capture: 1440×1000px; page bounds 1000–2000px of 2000px; source section ID: `92dd5624-17f6-4822-b43a-27e31dec2a3f`; image: https://media.designdetails.io/library/cf12cc0fd2d80184814f3eb6136c852bb350b548e83ca6b65bf67ecd3d909d4a/92dd5624-17f6-4822-b43a-27e31dec2a3f.webp
   SECTION.md v3.2: `92dd5624-17f6-4822-b43a-27e31dec2a3f` (deterministic evidence; editorial review pending)
8. **Other — Brand Services Overview** (Home)
   AI-proposed category: services
AI suggestion (96% confidence): Complete services section with a clear label, numbered offering list, active service description, and supporting brand-work image.
   Capture: 1440×660px; page bounds 3140–3800px of 6503px; source section ID: `d8b96d3d-18d3-48da-b857-dfffc5aa9f16`; image: https://media.designdetails.io/library/d151aafb464de9c1c4e8f7110d14199535f622b8a4a5b1bb242bf031a0b7964f/d8b96d3d-18d3-48da-b857-dfffc5aa9f16.webp
   SECTION.md v3.2: `d8b96d3d-18d3-48da-b857-dfffc5aa9f16` (deterministic evidence; editorial review pending)
9. **Testimonials — Client Testimonial Slider** (Home)
   AI suggestion (90% confidence): Self-contained testimonial component with navigation arrows, slide count, customer quote, portrait, name, and role.
   Capture: 1440×225px; page bounds 4055–4280px of 6503px; source section ID: `d61e3825-ebf7-4601-9e37-fffaa2c3db5f`; image: https://media.designdetails.io/library/3c5a4079aec0af274159fa536c52f44a91d73f9c96b2604e4f021246df1101b4/d61e3825-ebf7-4601-9e37-fffaa2c3db5f.webp
   SECTION.md v3.2: `d61e3825-ebf7-4601-9e37-fffaa2c3db5f` (deterministic evidence; editorial review pending)
10. **Footer — Contact and Navigation Footer** (Home)
   AI suggestion (96% confidence): Complete page footer with four structured information columns, contact and navigation links, studio details, legal links, and a distinctive oversized Komma Komma wordmark anchoring the page bottom.
   Capture: 1440×606px; page bounds 5897–6503px of 6503px; source section ID: `ad298b01-8df6-4bb3-9ad8-aa0ef277aa7f`; image: https://media.designdetails.io/library/d0c483c53fdd8c8d7309f9f4b105a9a4bb0328a609cd6c2f14d21b307df44592/ad298b01-8df6-4bb3-9ad8-aa0ef277aa7f.webp
   SECTION.md v3.2: `ad298b01-8df6-4bb3-9ad8-aa0ef277aa7f` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/5e1bc69ef02f198ce718dd41319c5073599cb49dbf3a7580d800b75e2f09e273/desktop_full-e59abce0-2026-10-10T05-28-52-839Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1edcc3a5a09cc734224493c26a0e42af68090d2d04dbb648fbc5af077c392b3a/mobile_full-e59abce0-2026-10-10T05-29-23-279Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/ee82d368253fa4af689481f0da539d704ca5a3f3cede4d730854b0dc14d1f979/motion-1791619977789.mp4
- Video poster: https://media.designdetails.io/library/72f3c9f66f1212a0a05ed76ff09c317f0f4a98fbac3245ed0541da4d335c2931/motion-poster-1791619977789.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
- Primary Button
- Testimonial Card
- Logo Strip
- Footer
- ASCII Art Graphic
- Numbered List Section

## Quality rubric

Overall: 64/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Komma Komma executes a disciplined, typographically-led minimal studio site with a couple of genuinely distinctive bespoke touches — an ASCII-constructed quotation mark and a scroll-bound 3D rotating 'K' tied to the brand mark — set within a grey/black palette and numbered-grid structure. The system is coherent and well put together across intro, work, services, testimonial, and footer sections, but beyond its two standout moments it largely follows established agency-portfolio conventions, placing it solidly in the good tier rather than higher.

- Typography (15%): 68 — A single family (BDO Grotesk) is deployed across a clear, wide size range (68px/57.6px display down to 20px body and 14px uppercase labels) with consistent weight logic for hierarchy, plus a monospace swap for the ASCII-art quote marks and numbered tags. This produces a legible, editorial hierarchy, but the system relies on one typeface's weight/size variation rather than contrast between distinct voices, capping its expressive range.
- Color (10%): 58 — The palette is a tight, functional grey/black/white system (#EAEAEA canvas, #131313 text) with a single red accent (#EB4B3D) used only 4 times for wayfinding tags. This is restrained and consistent but offers little further color development or risk beyond the neutral base letting photography and typography do the work.
- Layout (20%): 66 — A consistent content column with thin 1px dividers, numbered service lists, a four-column footer grid, and an asymmetric hero/featured-project composition show a coherent grid system carried across sections (intro, featured projects, services, testimonial, logo strip, footer). The structure is well executed but follows established agency-portfolio conventions without unconventional spatial risks.
- Motion (20%): 70 — The recording shows more than a single scroll effect: staggered text reveal, horizontal parallax movement of a featured-project image, and a 3D rotation of a line-constructed 'K' shape that reverses direction when scrolling back up. This indicates a built, directional scroll-linked system tied to a brand element rather than one isolated hero animation, though details like easing quality, frame smoothness, or further interactive states beyond scroll are not established by the evidence.
- Originality (25%): 58 — Specific bespoke touches exist — ASCII-art quotation marks built from monospace characters, and a 3D rotating 'K' built from thin lines tied to the brand's own initial — but these are isolated flourishes layered onto an otherwise conventional minimal/Swiss agency-portfolio shell (grey canvas, numbered service list, testimonial card, award-logo strip, four-column footer) that is now common in this genre. The ideas are specific and hard to substitute individually, but they don't cohere into a systemic reinvention across the whole page.
- Content (10%): 63 — Content follows a clear, purposeful sequence (intro statement → featured project with real client specifics → numbered service breakdown → testimonial → trust logos → CTA → structured footer), and includes a concrete project description (RFID inventory platform) rather than generic placeholder copy. The testimonial and logo-strip sections, however, are presented in conventional card/row formats without a distinct integration device.

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

## Curator notes

A full bleed photo of an Icelandic cityscape framed like a window sets a moody tone before the page settles into a quiet grey canvas with plenty of air. Mismatched type sizes in the opening statement and a staggered project mockup break the grid just enough to hold attention, while small caps labels and a service list keep scanning easy.

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