{
  "id": "design-system-page",
  "meta": {
    "title": "Olon Design System - Token reference, color system, components and brand identity",
    "description": "Token reference, color system, typography, components and brand identity for the OlonJS design language."
  },
  "slug": "design-system",
  "sections": [
    {
      "id": "design-system-foundation",
      "data": {
        "title": "Olon Foundation",
        "badges": [
          {
            "id": "badge-1",
            "label": "OSS",
            "variant": "default"
          },
          {
            "id": "badge-2",
            "label": "Live",
            "variant": "success"
          },
          {
            "id": "badge-3",
            "label": "Beta",
            "variant": "warning"
          },
          {
            "id": "badge-4",
            "label": "Deprecated",
            "variant": "error"
          },
          {
            "id": "badge-5",
            "label": "v1.6",
            "variant": "info"
          }
        ],
        "buttons": [
          {
            "id": "button-1",
            "label": "Primary Button",
            "variant": "primary"
          },
          {
            "id": "button-2",
            "label": "Ghost Button",
            "variant": "ghost"
          },
          {
            "id": "button-3",
            "label": "Disabled",
            "variant": "secondary",
            "disabled": true
          }
        ],
        "eyebrow": "Design System",
        "shadows": [
          {
            "id": "shadow-1",
            "label": "Subtle",
            "boxShadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
          },
          {
            "id": "shadow-2",
            "label": "Medium",
            "boxShadow": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
          }
        ],
        "cardBody": "Hit /{slug}.json on any Olon site and get the typed contract back. No scraping, no parsing, no per-tenant integration.",
        "cardTitle": "Card",
        "typeScale": [
          {
            "id": "type-1",
            "font": "Merriweather",
            "role": "Heading 1",
            "size": "48px",
            "weight": "Bold (700)",
            "tracking": "-0.02em"
          },
          {
            "id": "type-2",
            "font": "Merriweather",
            "role": "Heading 2",
            "size": "32px",
            "weight": "SemiBold (600)",
            "tracking": "-0.01em"
          },
          {
            "id": "type-3",
            "font": "Inter",
            "role": "Body Main",
            "size": "18px",
            "weight": "Regular (400)",
            "tracking": "Normal"
          },
          {
            "id": "type-4",
            "font": "Inter",
            "role": "Caption",
            "size": "14px",
            "weight": "Medium (500)",
            "tracking": "+0.01em"
          },
          {
            "id": "type-5",
            "font": "JetBrains Mono",
            "role": "Technical / Mono",
            "size": "13px",
            "weight": "Regular (400)",
            "tracking": "+0.02em"
          }
        ],
        "brandTitle": "Brand Identity",
        "colorTitle": "Color System",
        "inputTitle": "Input",
        "badgesTitle": "Badges",
        "buttonTitle": "Buttons",
        "cardHeading": "Every page is an API.",
        "colorTokens": [
          {
            "id": "color-1",
            "name": "Brand Primary",
            "role": "Authority, structure",
            "label": "Warm Charcoal",
            "value": "#0B0907"
          },
          {
            "id": "color-2",
            "name": "Action Secondary",
            "role": "Interactivity, CTAs",
            "label": "Refined Violet",
            "value": "#7254B0"
          },
          {
            "id": "color-3",
            "name": "Background",
            "role": "Work surface",
            "label": "Cream",
            "value": "#F2EDE6"
          },
          {
            "id": "color-4",
            "name": "Surface High",
            "role": "Elevated sections",
            "label": "White",
            "value": "#FFFFFF"
          },
          {
            "id": "color-5",
            "name": "Stroke / Border",
            "role": "Dividers, outlines",
            "label": "Lavender Tint",
            "value": "#EDE8F8"
          },
          {
            "id": "color-6",
            "name": "Success",
            "role": "Completed operations",
            "label": "Forest",
            "value": "#14532D"
          },
          {
            "id": "color-7",
            "name": "Warning",
            "role": "Attention required",
            "label": "Burnt Amber",
            "value": "#78350F"
          },
          {
            "id": "color-8",
            "name": "Error",
            "role": "Critical failure",
            "label": "Red",
            "value": "#EF4444"
          },
          {
            "id": "color-9",
            "name": "Info",
            "role": "Service communication",
            "label": "Ink Blue",
            "value": "#1E3A5F"
          }
        ],
        "description": "Token reference, color system, typography, components and brand identity for the current Olon design language. Palette v2 with cream surfaces, warm charcoal, violet accents and SVG wordmark.",
        "radiusTitle": "Border Radius",
        "radiusTokens": [
          {
            "id": "radius-1",
            "name": "Small",
            "usage": "Buttons, small controls",
            "value": "4px"
          },
          {
            "id": "radius-2",
            "name": "Medium",
            "usage": "Inputs, badges, standard UI",
            "value": "8px"
          },
          {
            "id": "radius-3",
            "name": "Large",
            "usage": "Cards, panels, media frames",
            "value": "12px"
          }
        ],
        "shadowsTitle": "Shadows",
        "spacingTitle": "Spacing System",
        "typeShowcase": [
          {
            "id": "showcase-1",
            "label": "H1 - 48px - Bold",
            "sample": "The contract is the product.",
            "variant": "h1"
          },
          {
            "id": "showcase-2",
            "label": "H2 - 32px - SemiBold",
            "sample": "Everything else is a consumer of it.",
            "variant": "h2"
          },
          {
            "id": "showcase-3",
            "label": "Body - 18px - Regular",
            "sample": "Olon turns every website into a contract: typed, addressable, operable. Humans see HTML. Agents see JSON. Both stay in sync, automatically.",
            "variant": "body"
          },
          {
            "id": "showcase-4",
            "label": "Caption - 14px - Medium",
            "sample": "OAuth-scoped agent access to read content, update sections, and submit forms.",
            "variant": "caption"
          },
          {
            "id": "showcase-5",
            "label": "Mono - 13px - Regular",
            "sample": "GET /home.json -> { slug, sections[], sectionSchemas }",
            "variant": "mono"
          }
        ],
        "brandDarkNote": "SVG wordmark on dark background",
        "spacingTokens": [
          {
            "id": "space-1",
            "label": "4px",
            "widthPx": 4
          },
          {
            "id": "space-2",
            "label": "8px",
            "widthPx": 8
          },
          {
            "id": "space-3",
            "label": "16px",
            "widthPx": 16
          },
          {
            "id": "space-4",
            "label": "24px",
            "widthPx": 24
          },
          {
            "id": "space-5",
            "label": "32px",
            "widthPx": 32
          },
          {
            "id": "space-6",
            "label": "48px",
            "widthPx": 48
          }
        ],
        "brandLightNote": "SVG wordmark on light background",
        "componentsTitle": "Components",
        "typographyTitle": "Typography Scale",
        "colorDescription": "Built around warm neutral surfaces, a charcoal primary and a refined violet accent ramp.",
        "inputPlaceholder": "Enter your email",
        "spacingDescription": "Warm editorial spacing with 4/8/16/24/32/48 steps plus a 1120px content container.",
        "typographyDescription": "Display Serif: Merriweather - Body Sans: Inter - Technical Mono: JetBrains Mono - Brand wordmark rendered as SVG."
      },
      "type": "design-system-foundation"
    }
  ],
  "global-header": true
}