{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "locale": "en",
  "colorSpace": "sRGB",
  "colors": [
    {
      "key": "ink",
      "name": "Ink",
      "value": "#0A0C00",
      "on": "#FFFFFF",
      "role": "Dark foundation and primary text.",
      "status": "Approved",
      "rgb": [
        10,
        12,
        0
      ]
    },
    {
      "key": "white",
      "name": "White",
      "value": "#FFFFFF",
      "on": "#0A0C00",
      "role": "Light surfaces and text on dark backgrounds.",
      "status": "Approved",
      "rgb": [
        255,
        255,
        255
      ]
    },
    {
      "key": "lime",
      "name": "Lime",
      "value": "#E3FF04",
      "on": "#0A0C00",
      "role": "Primary actions, selection and brand highlights.",
      "status": "Approved",
      "rgb": [
        227,
        255,
        4
      ]
    },
    {
      "key": "support",
      "name": "Graphite",
      "value": "#252525",
      "on": "#FFFFFF",
      "role": "Supporting dark surface.",
      "status": "Approved",
      "rgb": [
        37,
        37,
        37
      ]
    },
    {
      "key": "paper",
      "name": "Paper",
      "value": "#F4F4F0",
      "on": "#0A0C00",
      "role": "Catalog workspace background.",
      "status": "Pilot",
      "rgb": [
        244,
        244,
        240
      ]
    },
    {
      "key": "muted",
      "name": "Secondary text",
      "value": "#60605A",
      "on": "#FFFFFF",
      "role": "Supporting text on light surfaces.",
      "status": "Pilot",
      "rgb": [
        96,
        96,
        90
      ]
    },
    {
      "key": "line",
      "name": "Divider",
      "value": "#D9D9D1",
      "on": "#0A0C00",
      "role": "Visual separation; do not use as text.",
      "status": "Pilot",
      "rgb": [
        217,
        217,
        209
      ]
    },
    {
      "key": "error",
      "name": "Error",
      "value": "#A12622",
      "on": "#FFFFFF",
      "role": "Error messages and outlines, always with explanatory text.",
      "status": "Pilot",
      "rgb": [
        161,
        38,
        34
      ]
    }
  ],
  "colorUsage": {
    "status": "pilot",
    "brandKeys": [
      "ink",
      "white",
      "lime",
      "support"
    ],
    "functionalKeys": [
      "paper",
      "muted",
      "line",
      "error"
    ],
    "logoAccent": {
      "value": "#C4E86B",
      "scope": "logo-only",
      "src": "/assets/img/logo/logo-6am-white.svg"
    },
    "print": {
      "status": "not-specified",
      "cmyk": null,
      "pantone": null,
      "profile": null
    },
    "contrast": {
      "standard": "WCAG 2.2",
      "normalAA": 4.5,
      "largeAA": 3,
      "essentialUI": 3,
      "normalAAA": 7,
      "largeAAA": 4.5
    },
    "pairings": [
      {
        "id": "reading",
        "foreground": "ink",
        "background": "white"
      },
      {
        "id": "action",
        "foreground": "ink",
        "background": "lime"
      },
      {
        "id": "depth",
        "foreground": "white",
        "background": "support"
      },
      {
        "id": "secondary",
        "foreground": "muted",
        "background": "paper"
      },
      {
        "id": "avoid-light",
        "foreground": "white",
        "background": "lime"
      },
      {
        "id": "avoid-dark",
        "foreground": "ink",
        "background": "support"
      }
    ],
    "recipes": [
      {
        "id": "everyday",
        "background": "white",
        "foreground": "ink",
        "accent": "lime",
        "shares": [
          {
            "key": "white",
            "percent": 70
          },
          {
            "key": "ink",
            "percent": 20
          },
          {
            "key": "lime",
            "percent": 10
          }
        ],
        "title": "Everyday clarity",
        "text": "Service pages, documents and forms. A light base gives the content room, while lime points to the next step.",
        "headline": "One clear next step.",
        "action": "Explore the service"
      },
      {
        "id": "depth",
        "background": "support",
        "foreground": "white",
        "accent": "lime",
        "shares": [
          {
            "key": "support",
            "percent": 70
          },
          {
            "key": "white",
            "percent": 20
          },
          {
            "key": "lime",
            "percent": 10
          }
        ],
        "title": "Depth with focus",
        "text": "Introductions, presentations and feature sections. White carries the message, graphite gives it structure and lime marks the action.",
        "headline": "Your work deserves to be seen.",
        "action": "Explore the solutions"
      },
      {
        "id": "campaign",
        "background": "lime",
        "foreground": "ink",
        "accent": "white",
        "shares": [
          {
            "key": "lime",
            "percent": 70
          },
          {
            "key": "ink",
            "percent": 20
          },
          {
            "key": "white",
            "percent": 10
          }
        ],
        "title": "A moment of impact",
        "text": "Social covers, short announcements and campaigns. Use an expressive block, then return to a neutral base for longer content.",
        "headline": "Make room for a good idea.",
        "action": "See the idea"
      }
    ],
    "ui": {
      "label": "02 / Colors",
      "title": "Lime draws attention. The base holds it.",
      "intro": "Four brand colors, each with a job. Black and white organize the reading, graphite adds depth and lime highlights what matters.",
      "brandTitle": "The palette that makes us recognizable.",
      "brandText": "Use the exact values. HEX and RGB describe the same sRGB color; tokens keep that choice consistent across the product.",
      "functionalTitle": "Tones that help the interface work.",
      "functionalText": "Paper, secondary text, dividers and error have specific jobs. They are in pilot and do not extend the campaign palette.",
      "copy": "Copy",
      "codeFormat": "Code format",
      "balanceTitle": "Match the intensity to the moment.",
      "balanceText": "Choose a direction to see how the palette can be balanced. These proportions are pilot starting points, not a compulsory formula for every screen.",
      "balanceNote": "The bars express the intended balance of color areas, excluding photography. Previews illustrate compositions; they are not measurements of those percentages.",
      "preview": "Composition preview",
      "pairsTitle": "Combinations you can start with.",
      "pairsText": "The right text color depends on its background. Compare these pairs, then check other combinations below.",
      "good": "Suitable for normal text",
      "bad": "Avoid for text",
      "pairConnector": "on",
      "checkerTitle": "Check before you publish.",
      "foreground": "Text or element",
      "background": "Background",
      "ratio": "Contrast ratio",
      "normal": "Normal text · AA",
      "large": "Large text · AA",
      "interface": "Essential elements · 3:1",
      "pass": "Pass",
      "fail": "Fail",
      "checkerText": "Use at least 4.5:1 for normal text. Large text needs 3:1: at least 24 px, or 18.67 px in bold. Visual details needed to identify controls and information need 3:1 against the relevant adjacent colors.",
      "checkerNote": "Calculated for two opaque, solid sRGB colors. Transparency, photos, gradients, focus and states need checks in their final context. A passing pair does not certify the accessibility of a page.",
      "sampleTitle": "Clarity in every detail.",
      "sampleBody": "A simple sentence helps you check readability.",
      "logoTitle": "Two greens. Different jobs.",
      "logoText": "Lime #E3FF04 is the accent for interfaces and communications. The green #C4E86B belongs to the existing logo and icon files. It is not a second accent color for buttons.",
      "logoNote": "Use the brand files without recoloring them. On the lime-background variant, the colon is white and the lettering is black. A logo color exception is not a rule for interface text.",
      "brandLime": "Brand lime",
      "logoGreen": "Logo asset green",
      "logoLink": "View variants and downloads",
      "meaningTitle": "Color helps. Meaning comes first.",
      "meaningText": "Reinforce a message that is already clear through words, symbols or position. Red should not be the only clue to an error; lime does not automatically mean success.",
      "errorLabel": "Email",
      "errorExample": "Enter a valid email address to continue.",
      "chartTitle": "Illustrative example · inquiries by channel",
      "chartNote": "Labels, values and outlines keep the chart understandable without relying on lime. These numbers are fictional.",
      "chartRows": [
        "Website",
        "Referral",
        "Social"
      ],
      "craftTitle": "Purposeful color. Solid by default.",
      "craftRules": [
        "Start with solid surfaces. When the composition needs depth, use the pilot gradient recipes on this page. New tint scales are not yet defined.",
        "In photos, preserve the natural colors of people and materials. Adjust the message background without turning the whole scene lime.",
        "Give lime one clear priority. Across a series, alternate expressive moments with neutral surfaces.",
        "The divider tone is decorative. For essential field and control boundaries, choose a color with sufficient contrast."
      ],
      "printTitle": "The screen is a reference. Print needs its own proof.",
      "digitalTitle": "Digital · defined",
      "digitalText": "HEX and RGB in sRGB are the reference values. Preserve the profile when exporting and check the result on the target device.",
      "printLabel": "Print · to be defined",
      "printText": "We do not yet have approved CMYK or Pantone equivalents. Do not automatically convert lime and publish the result as official. Screen brightness can look very different on paper.",
      "printSteps": [
        "Agree on paper, finish, printing process and color profile with the supplier.",
        "Compare a physical proof with the brand intent and record adjustments.",
        "Record the validated formula and material in the system before reusing them."
      ],
      "resourcesTitle": "One palette for people and AI.",
      "json": "Rules and combinations · JSON",
      "css": "Tokens · CSS",
      "copyGuide": "Copy color guide for AI",
      "statusNote": "The four brand colors remain approved. Proportions, functional tones and production guidance are in pilot; print equivalents remain pending."
    },
    "gradients": {
      "status": "pilot",
      "imageSrc": "/assets/design/6am/photography/ceramics-workshop-ai.png",
      "presets": [
        {
          "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."
        },
        {
          "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."
        },
        {
          "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."
        },
        {
          "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."
        },
        {
          "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."
        },
        {
          "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."
        }
      ],
      "ui": {
        "title": "A little light. A clear purpose.",
        "intro": "Gradients add depth to the 6am palette. Start with solid surfaces, then choose one of these six recipes when a transition helps the composition.",
        "status": "Pilot recipes · digital sRGB",
        "linearTitle": "Linear gradients",
        "linearText": "Two colors, one direction. Keep these transitions broad and simple.",
        "fieldTitle": "Light fields",
        "fieldText": "Layered radial gradients create depth in two dimensions. Use one field per composition and give the message its own solid surface.",
        "overlayTitle": "Overlays for images",
        "overlayText": "Use an opacity fade to make room for the message. It sits above the image; it is not a color filter for the entire scene.",
        "stops": "Color stops",
        "opacity": "opacity",
        "base": "Base",
        "transparent": "Transparent",
        "copyCss": "Copy CSS",
        "copyPrompt": "Copy AI instructions",
        "chooseOverlay": "Choose an overlay",
        "showOverlay": "Show overlay",
        "hideOverlay": "View original",
        "overlayNote": "Use the photographic compositions below to see opacity, message placement and the official logo together.",
        "demoTitle": "Room for a useful idea.",
        "demoBody": "Give the message space. Keep the work in view.",
        "rulesTitle": "Keep the effect in its place.",
        "rules": [
          "Use only these recipes and their published stops. Interpolated shades are part of the effect, not new brand tokens.",
          "Keep logos, icons, body text, buttons, forms and charts in solid colors. The illustration styles keep their own flat-color rules.",
          "Do not combine several gradients, add rainbow colors or animate the field. Let one treatment carry the composition.",
          "Measure contrast behind every text area in the final composition. Checking only the start and end colors is not enough, especially over images.",
          "Use an opaque panel when contrast is uncertain. Preview mobile crops and exported files; print use still requires a physical proof."
        ],
        "resources": "Reusable recipes",
        "resourceText": "Copy a complete CSS background or a brief for your AI. The JSON includes layers, stops, opacity and resolved CSS; the CSS download includes all six variables.",
        "json": "Gradient recipes · JSON",
        "css": "Gradient tokens · CSS",
        "promptLead": "Create a 6am composition using this exact gradient recipe.",
        "promptEnd": "Apply the gradient in the layout or compositing step using the CSS below. Do not ask an image model to reproduce exact HEX values or draw the logo. Use the original logo asset from the brand catalog. Preserve the specified stops, opacity and layer order. Keep ordinary UI elements in solid colors. Validate the final crop and text contrast; this pilot recipe is not an accessibility or print approval."
      },
      "photoExamples": {
        "status": "pilot",
        "angle": 90,
        "opaqueUntil": 36,
        "transparentFrom": 65,
        "contentLeft": 6,
        "contentWidth": 28,
        "mobileBreakpoint": 640,
        "variants": [
          {
            "id": "photo-ink",
            "color": "ink",
            "foreground": "white",
            "logoSurface": "dark",
            "title": "Dark overlay"
          },
          {
            "id": "photo-white",
            "color": "white",
            "foreground": "ink",
            "logoSurface": "light",
            "title": "Light overlay"
          }
        ],
        "ui": {
          "title": "Photography, gradient, message.",
          "intro": "A gradual fade creates a quiet space for the message while keeping the professional and their work in view. Choose a light or dark composition to see the matching logo.",
          "choose": "Photo composition",
          "original": "View original photo",
          "composed": "View composition",
          "headline": "Good work.\nIn focus.",
          "body": "Space for the people behind every good idea.",
          "recipe": "Composition recipe · HTML + CSS",
          "copy": "Copy photo composition",
          "notes": [
            "Keep the message and logo within the opaque area. The transition starts after the reading area, away from the face.",
            "Fade the overlay to transparency; preserve natural skin tones, hands and the object being made. This is a local overlay, not a duotone treatment.",
            "Keep the original logo proportions and a clear margin around it. Use the white-lettering asset on ink and the dark-lettering asset on white.",
            "On narrow layouts, put the message on a solid surface below the photo. Review the crop and contrast again when changing the image."
          ],
          "spec": "Left to right · opacity",
          "mobile": "Below 640 px of available width, the message moves below the photograph.",
          "geometry": "This photo composition extends the opaque area to 36% and fades out at 65%. It is a separate layout recipe from the basic overlay tokens.",
          "linkColors": "Explore gradient recipes",
          "linkPhotography": "Explore photography direction"
        }
      }
    }
  },
  "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%)"
    }
  ],
  "photoGradients": [
    {
      "id": "photo-ink",
      "color": "ink",
      "foreground": "white",
      "logoSurface": "dark",
      "title": "Dark overlay",
      "status": "pilot",
      "layers": [
        {
          "type": "linear",
          "angle": 90,
          "stops": [
            {
              "color": "ink",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "ink",
              "position": 36,
              "opacity": 1
            },
            {
              "color": "ink",
              "position": 65,
              "opacity": 0
            }
          ]
        }
      ],
      "css": "linear-gradient(90deg, #0A0C00 0%, #0A0C00 36%, rgba(10, 12, 0, 0) 65%)",
      "background": "#0A0C00",
      "textColor": "#FFFFFF",
      "logoSrc": "/assets/img/logo/logo-6am-white.svg",
      "imageSrc": "/assets/design/6am/photography/ceramics-workshop-ai.png",
      "imageOrigin": "ai-generated",
      "imageStatus": "demonstration",
      "message": {
        "headline": "Good work.\nIn focus.",
        "body": "Space for the people behind every good idea."
      },
      "guidance": [
        "Keep the message and logo within the opaque area. The transition starts after the reading area, away from the face.",
        "Fade the overlay to transparency; preserve natural skin tones, hands and the object being made. This is a local overlay, not a duotone treatment.",
        "Keep the original logo proportions and a clear margin around it. Use the white-lettering asset on ink and the dark-lettering asset on white.",
        "On narrow layouts, put the message on a solid surface below the photo. Review the crop and contrast again when changing the image."
      ],
      "disclosure": "AI-generated demonstration scene. It does not depict a real 6am client, team member or project.",
      "contentLeft": 6,
      "contentWidth": 28,
      "mobileBreakpoint": 640
    },
    {
      "id": "photo-white",
      "color": "white",
      "foreground": "ink",
      "logoSurface": "light",
      "title": "Light overlay",
      "status": "pilot",
      "layers": [
        {
          "type": "linear",
          "angle": 90,
          "stops": [
            {
              "color": "white",
              "position": 0,
              "opacity": 1
            },
            {
              "color": "white",
              "position": 36,
              "opacity": 1
            },
            {
              "color": "white",
              "position": 65,
              "opacity": 0
            }
          ]
        }
      ],
      "css": "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 36%, rgba(255, 255, 255, 0) 65%)",
      "background": "#FFFFFF",
      "textColor": "#0A0C00",
      "logoSrc": "/assets/img/logo/logo-6am-dark.svg",
      "imageSrc": "/assets/design/6am/photography/ceramics-workshop-ai.png",
      "imageOrigin": "ai-generated",
      "imageStatus": "demonstration",
      "message": {
        "headline": "Good work.\nIn focus.",
        "body": "Space for the people behind every good idea."
      },
      "guidance": [
        "Keep the message and logo within the opaque area. The transition starts after the reading area, away from the face.",
        "Fade the overlay to transparency; preserve natural skin tones, hands and the object being made. This is a local overlay, not a duotone treatment.",
        "Keep the original logo proportions and a clear margin around it. Use the white-lettering asset on ink and the dark-lettering asset on white.",
        "On narrow layouts, put the message on a solid surface below the photo. Review the crop and contrast again when changing the image."
      ],
      "disclosure": "AI-generated demonstration scene. It does not depict a real 6am client, team member or project.",
      "contentLeft": 6,
      "contentWidth": 28,
      "mobileBreakpoint": 640
    }
  ],
  "pairings": [
    {
      "id": "reading",
      "foreground": "ink",
      "background": "white",
      "ratio": 19.709154298093093,
      "normalAA": true,
      "largeAA": true,
      "essentialUI": true,
      "normalAAA": true,
      "largeAAA": true
    },
    {
      "id": "action",
      "foreground": "ink",
      "background": "lime",
      "ratio": 17.4303366878286,
      "normalAA": true,
      "largeAA": true,
      "essentialUI": true,
      "normalAAA": true,
      "largeAAA": true
    },
    {
      "id": "depth",
      "foreground": "white",
      "background": "support",
      "ratio": 15.328417894601541,
      "normalAA": true,
      "largeAA": true,
      "essentialUI": true,
      "normalAAA": true,
      "largeAAA": true
    },
    {
      "id": "secondary",
      "foreground": "muted",
      "background": "paper",
      "ratio": 5.739697382763991,
      "normalAA": true,
      "largeAA": true,
      "essentialUI": true,
      "normalAAA": false,
      "largeAAA": true
    },
    {
      "id": "avoid-light",
      "foreground": "white",
      "background": "lime",
      "ratio": 1.1307385881912289,
      "normalAA": false,
      "largeAA": false,
      "essentialUI": false,
      "normalAAA": false,
      "largeAAA": false
    },
    {
      "id": "avoid-dark",
      "foreground": "ink",
      "background": "support",
      "ratio": 1.2857918171081693,
      "normalAA": false,
      "largeAA": false,
      "essentialUI": false,
      "normalAAA": false,
      "largeAAA": false
    }
  ]
}