# Kylon — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://kylon.io/
Captured: 2026-10-14
CSS measured: 2026-10-14T16:04:30.737Z at 1440×1000 — https://kylon.io/
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

Kylon is a modern, slightly playful yet professional landing page for an AI company tool. The design utilizes a warm, creamy palette with soft pastel accents and distinctively rounded components with subtle scallop-edged transitions between some sections. Typography mixes a custom or high-quality sans-serif (GC Akihiko) for headings with Geist for body copy and UI elements, reflecting a product-focused tech aesthetic.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: AI, Software, Agency
- Styles: soft, corporate, minimal, illustrative, warm-tech, scalloped-edges
- Platform: Webflow
- Technology: Next.js

## Typography

- Display: GC Akihiko — weight 400; size 80.6px; line-height 85.5px; tracking -2.4px; Regular (95% role confidence, computed values)
- Heading: GC Akihiko — weight 500; size 66.2px; line-height 66.2px; tracking -1.3px; Regular (95% role confidence, computed values)
- Body: Geist — weight 400; size 15px; line-height 24px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #1B1712: color-2: computed rgb(27, 23, 18); AI role: Dark brown/black (#1B1712) used for primary text and headings. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for UI component backgrounds (cards, mockups). (95% role confidence, computed values)
- Canvas — canvas #F5EFE4: color-3: computed rgb(245, 239, 228); AI role: Warm cream (#F5EFE4) used as the primary background color for the page. (90% role confidence, computed values)
- Primary Action — primary action #1B1712: color-2: computed rgb(27, 23, 18); AI role: Dark color used for primary buttons like the 'Download' button. (85% role confidence, computed values)
- Muted Text — muted text #564C42: color-6: computed rgb(86, 76, 66); AI role: Medium brown (#564C42) used for secondary text. (80% role confidence, computed values)
- Accent — accent #EDC57E: color-16: computed rgb(237, 197, 126); AI role: Warm yellow/orange (#EDC57E) used for testimonial card backgrounds. (70% 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": "GC Akihiko",
    "fontStack": "\"GC Akihiko\", gcAkihiko, \"gcAkihiko Fallback\", \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", Meiryo, sans-serif",
    "weight": "500",
    "size": "66.2px",
    "lineHeight": "66.2px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "h2",
        "text": "From separate AI chatsto shared company work.",
        "top": 1702,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "to shared company work.",
        "top": 1768,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "See what teams arebuilding with Kylon.",
        "top": 2833,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "GC Akihiko",
    "fontStack": "\"GC Akihiko\", gcAkihiko, \"gcAkihiko Fallback\", \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", Meiryo, sans-serif",
    "weight": "500",
    "size": "49px",
    "lineHeight": "52.9px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h2",
        "text": "#ops gets an invoice tracker.",
        "top": 6054,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "#ops",
        "top": 6055,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "#hiring gets a hiring board.",
        "top": 6693,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h3",
        "text": "Product",
        "top": 10273,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Solutions",
        "top": 10273,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Partners",
        "top": 10273,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "GC Akihiko",
    "fontStack": "\"GC Akihiko\", gcAkihiko, \"gcAkihiko Fallback\", \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", Meiryo, sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Submit a count",
        "top": 8179,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Submit a count",
        "top": 8046,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "GC Akihiko",
    "fontStack": "\"GC Akihiko\", gcAkihiko, \"gcAkihiko Fallback\", \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", Meiryo, sans-serif",
    "weight": "400",
    "size": "80.6px",
    "lineHeight": "85.5px",
    "letterSpacing": "-2.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Your firstcompany harness.",
        "top": 618,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Records an agent built and keeps current. Changes here appear wherever this app is linked.",
        "top": 6230,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Records an agent built and keeps current. Changes here appear wherever this app is linked.",
        "top": 6093,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One card per person, moving through the stages. Changes here appear wherever this app is linked.",
        "top": 6887,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "One workspace where your team, AI agents, company knowledge and tools come together to get work done",
        "top": 9076,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Instead of working in separate AI chats, your team and agents share context and build on each other’",
        "top": 9265,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Grok Bot and Muse are personal agents. Kylon is built for a company. Your people and agents work in ",
        "top": 9334,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "b",
        "text": "team-plan-launch",
        "top": 4290,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One workspace, every kind of work.",
        "top": 5848,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Finance",
        "top": 6015,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Hi there,",
        "top": 4520,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Team plan is live. One shared workspace for your whole team, SSO on every seat, $20 per seat billed ",
        "top": 4544,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Best,",
        "top": 4588,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Built from the billing inbox.",
        "top": 6176,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Every applicant matched to the roles that fit.",
        "top": 6814,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Rebuilt from your deals every morning.",
        "top": 7453,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "People and agents work from the same context, so the next teammate can pick up where the work left o",
        "top": 1851,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Claude Code, Codex and Devin join your rooms next to your teammates and Kylon’s own agents. They sha",
        "top": 4155,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Connect your team’s accounts so agents can act on real work, with access you control.",
        "top": 5370,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12.5px",
    "lineHeight": "18.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Records an agent built and keeps current. Changes here appear wherever this app is linked.",
        "top": 1206,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Records an agent built and keeps current. Changes here appear wherever this app is linked.",
        "top": 990,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "17px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Bring any agent.Work as the whole team.",
        "top": 2197,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 128,
    "contexts": [
      {
        "tag": "span",
        "text": "Gmail",
        "top": 5446,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Slack",
        "top": 5446,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Notion",
        "top": 5446,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 72,
    "contexts": [
      {
        "tag": "span",
        "text": "Harbor & Pine",
        "top": 1234,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$4,200",
        "top": 1234,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sep 12",
        "top": 1234,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 48,
    "contexts": [
      {
        "tag": "button",
        "text": "Product",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Partners",
        "top": 12,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "small",
        "text": "Monday reminders are set for 9:00.",
        "top": 1037,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "You: Perfect, thank you!",
        "top": 1095,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "Clara: @Ryan can it send the Monday reminders too?",
        "top": 1196,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "9.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "small",
        "text": "Best fit: Ops lead",
        "top": 6923,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "Best fit: Support",
        "top": 6946,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "Best fit: Ops associate",
        "top": 6923,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "div",
        "text": "We keep chasing unpaid invoices by hand. Can we just see them in here?",
        "top": 894,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "On it. Building a tracker in this chat from the billing mailbox.",
        "top": 993,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Tracker is live. 14 open, 3 overdue by more than two weeks.",
        "top": 1060,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "9.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "b",
        "text": "Paid",
        "top": 1237,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Open",
        "top": 1255,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Overdue",
        "top": 1272,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "b",
        "text": "Mira",
        "top": 872,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Ryan",
        "top": 971,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Clara",
        "top": 1367,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "11.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "strong",
        "text": "Priya Nair",
        "top": 6916,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Marco Villa",
        "top": 6938,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Lucia Ferrer",
        "top": 6916,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "11px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "b",
        "text": "Invoice Tracker",
        "top": 1143,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Invoice Tracker",
        "top": 879,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Publish",
        "top": 876,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "10.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "button",
        "text": "New record",
        "top": 1343,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "New record",
        "top": 1382,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "New record",
        "top": 6339,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 923,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Ryan",
        "top": 1014,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Mira",
        "top": 1072,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "28px",
    "lineHeight": "33.6px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "strong",
        "text": "Invoice Tracker",
        "top": 1192,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Invoice Tracker",
        "top": 954,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Invoice Tracker",
        "top": 6218,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "small",
        "text": "4",
        "top": 930,
        "property": "font"
      },
      {
        "tag": "time",
        "text": "2m",
        "top": 1014,
        "property": "font"
      },
      {
        "tag": "time",
        "text": "1h",
        "top": 1072,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "small",
        "text": "App",
        "top": 1147,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "App",
        "top": 884,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "App",
        "top": 6183,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "@Ryan",
        "top": 1399,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "@Scout",
        "top": 3887,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "@Claude Code",
        "top": 3965,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "b",
        "text": "OpenClaw",
        "top": 2152,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Hermes",
        "top": 2152,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Claude Code",
        "top": 2452,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "22px",
    "lineHeight": "22px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "strong",
        "text": "42",
        "top": 7550,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "$486K",
        "top": 7550,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "11",
        "top": 7550,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "11px",
    "lineHeight": "22px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Any agent·One person",
        "top": 1949,
        "property": "font"
      },
      {
        "tag": "i",
        "text": "·",
        "top": 1949,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Any agent·Whole team",
        "top": 1949,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "10px",
    "lineHeight": "22px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "strong",
        "text": "New",
        "top": 6903,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Screen",
        "top": 6903,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Interview",
        "top": 6903,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "9 added this week",
        "top": 7560,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "up 12%",
        "top": 7560,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "4 over a week",
        "top": 7560,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "9.5px",
    "lineHeight": "22px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "small",
        "text": "Open deals",
        "top": 7542,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "Weighted",
        "top": 7542,
        "property": "font"
      },
      {
        "tag": "small",
        "text": "Waiting on us",
        "top": 7542,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "9px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "2",
        "top": 6903,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 6903,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1",
        "top": 6903,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Chat",
        "top": 876,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Invoice chasing",
        "top": 874,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Invoice chasing",
        "top": 6002,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "13px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "b",
        "text": "$84K",
        "top": 7636,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "$62K",
        "top": 7657,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "$48K",
        "top": 7677,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "Geist",
    "fontStack": "Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "17px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "summary",
        "text": "What is Kylon, and what is a company harness?",
        "top": 9008,
        "property": "font"
      },
      {
        "tag": "summary",
        "text": "How is it different from ChatGPT or Claude?",
        "top": 9197,
        "property": "font"
      },
      {
        "tag": "summary",
        "text": "How is Kylon different from Grok Bot or Muse?",
        "top": 9266,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Fallback\", Geist, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "em",
        "text": "invoices.kylon.app",
        "top": 879,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "invoices.kylon.app",
        "top": 6006,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "talent.kylon.app",
        "top": 6644,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 197,
    "contexts": [
      {
        "tag": "body",
        "text": "(function(){try{var u=navigator.userAgent,p=\"desktop\";if(/android/i.test(u))p=\"android\";else if(/iph",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1B1712",
    "alpha": 1,
    "cssValue": "rgb(27, 23, 18)",
    "count": 304,
    "contexts": [
      {
        "tag": "button",
        "text": "Product",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 25,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 30,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F5EFE4",
    "alpha": 1,
    "cssValue": "rgb(245, 239, 228)",
    "count": 2,
    "contexts": [
      {
        "tag": "main",
        "text": "ProductOverviewThe company harness, above and below the surface.WorkspaceRooms, threads and files fo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Your firstcompany harness.Kylon, where humans and AI agents workbetter together.Book a demoDownload ",
        "top": 541,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F6F1E8",
    "alpha": 1,
    "cssValue": "rgb(246, 241, 232)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Invoice chasingops·Started by Mira at 9:12 AMMiraWe keep chasing unpaid invoices by hand. Can we jus",
        "top": 5991,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F0FCE6",
    "alpha": 1,
    "cssValue": "rgb(240, 252, 230)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Invoice TrackerAppOne app, many contextsLink it to room folders or individual chats.6 recordsRecords",
        "top": 1132,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Invoice TrackerAppinvoices.kylon.appPublishOne app, many contextsLink it to room folders or individu",
        "top": 869,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#564C42",
    "alpha": 1,
    "cssValue": "rgb(86, 76, 66)",
    "count": 455,
    "contexts": [
      {
        "tag": "span",
        "text": "Kylon, where humans and AI agents work",
        "top": 597,
        "property": "text"
      },
      {
        "tag": "b",
        "text": "better together.",
        "top": 624,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 693,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#E3E4D0",
    "alpha": 1,
    "cssValue": "rgb(227, 228, 208)",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 683,
        "property": "background"
      },
      {
        "tag": "b",
        "text": "Review",
        "top": 1307,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "The agents you already use.Working as one team.Claude Code, Codex and Devin join your rooms next to ",
        "top": 3906,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#8FA9C4",
    "alpha": 1,
    "cssValue": "rgb(143, 169, 196)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F3F3F1",
    "alpha": 1,
    "cssValue": "rgb(243, 243, 241)",
    "count": 40,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1009,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Invoice chasingnowClara: @Ryan can it send the Monday reminders too?",
        "top": 1163,
        "property": "background"
      },
      {
        "tag": "form",
        "text": "",
        "top": 1471,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EED6C2",
    "alpha": 1,
    "cssValue": "rgb(238, 214, 194)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Build your company harness.Download for macOSGet the appGet the appStart freeStart free on the webOp",
        "top": 9681,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FCF9F3",
    "alpha": 1,
    "cssValue": "rgb(252, 249, 243)",
    "count": 6,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 4223,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "2 people, 5 agents onKylonClaude CodeCodexDevin",
        "top": 4329,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4030,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#462E17",
    "alpha": 0.043137254901960784,
    "cssValue": "rgba(58, 37, 25, 0.043)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Any agent·One personOpenClawHermes",
        "top": 1931,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#E4A485",
    "alpha": 1,
    "cssValue": "rgb(228, 164, 133)",
    "count": 2,
    "contexts": [
      {
        "tag": "figure",
        "text": "“Kylon streamlined our fund’s middle and back office. The agents handle the routine, we keep the jud",
        "top": 3470,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#DFE5E3",
    "alpha": 1,
    "cssValue": "rgb(223, 229, 227)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 683,
        "property": "background"
      },
      {
        "tag": "b",
        "text": "Paid",
        "top": 1237,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Any agent·Whole teamBring any agent.Work as the whole team.",
        "top": 1931,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F4E1BB",
    "alpha": 1,
    "cssValue": "rgb(244, 225, 187)",
    "count": 1,
    "contexts": [
      {
        "tag": "figure",
        "text": "“From nothing that I had before, now I have more than 200,000 impressions on my LinkedIn so far. Aga",
        "top": 3021,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#EDC57E",
    "alpha": 1,
    "cssValue": "rgb(237, 197, 126)",
    "count": 1,
    "contexts": [
      {
        "tag": "figure",
        "text": "“We built a marketing dashboard in minutes with Kylon. What used to take weeks of engineering time n",
        "top": 3021,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#9A8B7A",
    "alpha": 1,
    "cssValue": "rgb(154, 139, 122)",
    "count": 13,
    "contexts": [
      {
        "tag": "em",
        "text": "to shared company work.",
        "top": 1768,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Any agent·One person",
        "top": 1949,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "·",
        "top": 1949,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FAFBF8",
    "alpha": 1,
    "cssValue": "rgb(250, 251, 248)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "CustomerAmountDueStatus",
        "top": 1222,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#6F6457",
    "alpha": 1,
    "cssValue": "rgb(111, 100, 87)",
    "count": 107,
    "contexts": [
      {
        "tag": "span",
        "text": "Recent",
        "top": 923,
        "property": "text"
      },
      {
        "tag": "small",
        "text": "4",
        "top": 930,
        "property": "text"
      },
      {
        "tag": "time",
        "text": "2m",
        "top": 1014,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#4C5F63",
    "alpha": 1,
    "cssValue": "rgb(76, 95, 99)",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "Any agent·Whole team",
        "top": 1949,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "·",
        "top": 1949,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Bring any agent.Work as the whole team.",
        "top": 2197,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#3C2612",
    "alpha": 0.8196078431372549,
    "cssValue": "rgba(60, 38, 18, 0.82)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "GW Travel",
        "top": 3392,
        "property": "text"
      },
      {
        "tag": "figcaption",
        "text": "Bing WuCo-Founder and CEO, Retell AI (YC W24)",
        "top": 3290,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#A6835F",
    "alpha": 1,
    "cssValue": "rgb(166, 131, 95)",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "building with Kylon.",
        "top": 2898,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#000000",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(0, 0, 0, 0.12)",
    "count": 192,
    "contexts": [
      {
        "tag": "div",
        "text": "CustomerAmountDueStatusHarbor & Pine$4,200Sep 12PaidJuniper Hall$1,850Sep 18OpenBluegate Travel$9,40",
        "top": 1221,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "New record",
        "top": 1343,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 0.09019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.09)",
    "count": 80,
    "contexts": [
      {
        "tag": "div",
        "text": "One app, many contextsLink it to room folders or individual chats.6 recordsRecords an agent built an",
        "top": 1174,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 8194,
        "property": "border"
      },
      {
        "tag": "select",
        "text": "ChooseABCD",
        "top": 8243,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#F5F4F1",
    "alpha": 1,
    "cssValue": "rgb(245, 244, 241)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Team plan is hereSent",
        "top": 4420,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#4F5433",
    "alpha": 1,
    "cssValue": "rgb(79, 84, 51)",
    "count": 222,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1299,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1306,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 1149,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 4217,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#4F5332",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(79, 84, 51, 0.28)",
    "count": 40,
    "contexts": [
      {
        "tag": "div",
        "text": "Invoice TrackerAppOne app, many contextsLink it to room folders or individual chats.6 recordsRecords",
        "top": 1132,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#F4ECDD",
    "alpha": 1,
    "cssValue": "rgb(244, 236, 221)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "pricing-research.md3 pricing pages",
        "top": 4024,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#6E7447",
    "alpha": 1,
    "cssValue": "rgb(110, 116, 71)",
    "count": 40,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 1017,
        "property": "background"
      },
      {
        "tag": "b",
        "text": "1",
        "top": 1037,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 885,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#382519",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(58, 37, 25, 0.16)",
    "count": 24,
    "contexts": [
      {
        "tag": "form",
        "text": "",
        "top": 1471,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#3E2717",
    "alpha": 0.12941176470588237,
    "cssValue": "rgba(58, 37, 25, 0.13)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "One workspace, every kind of work.",
        "top": 5848,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Security &compliance.SOC 2 Type II audit in progressISO/IEC 27001:2022 in progressGDPR compliant",
        "top": 8586,
        "property": "border"
      },
      {
        "tag": "li",
        "text": "ISO/IEC 27001:2022 in progress",
        "top": 8683,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#3A4A4E",
    "alpha": 1,
    "cssValue": "rgb(58, 74, 78)",
    "count": 7,
    "contexts": [
      {
        "tag": "b",
        "text": "Paid",
        "top": 1237,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Approved by Mira",
        "top": 4791,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 4800,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#8C7D6D",
    "alpha": 1,
    "cssValue": "rgb(140, 125, 109)",
    "count": 3,
    "contexts": [
      {
        "tag": "small",
        "text": "3 pricing pages",
        "top": 4031,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#4B5340",
    "alpha": 1,
    "cssValue": "rgb(75, 83, 64)",
    "count": 20,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1140,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1141,
        "property": "svg-stroke"
      },
      {
        "tag": "b",
        "text": "Review",
        "top": 1307,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#6B6259",
    "alpha": 1,
    "cssValue": "rgb(107, 98, 89)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Sent",
        "top": 4428,
        "property": "text"
      },
      {
        "tag": "small",
        "text": "Sent by Mira · just now",
        "top": 4723,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#EEF2F1",
    "alpha": 1,
    "cssValue": "rgb(238, 242, 241)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Approved by Mira",
        "top": 4791,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#F5E0A8",
    "alpha": 1,
    "cssValue": "rgb(245, 224, 168)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1466,
        "property": "background"
      },
      {
        "tag": "b",
        "text": "Open",
        "top": 1255,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#DDFDC6",
    "alpha": 1,
    "cssValue": "rgb(221, 253, 198)",
    "count": 18,
    "contexts": [
      {
        "tag": "b",
        "text": "1",
        "top": 1037,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1296,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 1145,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#6B4F1E",
    "alpha": 1,
    "cssValue": "rgb(107, 79, 30)",
    "count": 18,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1470,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1471,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 1472,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#ECE3D4",
    "alpha": 1,
    "cssValue": "rgb(236, 227, 212)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 683,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#37271C",
    "alpha": 0.1803921568627451,
    "cssValue": "rgba(58, 37, 25, 0.18)",
    "count": 6,
    "contexts": [
      {
        "tag": "details",
        "text": "What is Kylon, and what is a company harness?One workspace where your team, AI agents, company knowl",
        "top": 9007,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#F1C9B8",
    "alpha": 1,
    "cssValue": "rgb(241, 201, 184)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1431,
        "property": "background"
      },
      {
        "tag": "b",
        "text": "Overdue",
        "top": 1272,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#733525",
    "alpha": 1,
    "cssValue": "rgb(115, 53, 37)",
    "count": 7,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1435,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1438,
        "property": "svg-stroke"
      },
      {
        "tag": "b",
        "text": "Overdue",
        "top": 1272,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#3A2119",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(58, 37, 25, 0.12)",
    "count": 2,
    "contexts": [
      {
        "tag": "header",
        "text": "team-plan-launch",
        "top": 4275,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "2 people, 5 agents onKylonClaude CodeCodexDevin",
        "top": 4329,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#505532",
    "alpha": 0.2,
    "cssValue": "rgba(79, 84, 51, 0.2)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "invoices.kylon.app",
        "top": 876,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#3B271D",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(58, 37, 25, 0.1)",
    "count": 2,
    "contexts": [
      {
        "tag": "aside",
        "text": "",
        "top": 861,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#0B6B3A",
    "alpha": 1,
    "cssValue": "rgb(11, 107, 58)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "NorthwindProduct LeadMiraX: @kylon_ai",
        "top": 4624,
        "property": "border"
      },
      {
        "tag": "em",
        "text": "@kylon_ai",
        "top": 4679,
        "property": "text"
      }
    ]
  }
]
```

### 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: Large, airy padding between major sections (often 100px+), with tighter, structured padding within UI mockups and cards.
- Corner style: Highly rounded corners. UI mockups and feature cards feature prominent border radii (approx 16px - 24px), creating a soft look.
- Radius: Large border radii used extensively on cards, buttons, and UI elements.
- Borders: Subtle, low-opacity borders are used to define edges of UI mockups and cards without creating harsh lines.
- Buttons: Pill-shaped or heavily rounded rectangles for primary actions, often solid dark or subtle muted backgrounds.
- Content width: Content is constrained to a central max-width, maintaining readability on large screens, while some elements like the top illustration span wider.
- Density: Moderate density. The page relies on whitespace to separate concepts, but the UI mockups themselves contain dense information.
- Evidence: Visual inspection of gaps between text blocks, rounded edges on the mockups in the hero and lower sections, and the general layout constraints.

## Sections

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

1. **Hero — Your first company harness.** (Home)
   Opening hero composition from Home, organized around “Your first company harness.”.
   Capture: 1440×1698px; page bounds 0–1698px of 11211px; source section ID: `a9891880-2fc6-4d35-95a8-1ff34a3bd658`; image: https://media.designdetails.io/library/5b77ec5ae1e22572caefff2c613b621d5686a7fc35eee4e170dac685b9b6a556/section_crop-a9891880-2026-10-14T16-04-42-642Z.webp
   SECTION.md v3.2: `a9891880-2fc6-4d35-95a8-1ff34a3bd658` (deterministic evidence; editorial review pending)
2. **Features — From separate AI chats to shared company work.** (Home)
   Reusable feature composition from Home, organized around “From separate AI chats to shared company work.”.
   Capture: 1440×1072px; page bounds 1627–2699px of 11211px; source section ID: `3ab1d830-2b27-4405-88ad-351d8f7937e8`; image: https://media.designdetails.io/library/d489352dbf48a65e06d6121cde4621c4191c9ca1cdf24ff52ffb18bac7a767b9/section-manual-3ab1d830-2b27-4405-88ad-351d8f7937e8-1791999190246.webp
   SECTION.md v3.2: `3ab1d830-2b27-4405-88ad-351d8f7937e8` (deterministic evidence; editorial review pending)
3. **Features — See what teams are building with Kylon.** (Home)
   Reusable feature composition from Home, organized around “See what teams are building with Kylon.”.
   Capture: 1440×1065px; page bounds 2794–3859px of 11211px; source section ID: `00fb4c87-2274-4aae-820f-7a7761097cb0`; image: https://media.designdetails.io/library/01f3ea879589df90b0868386d1d1837ebf6fe86047f3264391f42e2730d3c377/section-manual-00fb4c87-2274-4aae-820f-7a7761097cb0-1791999206347.webp
   SECTION.md v3.2: `00fb4c87-2274-4aae-820f-7a7761097cb0` (deterministic evidence; editorial review pending)
4. **Features — The agents you already use. Working as one team.** (Home)
   Reusable feature composition from Home, organized around “The agents you already use. Working as one team.”.
   Capture: 1440×1171px; page bounds 3906–5077px of 11211px; source section ID: `b4fb5563-a6ef-4271-a453-a6f9f5d7f24e`; image: https://media.designdetails.io/library/537e3ff47d903a160ae92696874e65f5bf8233f503ab92043a1327d3c41e9381/section_crop-b4fb5563-2026-10-14T16-04-45-994Z.webp
   SECTION.md v3.2: `b4fb5563-a6ef-4271-a453-a6f9f5d7f24e` (deterministic evidence; editorial review pending)
5. **Features — Your agents, connected to the tools you use.** (Home)
   Reusable feature composition from Home, organized around “Your agents, connected to the tools you use.”.
   Capture: 1440×611px; page bounds 5160–5771px of 11211px; source section ID: `d36ce272-19b2-4a0a-b6a6-adfda069a618`; image: https://media.designdetails.io/library/703e535f4a3a5c3e385a9c34aae30b21de43fd3468d7ac7090daa72c2eaaf864/section-manual-d36ce272-19b2-4a0a-b6a6-adfda069a618-1791999219354.webp
   SECTION.md v3.2: `d36ce272-19b2-4a0a-b6a6-adfda069a618` (deterministic evidence; editorial review pending)
6. **Features — #ops gets an invoice tracker.** (Home)
   Reusable feature composition from Home, organized around “#ops gets an invoice tracker.”.
   Capture: 1440×1322px; page bounds 5919–7241px of 11211px; source section ID: `9a6001ee-a435-4a39-9886-e8b47aaf2986`; image: https://media.designdetails.io/library/8033207a33b4f9eb487a114cbd51ec0c8d89e0e2a540bf49a8ccec5984176a9a/section-manual-9a6001ee-a435-4a39-9886-e8b47aaf2986-1791999228881.webp
   SECTION.md v3.2: `9a6001ee-a435-4a39-9886-e8b47aaf2986` (deterministic evidence; editorial review pending)
7. **Features — Security & compliance.** (Home)
   Reusable feature composition from Home, organized around “Security & compliance.”.
   Capture: 1440×399px; page bounds 8598–8997px of 11211px; source section ID: `8b374d23-b200-43ad-960c-75adfce84175`; image: https://media.designdetails.io/library/49b8934e5f7d3af63f2d7a005c8f2b748e8f9c88e72d61a4ccf13fc71eb609ab/section-manual-8b374d23-b200-43ad-960c-75adfce84175-1791999239079.webp
   SECTION.md v3.2: `8b374d23-b200-43ad-960c-75adfce84175` (deterministic evidence; editorial review pending)
8. **FAQ — Good questions.** (Home)
   FAQ composition from Home, organized around “Good questions.”.
   Capture: 1440×725px; page bounds 8933–9658px of 11211px; source section ID: `60af6bd1-ccb8-48ce-8489-66c4ed012325`; image: https://media.designdetails.io/library/4669b7177b27bb56ab3ab1037d3baab860612890debaf3ebac2d9ad9ab83bc4a/section-manual-60af6bd1-ccb8-48ce-8489-66c4ed012325-1791999247612.webp
   SECTION.md v3.2: `60af6bd1-ccb8-48ce-8489-66c4ed012325` (deterministic evidence; editorial review pending)
9. **Footer — Build your company harness.** (Home)
   Closing footer and call-to-action from Home, organized around “Build your company harness.”.
   Capture: 1440×1080px; page bounds 10131–11211px of 11211px; source section ID: `5656c6dd-97a3-4b10-8639-be8d78962489`; image: https://media.designdetails.io/library/80aa8c540006705499ddeb451490a896d97f3ab850221df2eba5afeef30563e7/section-manual-5656c6dd-97a3-4b10-8639-be8d78962489-1791999258173.webp
   SECTION.md v3.2: `5656c6dd-97a3-4b10-8639-be8d78962489` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/fd1f2a1ecdff5b135ad66198819b2f9490c2b086ca00067a8668a32073502547/desktop_full-71929eda-2026-10-14T16-04-30-763Z.webp
- Mobile screenshot: https://media.designdetails.io/library/7bcc95fd377ab9572543d2a6dcb56373eb98abf819e87384fca85e7a148e8a0b/mobile_full-71929eda-2026-10-14T16-05-29-160Z.webp
- Open Graph image: https://media.designdetails.io/library/9dd6be2fc8578f7617bab395d9827d192fef7b5dd10d34aa5113f70aa6ac0f89/og_image-71929eda-2026-10-14T16-04-41-636Z.webp
- Full-page video: https://media.designdetails.io/library/cb96b786d46279c771e7b191941b992f122760f0f040dfb31f5593d5c79c3e03/motion-1791994102356.mp4
- Video poster: https://media.designdetails.io/library/74c0339c593a3cf05c5f9e989e84e5819767ab2dcdee63a7fefc04f97181fcf6/motion-poster-1791994102356.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Product UI
- Testimonial Card
- Logo Strip
- Feature Card
- FAQ Accordion
- Footer
- Primary Button
- Ghost Button
- UI Showcase Cards
- Scallop Divider

## Quality rubric

Overall: 56.25/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Kylon.io is a well-crafted, professional AI-SaaS landing page with a distinctive warm palette and specific, well-integrated product mockups, but its motion system and overall section architecture rely on an extremely common scroll-reveal/card-template formula that keeps it from feeling like anything beyond a polished execution of the current category standard.

- Typography (15%): 62 — A clear two-tier system (GC Akihiko for display/headings, Geist for body/UI) is applied consistently, with a sensible scale from 80.6px hero down to 9px micro-labels and tightened negative letter-spacing on large sizes. This is competent, professional type craft but the pairing itself (quirky display sans + neutral UI sans) is a common SaaS pattern and the hierarchy, while clean, doesn't do anything structurally novel across sections.
- Color (10%): 65 — A warm cream/brown base (#F5EFE4, #1B1712) departs from generic blue/white SaaS defaults and is applied consistently across hero, cards, and footer. Pastel accent colors (apricot #E4A485, tan #F4E1BB, yellow #EDC57E) differentiate testimonial cards, and muted sage/slate tones color-code status tags inside product mockups. The system is cohesive but the overall warm-neutral-with-pastel-accent approach is increasingly common among SaaS landing pages, limiting distinctiveness.
- Layout (20%): 59 — The page follows a conventional but well-executed SaaS marketing structure: hero, UI showcase cards, testimonial grid, logo marquee, use-case cards, security block, FAQ accordion, footer with watermark logo. Content width is constrained sensibly, whitespace is generous, and the scallop-edge divider between hero image and content is a distinguishing structural touch. However the section-to-section progression (card, card, card, marquee, card, FAQ, footer) is the default 'funnel' template seen across dozens of comparable AI product sites, with no unconventional grid or compositional risk-taking.
- Motion (20%): 46 — Motion consists entirely of generic scroll-triggered fade/slide-up reveals on cards and a continuous horizontal logo marquee — the most common, templated motion vocabulary in contemporary SaaS sites. There is no evidence of choreography tied to narrative, scroll-scrubbed transformation, cursor-driven interaction, or motion that reinforces the product's specific value proposition; it is purely decorative entrance animation applied uniformly to every section.
- Originality (25%): 51 — The scallop-edge divider and the illustrated Mediterranean-house hero scene lend some visual identity, and the warm earth-tone palette departs from stark blue/white SaaS defaults. But the core mechanics — card-based feature showcase with mockups, logo marquee, testimonial grid, FAQ accordion, oversized watermark footer — are a well-worn template seen across current AI/SaaS landing pages, and the motion system contributes no original idea. The product mockups themselves are detailed and specific, which helps, but the overall assembly is a skillful remix rather than a structurally novel concept.
- Content (10%): 67 — Product screenshots are specific and purpose-built to the copy (e.g., '#ops gets an invoice tracker' paired with an actual Invoice Tracker mockup with realistic customer/amount/status data; '#hiring gets a hiring board' paired with a Talent Pipeline kanban). This direct correspondence between claim and visual evidence is stronger content integration than generic stock screenshots, and it's maintained consistently through finance, hiring, sales, and ops use cases.

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 warm, illustrated cutaway villa full of people at desks sets a human, collaborative mood before the product even loads, contrasting software coldness with painterly calm. Below, a real chat and app interface in soft greens and muted beige shows actual data tables and messages, making an abstract AI concept feel like a concrete, trustworthy tool.

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