# Blacksmith — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.blacksmith.sh/
Captured: 2026-10-23
CSS measured: 2026-10-23T18:15:09.005Z at 1440×1000 — https://www.blacksmith.sh/
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

Blacksmith's design combines a stark, minimal canvas with vibrant, almost retro-digital accents. The layout is structured around a strong grid and hairline borders, creating an architectural feel. The typography pairs a utilitarian sans-serif with a monospace font, reinforcing a technical, developer-focused identity. The palette is highly constrained, relying primarily on a distinctive neon yellow and solid black, creating a high-contrast, brutalist-inspired aesthetic. The overall impression is one of speed, precision, and modern engineering.

## Classification

- Industry: developer-tools
- Site type: Landing, Blog
- Business model: Software
- Styles: brutalist, minimal, retro, corporate, technical-utility, architectural-grid
- Platform: Webflow
- Technology: Next.js, GSAP

## Typography

- Display: IBM Plex Sans — weight 500; size 64px; line-height 72px; tracking -4px; Regular (95% role confidence, computed values)
- Heading: IBM Plex Sans — weight 500; size 40px; line-height 46px; tracking -2.5px; Regular (90% role confidence, computed values)
- Body: IBM Plex Sans — weight 400; size 16px; line-height 20px; tracking normal; Regular (90% role confidence, computed values)
- Mono: IBM Plex Mono — weight 500; size 14px; line-height 16px; tracking 0.5px; uppercase (95% role confidence, computed values)

## Functional palette

