{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "locale": "en",
  "spacing": [
    4,
    8,
    12,
    16,
    24,
    32,
    48,
    64,
    96
  ],
  "motion": {
    "durationMs": 220,
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
    "reducedMotion": "Remove movement and transitions when the user requests reduced motion."
  },
  "layoutUsage": {
    "status": "pilot",
    "maxWidthPx": 1200,
    "grids": [
      {
        "id": "small",
        "minWidthPx": 0,
        "columns": 4,
        "gutterPx": 16,
        "marginPx": 16,
        "cardSpan": 4,
        "title": "Small"
      },
      {
        "id": "medium",
        "minWidthPx": 640,
        "columns": 8,
        "gutterPx": 24,
        "marginPx": 24,
        "cardSpan": 4,
        "title": "Medium"
      },
      {
        "id": "large",
        "minWidthPx": 1024,
        "columns": 12,
        "gutterPx": 24,
        "marginPx": 32,
        "cardSpan": 4,
        "title": "Large"
      }
    ],
    "densities": [
      {
        "id": "compact",
        "paddingPx": 24,
        "gapPx": 16,
        "title": "Compact"
      },
      {
        "id": "comfortable",
        "paddingPx": 32,
        "gapPx": 24,
        "title": "Comfortable"
      }
    ],
    "spacingRoles": [
      {
        "id": "detail",
        "values": [
          4,
          8
        ],
        "title": "Close details",
        "text": "Icon and label, label and help text."
      },
      {
        "id": "group",
        "values": [
          16,
          24
        ],
        "title": "Related content",
        "text": "Heading, explanation and action for the same decision."
      },
      {
        "id": "container",
        "values": [
          24,
          32
        ],
        "title": "Room inside a block",
        "text": "Card and panel padding, without squeezing the reading."
      },
      {
        "id": "section",
        "values": [
          48,
          64,
          96
        ],
        "title": "A change of subject",
        "text": "Distance between groups and sections; increase it when the subject changes."
      }
    ],
    "motion": [
      {
        "id": "quick",
        "durationMs": 120,
        "offsetPx": 4,
        "title": "Quick response",
        "text": "Short feedback on small controls."
      },
      {
        "id": "standard",
        "durationMs": 220,
        "offsetPx": 4,
        "title": "State change",
        "text": "The existing reference for hover, focus and selection."
      },
      {
        "id": "reveal",
        "durationMs": 320,
        "offsetPx": 8,
        "title": "Detail reveal",
        "text": "Reveal a small panel after an explicit action."
      }
    ],
    "layers": [
      {
        "id": "content",
        "value": 0,
        "title": "Content",
        "text": "Normal flow and local decorative elements."
      },
      {
        "id": "sticky",
        "value": 10,
        "title": "Sticky navigation",
        "text": "Header or navigation, without hiding focused content."
      },
      {
        "id": "popover",
        "value": 20,
        "title": "Contextual menu",
        "text": "Menus close to their originating control."
      },
      {
        "id": "overlay",
        "value": 30,
        "title": "Modal backdrop",
        "text": "A backdrop separates a dialog from the rest of the page."
      },
      {
        "id": "dialog",
        "value": 40,
        "title": "Dialog",
        "text": "Modal content; manage focus, Escape and return to the trigger."
      }
    ],
    "ui": {
      "label": "04 / Space and motion",
      "title": "Room to understand. Motion that explains.",
      "intro": "Space tells people what belongs together. Motion shows what changed. Use both to make the next step easier to see.",
      "spacingTitle": "One scale. Different relationships.",
      "spacingText": "Reuse the existing 4–96 px steps. A small gap connects details; a larger one separates decisions. Choose a role before choosing a number.",
      "copyToken": "Copy token",
      "densityTitle": "Space around the same idea.",
      "densityText": "Compare two card recipes without changing the words or type size. Compact is for repeated content; comfortable gives an introduction more room. These values describe padding and gaps, not fixed heights.",
      "sampleLabel": "A CLEAR NEXT STEP",
      "sampleTitle": "Start with what matters.",
      "sampleBody": "Explain the useful detail. Keep the next action close enough to feel connected.",
      "sampleAction": "Explore the design system",
      "padding": "Padding",
      "gap": "Gap",
      "copySpacing": "Copy card CSS",
      "gridTitle": "A shared grid, with room to adapt.",
      "gridText": "Use 4, 8 or 12 columns as the viewport grows. Align related text, images and actions to the same edges. The content container stops at 1200 px, excluding its outer margins.",
      "gridNote": "This is a scaled grid diagram, not a device simulator. The numbers describe the actual CSS recipe. Cards stack on small screens, use two columns on medium screens and three on large screens.",
      "columns": "Columns",
      "gutter": "Gutter",
      "margin": "Outer margin",
      "breakpoint": "From viewport",
      "gridCaption": "Each block represents one card. Decorative columns show the shared alignment.",
      "copyGrid": "Copy responsive grid CSS",
      "rhythmTitle": "Keep the rhythm when the screen changes.",
      "rhythmRules": [
        "Stack content in its reading order. Do not visually reorder cards away from keyboard and document order.",
        "Let content determine height. Long copy, validation messages and translated labels need room to grow.",
        "Use 48 px between sections on narrow layouts and 64–96 px on larger layouts as starting points. Related elements stay closer together.",
        "Keep one shared alignment edge for a heading, its body and its action. Center a short statement only when the composition calls for it.",
        "Keep essential controls comfortably sized; use a 44 × 44 px touch target as the pilot default. Do not confuse icon size with hit area.",
        "Use the social templates’ safe areas for feed and Stories, and the logo’s own clear-space rules. A web gutter does not replace either."
      ],
      "layersTitle": "Layers with a clear order.",
      "layersText": "These pilot z-index values belong inside an isolated component or page context. They are not a promise that a number can escape a parent stacking context. Prefer the browser’s native dialog behavior for modals.",
      "motionTitle": "A response, not a performance.",
      "motionText": "Keep the existing 220 ms easing as the default. Use a quicker response for small controls, or a little more time for a small reveal. The duration never delays the action itself.",
      "duration": "Duration",
      "distance": "Max. offset",
      "easing": "Shared easing",
      "motionChoose": "Motion recipe",
      "reduce": "Simulate reduced motion",
      "restore": "Use system motion preference",
      "reducedStatus": "Reduced motion: state changes are immediate.",
      "standardStatus": "Standard motion: short transitions are enabled.",
      "show": "Show details",
      "hide": "Hide details",
      "panelTitle": "The detail stays connected.",
      "panelText": "The panel appears next to its trigger. It opens in the document flow, keeps a natural height and can be closed using the same button.",
      "opened": "Details are open.",
      "closed": "Details are closed.",
      "copyMotion": "Copy motion CSS",
      "motionNote": "This demo does not loop or autoplay. Your operating-system preference always wins; the switch can only reduce motion further. Content and button state remain available in both modes.",
      "motionRulesTitle": "What stays still matters too.",
      "motionRules": [
        "Animate only the properties that explain a state: color, opacity and a small transform. Avoid transition: all, fixed-height reveals and layout shifts that move a target under the pointer.",
        "Keep keyboard focus visible immediately. A hover effect must have a keyboard equivalent; do not hide an action until hover.",
        "Do not make reading depend on a timed reveal. Avoid parallax, bouncing loops and automatic carousels in this pilot.",
        "With prefers-reduced-motion: reduce, remove transitions, entrance animations and spatial offsets. Keep the final content, labels and selected state.",
        "For dialogs and menus, motion is only one part of the behavior. Implement focus handling, dismissal and the correct semantics before adding animation."
      ],
      "resourcesTitle": "A recipe your team can reuse.",
      "resourcesText": "The same spacing roles, grid breakpoints, layers and motion recipes are available in JSON, scoped tokens and the AI guide. Copy examples with their reduced-motion rule.",
      "json": "Space and motion · JSON",
      "css": "Layout tokens · CSS",
      "copyGuide": "Copy layout guide for AI",
      "status": "Pilot specification. Existing pages still need a spacing and layering audit; broader keyboard, zoom and reduced-motion checks remain open.",
      "prompt": "Build a 6am layout using the following pilot specification. Reuse the existing spacing steps and responsive rules. Preserve semantic reading order, visible focus, natural content height and usable touch targets. Use motion only after a user action and honor reduced-motion preferences. Use the original logo asset and its clear space; keep social safe areas from the relevant template.",
      "markup": "Motion markup: .ds-motion-demo contains a button.ds-motion-trigger with aria-expanded / aria-controls and a .ds-motion-panel with hidden when closed. Toggle data-open on the container and the panel hidden state together. data-reduced=\"true\" may reduce motion further; never override the OS preference. Set --demo-duration and --demo-offset from the chosen recipe. JavaScript must keep those states synchronized."
    }
  },
  "css": {
    "grid": ".ds-layout {\n  --layout-columns: 4;\n  --layout-gutter: 16px;\n  --layout-margin: 16px;\n  --layout-card-span: 4;\n  width: calc(100% - var(--layout-margin) * 2);\n  max-width: 1200px;\n  margin-inline: auto;\n}\n.ds-layout-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));\n  gap: var(--layout-gutter);\n}\n.ds-layout-card { grid-column: span var(--layout-card-span); min-width: 0; }\n@media (min-width: 640px) {\n  .ds-layout {\n  --layout-columns: 8;\n  --layout-gutter: 24px;\n  --layout-margin: 24px;\n  --layout-card-span: 4;\n  }\n}\n@media (min-width: 1024px) {\n  .ds-layout {\n  --layout-columns: 12;\n  --layout-gutter: 24px;\n  --layout-margin: 32px;\n  --layout-card-span: 4;\n  }\n}",
    "motion": ".ds-motion-demo .ds-motion-trigger {\n  background: var(--ds-white); color: var(--ds-ink);\n  transition: background-color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1), color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ds-motion-demo .ds-motion-trigger:is(:hover, :focus-visible),\n.ds-motion-demo[data-open=\"true\"] .ds-motion-trigger { background: var(--ds-lime); }\n.ds-motion-demo .ds-motion-trigger:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 4px; }\n.ds-motion-demo .ds-motion-trigger svg { transition: transform var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }\n.ds-motion-demo[data-open=\"true\"] .ds-motion-trigger svg { transform: translateX(var(--demo-offset, 4px)); }\n.ds-motion-demo[data-open=\"true\"] .ds-motion-panel { animation: ds-detail-enter var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }\n@keyframes ds-detail-enter { from { opacity: 0; transform: translateY(var(--demo-offset, 4px)); } to { opacity: 1; transform: none; } }\n.ds-motion-demo[data-reduced=\"true\"] *,\n.ds-motion-demo[data-reduced=\"true\"] .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }\n@media (prefers-reduced-motion: reduce) {\n  .ds-motion-demo *, .ds-motion-demo .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }\n}",
    "cards": [
      {
        "id": "compact",
        "css": ".ds-spaced-card {\n  padding: var(--ds-space-24);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--ds-space-16);\n}\n.ds-spaced-card > * { margin: 0; }"
      },
      {
        "id": "comfortable",
        "css": ".ds-spaced-card {\n  padding: var(--ds-space-32);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--ds-space-24);\n}\n.ds-spaced-card > * { margin: 0; }"
      }
    ]
  }
}