# Spellbook — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://spellbook.com/
Captured: 2026-10-19
CSS measured: 2026-10-19T16:07:08.091Z at 1440×1000 — https://spellbook.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Spellbook is a legal tech platform featuring a clean, editorial, and minimal aesthetic with an enterprise-focused color palette and refined typography. The design language emphasizes high contrast through deep charcoal canvases paired with crisp white surfaces, giving it a sophisticated, corporate feel. Scroll-triggered animations smoothly reveal content as the user navigates. The typography utilizes Arizona Mix for elegant, display-style headings and Soehne for highly readable body copy, creating a balanced tension between classic editorial style and modern utility.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: Software
- Styles: editorial, corporate, minimal, dark-mode-accented
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Arizona Mix — weight 300; size 68px; line-height 68px; tracking -2.7px; Regular (100% role confidence, computed values)
- Heading: Arizona Mix — weight 300; size 51.2px; line-height 56.3px; tracking -1.5px; Regular (100% role confidence, computed values)
- Body: Soehne — weight 400; size 20px; line-height 28px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #0E1315: color-1: computed rgb(14, 19, 21); AI role: Deep charcoal (#0E1315) used extensively for the main backgrounds of the hero, header, form section, and footer. (100% role confidence, computed values)
- Surface — surface #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for alternating section backgrounds (like the logo strip and tools section) and cards to contrast the dark canvas. (100% role confidence, computed values)
- Primary Action — primary action #F94D1E: color-10: computed rgb(249, 77, 30); AI role: Vibrant orange (#F94D1E) used for the top announcement bar background and call-to-action buttons (newsletter submit). (95% role confidence, computed values)
- Text — text #000000: color-4: computed rgb(0, 0, 0); AI role: Black (#000000) used for text on white surfaces, ensuring high contrast. (90% role confidence, computed values)
- Text — text #D9D9D9: color-6: computed rgb(217, 217, 217); AI role: Light grey/off-white (#D9D9D9) used for readable body text against the dark #0E1315 canvas. (85% role confidence, computed values)
- Border — border #56595B: color-7: computed rgb(86, 89, 91); AI role: Mid-grey (#56595B) used for subtle borders and structural dividers. (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": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "Product",
        "top": 45,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Solutions",
        "top": 45,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 45,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Review contracts, draft agreements, and keep every position consistent across the deal-before and af",
        "top": 469,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Trusted by 5,000+ in-house teams and law firms.",
        "top": 1149,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Contracts are pulled in automatically from email and Slack with a full first-pass review run against",
        "top": 2102,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "33.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "We had great results from our pilot group. They quoted 55% time saved. Over 90% of people were very ",
        "top": 2677,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Instead of me having to go to outside counsel, I literally put it through Spellbook and got the indu",
        "top": 2677,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "From the moment we started a very short pilot, the most impressive thing is it was ready to be used.",
        "top": 2677,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Arizona Mix",
    "fontStack": "\"Arizona Mix\", sans-serif",
    "weight": "300",
    "size": "51.2px",
    "lineHeight": "56.3px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "The first AI system that powers contracts end-to-end",
        "top": 1669,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Designed for in-house teams and law firms",
        "top": 2477,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Works with your existing tools",
        "top": 3316,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.1px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h3",
        "text": "Product",
        "top": 7497,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Solutions",
        "top": 7497,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Resources",
        "top": 7497,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Arizona Mix",
    "fontStack": "\"Arizona Mix\", sans-serif",
    "weight": "300",
    "size": "68px",
    "lineHeight": "68px",
    "letterSpacing": "-2.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "The complete contract AI suite",
        "top": 306,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Arizona Mix",
    "fontStack": "\"Arizona Mix\", sans-serif",
    "weight": "300",
    "size": "51.2px",
    "lineHeight": "56.3px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Join over 5,000 legal teams using Spellbook",
        "top": 6742,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "29.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Get the latest legal AI news and tactics straight to your inbox.",
        "top": 4472,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "500",
    "size": "14.4px",
    "lineHeight": "18.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h4",
        "text": "Subscribe for free",
        "top": 4553,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "div",
        "text": "Catches non-standard terms across vendor agreements.",
        "top": 781,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Slide 3 of 4.",
        "top": 1087,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Intake",
        "top": 1847,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "14.4px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Read by lawyers at OpenAI, Google, Kirkland & Ellis, and more. Read latest editions here.",
        "top": 4651,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "here",
        "top": 4671,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "*Required",
        "top": 7132,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a Demo",
        "top": 32,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a Demo",
        "top": 478,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Read Customer Stories",
        "top": 1456,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "33.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "strong",
        "text": "Change and adoption was very straight-forward for us",
        "top": 5275,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "I was able to put together in four days.",
        "top": 5309,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "legal really isn't a bottleneck",
        "top": 5309,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "AI Contract Review & Drafting",
        "top": 239,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Trusted by 5,000+ legal teams",
        "top": 621,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "4.7",
        "top": 663,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Arial",
    "fontStack": "Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Press O for more options",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Press O for more options",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Press O for more options",
        "top": 0,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "label",
        "text": "Company",
        "top": 4579,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Company",
        "top": 7192,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Company",
        "top": 7624,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "300",
    "size": "51.2px",
    "lineHeight": "51.2px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "75%",
        "top": 3342,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2x",
        "top": 3342,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "The Redline Newsletter",
        "top": 7497,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "© 2026 Spellbook",
        "top": 8019,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "Save your spot",
        "top": -11,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Soehne",
    "fontStack": "Soehne, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 40,
    "contexts": [
      {
        "tag": "a",
        "text": "Webinar: The first-ever live demo of Spellbook ACM • Oct. 29 • Save your spot",
        "top": -9,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "ACM",
        "top": 7530,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Review",
        "top": 7559,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#0E1315",
    "alpha": 1,
    "cssValue": "rgb(14, 19, 21)",
    "count": 84,
    "contexts": [
      {
        "tag": "body",
        "text": "/* Allow overflow on slider to review slides */ html.wf-design-mode .swiper-wrapper { overflow-x: au",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Webinar: The first-ever live demo of Spellbook ACM • Oct. 29 • Save your spotProductProductFeaturesR",
        "top": -15,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Book a Demo",
        "top": 32,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "Catches non-standard terms across vendor agreements.",
        "top": 781,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Trusted by 5,000+ in-house teams and law firms.Read Customer Stories",
        "top": 1088,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "75% Time saved on contract work2x Throughput without adding headcountSee how AI is reshaping deals i",
        "top": 3314,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 83,
    "contexts": [
      {
        "tag": "div",
        "text": "/* Allow overflow on slider to review slides */ html.wf-design-mode .swiper-wrapper { overflow-x: au",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Webinar: The first-ever live demo of Spellbook ACM • Oct. 29 • Save your spot",
        "top": -9,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Save your spot",
        "top": -11,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 16,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2501,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2504,
        "property": "svg-fill"
      },
      {
        "tag": "img",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#2E3333",
    "alpha": 1,
    "cssValue": "rgb(46, 51, 51)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Reviews supplier MSAs across multiple countries.Applies standard playbooks across contract reviews. ",
        "top": 573,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#D9D9D9",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 217)",
    "count": 128,
    "contexts": [
      {
        "tag": "div",
        "text": "AI Contract Review & Drafting",
        "top": 239,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Review contracts, draft agreements, and keep every position consistent across the deal-before and af",
        "top": 469,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Trusted by 5,000+ in-house teams and law firms.Read Customer Stories",
        "top": 1136,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#56595B",
    "alpha": 1,
    "cssValue": "rgb(86, 89, 91)",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "AI Contract Review & Drafting",
        "top": 239,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Slide 3 of 4.",
        "top": 1087,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Intake",
        "top": 1847,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#222727",
    "alpha": 1,
    "cssValue": "rgb(34, 39, 39)",
    "count": 6,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 6928,
        "property": "background"
      },
      {
        "tag": "select",
        "text": "Are you a legal professional?*Yes, transactional law at a firmYes, in-house legalYes, litigationNo, ",
        "top": 7064,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F3F3F3",
    "alpha": 1,
    "cssValue": "rgb(243, 243, 243)",
    "count": 41,
    "contexts": [
      {
        "tag": "div",
        "text": "The Redline Newsletter",
        "top": 7497,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "ACM",
        "top": 7530,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#F94D1E",
    "alpha": 1,
    "cssValue": "rgb(249, 77, 30)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Webinar: The first-ever live demo of Spellbook ACM • Oct. 29 • Save your spot",
        "top": -15,
        "property": "background"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 4472,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "",
        "top": 4579,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#0E1315",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(14, 19, 21, 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 285,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#121719",
    "alpha": 1,
    "cssValue": "rgb(18, 23, 25)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 285,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#13171A",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(18, 23, 25, 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 285,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 95,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#3F3F45",
    "alpha": 1,
    "cssValue": "rgb(63, 63, 69)",
    "count": 3,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 7624,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#9D9F9F",
    "alpha": 1,
    "cssValue": "rgb(157, 159, 159)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "here",
        "top": 7681,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "color(srgb 1 1 1 / 0.5)",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3066,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "rgba(255, 255, 255, 0.4)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1056,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 621,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 4579,
        "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 spacing. Large vertical padding between major sections (often 100px+ visually) to maintain a clean, airy feel. Components within sections use tighter, structured grouping.
- Corner style: Slightly rounded to sharp. Buttons and inputs often have small, subtle border radii (e.g., 2px-4px visually), maintaining a structured, slightly sharp corporate aesthetic rather than fully pill-shaped.
- Radius: Minimal. Mostly square or slightly softened corners on cards and buttons.
- Borders: Thin, subtle borders. Used sparingly, mostly as 1px solid lines (#D9D9D9 or #56595B) to divide sections or outline subtle cards.
- Buttons: Solid and outline variants. Primary buttons (like 'Book a Demo') are solid white on dark backgrounds or dark text on light backgrounds. Arrow/icon buttons use the primary action color (#F94D1E).
- Content width: Wide, constrained max-width. Content is centered within a generous container, likely around 1200px-1440px wide, leaving comfortable margins on desktop.
- Density: Low to medium density. The design prioritizes whitespace and readability over packing information tightly, aligning with the editorial style.
- Evidence: Observed from the structural layout, generous margins around the 'The complete contract AI suite' headline, 1px lines dividing the logo strip grid, and the styling of the 'Book a Demo' buttons.

## Sections

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

1. **Hero — The complete contract AI suite** (Home)
   Opening hero composition from Home, organized around “The complete contract AI suite”.
   Capture: 1440×462px; page bounds 111–573px of 8091px; source section ID: `0c10c4e3-1498-4189-a8e7-b976dca6041b`; image: https://media.designdetails.io/library/791f1c18d090e1f3e2c55741fff71baf3b3aa455b9d64c0cdf09f35a1721e553/section_crop-0c10c4e3-2026-10-19T16-07-28-229Z.webp
   SECTION.md v3.2: `0c10c4e3-1498-4189-a8e7-b976dca6041b` (deterministic evidence; editorial review pending)
2. **Features — Trusted by 5,000+ in-house teams and law firms.** (Home)
   Reusable feature composition from Home, organized around “Trusted by 5,000+ in-house teams and law firms.”.
   Capture: 1440×453px; page bounds 1088–1541px of 8091px; source section ID: `98e12a99-d4b7-49cb-8bbc-4a1227f12b09`; image: https://media.designdetails.io/library/509115c22b3124c0021bbbf2fd7dbe0a9daef19bff7135edf9cdf99ddcd91934/section_crop-98e12a99-2026-10-19T16-07-29-603Z.webp
   SECTION.md v3.2: `98e12a99-d4b7-49cb-8bbc-4a1227f12b09` (deterministic evidence; editorial review pending)
3. **Features — Designed for in-house teams and law firms** (Home)
   Reusable feature composition from Home, organized around “Designed for in-house teams and law firms”.
   Capture: 1440×789px; page bounds 2477–3266px of 8091px; source section ID: `64d4677c-e360-41a0-9db6-66f5bfff8b69`; image: https://media.designdetails.io/library/0ade8f79e1ecf177fb8b61952712806296098d9ca49c5b6d5299c0659779dfd3/section_crop-64d4677c-2026-10-19T16-07-31-681Z.webp
   SECTION.md v3.2: `64d4677c-e360-41a0-9db6-66f5bfff8b69` (deterministic evidence; editorial review pending)
4. **Features — Works with your existing tools** (Home)
   Reusable feature composition from Home, organized around “Works with your existing tools”.
   Capture: 1440×420px; page bounds 3266–3686px of 8091px; source section ID: `eb7ce3e9-d0ed-41b6-87db-2736da89653a`; image: https://media.designdetails.io/library/893f26616ec7919c8800cac49d046713a271395712eb669060365ad82d7ff9e4/section_crop-eb7ce3e9-2026-10-19T16-07-32-640Z.webp
   SECTION.md v3.2: `eb7ce3e9-d0ed-41b6-87db-2736da89653a` (deterministic evidence; editorial review pending)
5. **Features — Powering legal teams worldwide** (Home)
   Reusable feature composition from Home, organized around “Powering legal teams worldwide”.
   Capture: 1440×537px; page bounds 5110–5647px of 8091px; source section ID: `0e5b031e-1344-436a-84a6-4bf0c4e59d4d`; image: https://media.designdetails.io/library/c1062eb84260868782ea2c7bf15ba1e6f2393dcf4958e874abb9f76cc4a15aa1/section_crop-0e5b031e-2026-10-19T16-07-35-266Z.webp
   SECTION.md v3.2: `0e5b031e-1344-436a-84a6-4bf0c4e59d4d` (deterministic evidence; editorial review pending)
6. **Features — Find solutions that fit your organization** (Home)
   Reusable feature composition from Home, organized around “Find solutions that fit your organization”.
   Capture: 1440×966px; page bounds 5647–6613px of 8091px; source section ID: `f5dbdd1a-02f4-49cd-833d-8381c5f95efd`; image: https://media.designdetails.io/library/049685254c2b08ae4d2ee877506b2e5e8bb9b4eb9a3f8a9a53fec9c2d50281d4/section_crop-f5dbdd1a-2026-10-19T16-07-36-323Z.webp
   SECTION.md v3.2: `f5dbdd1a-02f4-49cd-833d-8381c5f95efd` (deterministic evidence; editorial review pending)
7. **Hero — Complete Contract AI Suite Hero** (Home)
   AI suggestion (98% confidence): Complete, substantial hero with category label, clear value proposition, supporting copy, demo CTA, customer proof, and a distinctive full-width architectural visual.
   Capture: 1440×867px; page bounds 228–1095px of 8091px; source section ID: `f2702edf-55d3-4742-ab63-11a6bd7d294c`; image: https://media.designdetails.io/library/21ece713898897cdd82ae56913dfcfe388f90fa6884049d493925fc194de872b/f2702edf-55d3-4742-ab63-11a6bd7d294c.webp
   SECTION.md v3.2: `f2702edf-55d3-4742-ab63-11a6bd7d294c` (deterministic evidence; editorial review pending)
8. **Product Demo — End-to-End Contract System Demo** (Home)
   AI suggestion (94% confidence): Self-contained product showcase with a strong heading, workflow navigation, repository interface preview, explanatory copy, and a focused ACM action.
   Capture: 1440×738px; page bounds 1614–2352px of 8091px; source section ID: `1bc3bf0c-aba8-43c5-9523-1f31f97a5478`; image: https://media.designdetails.io/library/0532589dda45eff6b9c403031935bd37054341c86480afd8bf4efb4dcc500a2f/1bc3bf0c-aba8-43c5-9523-1f31f97a5478.webp
   SECTION.md v3.2: `1bc3bf0c-aba8-43c5-9523-1f31f97a5478` (deterministic evidence; editorial review pending)
9. **Safety — Enterprise-grade security and privacy** (Home)
   AI suggestion (98% confidence): Complete centered security section with privacy messaging, compliance standards, CTA, and distinctive dotted visual treatment.
   Capture: 1440×630px; page bounds 3665–4295px of 8091px; source section ID: `bb2f17ec-0c5e-471d-b394-a1f14fbfb4cf`; image: https://media.designdetails.io/library/082c54ebd3151d8199db7ea4eed9576b049a4c01709f26e2157c16647e9b762e/bb2f17ec-0c5e-471d-b394-a1f14fbfb4cf.webp
   SECTION.md v3.2: `bb2f17ec-0c5e-471d-b394-a1f14fbfb4cf` (deterministic evidence; editorial review pending)
10. **Blog — The Redline legal AI newsletter** (Home)
   AI suggestion (95% confidence): Self-contained editorial module combining a branded publication header, email subscription form, and a complete row of article imagery.
   Capture: 1440×672px; page bounds 4328–5000px of 8091px; source section ID: `0528c87b-135f-44b7-8dbc-69cc230ba184`; image: https://media.designdetails.io/library/f80ee35812ec98a3312fc7b61df87fb3961a0c8d57522aec834ff357b71755c1/0528c87b-135f-44b7-8dbc-69cc230ba184.webp
   SECTION.md v3.2: `0528c87b-135f-44b7-8dbc-69cc230ba184` (deterministic evidence; editorial review pending)
11. **CTA — Book a Demo Lead Form** (Home)
   AI suggestion (98% confidence): Complete dark conversion section with a strong headline, contact prompt, qualification fields, primary demo button, and trust proof.
   Capture: 1440×754px; page bounds 6617–7371px of 8091px; source section ID: `48d7f6e0-4dc6-4f36-bbef-91a26eedb270`; image: https://media.designdetails.io/library/19cdd7efceb44f364f81a983884210b96be602a2d7e00cbe88e1ca7a94c7634f/48d7f6e0-4dc6-4f36-bbef-91a26eedb270.webp
   SECTION.md v3.2: `48d7f6e0-4dc6-4f36-bbef-91a26eedb270` (deterministic evidence; editorial review pending)
12. **Footer — Newsletter and Sitemap Footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer combining newsletter signup, organized navigation columns, brand mark, legal links, and copyright details.
   Capture: 1440×717px; page bounds 7374–8091px of 8091px; source section ID: `917c122c-2472-45c9-aa76-19b28ed1cd0b`; image: https://media.designdetails.io/library/531e485f53c0b4a4426901556dc66f9770c71140fa5dfbd8591cc79df30d0824/917c122c-2472-45c9-aa76-19b28ed1cd0b.webp
   SECTION.md v3.2: `917c122c-2472-45c9-aa76-19b28ed1cd0b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/c18467a056e79d9386ae6b21300f2a19435bb3671ba1a2edb5b154e3640f7e3a/desktop_full-ccafa37e-2026-10-19T16-07-08-113Z.webp
- Mobile screenshot: https://media.designdetails.io/library/efea9f49d8a45f0d76c9af8bc8adda0d361e2b3c4bc13efd49760da3418b2ac9/mobile_full-ccafa37e-2026-10-19T16-08-08-597Z.webp
- Open Graph image: https://media.designdetails.io/library/8ce7c9e5661ae1c4c6476acff506d804a6a6a5b941d4a7b47d9aa92c5debda7b/og_image-ccafa37e-2026-10-19T16-07-17-625Z.webp
- Full-page video: https://media.designdetails.io/library/9228507a660e99ebb0e9824b066f368edc9d23048c2c0e178cb2d3adb48fadaa/motion-1792426671993.mp4
- Video poster: https://media.designdetails.io/library/f63f34303b02bd2634a0422aef9563e4de57e752c43efec19dee8f70f5f65b8f/motion-poster-1792426671993.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

- Announcement Bar
- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Testimonial Card
- Feature Collection
- Stat Block
- Newsletter Form
- Contact Form
- Footer
- Editorial News Block
- Interactive UI Mockup

## Quality rubric

Overall: 49.95/100 (Serviceable)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Spellbook is a carefully built, legible B2B SaaS marketing site with a sensible type system, a restrained accent palette, and genuine customer proof woven into its sections. But nearly every component—the font pairing, the charcoal-and-orange palette, the hero convention, the section ordering, and the uniform scroll-reveal motion—closely tracks the dominant 'premium AI startup' template of this moment, so despite tidy execution it reads as competent rather than distinctive.

- Typography (15%): 60 — A deliberate two-family system (Arizona Mix display, Soehne body/UI) gives the page a consistent editorial-vs-utility contrast, with careful negative tracking scaled across heading sizes. However, this exact serif-display/grotesk-body duo is now one of the most recognizable 'premium startup' pairings, so the execution is clean but not distinctive.
- Color (10%): 52 — The charcoal-canvas/white-surface/single-orange-accent palette is restrained and functionally applied (accent reserved for CTAs and the announcement bar), but this exact combination is a default in current B2B SaaS/AI branding, limiting it to competent rather than considered.
- Layout (20%): 57 — Sections are cleanly gridded with generous whitespace and a wide, consistent content container, but the overall sequence—hero, logo strip, feature/screenshot block, testimonials, stats, integrations, security, newsletter, use-case carousel, contact form, footer—is the default order for this entire site category.
- Motion (20%): 47 — Scroll-triggered reveals are present and consistently timed, but every content type—logos, testimonials, integration icons, security badges, news thumbnails, use-case cards, and the contact form—receives the identical fade-and-translate-up treatment with no variation in choreography.
- Originality (25%): 37 — The dark-canvas-plus-orange-accent palette, Arizona Mix/Soehne pairing, architectural hero photography, and uniform scroll-reveal motion together constitute a widely repeated 'premium AI/B2B SaaS' formula seen across many funded startups; little here could not be substituted onto another company's product with minimal change. The masthead-styled 'Redline' newsletter block is a genuinely brand-specific idea, but it is isolated rather than part of a broader distinctive system.
- Content (10%): 57 — Real customer names, titles, company logos, and an actual product UI screenshot are woven into the design to substantiate specific claims, giving the content real evidentiary weight rather than purely decorative filler, even though the presentation style itself is conventional.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A dark hero with a corporate skyscraper photo and a dense grid of recognisable client logos signal credibility straight away, reassuring legal buyers before any feature talk. Below, a plain chat interface screenshot and client quote videos break up the page into short, easy to scan chapters rather than one long sales pitch.

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