{
  "version": 1,
  "$schema": "https://www.depths.studio/llms.txt",
  "generator": "Depths—www.depths.studio",
  "source": "https://www.depths.studio/",
  "preset": "soft",
  "presetName": "Soft",
  "light": {
    "angle": 90,
    "direction": {
      "x": 0,
      "y": 1
    }
  },
  "curves": {
    "distance": 1,
    "growth": 1.9,
    "blur": 2.6,
    "opacity": 7,
    "falloff": 0.95,
    "layers": 2
  },
  "tint": "000000",
  "darkStrategy": "sb",
  "levels": [
    {
      "level": 0,
      "css": "none",
      "cssDark": "none",
      "layers": []
    },
    {
      "level": 1,
      "css": "0px 1px 2.6px rgb(0 0 0 / 7%), 0px 0.4px 5.7px rgb(0 0 0 / 4.6%)",
      "cssDark": "0px 1px 2.6px rgb(0 0 0 / 10.5%), 0px 0.4px 5.7px rgb(0 0 0 / 6.9%)",
      "layers": [
        {
          "role": "key",
          "x": 0,
          "y": 1,
          "blur": 2.6,
          "spread": 0,
          "alpha": 0.07,
          "alphaDark": 0.105
        },
        {
          "role": "ambient",
          "x": 0,
          "y": 0.4,
          "blur": 5.7,
          "spread": 0,
          "alpha": 0.046,
          "alphaDark": 0.069
        }
      ]
    },
    {
      "level": 2,
      "css": "0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)",
      "cssDark": "0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%)",
      "layers": [
        {
          "role": "key",
          "x": 0,
          "y": 1.9,
          "blur": 4.9,
          "spread": 0,
          "alpha": 0.067,
          "alphaDark": 0.101
        },
        {
          "role": "ambient",
          "x": 0,
          "y": 0.7,
          "blur": 10.9,
          "spread": 0,
          "alpha": 0.043,
          "alphaDark": 0.065
        }
      ]
    },
    {
      "level": 3,
      "css": "0px 3.6px 9.4px rgb(0 0 0 / 6.3%), 0px 1.3px 20.6px rgb(0 0 0 / 4.1%)",
      "cssDark": "0px 3.6px 9.4px rgb(0 0 0 / 9.5%), 0px 1.3px 20.6px rgb(0 0 0 / 6.2%)",
      "layers": [
        {
          "role": "key",
          "x": 0,
          "y": 3.6,
          "blur": 9.4,
          "spread": 0,
          "alpha": 0.063,
          "alphaDark": 0.095
        },
        {
          "role": "ambient",
          "x": 0,
          "y": 1.3,
          "blur": 20.6,
          "spread": 0,
          "alpha": 0.041,
          "alphaDark": 0.062
        }
      ]
    },
    {
      "level": 4,
      "css": "0px 6.9px 17.8px rgb(0 0 0 / 6%), 0px 2.4px 39.2px rgb(0 0 0 / 3.9%)",
      "cssDark": "0px 6.9px 17.8px rgb(0 0 0 / 9%), 0px 2.4px 39.2px rgb(0 0 0 / 5.9%)",
      "layers": [
        {
          "role": "key",
          "x": 0,
          "y": 6.9,
          "blur": 17.8,
          "spread": 0,
          "alpha": 0.06,
          "alphaDark": 0.09
        },
        {
          "role": "ambient",
          "x": 0,
          "y": 2.4,
          "blur": 39.2,
          "spread": 0,
          "alpha": 0.039,
          "alphaDark": 0.059
        }
      ]
    },
    {
      "level": 5,
      "css": "0px 13px 33.9px rgb(0 0 0 / 5.7%), 0px 4.6px 74.5px rgb(0 0 0 / 3.7%)",
      "cssDark": "0px 13px 33.9px rgb(0 0 0 / 8.6%), 0px 4.6px 74.5px rgb(0 0 0 / 5.5%)",
      "layers": [
        {
          "role": "key",
          "x": 0,
          "y": 13,
          "blur": 33.9,
          "spread": 0,
          "alpha": 0.057,
          "alphaDark": 0.086
        },
        {
          "role": "ambient",
          "x": 0,
          "y": 4.6,
          "blur": 74.5,
          "spread": 0,
          "alpha": 0.037,
          "alphaDark": 0.055
        }
      ]
    }
  ],
  "tokens": [
    {
      "token": "--shadow-none",
      "key": "none",
      "level": 0,
      "role": "Flush with the surface",
      "category": "SURFACE",
      "css": "none",
      "cssDark": "none",
      "when": "Inputs, list rows, table cells—anything that belongs to the page rather than sitting on it.",
      "whenNot": "Don't use elevation to fix a contrast problem; that's a color decision."
    },
    {
      "token": "--shadow-raised",
      "key": "raised",
      "level": 1,
      "role": "Cards and buttons at rest",
      "category": "SURFACE",
      "css": "0px 1px 2.6px rgb(0 0 0 / 7%), 0px 0.4px 5.7px rgb(0 0 0 / 4.6%)",
      "cssDark": "0px 1px 2.6px rgb(0 0 0 / 10.5%), 0px 0.4px 5.7px rgb(0 0 0 / 6.9%)",
      "edgeLight": "1px solid rgb(0 0 0 / 7.5%)",
      "edgeDark": "1px solid rgb(255 255 255 / 7.5%)",
      "when": "The default for anything that reads as an object: cards, tiles, buttons.",
      "whenNot": "Not for nesting—a raised card inside a raised card flattens both."
    },
    {
      "token": "--shadow-hover",
      "key": "hover",
      "level": 2,
      "role": "The lifted state of anything interactive",
      "category": "SURFACE",
      "css": "0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)",
      "cssDark": "0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%)",
      "edgeLight": "1px solid rgb(0 0 0 / 9%)",
      "edgeDark": "1px solid rgb(255 255 255 / 9%)",
      "when": "On hover or focus of an element that is shadow-raised at rest, so the lift reads as one step up.",
      "whenNot": "Not as a resting state—if everything is lifted, nothing is."
    },
    {
      "token": "--shadow-sticky",
      "key": "sticky",
      "level": 2,
      "role": "Sticky headers and toolbars",
      "category": "OVERLAY",
      "css": "0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)",
      "cssDark": "0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%)",
      "edgeLight": "1px solid rgb(0 0 0 / 9%)",
      "edgeDark": "1px solid rgb(255 255 255 / 9%)",
      "when": "Bars that pin over scrolling content, the moment content actually passes beneath them.",
      "whenNot": "Not while the page sits at the top—a shadow over nothing announces machinery."
    },
    {
      "token": "--shadow-dropdown",
      "key": "dropdown",
      "level": 3,
      "role": "Menus, popovers, tooltips",
      "category": "OVERLAY",
      "css": "0px 3.6px 9.4px rgb(0 0 0 / 6.3%), 0px 1.3px 20.6px rgb(0 0 0 / 4.1%)",
      "cssDark": "0px 3.6px 9.4px rgb(0 0 0 / 9.5%), 0px 1.3px 20.6px rgb(0 0 0 / 6.2%)",
      "edgeLight": "1px solid rgb(0 0 0 / 10.5%)",
      "edgeDark": "1px solid rgb(255 255 255 / 10.5%)",
      "when": "Transient surfaces summoned from a control and dismissed by a click elsewhere.",
      "whenNot": "Not for dialogs that take over the page—that is shadow-modal's job."
    },
    {
      "token": "--shadow-modal",
      "key": "modal",
      "level": 4,
      "role": "Dialogs and sheets",
      "category": "OVERLAY",
      "css": "0px 6.9px 17.8px rgb(0 0 0 / 6%), 0px 2.4px 39.2px rgb(0 0 0 / 3.9%)",
      "cssDark": "0px 6.9px 17.8px rgb(0 0 0 / 9%), 0px 2.4px 39.2px rgb(0 0 0 / 5.9%)",
      "edgeLight": "1px solid rgb(0 0 0 / 12%)",
      "edgeDark": "1px solid rgb(255 255 255 / 12%)",
      "when": "Surfaces that block the page behind a scrim and hold focus until dismissed.",
      "whenNot": "Not for toasts—a modal shadow on a toast makes a notification feel like an interruption."
    },
    {
      "token": "--shadow-toast",
      "key": "toast",
      "level": 5,
      "role": "Toasts and floating notifications",
      "category": "FEEDBACK",
      "css": "0px 13px 33.9px rgb(0 0 0 / 5.7%), 0px 4.6px 74.5px rgb(0 0 0 / 3.7%)",
      "cssDark": "0px 13px 33.9px rgb(0 0 0 / 8.6%), 0px 4.6px 74.5px rgb(0 0 0 / 5.5%)",
      "edgeLight": "1px solid rgb(0 0 0 / 13.5%)",
      "edgeDark": "1px solid rgb(255 255 255 / 13.5%)",
      "when": "The top of the stack: transient messages that float over everything, including modals.",
      "whenNot": "Never on persistent chrome. The top level is loud because nothing lives there."
    },
    {
      "token": "--shadow-pressed",
      "key": "pressed",
      "level": "inset",
      "role": "Pressed wells and active insets",
      "category": "FEEDBACK",
      "css": "inset 0px 0.8px 2.5px rgb(0 0 0 / 9.1%)",
      "cssDark": "inset 0px 0.8px 2.5px rgb(0 0 0 / 13.7%)",
      "when": "Wells, active toggle tracks, pressed button states—surfaces pushed below the page.",
      "whenNot": "Not for disabled states; depressed and disabled are different messages."
    }
  ],
  "notes": {
    "darkMode": "Dark values boost every alpha x1.5 (capped at 0.85), and the optional --edge-* hairlines flip from ink to white. Even boosted, elevation on a dark surface is mostly carried by surface color—pair these tokens with a lightened surface ramp (https://www.ramps.studio/) rather than inventing stronger shadows.",
    "alphaUnits": "Layer alpha is 0-1 in this payload and a percentage inside the CSS strings; they are the same number.",
    "pressed": "shadow-pressed is an inset and deliberately outside the elevation scale: it derives from the base unit, not the growth curve, because a well does not get deeper when a dropdown gets higher."
  },
  "presets": [
    {
      "id": "soft",
      "name": "Soft",
      "blurb": "Diffuse and quiet—elevation you feel more than see.",
      "suits": "Product UI that wants depth without drama. The safe default."
    },
    {
      "id": "crisp",
      "name": "Crisp",
      "blurb": "Tight and close to the surface—edges you can point at.",
      "suits": "Dense interfaces and small components, where a diffuse shadow reads as blur."
    },
    {
      "id": "dramatic",
      "name": "Dramatic",
      "blurb": "Long throws and real darkness—a stage, not an office.",
      "suits": "Marketing surfaces and hero moments. Too loud for a settings page."
    },
    {
      "id": "hairline",
      "name": "Hairline",
      "blurb": "Barely-there shadows that lean on edges—flat design that still stacks.",
      "suits": "Interfaces that are mostly borders already; the shadow only breaks ties."
    }
  ],
  "docs": "https://www.depths.studio/llms.txt"
}