- Accent — accent #F0FB29: color-1: computed rgb(240, 251, 41); AI role: Vibrant neon yellow (#F0FB29) used heavily for prominent sections, buttons, and highlighting key elements. (95% role confidence, computed values)
- Text — text #202020: color-3: computed rgb(32, 32, 32); AI role: Dark grey/black (#202020) is the primary color for most text, ensuring high contrast against light backgrounds. (95% role confidence, computed values)
- Border — border #202020: color-3: computed rgb(32, 32, 32); AI role: The same dark color (#202020) is frequently used for structural borders and lines throughout the design. (90% role confidence, computed values)
- Canvas — canvas #F5F5F5: color-2: computed rgb(245, 245, 245); AI role: Light grey (#F5F5F5) serves as the base background for many sections, creating a neutral backdrop. (85% 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": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "30px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "h4",
        "text": "2x fasterhardware",
        "top": 1019,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "2x faster",
        "top": 1019,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "4x fastercache downloads",
        "top": 1019,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h6",
        "text": "Spot failing and slow jobs",
        "top": 2418,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Debug flaky tests and bugs",
        "top": 2418,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Fix failing tests on your PRs",
        "top": 2418,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "36px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h4",
        "text": "GitHub Actions, but actually observable",
        "top": 2145,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Blacksmith cuts the time it takes to merge code in half",
        "top": 4235,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Deploying with Blacksmith versus the rest",
        "top": 5224,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "64px",
    "lineHeight": "72px",
    "letterSpacing": "-4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "90M+",
        "top": 7120,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "200K+",
        "top": 7120,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "10000+",
        "top": 7547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "40px",
    "lineHeight": "46px",
    "letterSpacing": "-2.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "The fastest way to run your GitHub Actions",
        "top": 275,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Start with 3,000 free minutes per month or book a live demo with our engineers",
        "top": 8002,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 55,
    "contexts": [
      {
        "tag": "div",
        "text": "Announcing our Series C led by Sequoia at a $1B valuation. Read more",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Read more",
        "top": 15,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Try for free",
        "top": 575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "10000+",
        "top": 2940,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Organizations TRUST US",
        "top": 2940,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "90M+",
        "top": 2940,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "Trusted by 10000+ world-class teams",
        "top": 751,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "We run your GitHub Actions on bare metal gaming CPUs with the highest single-core performance.",
        "top": 1065,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "We co-locate your cache artifacts in the same data center where your jobs are running.",
        "top": 1065,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "We fill the gap GitHub left: quickly seeing what's happening in your CI pipeline when something goes",
        "top": 2249,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Nobody wants to review a PR that's still waiting for builds and tests to pass.",
        "top": 4339,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Our product comes with batteries included and costs less than GitHub, and far less than what self-ho",
        "top": 5328,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "100M",
        "top": 4754,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "180M",
        "top": 4754,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "$0.44",
        "top": 4818,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "No credit card required.",
        "top": 639,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "© 2026 Blacksmith Software Inc",
        "top": 8904,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "2026",
        "top": 8903,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "strong",
        "text": "■",
        "top": 4482,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "■",
        "top": 4633,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "■",
        "top": 4784,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": null,
    "fontStack": "monospace",
    "weight": "500",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "- runs-on: ubuntu-latest",
        "top": 427,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "+ runs-on: blacksmith-4vcpu-ubuntu-2404",
        "top": 456,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "A dead simple, drop-in replacement that costs 60% less than GitHub runners:",
        "top": 399,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "█",
        "top": 455,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Select your tech and compare Blacksmith.",
        "top": 4620,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "CONTACT OUR TEAM",
        "top": 543,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F0FB29",
    "alpha": 1,
    "cssValue": "rgb(240, 251, 41)",
    "count": 35,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 47,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Try for free",
        "top": 575,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "CONTACT OUR TEAM",
        "top": 543,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 10,
    "contexts": [
      {
        "tag": "body",
        "text": "Announcing our Series C led by Sequoia at a $1B valuation. Read moreMENUClosePricingCustomersResourc",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Spot failing and slow jobsYou’ll be able to spot misconfigurations and fix performance regressions.",
        "top": 2385,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "■ Read storyAshby slashes GitHub Actions costs by 75% and doubles deployment frequency",
        "top": 3073,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#202020",
    "alpha": 1,
    "cssValue": "rgb(32, 32, 32)",
    "count": 279,
    "contexts": [
      {
        "tag": "div",
        "text": "Announcing our Series C led by Sequoia at a $1B valuation. Read more",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Read more",
        "top": 15,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "The fastest way to run your GitHub Actions",
        "top": 275,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1202,
        "property": "background"
      },
      {
        "tag": "img",
        "text": "",
        "top": 2595,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#AEE3FD",
    "alpha": 1,
    "cssValue": "rgb(174, 227, 253)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Announcing our Series C led by Sequoia at a $1B valuation. Read more",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "strong",
        "text": "2x faster",
        "top": 1019,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#333333",
    "alpha": 1,
    "cssValue": "rgb(51, 51, 51)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Select your tech and compare Blacksmith.",
        "top": 4620,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 8606,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#767676",
    "alpha": 1,
    "cssValue": "rgb(118, 118, 118)",
    "count": 4,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 8606,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, with tighter, uniform padding inside grid-based components.
- Corner style: Predominantly sharp, square corners on major layout blocks and tables, reinforcing the structured, brutalist feel.
- Radius: Rounding is reserved for specific interactive elements like buttons (pill-shaped) and specific UI abstractions (like the 'Powered by Blacksmith' badge).
- Borders: Extensive use of thin (1px), solid, dark borders to delineate grid structures, sections, and form elements.
- Buttons: Pill-shaped buttons; primary buttons are solid dark fills, while secondary are outlined.
- Content width: Content is generally constrained within a centered column, though specific elements (like the marquee or full-width color blocks) span the entire viewport.
- Density: The overall density is low, leaning towards minimalism, allowing the typography and high-contrast elements to stand out.
- Evidence: Visual inspection of the crops reveals the consistent use of borders to define layout (architectural grid), pill buttons (TRY FOR FREE), and distinct background color shifts to mark new sections.

## Sections

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

1. **Hero — GitHub Actions Runner Hero** (Home)
   AI suggestion (98% confidence): Complete high-impact hero with oversized branding, clear value proposition, code comparison, dual CTAs, trust statement, and customer-logo row.
   Capture: 1440×873px; page bounds 48–921px of 9016px; source section ID: `995d061a-9de6-4a1c-89f7-eb05dc9b9b3e`; image: https://media.designdetails.io/library/932a78238282ae82e26ed21e6a62f1f126a9b69c35121c32a90822fb304e8d36/995d061a-9de6-4a1c-89f7-eb05dc9b9b3e.webp
   SECTION.md v3.2: `995d061a-9de6-4a1c-89f7-eb05dc9b9b3e` (deterministic evidence; editorial review pending)
2. **Product Demo — Performance Benefits Product Demo** (Home)
   AI suggestion (94% confidence): Self-contained demo section pairing three quantified performance benefits with a large, distinctive video player.
   Capture: 1440×888px; page bounds 1002–1890px of 9016px; source section ID: `9a2f09aa-46e5-4d2e-9654-b748c29adef1`; image: https://media.designdetails.io/library/41a83560d7515ba9d645f3c5053401b5db084114371e4518d6d8442a423412f1/9a2f09aa-46e5-4d2e-9654-b748c29adef1.webp
   SECTION.md v3.2: `9a2f09aa-46e5-4d2e-9654-b748c29adef1` (deterministic evidence; editorial review pending)
3. **Testimonials — Customer Success Stories** (Home)
   AI suggestion (97% confidence): Complete bordered customer-story grid featuring a video testimonial, recognizable customer names, outcome-focused case-study links, a founder quote, and a concluding customer CTA.
   Capture: 1440×879px; page bounds 3074–3953px of 9016px; source section ID: `6da6315c-2570-44e7-a232-71261629be63`; image: https://media.designdetails.io/library/37e60ea45d18be2eeef447143b8b0850878d47bb0eb0c7c18ff4b75d668b3ef8/6da6315c-2570-44e7-a232-71261629be63.webp
   SECTION.md v3.2: `6da6315c-2570-44e7-a232-71261629be63` (deterministic evidence; editorial review pending)
4. **Features — Faster CI Tool Benefits** (Home)
   AI suggestion (96% confidence): Complete feature section with a clear value proposition, three numbered benefits, documentation CTA, and a substantial interactive-style cost and performance comparison visual.
   Capture: 1440×819px; page bounds 4142–4961px of 9016px; source section ID: `381d1f24-fa54-491d-81a6-18b0420563c7`; image: https://media.designdetails.io/library/c402dca6395c89d8f52b93a4efa3805b9e7869fd3f298339ee1ff514c5d55bed/381d1f24-fa54-491d-81a6-18b0420563c7.webp
   SECTION.md v3.2: `381d1f24-fa54-491d-81a6-18b0420563c7` (deterministic evidence; editorial review pending)
5. **Comparison — Deploying with Blacksmith versus the rest** (Home)
   AI suggestion (96% confidence): Complete product comparison section with its own heading, supporting copy, documentation CTA, and structured performance and cost tables.
   Capture: 1440×1332px; page bounds 5221–6553px of 9016px; source section ID: `8c2f4f21-fdb1-4e00-b09f-9ab3d35661b6`; image: https://media.designdetails.io/library/9394503816556377ac9f6799b0d4ee2113bf09f3bcede544dd60742a14b7e6cb/8c2f4f21-fdb1-4e00-b09f-9ab3d35661b6.webp
   SECTION.md v3.2: `8c2f4f21-fdb1-4e00-b09f-9ab3d35661b6` (deterministic evidence; editorial review pending)
6. **Stats — Blacksmith by the numbers** (Home)
   AI suggestion (95% confidence): Self-contained credibility section combining prominent brand typography, investor/backer context, a team CTA, and three large operational metrics in a distinctive grid.
   Capture: 1440×1131px; page bounds 6694–7825px of 9016px; source section ID: `a9d733b0-3c0b-483f-98a8-3e1f506da804`; image: https://media.designdetails.io/library/90b8a80f742347e09f8cfc29b92702f7941d4be831240b510f386923a5cbc87d/a9d733b0-3c0b-483f-98a8-3e1f506da804.webp
   SECTION.md v3.2: `a9d733b0-3c0b-483f-98a8-3e1f506da804` (deterministic evidence; editorial review pending)
7. **CTA — Free Minutes or Live Demo CTA** (Home)
   AI suggestion (98% confidence): Complete high-contrast conversion section with a clear offer and two distinct action buttons.
   Capture: 1440×435px; page bounds 7906–8341px of 9016px; source section ID: `9e22d8ef-179b-43e8-af32-eb3bc59f2ddd`; image: https://media.designdetails.io/library/72fd198f56f1d2f6b86cc7f1130ddd2364eba4d0fdc71bbb7de99b7eb0a413c4/9e22d8ef-179b-43e8-af32-eb3bc59f2ddd.webp
   SECTION.md v3.2: `9e22d8ef-179b-43e8-af32-eb3bc59f2ddd` (deterministic evidence; editorial review pending)
8. **Footer — Newsletter and Link Footer** (Home)
   AI suggestion (99% confidence): Complete substantial footer combining newsletter signup, organized navigation columns, social links, and copyright information.
   Capture: 1440×674px; page bounds 8342–9016px of 9016px; source section ID: `336a2b6a-d8a4-464d-91fa-967097b14510`; image: https://media.designdetails.io/library/a990a08f0ed00b5d33833153a841767684314e7cfaef25bd9ca8ee7bd8b9629c/336a2b6a-d8a4-464d-91fa-967097b14510.webp
   SECTION.md v3.2: `336a2b6a-d8a4-464d-91fa-967097b14510` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/d4e0d3a5d0cf39b1b92b2f29009774e33e591ed01a6b52a27092438b88209387/desktop_full-2e02495c-2026-10-23T18-15-09-016Z.webp
- Mobile screenshot: https://media.designdetails.io/library/0e7b32205110b91e51b01218498e31a6b6301da9777814ec0eda67c72a70bdb0/mobile_full-2e02495c-2026-10-23T18-15-58-196Z.webp
- Open Graph image: https://media.designdetails.io/library/ce83c8941520d7bf26fb64fd7f8c52be1ab9e22e7839d32c81582b8cb280c8b9/og_image-2e02495c-2026-10-23T18-15-17-774Z.webp
- Full-page video: https://media.designdetails.io/library/cf299610ee450a3fef0fcd69fe4797a85e2700a908fce3c2b479ea70ccf3f149/motion-1792782207232.mp4
- Video poster: https://media.designdetails.io/library/619c9e5f2d90451c198f48b1ed15f13a91334d797b052a88f8a8ad0ff1e186ac/motion-poster-1792782207232.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
- Logo Strip
- Feature Collection
- Product UI
- Testimonial Card
- Comparison Table
- Stat Block
- Primary Button
- Outline Button
- Footer
- Grid Framed Content Layout
- Marquee Ticker

## Quality rubric

Overall: 54.9/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Blacksmith executes a cohesive, grid-driven developer-tool identity with disciplined typography and a confident high-contrast palette, successfully tying content (stats, comparisons, testimonials) into its structural system. However, its motion is limited to conventional scroll-reveal effects and its overall brutalist-neon aesthetic closely tracks a now-common pattern in developer/infra marketing sites, keeping originality and motion from elevating the work beyond a solid, competent execution.

- Typography (15%): 62 — A disciplined two-family system (IBM Plex Sans for display/headings, IBM Plex Mono for labels/buttons/UI) is applied consistently across the full page, with a clear size/tracking hierarchy (64px/-4px down to 12px/0.3px) that reinforces the technical positioning. Execution is competent and legible, but the pairing and tight negative tracking on large numerals is a now-common dev-tool convention rather than a distinctive typographic idea.
- Color (10%): 59 — A tightly constrained, high-contrast palette (neon yellow #F0FB29, near-black #202020, light grey #F5F5F5, with a pale blue #AEE3FD accent band) gives the brand a recognizable identity and is applied with clear role consistency (yellow=CTA/accent, dark=text/border, grey=canvas). Over a ~9000px page this single-accent approach becomes repetitive without secondary accent development.
- Layout (20%): 64 — A consistent architectural grid with hairline borders organizes nearly every section—feature triptychs, console UI panels, testimonial quadrants, comparison tables, and stat blocks all share the same bordered-cell logic, producing real structural coherence across the page rather than a single polished hero.
- Motion (20%): 54 — Motion consists of standard scroll-triggered reveals (video scale-in, marquee ticker, bar-chart width fill, stat block slide-in) that are reasonably deployed but are conventional patterns common to many SaaS marketing sites, observed only briefly and without evidence of distinctive choreography, sequencing, or restraint beyond default reveal-on-scroll behavior.
- Originality (25%): 38 — The neon-yellow-on-black, monospace-labeled, hairline-bordered 'technical grid' aesthetic is now a widely adopted visual shorthand among developer-tool and infra startups; while coherently executed here, none of its individual moves (pixel wordmark, marquee stat ticker, bordered comparison tables, mono uppercase labels) are hard to substitute or unusual within this genre.
- Content (10%): 66 — Content (stats, customer logos, comparison data, testimonials) is tightly integrated into the same bordered-grid/mono-label visual system used throughout, so proof points and narrative claims feel native to the design rather than bolted on.

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

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

## Verification checklist

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

## Curator notes

A pixel-font wordmark and acid yellow banner give a developer-tool page some personality, while the diff-style code snippet shows the product change in the exact syntax engineers already read. Black and white tables and a dotted grid keep dense comparison data and stats easy to scan as the page moves from proof points to customer logos to pricing.

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