{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "status": "Pilot",
  "gradients": [
    {
      "id": "first-light",
      "family": "linear",
      "layers": [
        {
          "type": "linear",
          "angle": 120,
          "stops": [
            {
              "color": "lime",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "white",
              "position": 100,
              "opacity": 1
            }
          ]
        }
      ],
      "base": "white",
      "status": "pilot",
      "title": "First light",
      "description": "Lime opens into white. Use for a short campaign message, a cover or an editorial divider.",
      "textRule": "Use ink lettering and the light-background logo. Keep the message short and inspect the finished layout.",
      "variable": "--ds-gradient-first-light",
      "css": "linear-gradient(120deg, #E3FF04 0%, #FFFFFF 100%), #FFFFFF"
    },
    {
      "id": "quiet-depth",
      "family": "linear",
      "layers": [
        {
          "type": "linear",
          "angle": 135,
          "stops": [
            {
              "color": "support",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "ink",
              "position": 100,
              "opacity": 1
            }
          ]
        }
      ],
      "base": "ink",
      "status": "pilot",
      "title": "Quiet depth",
      "description": "Graphite fades into ink. A restrained background for introductions, closing slides and service stories.",
      "textRule": "Use white lettering and the dark-background logo. Keep lime as a small, solid accent.",
      "variable": "--ds-gradient-quiet-depth",
      "css": "linear-gradient(135deg, #252525 0%, #0A0C00 100%), #0A0C00"
    },
    {
      "id": "lime-field",
      "family": "field",
      "layers": [
        {
          "type": "radial",
          "x": 15,
          "y": 20,
          "stops": [
            {
              "color": "lime",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "lime",
              "position": 75,
              "opacity": 0
            }
          ]
        },
        {
          "type": "radial",
          "x": 90,
          "y": 90,
          "stops": [
            {
              "color": "lime",
              "position": 0,
              "opacity": 0.45
            },
            {
              "color": "lime",
              "position": 65,
              "opacity": 0
            }
          ]
        }
      ],
      "base": "white",
      "status": "pilot",
      "title": "Lime field",
      "description": "Two pools of lime on white create a soft, open background for campaign artwork.",
      "textRule": "Keep text and the full logo on a solid white or ink panel. Leave the light field as decoration.",
      "variable": "--ds-gradient-lime-field",
      "css": "radial-gradient(ellipse at 15% 20%, #E3FF04 0%, rgba(227, 255, 4, 0) 75%), radial-gradient(ellipse at 90% 90%, rgba(227, 255, 4, 0.45) 0%, rgba(227, 255, 4, 0) 65%), #FFFFFF"
    },
    {
      "id": "night-glow",
      "family": "field",
      "layers": [
        {
          "type": "radial",
          "x": 90,
          "y": 15,
          "stops": [
            {
              "color": "lime",
              "position": 0,
              "opacity": 0.55
            },
            {
              "color": "lime",
              "position": 65,
              "opacity": 0
            }
          ]
        },
        {
          "type": "radial",
          "x": 10,
          "y": 90,
          "stops": [
            {
              "color": "support",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "support",
              "position": 70,
              "opacity": 0
            }
          ]
        }
      ],
      "base": "ink",
      "status": "pilot",
      "title": "Night glow",
      "description": "A lime glow meets graphite on ink. Use for a single expressive cover or transition.",
      "textRule": "Place text and the full logo on an opaque panel. Do not infer contrast from the dark base alone.",
      "variable": "--ds-gradient-night-glow",
      "css": "radial-gradient(ellipse at 90% 15%, rgba(227, 255, 4, 0.55) 0%, rgba(227, 255, 4, 0) 65%), radial-gradient(ellipse at 10% 90%, #252525 0%, rgba(37, 37, 37, 0) 70%), #0A0C00"
    },
    {
      "id": "ink-overlay",
      "family": "overlay",
      "layers": [
        {
          "type": "linear",
          "angle": 90,
          "stops": [
            {
              "color": "ink",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "ink",
              "position": 25,
              "opacity": 1
            },
            {
              "color": "ink",
              "position": 70,
              "opacity": 0
            }
          ]
        }
      ],
      "base": null,
      "status": "pilot",
      "title": "Ink overlay",
      "description": "A solid ink edge fades into the image. Use when light text needs a quiet area beside the subject.",
      "textRule": "Place white text inside the opaque first quarter, or use a solid ink panel. Keep faces and important details beyond the fade.",
      "variable": "--ds-gradient-ink-overlay",
      "css": "linear-gradient(90deg, #0A0C00 0%, #0A0C00 25%, rgba(10, 12, 0, 0) 70%)"
    },
    {
      "id": "white-overlay",
      "family": "overlay",
      "layers": [
        {
          "type": "linear",
          "angle": 90,
          "stops": [
            {
              "color": "white",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "white",
              "position": 25,
              "opacity": 1
            },
            {
              "color": "white",
              "position": 70,
              "opacity": 0
            }
          ]
        }
      ],
      "base": null,
      "status": "pilot",
      "title": "White overlay",
      "description": "A solid white edge opens into the image. Use for an airy composition with dark lettering.",
      "textRule": "Place ink text inside the opaque first quarter, or use a solid white panel. Do not wash out skin, products or evidence.",
      "variable": "--ds-gradient-white-overlay",
      "css": "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 70%)"
    }
  ],
  "typeRoles": [
    {
      "id": "display",
      "family": "display",
      "minPx": 44,
      "maxPx": 76,
      "weight": 800,
      "lineHeight": 1.02,
      "trackingEm": -0.02,
      "measureCh": 20,
      "style": "normal",
      "name": "Opening headline",
      "usage": "One clear promise. Aim for two or three lines; edit before making the type smaller.",
      "sample": "Make room for better.",
      "css": "font-family: var(--6am-font-display, \"Big Shoulders\", Impact, sans-serif);\nfont-size: clamp(2.75rem, 1.892857rem + 3.809524vw, 4.75rem);\nfont-weight: 800;\nfont-style: normal;\nline-height: 1.02;\nletter-spacing: -0.02em;\nmax-width: 20ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "section",
      "family": "display",
      "minPx": 28,
      "maxPx": 40,
      "weight": 800,
      "lineHeight": 1.12,
      "trackingEm": -0.02,
      "measureCh": 28,
      "style": "normal",
      "name": "Section title",
      "usage": "Introduce the next subject. Keep visual size separate from semantic heading level.",
      "sample": "A website people can use.",
      "css": "font-family: var(--6am-font-display, \"Big Shoulders\", Impact, sans-serif);\nfont-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);\nfont-weight: 800;\nfont-style: normal;\nline-height: 1.12;\nletter-spacing: -0.02em;\nmax-width: 28ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "subheading",
      "family": "body",
      "minPx": 22,
      "maxPx": 28,
      "weight": 600,
      "lineHeight": 1.3,
      "trackingEm": 0,
      "measureCh": 40,
      "style": "normal",
      "name": "Subheading",
      "usage": "Explain a group of content or name a useful detail.",
      "sample": "Clear pages. A simpler next step.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: clamp(1.375rem, 1.214286rem + 0.714286vw, 1.75rem);\nfont-weight: 600;\nfont-style: normal;\nline-height: 1.3;\nletter-spacing: 0em;\nmax-width: 40ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "lead",
      "family": "body",
      "minPx": 18,
      "maxPx": 22,
      "weight": 400,
      "lineHeight": 1.5,
      "trackingEm": 0,
      "measureCh": 55,
      "style": "normal",
      "name": "Lead paragraph",
      "usage": "Bridge the headline and the detail. Keep it to a short paragraph.",
      "sample": "Help people understand your business and take the next step.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: clamp(1.125rem, 1.017857rem + 0.47619vw, 1.375rem);\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.5;\nletter-spacing: 0em;\nmax-width: 55ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "body",
      "family": "body",
      "minPx": 16,
      "maxPx": 16,
      "weight": 400,
      "lineHeight": 1.6,
      "trackingEm": 0,
      "measureCh": 65,
      "style": "normal",
      "name": "Body copy",
      "usage": "Use for explanations and continuous reading. Keep a comfortable line length.",
      "sample": "Your next customer needs to understand what you do and how to get in touch. Start with the information they need, then make the next step easy to find.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 1rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.6;\nletter-spacing: 0em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "label",
      "family": "body",
      "minPx": 16,
      "maxPx": 16,
      "weight": 600,
      "lineHeight": 1.4,
      "trackingEm": 0,
      "measureCh": 40,
      "style": "normal",
      "name": "Labels and actions",
      "usage": "Use sentence case and a clear action. Let labels wrap; keep form inputs at 16 px or more.",
      "sample": "Get a proposal",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 1rem;\nfont-weight: 600;\nfont-style: normal;\nline-height: 1.4;\nletter-spacing: 0em;\nmax-width: 40ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "caption",
      "family": "body",
      "minPx": 14,
      "maxPx": 14,
      "weight": 400,
      "lineHeight": 1.5,
      "trackingEm": 0,
      "measureCh": 65,
      "style": "normal",
      "name": "Caption",
      "usage": "Explain supporting details. Never hide essential instructions in small print.",
      "sample": "A working example, ready to review.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 0.875rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.5;\nletter-spacing: 0em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "metadata",
      "family": "mono",
      "minPx": 12,
      "maxPx": 12,
      "weight": 400,
      "lineHeight": 1.6,
      "trackingEm": 0.02,
      "measureCh": 65,
      "style": "normal",
      "name": "Metadata and code",
      "usage": "Reserve for versions, tokens and technical values. Do not set paragraphs in mono.",
      "sample": "VERSION 0.7.0 / #E3FF04",
      "css": "font-family: var(--6am-font-mono, \"Geist Mono\", monospace);\nfont-size: 0.75rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.6;\nletter-spacing: 0.02em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "accent",
      "family": "accent",
      "minPx": 28,
      "maxPx": 40,
      "weight": 500,
      "lineHeight": 1.2,
      "trackingEm": 0,
      "measureCh": 28,
      "style": "italic",
      "name": "Editorial accent",
      "usage": "Use a short italic phrase once in a composition. Keep the main message in the primary families.",
      "sample": "A little more human.",
      "css": "font-family: var(--6am-font-accent, \"Fraunces\", Georgia, serif);\nfont-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);\nfont-weight: 500;\nfont-style: italic;\nline-height: 1.2;\nletter-spacing: 0em;\nmax-width: 28ch;\noverflow-wrap: anywhere;"
    }
  ],
  "layout": {
    "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."
    }
  },
  "colors": {
    "ink": {
      "value": "#0A0C00",
      "description": "Dark foundation and primary text.",
      "status": "Approved"
    },
    "white": {
      "value": "#FFFFFF",
      "description": "Light surfaces and text on dark backgrounds.",
      "status": "Approved"
    },
    "lime": {
      "value": "#E3FF04",
      "description": "Primary actions, selection and brand highlights.",
      "status": "Approved"
    },
    "support": {
      "value": "#252525",
      "description": "Supporting dark surface.",
      "status": "Approved"
    },
    "paper": {
      "value": "#F4F4F0",
      "description": "Catalog workspace background.",
      "status": "Pilot"
    },
    "muted": {
      "value": "#60605A",
      "description": "Supporting text on light surfaces.",
      "status": "Pilot"
    },
    "line": {
      "value": "#D9D9D1",
      "description": "Visual separation; do not use as text.",
      "status": "Pilot"
    },
    "error": {
      "value": "#A12622",
      "description": "Error messages and outlines, always with explanatory text.",
      "status": "Pilot"
    }
  },
  "typography": {
    "display": {
      "family": "Big Shoulders",
      "fallback": "Impact, sans-serif",
      "weight": 800,
      "description": "Expressive headings and opening messages."
    },
    "body": {
      "family": "Onest",
      "fallback": "Arial, sans-serif",
      "weight": 400,
      "description": "Paragraphs, navigation, buttons and forms."
    },
    "accent": {
      "family": "Fraunces",
      "fallback": "Georgia, serif",
      "weight": 500,
      "description": "Occasional editorial emphasis, in italic."
    },
    "mono": {
      "family": "Geist Mono",
      "fallback": "monospace",
      "weight": 400,
      "description": "Versions, values and technical references."
    }
  },
  "spacing": {
    "unit": "px",
    "values": [
      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."
  }
}