# Grida — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://grida.co/
Captured: 2026-11-03
CSS measured: 2026-11-03T05:01:46.113Z at 1440×1000 — https://grida.co/
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

Grida employs a clean, minimalist design with a stark contrast between its very light and very dark sections, effectively using generous whitespace to emphasize content. The typography relies exclusively on the Inter family, establishing a modern, sans-serif aesthetic, utilizing dramatic scale differences (e.g., 113.8px display headings versus 12px body copy) for hierarchy. The layout features both standard centered content flow and more complex, interactive-feeling asymmetric structures, particularly in product feature areas. Visual interest is heavily driven by rich, stylized product imagery and illustrations, while the UI elements themselves remain neutral, relying on subtle grays and bla

## Classification

- Industry: creative
- Site type: Landing, Blog
- Business model: Agency
- Styles: minimal, bold, corporate, high-contrast, product-centric
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Inter — weight 500; size 113.8px; line-height 115.5px; tracking -7.6px; Regular (100% role confidence, computed values)
- Heading: Inter — weight 500; size 78px; line-height 81.1px; tracking -4.5px; Regular (95% role confidence, computed values)
- Body: Inter — weight 400; size 14px; line-height 20px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FAFAFA: color-1: computed rgb(250, 250, 250); AI role: rgb(250, 250, 250) used as the main light background for the page. (95% role confidence, computed values)
- Canvas — canvas #111111: color-2: computed rgb(17, 17, 17); AI role: rgb(17, 17, 17) used as the primary background color for dark-themed sections. (95% role confidence, computed values)
- Text — text #181818: color-13: computed rgb(24, 24, 24); AI role: rgb(24, 24, 24) used for primary text headings and body copy on light backgrounds. (90% role confidence, computed values)
- Text — text #FFFFFF: color-3: computed lab(100 0 0); AI role: White text used in dark sections (e.g., 'Download for macOS' button text). (90% role confidence, computed values)
- Muted Text — muted text #666666: color-10: computed rgb(102, 102, 102); AI role: rgb(102, 102, 102) used for secondary or descriptive text. (85% role confidence, computed values)
- Primary Action — primary action #202020: color-8: computed rgb(32, 32, 32); AI role: rgb(32, 32, 32) used for main CTA buttons. (80% role confidence, computed values)
- Surface — surface #EFEFEF: color-4: computed rgb(239, 239, 239); AI role: rgb(239, 239, 239) used for feature card backgrounds in the bottom section. (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": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "26px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h4",
        "text": "Your agent",
        "top": 12419,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Connect ChatGPT",
        "top": 12419,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Library",
        "top": 12419,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h3",
        "text": "GPT Image 2.5",
        "top": 9113,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Gemini Omni 1.1",
        "top": 9010,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Recraft V4.1",
        "top": 8944,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Product",
        "top": 13592,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Resources",
        "top": 13592,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Contact",
        "top": 13592,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "113.8px",
    "lineHeight": "115.5px",
    "letterSpacing": "-7.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Make roomfor your ideas.",
        "top": 164,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "for your ideas.",
        "top": 279,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "51.8px",
    "lineHeight": "53.9px",
    "letterSpacing": "-2.9px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Build a world.Layer by layer.",
        "top": 5545,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Layer by layer.",
        "top": 5598,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "100px",
    "lineHeight": "106px",
    "letterSpacing": "-6.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Start creating.",
        "top": 13213,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "79.2px",
    "lineHeight": "83.2px",
    "letterSpacing": "-4.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Worlds start here.",
        "top": 2401,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "78px",
    "lineHeight": "81.1px",
    "letterSpacing": "-4.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Followan idea.",
        "top": 1856,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "64px",
    "lineHeight": "66.6px",
    "letterSpacing": "-3.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Your work.Your workspace.",
        "top": 11910,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "56px",
    "lineHeight": "58.2px",
    "letterSpacing": "-3.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Go with the flow.",
        "top": 4530,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "48px",
    "lineHeight": "49.9px",
    "letterSpacing": "-2.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "More ways to create.",
        "top": 8362,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Make it your own.",
        "top": 12321,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "700",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Grida",
        "top": 13592,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "button",
        "text": "Features",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Pricing",
        "top": 40,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Trusted by people at",
        "top": 1371,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Game studios",
        "top": 4624,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Product design",
        "top": 4624,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Try the unexpected.",
        "top": 1158,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Works with",
        "top": 5338,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Artwork",
        "top": 6407,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Claude Code, Codex, or your own scripts. Use Grida CLI to create assets and save them straight into ",
        "top": 12466,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Connect your ChatGPT subscription to Grida Desktop and use supported text models with your plan’s li",
        "top": 12466,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Great references are already built in. Explore free examples and templates, find a direction, and ma",
        "top": 12466,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Grida FX repaints the joins in five prepared landscape layers so they loop continuously. Sky, hills,",
        "top": 5484,
        "property": "font"
      },
      {
        "tag": "figcaption",
        "text": "Source artwork",
        "top": 6198,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Click an image, scroll to explore, drag horizontally, or use the left and right arrow keys.",
        "top": 8284,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "25.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Make room to explore, arrange, and design.",
        "top": 2091,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Turn your work into slides worth sharing.",
        "top": 2232,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Connect models and steps to create something new.",
        "top": 2284,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "A little room to explore.",
        "top": 12106,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Projects / Studio studies",
        "top": 12227,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "© 2026 Grida Inc. All rights reserved.",
        "top": 13992,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": null,
    "fontStack": "monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "❯ grida",
        "top": 12785,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "❯",
        "top": 12787,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Create a new direction.",
        "top": 12813,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "1.6px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Models",
        "top": 8333,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "On your terms",
        "top": 11867,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "108px",
    "lineHeight": "82.1px",
    "letterSpacing": "-8.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Whatif*",
        "top": 874,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "32.5px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Real files, in your own folders. Keep your projects on your computer, and keep using the tools you l",
        "top": 12075,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Design, create, and explore on an open canvas.",
        "top": 422,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Studio studies",
        "top": 12078,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Build a looping game background with Grida FX.",
        "top": 5670,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Grida FX",
        "top": 4494,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "19.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Repaint the seams for a continuous background.",
        "top": 4918,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "Untitled possibilities",
        "top": 629,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "100%",
        "top": 629,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Looping world",
        "top": 4746,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "A thought, taking shape",
        "top": 747,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Leave room for a little unexpected.",
        "top": 1113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A new perspective",
        "top": 699,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "9px",
    "lineHeight": "13.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "5 layers connected",
        "top": 5059,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Preserve transparency",
        "top": 5021,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Layers → Looping background",
        "top": 5045,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "19px",
    "lineHeight": "28.5px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "strong",
        "text": "Bring your ChatGPT plan.",
        "top": 12751,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Choose how requests are handled.",
        "top": 12751,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "On your computer.",
        "top": 12751,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "10.2px",
    "lineHeight": "15.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Form study / Exploration 01",
        "top": 1809,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 1810,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Canvas",
        "top": 1809,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Codex",
        "top": 12699,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Claude Code",
        "top": 12699,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "500",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Your layers",
        "top": 4817,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Make it loop",
        "top": 4874,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "7.4px",
    "lineHeight": "11.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "small",
        "text": "Regular 48",
        "top": 2128,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "48",
        "top": 2128,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "7.4px",
    "lineHeight": "11.1px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "STUDIO EXPLORATIONS",
        "top": 1880,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "01 / 26",
        "top": 1880,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "Georgia",
    "fontStack": "Georgia, serif",
    "weight": "500",
    "size": "129.6px",
    "lineHeight": "0px",
    "letterSpacing": "-8.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "*",
        "top": 922,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\"",
    "weight": "400",
    "size": "77.6px",
    "lineHeight": "96.9px",
    "letterSpacing": "-7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "Aa",
        "top": 1942,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 250)",
    "count": 4,
    "contexts": [
      {
        "tag": "main",
        "text": "Features Resources PricingDownloadLog inGet StartedMake roomfor your ideas.Design, create, and explo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Followan idea.DesignMake room to explore, arrange, and design.Explore the canvas PresentTurn your wo",
        "top": 1564,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "On your termsYour work.Your workspace.Real files, in your own folders. Keep your projects on your co",
        "top": 11685,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 8,
    "contexts": [
      {
        "tag": "section",
        "text": "Followan idea.DesignMake room to explore, arrange, and design.Explore the canvas PresentTurn your wo",
        "top": 1564,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Grida FXGo with the flow.Game studiosProduct designMarketingYour layers5 layers connectedMake it loo",
        "top": 4414,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5342,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "lab(100 0 0)",
    "count": 38,
    "contexts": [
      {
        "tag": "body",
        "text": "((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=[\"light\",\"dark\"];function k(b){var c;(Array.is",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Download for macOS",
        "top": 482,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 498,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#EFEFEF",
    "alpha": 1,
    "cssValue": "rgb(239, 239, 239)",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1212,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "Your agentClaude Code, Codex, or your own scripts. Use Grida CLI to create assets and save them stra",
        "top": 12387,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F0F0F0",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 240)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Untitled possibilities100%A thought, taking shapeA study in possibilityWhatif*Leave room for a littl",
        "top": 606,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 17,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 4680,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 5337,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F0F1F2",
    "alpha": 1,
    "cssValue": "rgb(240, 241, 242)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1780,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#202020",
    "alpha": 1,
    "cssValue": "rgb(32, 32, 32)",
    "count": 31,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 40,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 47,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Features",
        "top": 32,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#242424",
    "alpha": 1,
    "cssValue": "rgb(36, 36, 36)",
    "count": 11,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1214,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1217,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Game studiosProduct designMarketing",
        "top": 4620,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#666666",
    "alpha": 1,
    "cssValue": "rgb(102, 102, 102)",
    "count": 24,
    "contexts": [
      {
        "tag": "h3",
        "text": "Make it your own.",
        "top": 12321,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Claude Code, Codex, or your own scripts. Use Grida CLI to create assets and save them straight into ",
        "top": 12466,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Eligible requests",
        "top": 12846,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#1B1D1F",
    "alpha": 1,
    "cssValue": "rgb(27, 29, 31)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Looping world5 layers · Seamless repeat",
        "top": 4746,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#F6F6F6",
    "alpha": 1,
    "cssValue": "rgb(246, 246, 246)",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Go with the flow.",
        "top": 4530,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Layer by layer.",
        "top": 5598,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Grida FX repaints the joins in five prepared landscape layers so they loop continuously. Sky, hills,",
        "top": 5484,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#181818",
    "alpha": 1,
    "cssValue": "rgb(24, 24, 24)",
    "count": 65,
    "contexts": [
      {
        "tag": "h2",
        "text": "Your work.Your workspace.",
        "top": 11910,
        "property": "text"
      },
      {
        "tag": "h4",
        "text": "Your agent",
        "top": 12419,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Explore the CLI",
        "top": 12558,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#242A28",
    "alpha": 1,
    "cssValue": "rgb(36, 42, 40)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4786,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#6B6B6B",
    "alpha": 1,
    "cssValue": "rgb(107, 107, 107)",
    "count": 37,
    "contexts": [
      {
        "tag": "p",
        "text": "Design, create, and explore on an open canvas.",
        "top": 422,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "GitHub",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 13636,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#BDAECD",
    "alpha": 1,
    "cssValue": "rgb(189, 174, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "STUDIO EXPLORATIONS01 / 26In goodform.A little roomfor the unexpected.↗",
        "top": 1860,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#D9E4B5",
    "alpha": 1,
    "cssValue": "rgb(217, 228, 181)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "A study in possibilityWhatif*Leave room for a little unexpected.",
        "top": 765,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 893,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#222222",
    "alpha": 1,
    "cssValue": "rgb(34, 34, 34)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Codex Claude Code Studio / assets❯ gridaCreate a new direction.exploration.png",
        "top": 12677,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Connect ChatGPT",
        "top": 12834,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#202224",
    "alpha": 1,
    "cssValue": "rgb(32, 34, 36)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Your layers5 layers connected",
        "top": 4817,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#D9D9D9",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 11939,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#737373",
    "alpha": 1,
    "cssValue": "lab(48.496 0 0)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "On your terms",
        "top": 11867,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "exploration.grida",
        "top": 12051,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#999999",
    "alpha": 1,
    "cssValue": "rgb(153, 153, 153)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Build a looping game background with Grida FX.",
        "top": 5670,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Your name",
        "top": 12799,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#34432B",
    "alpha": 1,
    "cssValue": "rgb(52, 67, 43)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "A study in possibility",
        "top": 792,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Whatif*",
        "top": 874,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#302830",
    "alpha": 1,
    "cssValue": "rgb(48, 40, 48)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "In goodform.",
        "top": 1914,
        "property": "text"
      },
      {
        "tag": "em",
        "text": "form.",
        "top": 1963,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 13,
    "contexts": [
      {
        "tag": "h2",
        "text": "More ways to create.",
        "top": 8362,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "GPT Image 2.5",
        "top": 9113,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Click an image, scroll to explore, drag horizontally, or use the left and right arrow keys.",
        "top": 8284,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#888888",
    "alpha": 1,
    "cssValue": "rgb(136, 136, 136)",
    "count": 11,
    "contexts": [
      {
        "tag": "small",
        "text": "exploration.png",
        "top": 12999,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Keep the subscription you already use.",
        "top": 12798,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "One balance. Bring your own key, if you prefer.",
        "top": 12918,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#EDD6C4",
    "alpha": 1,
    "cssValue": "rgb(237, 214, 196)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11853,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#F4F4F4",
    "alpha": 1,
    "cssValue": "rgb(244, 244, 244)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Your name",
        "top": 12799,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#36333A",
    "alpha": 1,
    "cssValue": "rgb(54, 51, 58)",
    "count": 2,
    "contexts": [
      {
        "tag": "strong",
        "text": "Aa",
        "top": 1942,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Good thingstake shape.",
        "top": 2039,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#E6DDE9",
    "alpha": 1,
    "cssValue": "rgb(230, 221, 233)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11906,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#251810",
    "alpha": 1,
    "cssValue": "rgb(37, 24, 16)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "FORM& FEEL.",
        "top": 750,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#777777",
    "alpha": 1,
    "cssValue": "rgb(119, 119, 119)",
    "count": 28,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2299,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2306,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 2304,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#6E6E6E",
    "alpha": 1,
    "cssValue": "rgb(110, 110, 110)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Present",
        "top": 2191,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#C8CACD",
    "alpha": 1,
    "cssValue": "rgb(200, 202, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Looping world",
        "top": 4746,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#D1D2D3",
    "alpha": 1,
    "cssValue": "rgb(209, 210, 211)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Your layers",
        "top": 4817,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 5,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 12699,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 12699,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Install CLI",
        "top": 13357,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#9C9FA2",
    "alpha": 1,
    "cssValue": "rgb(156, 159, 162)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Repaint the seams for a continuous background.",
        "top": 4918,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#F2F2F2",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 242)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Project",
        "top": 12738,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#A3A3A3",
    "alpha": 1,
    "cssValue": "rgb(163, 163, 163)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "Product design",
        "top": 4624,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Models",
        "top": 8333,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#9C9D9E",
    "alpha": 1,
    "cssValue": "rgb(156, 157, 158)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Grida FX",
        "top": 4494,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#AAAAAA",
    "alpha": 1,
    "cssValue": "rgb(170, 170, 170)",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore Grida FX",
        "top": 5392,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 5395,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5399,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#FFFFFF",
    "alpha": 0.9294117647058824,
    "cssValue": "rgba(255, 255, 255, 0.93)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1198,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#93969C",
    "alpha": 1,
    "cssValue": "rgb(147, 150, 156)",
    "count": 1,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "Source artwork",
        "top": 6198,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#252525",
    "alpha": 1,
    "cssValue": "rgb(37, 37, 37)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Design",
        "top": 2051,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#000000",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0 0 0 / 0.08)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 12181,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#A1A1A1",
    "alpha": 1,
    "cssValue": "lab(66.128 -0.0000298023 0.0000119209)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Studio studies",
        "top": 11898,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 11881,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 11885,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#929094",
    "alpha": 1,
    "cssValue": "rgb(146, 144, 148)",
    "count": 3,
    "contexts": [
      {
        "tag": "small",
        "text": "TYPE EXPLORATION",
        "top": 1931,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "48",
        "top": 2128,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#343434",
    "alpha": 1,
    "cssValue": "rgb(52, 52, 52)",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore the canvas",
        "top": 2133,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2138,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2140,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### 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, creating distinct thematic blocks.
- Corner style: Rounded corners heavily utilized on UI elements, cards, and image containers, softening the harsh black-and-white contrast.
- Radius: Visibly large border radii on main product showcase images and feature cards (estimated 16px-24px visually, specific value not in DOM facts).
- Borders: Mostly borderless, relying on subtle background color shifts (e.g., white to light gray) to define container edges.
- Buttons: Pill-shaped (fully rounded) solid color buttons for primary actions, distinct from the squarer feature cards.
- Content width: Centered constrained max-width for textual content, while visual elements often break the grid or expand wider.
- Density: Low density; the design breathes heavily with significant negative space around key text elements.
- Evidence: Observed from overall layout structure, card styling in 'Your agent' section, button shapes in hero, and tight integration of typography scale with layout space.

## Sections

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

1. **Navbar — Grida Navbar** (Home)
   A small logo, four centered links and a login at the edge keep the bar quiet so the headline below leads.
   Capture: 1440×100px; page bounds 0–100px of 10974px; source section ID: `3b64c1cf-083d-49ae-9433-155681bcc265`; image: https://media.designdetails.io/library/f2fc230082ad80f827c0fe18066150f77b11d637e6497960022114cb765be528/3b64c1cf-083d-49ae-9433-155681bcc265.webp
   SECTION.md v3.2: `3b64c1cf-083d-49ae-9433-155681bcc265` (deterministic evidence; editorial review pending)
2. **Hero — Centered headline with download button** (Home)
   An oversized tight headline, one short subline and a single dark button give the visitor one clear action on a plain background.
   Capture: 1440×506px; page bounds 100–606px of 10974px; source section ID: `02e5ffb8-9af3-4b4f-a6a3-c1d7a558e159`; image: https://media.designdetails.io/library/0daf8d628c61699d0d7133453d01afcdd995eae6cf5d24482b554203d4b626d1/02e5ffb8-9af3-4b4f-a6a3-c1d7a558e159.webp
   SECTION.md v3.2: `02e5ffb8-9af3-4b4f-a6a3-c1d7a558e159` (deterministic evidence; editorial review pending)
3. **Dashboard — Canvas app screen with design cards** (Home)
   The full editor view with colorful artwork, palette and toolbar shows what the product does without any explanation.
   Capture: 1440×665px; page bounds 606–1271px of 10974px; source section ID: `62a93c62-b789-4045-83af-e723accc605a`; image: https://media.designdetails.io/library/b276a609e6c3946a082c66bc4bae783e0237540c742852a8c675942b5c8c30ed/62a93c62-b789-4045-83af-e723accc605a.webp
   SECTION.md v3.2: `62a93c62-b789-4045-83af-e723accc605a` (deterministic evidence; editorial review pending)
4. **Logo Cloud — Single row of company logos** (Home)
   Muted grey logos in one even line add credibility without competing with the surrounding content.
   Capture: 1440×293px; page bounds 1271–1564px of 10974px; source section ID: `6dc47ede-980a-409b-9b04-b28b3bb4324f`; image: https://media.designdetails.io/library/23e08c48a658ac1d0312a96da9f89e74045c2fcdb167e04e719cf9491283445d/6dc47ede-980a-409b-9b04-b28b3bb4324f.webp
   SECTION.md v3.2: `6dc47ede-980a-409b-9b04-b28b3bb4324f` (deterministic evidence; editorial review pending)
5. **Features — Tabbed feature beside preview, full-bleed image** (Home)
   A large heading with a short list of capabilities pairs with a product preview, then a full-bleed illustration adds atmosphere.
   Capture: 1440×2000px; page bounds 1564–3564px of 10974px; source section ID: `4fee6634-0a87-4989-b72d-f437760c7535`; image: https://media.designdetails.io/library/0ac3edd66707ae02d9031ac758a8d45415d7ad71d06c19e07881edab3ba1b917/4fee6634-0a87-4989-b72d-f437760c7535.webp
   SECTION.md v3.2: `4fee6634-0a87-4989-b72d-f437760c7535` (deterministic evidence; editorial review pending)
6. **Features — Node flow diagram on dark background** (Home)
   Connected cards flowing from source layer to result show a workflow step by step, and tabs let different users see relevant cases.
   Capture: 1440×1070px; page bounds 3564–4634px of 10974px; source section ID: `cfdd0387-02cb-4e04-bea1-86b4f513f2cf`; image: https://media.designdetails.io/library/e983854541e2b38cbee4176fd4cbc2b73e347ce0af0cd3fcf5cdfe94f3e93388/cfdd0387-02cb-4e04-bea1-86b4f513f2cf.webp
   SECTION.md v3.2: `cfdd0387-02cb-4e04-bea1-86b4f513f2cf` (deterministic evidence; editorial review pending)
7. **Process — Scroll steps building a layered scene** (Home)
   The repeated heading with a step indicator and a growing image shows the artwork being built in stages as the visitor scrolls.
   Capture: 1440×2001px; page bounds 4634–6635px of 10974px; source section ID: `d4fa0d0e-3acc-490a-8653-a2cb3b39c381`; image: https://media.designdetails.io/library/f6f9034444fd51af051ddeb014fca015036f9d99d722e2356e2f686f2cbbc3c0/d4fa0d0e-3acc-490a-8653-a2cb3b39c381.webp
   SECTION.md v3.2: `d4fa0d0e-3acc-490a-8653-a2cb3b39c381` (deterministic evidence; editorial review pending)
8. **Gallery — Floating image collection by AI model** (Home)
   Varied image sizes drifting across a dark ground showcase output range, with model names captioned under each picture.
   Capture: 1440×2000px; page bounds 6635–8635px of 10974px; source section ID: `664c106f-1e21-4f38-a3b9-248ad93030b7`; image: https://media.designdetails.io/library/c3c9cc0e4d1d13529766b3c8db4481d757fcf8d16c741ec213bf040e5f0ec407/664c106f-1e21-4f38-a3b9-248ad93030b7.webp
   SECTION.md v3.2: `664c106f-1e21-4f38-a3b9-248ad93030b7` (deterministic evidence; editorial review pending)
9. **Features — Workspace intro with scrolling feature cards** (Home)
   A bold heading with a folder visual leads into a horizontal row of rounded cards, each pairing short copy with a screenshot.
   Capture: 1440×1379px; page bounds 8635–10014px of 10974px; source section ID: `ced85057-46ce-4f44-a9fa-47c0b4580cff`; image: https://media.designdetails.io/library/bf082cfc46d3c66687b0ff523f65a2ce32a8b51a9127a9d7546debaec3403320/ced85057-46ce-4f44-a9fa-47c0b4580cff.webp
   SECTION.md v3.2: `ced85057-46ce-4f44-a9fa-47c0b4580cff` (deterministic evidence; editorial review pending)
10. **CTA — Closing headline with three buttons** (Home)
   A large headline over one filled primary button and two softer secondary buttons ranks the next steps by priority.
   Capture: 1440×496px; page bounds 10014–10510px of 10974px; source section ID: `9c2652f6-207c-4d88-8cc3-3431c58a2c80`; image: https://media.designdetails.io/library/f6850c9515625a64297c93f6235c81b6d921a3658a1c8a28343283e91351508a/9c2652f6-207c-4d88-8cc3-3431c58a2c80.webp
   SECTION.md v3.2: `9c2652f6-207c-4d88-8cc3-3431c58a2c80` (deterministic evidence; editorial review pending)
11. **Footer — Four-column link footer** (Home)
   Links grouped under Product, Resources, Contact and Legal with social icons and copyright make the site easy to scan.
   Capture: 1440×464px; page bounds 10510–10974px of 10974px; source section ID: `3aef4e4e-add4-43ff-8bea-73bd35e078da`; image: https://media.designdetails.io/library/502f2ab3a0c95988149f10da23e316cc383968b2e13deab42b6aa8b464f6d19d/3aef4e4e-add4-43ff-8bea-73bd35e078da.webp
   SECTION.md v3.2: `3aef4e4e-add4-43ff-8bea-73bd35e078da` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/813829aaaa6dd5e7db33aafa4f1c5deacbdf33c3615175315e72cf614f563316/desktop_full-2a803ae7-2026-11-03T05-01-46-131Z.webp
- Mobile screenshot: https://media.designdetails.io/library/07cafaa2c1d4a05e88e58dca454c130c154eef95e87698dcab77b6ab127a6bc2/mobile_full-2a803ae7-2026-11-03T05-02-19-140Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/0764dacaa4f04e07abebece38c529a4d57a97db129d5867c57d7b16f935ec793/motion-1793686896756.mp4
- Video poster: https://media.designdetails.io/library/23bed23d70d10383800ebe2585e181a351a31bfdb4ffc4606cae9043fc3c5251/motion-poster-1793686896756.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
- Primary Button
- Feature Card
- Carousel
- Logo Strip
- Footer
- Product UI
- Sticky Scroll Section
- Interactive Layer Breakdown

## Quality rubric

Overall: 66.88/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: Grida pairs a disciplined, wide-range Inter type system and a clean light/dark sectioning strategy with one genuinely clever, product-specific idea: visually deconstructing a landscape illustration into its compositing layers, directly mirroring the tool's own feature set, reinforced by an interactive tab control. That sequence, plus small editorial touches in the hero (swatch callouts, hand-drawn arrows, mixed mockup cards), lifts the page above a purely generic SaaS landing page. However, much of the surrounding structure—logo strip, feature-card trio, horizontal carousel, standard footer—follows familiar conventions, and the color system stays almost entirely monochrome at the UI level, with hue confined to imagery. Motion is conceptually well-aligned with the product story but cannot be verified for polish from the evidence given. The result is a well-executed, coherent marketing site with one standout moment rather than a landmark system sustained end-to-end.

- Typography (15%): 72 — A single family (Inter) is deployed with real discipline: dramatic scale range from 113.8px/-7.6px tracking display type down to 7.4-9px micro-labels, with weight (400/500/600/700) and tracking adjusted per role rather than a flat default. Rare touches (a Georgia serif asterisk, monospace CLI snippet, sans-serif fallback on logo chips) show considered exceptions rather than carelessness. The system supports a clear hierarchy across many section types.
- Color (10%): 59 — The interface shell is almost entirely monochrome (#FAFAFA/#111111/#181818/#666666 grays) with a clean light/dark section swap used as the main device. Color appears mainly inside illustrative imagery (orange ribbon, lavender card, sage landscape) rather than in the UI system itself, so the palette reads competent and controlled but not distinctively authored at the interface level.
- Layout (20%): 67 — The page moves through genuinely varied structures—centered hero, sticky two-column 'Follow an idea' panel, full-bleed illustration break, dark diagram/flow section, interactive tabbed layer-breakdown, horizontal carousel, card-grid feature section, and multi-column footer—while keeping consistent spacing rhythm, radius language, and type scale tying it together. This is more than a single hero template; it's a multi-section system, though individual patterns (cards, carousel, footer) are largely conventional SaaS fare.
- Motion (20%): Inconclusive — Observed moments describe thematically purposeful interactions (hover-expand hero panel, sticky image swap, illustration expanding into layered depth, tab-triggered layer demo, horizontal carousel) that map directly to the product's layering concept—conceptually strong. However, without confirmed easing, frame timing, or responsiveness quality, smoothness and execution polish cannot be verified from the evidence provided.
- Originality (25%): 64 — The standout idea is the literal 'layer by layer' deconstruction of a landscape illustration into sky/trees/ground/foreground, directly dramatizing the product's own layering feature—an idea specific to this tool and hard to copy wholesale. Smaller touches (the 'Find the feeling' swatch strip, 'Try the unexpected' annotated arrows, mixed-media hero cards) add editorial flavor. But the surrounding scaffold—centered hero, logo strip, feature-card trio, horizontal carousel, standard footer—is largely stock SaaS-marketing pattern, so originality is concentrated in a few sections rather than sustained throughout.
- Content (10%): 74 — Copy, UI mockups, and illustrations are tightly coupled to the actual product capability being described rather than generic stock imagery—canvas mockups mirror real tool UI, the layering demo illustrates the FX feature it's selling, and feature cards (CLI, ChatGPT connect, Library) each pair a concrete UI screenshot with matching text. This gives the page a believable, product-grounded feel across most sections.

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

## Curator notes

Curator review pending.

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