{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "locale": "en",
  "status": "pilot",
  "grid": {
    "columns": 12,
    "rows": 8,
    "unitPx": 80,
    "strokePx": 2
  },
  "safeArea": {
    "x": 2,
    "y": 2,
    "width": 8,
    "height": 4
  },
  "motifs": [
    {
      "id": "bookends",
      "title": "Bookends",
      "text": "Opposing shapes frame the message. Use on covers and opening slides with one main idea.",
      "rects": [
        [
          0,
          0,
          4,
          1
        ],
        [
          0,
          1,
          1,
          2
        ],
        [
          8,
          7,
          4,
          1
        ],
        [
          11,
          5,
          1,
          2
        ]
      ]
    },
    {
      "id": "steps",
      "title": "Steps",
      "text": "One- and two-module shapes lead the eye along the edges. Keep the center of the composition clear.",
      "rects": [
        [
          0,
          0,
          2,
          1
        ],
        [
          1,
          1,
          1,
          1
        ],
        [
          0,
          3,
          1,
          2
        ],
        [
          10,
          6,
          1,
          1
        ],
        [
          10,
          7,
          2,
          1
        ],
        [
          11,
          3,
          1,
          2
        ]
      ]
    },
    {
      "id": "windows",
      "title": "Windows",
      "text": "Long rectangles create pauses and continuity. Outlines leave room for the image to breathe.",
      "rects": [
        [
          1,
          0,
          5,
          1
        ],
        [
          0,
          2,
          1,
          4
        ],
        [
          6,
          7,
          5,
          1
        ],
        [
          11,
          2,
          1,
          4
        ]
      ]
    }
  ],
  "styles": [
    {
      "id": "solid",
      "title": "Solid"
    },
    {
      "id": "outline",
      "title": "Outline"
    }
  ],
  "pairings": [
    {
      "id": "lime-on-ink",
      "title": "Lime on ink",
      "background": "ink",
      "foreground": "lime",
      "text": "white",
      "logo": "dark"
    },
    {
      "id": "ink-on-lime",
      "title": "Ink on lime",
      "background": "lime",
      "foreground": "ink",
      "text": "ink",
      "logo": "lime"
    },
    {
      "id": "ink-on-paper",
      "title": "Ink on paper",
      "background": "paper",
      "foreground": "ink",
      "text": "ink",
      "logo": "light"
    },
    {
      "id": "white-on-ink",
      "title": "White on ink",
      "background": "ink",
      "foreground": "white",
      "text": "white",
      "logo": "dark"
    }
  ],
  "rules": [
    {
      "id": "module",
      "title": "One module per composition",
      "text": "Build on a 12 × 8 grid. Squares and rectangles use whole multiples of the same module. Scale the complete motif proportionally; do not stretch individual modules."
    },
    {
      "id": "hierarchy",
      "title": "The message comes first",
      "text": "Keep blocks at the edges and content in the clear central area. Use one family per composition and avoid filling the entire grid. Empty space sets the reading order."
    },
    {
      "id": "color",
      "title": "Give color a purpose",
      "text": "Use the combinations shown. Keep text solid. Do not turn the logo-only green into a block color or apply effects to the logo."
    },
    {
      "id": "images",
      "title": "Give images room",
      "text": "Use outlines when the image already has a strong presence. Keep blocks away from faces and important details. Choose a quiet area with contrast for text; use a separate solid strip when needed."
    },
    {
      "id": "responsive",
      "title": "Recompose for the format",
      "text": "The SVG motifs have a 3:2 aspect ratio. Preserve it. In portrait formats, use an independent graphic strip. On mobile, let the content grow and keep the motif separate; do not shrink text to make it fit."
    },
    {
      "id": "access",
      "title": "Decoration without barriers",
      "text": "Mark motifs as decorative, without duplicate screen reader descriptions. Do not use blocks alone to indicate state or interaction. These compositions are static and need no animation."
    }
  ],
  "assets": [
    {
      "id": "bookends-solid-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-solid-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "bookends",
      "style": "solid",
      "pairing": "lime-on-ink"
    },
    {
      "id": "bookends-solid-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-solid-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "bookends",
      "style": "solid",
      "pairing": "ink-on-lime"
    },
    {
      "id": "bookends-solid-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-solid-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "bookends",
      "style": "solid",
      "pairing": "ink-on-paper"
    },
    {
      "id": "bookends-solid-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-solid-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "bookends",
      "style": "solid",
      "pairing": "white-on-ink"
    },
    {
      "id": "bookends-outline-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-outline-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "bookends",
      "style": "outline",
      "pairing": "lime-on-ink"
    },
    {
      "id": "bookends-outline-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-outline-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "bookends",
      "style": "outline",
      "pairing": "ink-on-lime"
    },
    {
      "id": "bookends-outline-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-outline-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "bookends",
      "style": "outline",
      "pairing": "ink-on-paper"
    },
    {
      "id": "bookends-outline-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/bookends-outline-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "bookends",
      "style": "outline",
      "pairing": "white-on-ink"
    },
    {
      "id": "steps-solid-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-solid-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "steps",
      "style": "solid",
      "pairing": "lime-on-ink"
    },
    {
      "id": "steps-solid-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-solid-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "steps",
      "style": "solid",
      "pairing": "ink-on-lime"
    },
    {
      "id": "steps-solid-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-solid-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "steps",
      "style": "solid",
      "pairing": "ink-on-paper"
    },
    {
      "id": "steps-solid-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-solid-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "steps",
      "style": "solid",
      "pairing": "white-on-ink"
    },
    {
      "id": "steps-outline-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-outline-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "steps",
      "style": "outline",
      "pairing": "lime-on-ink"
    },
    {
      "id": "steps-outline-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-outline-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "steps",
      "style": "outline",
      "pairing": "ink-on-lime"
    },
    {
      "id": "steps-outline-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-outline-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "steps",
      "style": "outline",
      "pairing": "ink-on-paper"
    },
    {
      "id": "steps-outline-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/steps-outline-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "steps",
      "style": "outline",
      "pairing": "white-on-ink"
    },
    {
      "id": "windows-solid-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-solid-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "windows",
      "style": "solid",
      "pairing": "lime-on-ink"
    },
    {
      "id": "windows-solid-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-solid-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "windows",
      "style": "solid",
      "pairing": "ink-on-lime"
    },
    {
      "id": "windows-solid-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-solid-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "windows",
      "style": "solid",
      "pairing": "ink-on-paper"
    },
    {
      "id": "windows-solid-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-solid-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "windows",
      "style": "solid",
      "pairing": "white-on-ink"
    },
    {
      "id": "windows-outline-lime-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-outline-lime-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#E3FF04",
      "motif": "windows",
      "style": "outline",
      "pairing": "lime-on-ink"
    },
    {
      "id": "windows-outline-ink-on-lime",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-outline-ink-on-lime.svg",
      "width": 960,
      "height": 640,
      "background": "#E3FF04",
      "foreground": "#0A0C00",
      "motif": "windows",
      "style": "outline",
      "pairing": "ink-on-lime"
    },
    {
      "id": "windows-outline-ink-on-paper",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-outline-ink-on-paper.svg",
      "width": 960,
      "height": 640,
      "background": "#F4F4F0",
      "foreground": "#0A0C00",
      "motif": "windows",
      "style": "outline",
      "pairing": "ink-on-paper"
    },
    {
      "id": "windows-outline-white-on-ink",
      "format": "svg",
      "src": "/assets/design/6am/blocks/windows-outline-white-on-ink.svg",
      "width": 960,
      "height": 640,
      "background": "#0A0C00",
      "foreground": "#FFFFFF",
      "motif": "windows",
      "style": "outline",
      "pairing": "white-on-ink"
    }
  ],
  "recipe": "<style>\n.sixam-block-composition { background: #0A0C00; color: #FFFFFF; }\n.sixam-block-motif { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }\n.sixam-block-copy { padding: clamp(24px, 5vw, 48px); }\n.sixam-block-copy h2 { margin: 0; font-family: var(--6am-font-display), sans-serif; font-size: clamp(28px, 5vw, 48px); line-height: 1.12; }\n</style>\n<section class=\"sixam-block-composition\">\n  <img class=\"sixam-block-motif\" src=\"/assets/design/6am/blocks/bookends-solid-lime-on-ink.svg\" width=\"960\" height=\"640\" alt=\"\">\n  <div class=\"sixam-block-copy\"><h2>A good idea deserves space.</h2></div>\n</section>"
}