{
  "brand": "ar.io",
  "version": "2026-08-07",
  "human_reference": "/brand-kit",
  "machine_reference": "/brand-kit/agents.json",
  "assets_base_path": "/brand/",
  "logos": [
    {
      "id": "icon-dark",
      "name": "Icon (Dark)",
      "variants": {
        "svg": "/brand/ario-black.svg"
      },
      "usage": "Use on light backgrounds."
    },
    {
      "id": "icon-light",
      "name": "Icon (Light)",
      "variants": {
        "svg": "/brand/ario-white.svg"
      },
      "usage": "Use on dark backgrounds."
    },
    {
      "id": "full-logo-dark",
      "name": "Full Logo (Dark)",
      "variants": {
        "svg": "/brand/ario-full-black.svg"
      },
      "usage": "Use on light backgrounds when full wordmark is needed."
    },
    {
      "id": "full-logo-light",
      "name": "Full Logo (Light)",
      "variants": {
        "svg": "/brand/ario-full-white.svg"
      },
      "usage": "Use on dark backgrounds when full wordmark is needed."
    },
    {
      "id": "icon-black-on-white",
      "name": "Icon (Black on White)",
      "variants": {
        "round_svg": "/brand/ario-black-on-white-round.svg",
        "round_png": "/brand/ario-black-on-white-round.png",
        "square_svg": "/brand/ario-black-on-white-square.svg",
        "square_png": "/brand/ario-black-on-white-square.png"
      },
      "usage": "Use when a white plate is required."
    },
    {
      "id": "icon-white-on-black",
      "name": "Icon (White on Black)",
      "variants": {
        "round_svg": "/brand/ario-white-on-black-round.svg",
        "round_png": "/brand/ario-white-on-black-round.png",
        "square_svg": "/brand/ario-white-on-black-square.svg",
        "square_png": "/brand/ario-white-on-black-square.png"
      },
      "usage": "Use when a black plate is required."
    },
    {
      "id": "token-logo",
      "name": "ARIO Token Logo",
      "variants": {
        "svg": "/brand/ario-token-logo.svg"
      },
      "usage": "Official logo for the ARIO token."
    }
  ],
  "colors": [
    {
      "name": "Primary",
      "hex": "#5427C8",
      "usage": "Primary brand color for CTAs, links, and accents."
    },
    {
      "name": "Lavender",
      "hex": "#DFD6F7",
      "usage": "Secondary color for gradients and backgrounds."
    },
    {
      "name": "Black",
      "hex": "#23232D",
      "usage": "Primary text color and dark elements."
    },
    {
      "name": "White",
      "hex": "#FFFFFF",
      "usage": "Background and light text on dark surfaces."
    },
    {
      "name": "Card Surface",
      "hex": "#F0F0F0",
      "usage": "Card backgrounds and elevated surfaces."
    }
  ],
  "extended_colors": [
    {
      "name": "Deep Dark",
      "hex": "#0e0a1c",
      "usage": "High-emphasis hero frames, final CTAs, and dark radial-gradient sections."
    },
    {
      "name": "Dark Accent Lavender",
      "hex": "#D4C6FF",
      "usage": "Labels, emphasized words, icons, and secondary text on dark surfaces."
    },
    {
      "name": "Lavender Wash",
      "hex": "#f1ecff",
      "usage": "Focused product, proof, case-study, or how-it-works sections with a gentle brand presence."
    },
    {
      "name": "Warm Neutral",
      "hex": "#F6F4EF",
      "usage": "Softer explanatory sections and transitions between high-contrast bands."
    },
    {
      "name": "Subtle Border",
      "hex": "#E6E4EF",
      "usage": "Section dividers, list rows, and quiet card borders on light backgrounds."
    }
  ],
  "typography": {
    "headline": {
      "family": "Besley",
      "weight": 800,
      "usage": "Headlines and display text."
    },
    "body": {
      "family": "Plus Jakarta Sans",
      "usage": "Body text and UI elements."
    }
  },
  "layout": {
    "site_container": {
      "max_width": "1400px",
      "usage": "Primary page rail with responsive horizontal padding."
    },
    "section_spacing": {
      "standard": "80px vertical on desktop-oriented content sections, often 120px on large screens",
      "hero": "Top spacing around 40px with generous bottom spacing",
      "final_cta": "Use extra vertical breathing room, commonly 96px to 140px"
    },
    "radii": {
      "framed_hero": "2.5rem",
      "large_panel": "2rem",
      "cards": "20px to 24px",
      "pills": "9999px"
    }
  },
  "section_patterns": [
    {
      "id": "framed-dark-hero",
      "usage": "Hero or page intro with a rounded deep-dark frame, white copy, lavender emphasis, media or video when available, and pill CTAs.",
      "style": {
        "background": "#0e0a1c",
        "border_radius": "2.5rem",
        "accent": "#D4C6FF",
        "overlays": [
          "subtle radial purple glows",
          "optional media gradient overlay",
          "optional grain texture"
        ]
      }
    },
    {
      "id": "dark-radial-section",
      "usage": "Trust, proof, integration, risk, compliance, or final CTA sections that need high emphasis.",
      "style": {
        "background": "#0e0a1c",
        "text": "white",
        "body_text": "white at 70% to 85% opacity",
        "accent": "#D4C6FF",
        "effects": [
          "radial-gradient purple glows",
          "low-opacity grain overlay"
        ]
      }
    },
    {
      "id": "lavender-wash-section",
      "usage": "Case studies, product explanations, proof concepts, and system diagrams.",
      "style": {
        "background": "#f1ecff",
        "cards": "Use white cards with subtle purple borders or shadows."
      }
    },
    {
      "id": "warm-neutral-section",
      "usage": "Softer explanatory sections, AI-era context, and transitions.",
      "style": {
        "background": "#F6F4EF",
        "cards": "Use white or charcoal cards for contrast."
      }
    },
    {
      "id": "white-breathing-section",
      "usage": "Logo rows, stats, dense card grids, product comparisons, and sections that need visual calm.",
      "style": {
        "background": "#FFFFFF",
        "dividers": "#E6E4EF"
      }
    }
  ],
  "components": {
    "section_label": {
      "style": "Small text, 13px, medium weight, slight letter spacing, often numbered as '01 — Label'.",
      "light_surface": "Use #5427C8.",
      "dark_surface": "Use #D4C6FF."
    },
    "headings": {
      "style": "Large Besley Extra Bold headings with tight line-height, negative letter spacing, and selective italic emphasis in the accent color.",
      "examples": [
        "text-balance",
        "line-height near 1.04 to 1.1",
        "tracking around -0.025em"
      ]
    },
    "pill_ctas": {
      "primary_light": "Rounded full, #5427C8 background, white text, subtle lift or darker hover.",
      "primary_dark": "Rounded full, white background, #23232D text, opacity hover.",
      "secondary_dark": "Rounded full, white translucent fill, white border at low opacity, white text.",
      "secondary_light": "Rounded full, white background, subtle charcoal or purple border, primary hover."
    },
    "gradient_cards": {
      "usage": "Listing cards and asset cards.",
      "background": "linear-gradient(to bottom right, #F0F0F0, #DFD6F7)",
      "overlay": "transparent-to-primary gradient at low opacity",
      "surface": "rounded-2xl, subtle border, shadow-sm"
    },
    "product_cards": {
      "light": "White-to-lavender vertical gradient, subtle border, primary accent pill.",
      "dark": "Deep dark vertical gradient, white text, lavender accents, border-white at low opacity."
    },
    "dark_glass_cards": {
      "usage": "Cards inside dark radial sections.",
      "style": "White translucent fill around 4%, border-white at 10% to 12%, optional backdrop blur, lavender icon plate."
    },
    "stat_rows": {
      "style": "Large Besley numeric values, uppercase primary labels, quiet gray descriptions, subtle dividers."
    }
  },
  "motion_texture": {
    "grain_overlay": {
      "usage": "Use sparingly on deep-dark sections to add texture.",
      "opacity": "0.04 to 0.05",
      "blend_mode": "overlay"
    },
    "hero_reveal": {
      "usage": "Subtle staggered fade-up for hero content.",
      "duration": "0.7s",
      "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)",
      "accessibility": "Disable animation when prefers-reduced-motion is set."
    },
    "flow_dot": {
      "usage": "Small animated dots for process or verification-flow diagrams.",
      "accessibility": "Disable animation when prefers-reduced-motion is set."
    },
    "duration_scale": {
      "150ms": "Colour and opacity hovers.",
      "200ms": "Transforms, shadows, and reveals.",
      "300ms": "Panels and modals.",
      "accessibility": "Every animated class must be disabled under prefers-reduced-motion."
    }
  },
  "rules": [
    "Use dark logo variants on light backgrounds and light variants on dark backgrounds.",
    "Do not alter logo proportions, colors, or orientation.",
    "Prefer SVG for digital interfaces; use PNG where raster output is required.",
    "Use lowercase 'ar.io' except sentence starts where 'Ar.io' is acceptable.",
    "Use BaseImage for site images and plain root-relative asset paths in React and MDX contexts.",
    "Favor alternating section backgrounds on top-level marketing pages instead of long runs of white or card-gray sections.",
    "Use direct self-service links for the console, documentation, ArNS, gateway operation, and network participation.",
    "Avoid em dashes in prose; numbered section labels may use the '01 — Label' pattern.",
    "Mute text with opacity rather than introducing another gray. #4A4A58 is retired.",
    "Use #F0F0F0 as a card or contained surface, not as a full-page or full-section background.",
    "Never place two sections with the same background colour next to each other.",
    "Provide a visible :focus-visible indicator on every interactive element."
  ],
  "style_guide_reference": "https://github.com/ar-io/public-site/blob/main/docs/STYLE_GUIDE.md",
  "positioning": {
    "what_we_are": "A permanent cloud network. Not a storage product.",
    "subject": "ar.io is the subject of its own value proposition. Do not frame it as a layer that makes another network usable.",
    "substrate": "Describe the storage layer generically. The positioning must survive more than one storage backend.",
    "thesis": "Storage is not delivery. Permanence at the storage layer does not make data fast to reach, findable, or verifiable."
  },
  "text_hierarchy": {
    "method": "Mute text with opacity, never with an additional gray.",
    "primary": "Full-strength foreground.",
    "secondary": "Foreground at 80%.",
    "body": "Foreground at 70%.",
    "captions": "Foreground at 60%.",
    "on_dark": "White at 80% for body, 70% for secondary, #D4C6FF for labels and accents.",
    "retired": "#4A4A58 was previously published as \"Body Gray\". It is retired. Use foreground at 70% instead."
  },
  "type_scale": {
    "method": "Use the standard Tailwind scale. Avoid arbitrary pixel sizes.",
    "hero_h1": "text-4xl, sm:text-5xl, lg fluid via clamp()",
    "section_h2": "text-3xl, sm:text-4xl, lg:text-5xl",
    "subsection_h3": "text-xl, sm:text-2xl",
    "body": "text-base or text-lg with relaxed leading",
    "eyebrow": "text-xs, semibold, uppercase, widest tracking",
    "exception": "Sub-12px monospace micro-labels have no Tailwind token and may use arbitrary values.",
    "headings_font": "h1 through h6 receive Besley 800 from a global rule. They need no font class. Use a font-heading utility only on non-heading elements."
  },
  "focus": {
    "method": "Keyboard focus uses :focus-visible with an outline, not a box-shadow, so the ring follows border-radius.",
    "light_surfaces": "2px solid primary #5427C8, 2px offset.",
    "dark_surfaces": "2px solid #D4C6FF, because primary reaches only about 1.9:1 against the dark washes.",
    "rule": "Never apply focus:outline-none without supplying a replacement indicator."
  },
  "voice": {
    "say_it_once": "State a claim once per page. Do not restate the same capability list in multiple sections.",
    "lead_with_the_job": "Lead with what the reader gets, not with the mechanism. Mechanism belongs on technology pages.",
    "evidence": "Pair claims with numbers, named users, or a visible artifact.",
    "precision": "Do not flatten a claim into a proof. A signature proves a gateway made a claim, not that the claim is true.",
    "lowercase": "'ar.io' is always lowercase, except at a sentence start where 'Ar.io' is acceptable.",
    "no_em_dashes": "Avoid em dashes in prose. Numbered section labels may use the '01 — Label' pattern.",
    "sentence_case": "Headlines use sentence case, not title case.",
    "avoid": [
      "seamless",
      "robust",
      "powerful",
      "unlock",
      "leverage",
      "revolutionize",
      "cutting-edge"
    ]
  },
  "ctas": {
    "primary": "Try the app",
    "secondary": "Read docs",
    "context_specific": [
      "Run a gateway",
      "Get a name",
      "Get started"
    ],
    "do_not_use": [
      "Use the network",
      "Build with ar.io",
      "Read the documentation",
      "Open the ArNS app as a primary label",
      "Launch the console"
    ]
  },
  "avoid_generic_ai_design": [
    "Do not repeat an icon, bold title, and gray sentence in a grid. It is the strongest signature of generated design.",
    "Do not make every section an equal-weight grid. Pages need a focal point.",
    "Do not reuse one section skeleton down the whole page. Vary the shape, not only the background colour.",
    "Do not use arbitrary precision such as 14.5px or 1.12fr. Choose round values.",
    "Prefer rules and dividers over cards. Border-divided rows read as editorial; boxes in a grid read as generated.",
    "Motion should explain something. Decorative fades do not earn their place."
  ],
  "diagrams": {
    "principle": "A diagram earns its place when it shows a mechanism the prose cannot. If a sentence says it faster, write the sentence.",
    "label_edges": "Label every arrow. An unlabelled arrow means \"related somehow\".",
    "terminals": "Every path needs an ending. A branch that stops midway is incomplete.",
    "plurality": "Draw the network as many peers. A hub and spoke reads as centralised and contradicts the positioning.",
    "mobile": "A wide viewBox scaled into a narrow column renders labels illegibly. Provide a stacked rendition below the small breakpoint rather than shrinking the drawing.",
    "semantics": "Wrap in figure with figcaption, and give the svg role=\"img\" plus an aria-label carrying the same claim."
  },
  "section_backgrounds": [
    {
      "name": "Deep Dark",
      "hex": "#0e0a1c",
      "usage": "Heroes and final CTAs."
    },
    {
      "name": "Charcoal",
      "hex": "#23232D",
      "usage": "Trust, proof, and high-emphasis sections."
    },
    {
      "name": "White",
      "hex": "#FFFFFF",
      "usage": "Framed media, logo rows, dense grids, breathing room."
    },
    {
      "name": "Lavender Wash",
      "hex": "#f1ecff",
      "usage": "Product, system, and how-it-works sections."
    },
    {
      "name": "Warm Neutral",
      "hex": "#F6F4EF",
      "usage": "Explanatory and transitional sections."
    }
  ],
  "section_rhythm": "Alternate deliberately. Never place two sections with the same background next to each other. Vary section shape, not only colour."
}