# Ardor — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://ardor.cloud/
Captured: 2026-10-13
CSS measured: 2026-10-13T02:23:18.705Z at 1440×1000 — https://ardor.cloud/
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

Ardor's website employs a distinct blend of minimal, typographic, and retro computing styles. The primary canvas is a soft off-white (`color-4`) overlaid with a continuous, fluid, pastel-colored gradient mesh in the background, contrasting sharply with predominantly black text (`color-1`) and UI elements. Typography relies heavily on 'Roboto Flex' for clean readability in varied weights and sizes, paired notably with 'Doto', a pixelated font used for large statements and the prominent typewriter animations, which, along with the swarm particle effects, defines the retro-technical aesthetic. Elements like the floating input fields and rounded pill-shaped navigation links create a soft, modern

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: AI
- Styles: minimal, typographic, retro, gradient, neo-brutalist, technical
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Doto — weight 900; size 32px; line-height 32px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Roboto Flex — weight 400; size 19px; line-height 22.8px; tracking normal; Regular (85% role confidence, computed values)
- Body: Roboto Flex — weight 400; size 13px; line-height 15.6px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F2F3F1: color-4: computed rgb(242, 243, 241); AI role: The primary background color of the body, a very light off-white (#F2F3F1). (95% role confidence, computed values)
- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000), used extensively for primary typography, icons, and solid button backgrounds. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-6: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF), used for the background of individual cards (like pricing tiers and feature cards) to lift them off the canvas. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "15.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 151,
    "contexts": [
      {
        "tag": "span",
        "text": "Audit a spreadsheet or dataset",
        "top": 1019,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Wire it into your stack. Tools, team, infrastructure. Then let it run.",
        "top": 458,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Audit a spreadsheet or dataset",
        "top": 525,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "19px",
    "lineHeight": "22.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "What people build with Ardor",
        "top": 1000,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "One prompt. A real app — not an MVP, not a prototype.",
        "top": 1887,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Made in Ardor.",
        "top": 2741,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "17.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "* Worked examples, not a quote — your bill depends on what your app does.",
        "top": 6738,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "*",
        "top": 6739,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "* Worked examples, not a quote — your bill depends on what your app does.",
        "top": 15418,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "11.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 50,
    "contexts": [
      {
        "tag": "span",
        "text": "Pricing",
        "top": 30,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pricing",
        "top": 31,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Blog",
        "top": 30,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\"",
    "weight": "400",
    "size": "12.4px",
    "lineHeight": "18.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "text",
        "text": "Two marketplaces",
        "top": 2902,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "27 reports",
        "top": 2926,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Database",
        "top": 3049,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\"",
    "weight": "400",
    "size": "17.9px",
    "lineHeight": "26.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "text",
        "text": "Spreadsheet",
        "top": 1369,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "App",
        "top": 1558,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Projects",
        "top": 1362,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "7px",
    "lineHeight": "10.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "anna@northwind.co",
        "top": 2080,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Active now",
        "top": 2073,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "9 dialogs",
        "top": 2080,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "7.5px",
    "lineHeight": "11.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Work",
        "top": 2021,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Contact",
        "top": 2021,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "About",
        "top": 2021,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Doto",
    "fontStack": "Doto, \"Doto Fallback\"",
    "weight": "900",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "One agent. Every app. Any task.",
        "top": 392,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "One age.+˚ xx˚xx +x+. .˚+ xx.+.",
        "top": 393,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Still doing it by hand? Describe it once and let it run.",
        "top": 7040,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Put my work on one page",
        "top": 2116,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "It's live. Ask for anything else.",
        "top": 2156,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Add an about section",
        "top": 2196,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "8.5px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Anna Reyes",
        "top": 2064,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "(You)",
        "top": 2064,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tom Meyer",
        "top": 2125,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "9px",
    "lineHeight": "13.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Anna Reyes",
        "top": 2019,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Northwind",
        "top": 2166,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Field Notes",
        "top": 2166,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "8px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "76.7m tokens",
        "top": 2063,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "34.2m tokens",
        "top": 2124,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "60.6m tokens",
        "top": 2187,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "Ask for approval",
        "top": 572,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GPT-5.6 Terra",
        "top": 584,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Ask for approval",
        "top": 9252,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Ask for approval",
        "top": 2176,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GPT-6 Sol",
        "top": 2176,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ask for approval",
        "top": 10857,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "7.5px",
    "lineHeight": "11.3px",
    "letterSpacing": "1.1px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Selected work",
        "top": 2069,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "About",
        "top": 2222,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Selected work",
        "top": 10750,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Roboto Flex",
    "fontStack": "\"Roboto Flex\", \"Roboto Flex Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Create a personal OS for my job",
        "top": 2126,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Create a personal OS for my job",
        "top": 10806,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 2471,
    "contexts": [
      {
        "tag": "span",
        "text": "Pricing",
        "top": 30,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start FreeStart FreeStart Free",
        "top": 25,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 953,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 0.25098039215686274,
    "cssValue": "oklab(0 0 0 / 0.25)",
    "count": 600,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 1305,
        "property": "svg-stroke"
      },
      {
        "tag": "line",
        "text": "",
        "top": 1305,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 0.7490196078431373,
    "cssValue": "rgba(255, 255, 255, 0.75)",
    "count": 35,
    "contexts": [
      {
        "tag": "div",
        "text": "Audit a spreadsheet or dataset",
        "top": 1000,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Limited-time promo: GPT-6 Sol and Astra available on every plan, Free included — plus 10× usage.",
        "top": 5606,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F2F3F1",
    "alpha": 1,
    "cssValue": "rgb(242, 243, 241)",
    "count": 2,
    "contexts": [
      {
        "tag": "body",
        "text": "PricingPricingPricingBlogBlogBlogDocsDocsDocsDownloadDownloadDownloadAboutAboutAboutContactContactCo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "canvas",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0 0 0 / 0.06)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "3",
        "top": 2022,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Two marketplaces27 reportsDatabaseBoxes and labelsReview digestVPN1,000+ serversArdorTools$360K a ye",
        "top": 2819,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Read the storyRead the storyRead the story",
        "top": 3460,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 305,
    "contexts": [
      {
        "tag": "span",
        "text": "Start Free",
        "top": 30,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 33,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1024,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 0.6196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.62)",
    "count": 97,
    "contexts": [
      {
        "tag": "span",
        "text": "Audit a spreadsheet or dataset",
        "top": 1019,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Wire it into your stack. Tools, team, infrastructure. Then let it run.",
        "top": 458,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 580,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "oklab(0 0 0 / 0.05)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2092,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0 0 0 / 0.1)",
    "count": 74,
    "contexts": [
      {
        "tag": "div",
        "text": "Create a personal OS for my job",
        "top": 2111,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "It's live. Ask for anything else.",
        "top": 2146,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 6415,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.5215686274509804,
    "cssValue": "rgba(0, 0, 0, 0.52)",
    "count": 48,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 580,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Ask for a change",
        "top": 2282,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0 0 0 / 0.15)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2243,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D3D3D3",
    "alpha": 1,
    "cssValue": "rgb(211, 211, 211)",
    "count": 34,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 1655,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous use of vertical whitespace between major sections to isolate content and allow the background gradient to show. Within sections like pricing or feature cards, padding is consistent and moderate.
- Corner style: Predominantly rounded. Feature cards, pricing cards, and terminal mockups have large, smooth border radii. Buttons and the main input field are fully rounded 'pill' shapes.
- Radius: Calculated radii appear substantial on larger containers (e.g., the terminal cards) and fully circular on buttons and input fields.
- Borders: Most elements lack visible solid borders, relying instead on subtle backgrounds or shadows, except for very light, subtle borders on some UI elements (like color-9, a 10% black).
- Buttons: Primary actions are solid black pill shapes with white text. Secondary toggles/tabs are unstyled text that gains a black pill background when active.
- Content width: Content is generally centered in a constrained column, with some elements like the terminal carousel breaking out slightly wider, but keeping a generous margin from the viewport edges.
- Density: Low density. The layout is airy, relying on negative space and large typography rather than packing information tightly.
- Evidence: The reliance on 'color-4' for the canvas and 'color-6' for cards creates a soft structure. Pill-shaped buttons are evident in the nav ('Start Free') and tabs. The generous spacing is visible in the gaps between 'Hero', 'What people build', and 'Made in Ardor' sections.

## Sections

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

1. **Footer — Ardor Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Ardor Footer”.
   Capture: 1440×356px; page bounds 8324–8680px of 13889px; source section ID: `22372d9f-206f-4733-ac2f-4811f93b8f6e`; image: https://media.designdetails.io/library/767e037a861853d8877afe0b385da5b229cd40622f63b0dced09de8d2405e3bc/section_crop-22372d9f-2026-10-13T02-23-31-003Z.webp
   SECTION.md v3.2: `22372d9f-206f-4733-ac2f-4811f93b8f6e` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f8ed569a14468246d839d5658b2ae5fd0099c357986c4187f2fd0f9ccfab051d/desktop_full-e334f7e3-2026-10-13T02-23-18-723Z.webp
- Mobile screenshot: https://media.designdetails.io/library/d3f0ed73da7f6e6c5c2105c8b0847b672e6bebcc09d2c90fbdba2919b6002e8c/mobile_full-e334f7e3-2026-10-13T02-23-50-585Z.webp
- Open Graph image: https://media.designdetails.io/library/e69097e70a0e910df72f2612fbcbd0199e2ece45c57a636916af8042134ca2de/og_image-e334f7e3-2026-10-13T02-23-26-589Z.webp
- Full-page video: https://media.designdetails.io/library/0021abd60e64d98d8bfc791d16a57f5ce1eca829d622fdc84b68035b3e3f320c/motion-1791859267940.mp4
- Video poster: https://media.designdetails.io/library/7246af08194dbd24af3be8850a6cb1af8438f18983bebba45f72dd3fe0a3458d/motion-poster-1791859267940.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
- Input Field
- Feature Card
- Tabs
- Carousel
- Testimonial Card
- Pricing Table
- Comparison Table
- Logo Strip
- Primary Button
- Footer
- Floating Action Prompt
- Terminal Emulation Card
- Particle Typography Swarm

## Quality rubric

Overall: 57.75/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Ardor is a polished, well-organized AI-SaaS landing page with a pleasant retro-technical motion system (typewriter reveal, morphing gradient, particle-formed text) and a clean typographic contrast between a pixel display face and a workhorse grotesk. Its most distinctive ideas — the CRT terminal carousel card and the scroll-triggered particle swarm — are confined to isolated moments rather than running through the whole system, while the underlying color palette and page structure follow now-common conventions for this product category. The result is competent and coherent, but not yet a whole-site system with enough hard-to-substitute, distributed originality to justify a higher tier.

- Typography (15%): 58 — The system pairs a pixelated display face (Doto, 900wt, 32px) used only for hero/footer statements with Roboto Flex for everything else, giving a clear two-register contrast between 'technical statement' and 'body copy.' Execution is clean and legible, but the scale is thin (basically 32px display / 19px section heading / 13px body) and the smaller contexts show a fragmented set of ad-hoc sizes (7px–12.4px) inside mockup illustrations, suggesting the scale was built case-by-case rather than as a disciplined system.
- Color (10%): 54 — The working palette is almost purely monochrome — black text/buttons (#000000), white cards (#FFFFFF), off-white canvas (#F2F3F1) — with a pastel gradient-mesh animation as the only chromatic element, and it functions purely as decorative background rather than being integrated into any state, hierarchy, or accent system. This is a safe, competent restraint but not a developed color system, and the mesh-gradient-over-monochrome combination is now a common convention in AI-product marketing.
- Layout (20%): 61 — The page follows a clean, generously spaced, single-column-centered SaaS template — nav, hero, feature cards, tabs, carousel, testimonial, pricing grid, comparison table, logo strip, footer — executed with consistent card radii, padding, and clear section separation via whitespace. It's well-proportioned and legible end to end, but structurally conventional; no section reinvents the expected marketing-page grammar.
- Motion (20%): 64 — Motion is more developed than a single effect: a typewriter hero headline, a continuously morphing gradient background, and a scroll-triggered particle swarm that both forms shapes and assembles into changing legible phrases recur across multiple positions in the page (hero, mid-page, footer, repeated on re-scroll), indicating a built system rather than an isolated flourish. However, these are now common idioms in AI-product marketing (typewriter reveal, particle-text formation, gradient blob background), and no evidence of easing quality, frame rate, or interaction responsiveness is available to support claims of exceptional craft.
- Originality (25%): 51 — The retro-CRT terminal carousel card and the particle swarm that spells out changing phrases are genuinely distinctive, hard-to-substitute ideas. But the site's overall visual identity — pastel gradient-mesh background behind a stark black/white minimal UI, pill-shaped buttons, typewriter-revealed headline — closely matches a now-widespread genre convention in AI-agent/SaaS landing pages circa 2024–2025, so the novelty is concentrated in two moments rather than distributed across the whole system (color, layout, and component design remain largely template-standard).
- Content (10%): 59 — Content is specific and well mapped to visual devices: concrete dollar figures and percentage-of-month-busy sliders in the cost comparison, named pricing tiers with real numbers, isometric mockups that directly correspond to named use cases (Portfolio, Life OS, Insights), and a named testimonial with title/company. This is a solid, non-generic integration of product substance into the visual system, though the mockup UI details (chat threads, tiny labels) are decorative rather than deeply informative.

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 mono headline and chat input sit on soft pink blobs, making an AI agent feel approachable rather than corporate. Isometric line icons for Projects, Calendar and Threads give abstract automation a tangible shape, while a dark terminal panel breaks up the pale page and signals real working output.

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