{
  "theme": "light",
  "category": "creative",
  "tags": [
    "cool",
    "serif-heavy",
    "minimal",
    "type-first",
    "achromatic",
    "dense",
    "editorial",
    "creative"
  ],
  "northStar": "An 'Internet memory palace' for connected knowledge collectors — quiet, text-first, the opposite of an algorithm.",
  "description": "Are.na's marketing site is almost defiantly plain — system-style sans, near-white canvas, narrow centered single-column layout, and a deep navy footer. No imagery, no illustration, no hero animation. Pricing tiers, manifesto text, and a single product screenshot are the entire surface. The personality is post-internet quiet — the design system says 'we trust the reader' rather than 'we want your attention'.",
  "colors": [
    {
      "name": "neutral-700",
      "hex": "#333333",
      "group": "neutral",
      "role": "neutral step 700",
      "tailwind": null
    },
    {
      "name": "neutral-50-1",
      "hex": "#ffffff",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "zinc-50",
        "hex": "#fafafa",
        "deltaE": 0.015
      }
    },
    {
      "name": "neutral-950",
      "hex": "#000000",
      "group": "neutral",
      "role": "neutral step 950",
      "tailwind": null
    },
    {
      "name": "neutral-50-2",
      "hex": "#f7f7f7",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "neutral-100",
        "hex": "#f5f5f5",
        "deltaE": 0.006
      }
    },
    {
      "name": "blue-800",
      "hex": "#00075f",
      "group": "blue",
      "role": "blue step 800",
      "tailwind": null
    },
    {
      "name": "neutral-500",
      "hex": "#696969",
      "group": "neutral",
      "role": "neutral step 500",
      "tailwind": null
    },
    {
      "name": "red-200",
      "hex": "#dfbebe",
      "group": "red",
      "role": "red step 200",
      "tailwind": null
    },
    {
      "name": "violet-600",
      "hex": "#3d46c2",
      "group": "violet",
      "role": "violet step 600",
      "tailwind": null
    },
    {
      "name": "neutral-100-1",
      "hex": "#dedede",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "zinc-200",
        "hex": "#e4e4e7",
        "deltaE": 0.02
      }
    },
    {
      "name": "green-500",
      "hex": "#238020",
      "group": "green",
      "role": "green step 500",
      "tailwind": {
        "name": "green-700",
        "hex": "#008236",
        "deltaE": 0.012
      }
    },
    {
      "name": "neutral-100-2",
      "hex": "#ebecf7",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "violet-100",
        "hex": "#ede9fe",
        "deltaE": 0.014
      }
    },
    {
      "name": "green-200",
      "hex": "#b4d6b3",
      "group": "green",
      "role": "green step 200",
      "tailwind": null
    },
    {
      "name": "red-500",
      "hex": "#b93d3d",
      "group": "red",
      "role": "red step 500",
      "tailwind": null
    }
  ],
  "surfaces": [
    {
      "level": 0,
      "name": "background",
      "hex": "#ffffff",
      "purpose": "Page background"
    },
    {
      "level": 1,
      "name": "surface-1",
      "hex": "#ebecf7",
      "purpose": "Cards / elevated panels"
    },
    {
      "level": 2,
      "name": "surface-2",
      "hex": "#dedede",
      "purpose": "Elevation tier 2"
    },
    {
      "level": 3,
      "name": "surface-3",
      "hex": "#696969",
      "purpose": "Elevation tier 3"
    },
    {
      "level": 4,
      "name": "surface-floor",
      "hex": "#333333",
      "purpose": "Elevation tier 4"
    }
  ],
  "elevationPhilosophy": "Two tiers only — flat content body and the navy footer band. No shadows. The footer's color shift IS the elevation device.",
  "typography": [
    {
      "family": "Times New Roman",
      "weight": "400",
      "role": "serif",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "areal",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    }
  ],
  "typeScale": [
    {
      "role": "body",
      "size": 16,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "h3",
      "size": 16,
      "lineHeight": 1.45,
      "letterSpacing": null
    },
    {
      "role": "h4",
      "size": 16,
      "lineHeight": 1.45,
      "letterSpacing": null
    },
    {
      "role": "link",
      "size": 16,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "ui-action",
      "size": 12.5,
      "lineHeight": null,
      "letterSpacing": null
    }
  ],
  "spacing": {
    "radius": {
      "none": "0",
      "sm": "3px"
    },
    "base": "100px"
  },
  "layout": "A narrow single-column flow centered on the page: small logo, tier cards, a screenshot, manifesto-style paragraphs, then the deep-navy footer. Vertical rhythm is unhurried.",
  "imagery": "None on the marketing surface. A single product screenshot of the canvas is allowed mid-page; otherwise the page is text.",
  "dos": [
    "Use a centered single-column reading layout with comfortable line length",
    "Default to a system or near-system sans; let the words be the design",
    "Anchor the page with a deep navy footer band — the only color moment",
    "Keep buttons text-first with a thin border, no fills, no gradients"
  ],
  "donts": [
    "Don't add hero imagery, illustration, or color blocks above the fold",
    "Don't use display-scale typography; mid-size body text is the personality",
    "Don't shadow or elevate cards — flat surfaces only",
    "Don't introduce a second accent — navy footer is the only color moment"
  ],
  "brandColor": {
    "hex": "#00075f",
    "source": "heuristic",
    "chroma": 0.146
  }
}