{
  "name": "SCRNSVRS",
  "source": "https://www.scrnsvrs.com/media-kit/",
  "flattenedOn": "#050505",
  "groups": [
    {
      "id": "brand",
      "title": "Brand",
      "colors": [
        {
          "id": "ink",
          "name": "Ink",
          "hex": "#030303",
          "rgb": [
            3,
            3,
            3
          ],
          "alpha": 1,
          "css": "rgb(3 3 3)",
          "hsl": "hsl(0 0% 1%)",
          "oklch": "oklch(9.7% 0 0)",
          "flattened": "#030303",
          "use": "The brand black: logo backgrounds, the app icon tile, text on lime."
        },
        {
          "id": "lime",
          "name": "Lime",
          "hex": "#E8FC56",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 1,
          "css": "rgb(232 252 86)",
          "hsl": "hsl(67 97% 66%)",
          "oklch": "oklch(94.7% 0.185 115.9)",
          "flattened": "#E8FC56",
          "use": "The signature accent: primary buttons, highlights, links, focus rings, success states."
        },
        {
          "id": "lavender",
          "name": "Lavender",
          "hex": "#CCB6EB",
          "rgb": [
            204,
            182,
            235
          ],
          "alpha": 1,
          "css": "rgb(204 182 235)",
          "hsl": "hsl(265 57% 82%)",
          "oklch": "oklch(81.3% 0.077 303.7)",
          "flattened": "#CCB6EB",
          "use": "Secondary accent: glows, secondary cards, tags."
        },
        {
          "id": "coral",
          "name": "Coral",
          "hex": "#F16058",
          "rgb": [
            241,
            96,
            88
          ],
          "alpha": 1,
          "css": "rgb(241 96 88)",
          "hsl": "hsl(3 85% 65%)",
          "oklch": "oklch(67.4% 0.18 26.2)",
          "flattened": "#F16058",
          "use": "Eyebrow dots, keyboard focus outlines and error states."
        },
        {
          "id": "paper",
          "name": "Paper",
          "hex": "#F9F8F3",
          "rgb": [
            249,
            248,
            243
          ],
          "alpha": 1,
          "css": "rgb(249 248 243)",
          "hsl": "hsl(50 33% 96%)",
          "oklch": "oklch(97.9% 0.007 97.4)",
          "flattened": "#F9F8F3",
          "use": "The brand white: light backgrounds for the black logo, print."
        }
      ]
    },
    {
      "id": "surface",
      "title": "Surfaces",
      "colors": [
        {
          "id": "night",
          "name": "Night",
          "hex": "#050505",
          "rgb": [
            5,
            5,
            5
          ],
          "alpha": 1,
          "css": "rgb(5 5 5)",
          "hsl": "hsl(0 0% 2%)",
          "oklch": "oklch(11.5% 0 0)",
          "flattened": "#050505",
          "use": "Always-dark chapters, hero backgrounds, footer, the app window."
        },
        {
          "id": "panel-deep",
          "name": "Deep panel",
          "hex": "#0B0B0C",
          "rgb": [
            11,
            11,
            12
          ],
          "alpha": 1,
          "css": "rgb(11 11 12)",
          "hsl": "hsl(240 4% 5%)",
          "oklch": "oklch(15% 0.002 286.1)",
          "flattened": "#0B0B0C",
          "use": "Alternating section bands and inset wells."
        },
        {
          "id": "surface",
          "name": "Surface",
          "hex": "#111110",
          "rgb": [
            17,
            17,
            16
          ],
          "alpha": 1,
          "css": "rgb(17 17 16)",
          "hsl": "hsl(60 3% 6%)",
          "oklch": "oklch(17.7% 0.002 106.6)",
          "flattened": "#111110",
          "use": "The page background."
        },
        {
          "id": "panel",
          "name": "Panel",
          "hex": "#141416",
          "rgb": [
            20,
            20,
            22
          ],
          "alpha": 1,
          "css": "rgb(20 20 22)",
          "hsl": "hsl(240 5% 8%)",
          "oklch": "oklch(19.2% 0.004 286)",
          "flattened": "#141416",
          "use": "Cards, tiles and panels on Night."
        },
        {
          "id": "tile",
          "name": "Tile",
          "hex": "#161615",
          "rgb": [
            22,
            22,
            21
          ],
          "alpha": 1,
          "css": "rgb(22 22 21)",
          "hsl": "hsl(60 2% 8%)",
          "oklch": "oklch(20% 0.002 106.6)",
          "flattened": "#161615",
          "use": "Scene tiles in the app gallery."
        },
        {
          "id": "surface-raised",
          "name": "Surface raised",
          "hex": "#1A1A18",
          "rgb": [
            26,
            26,
            24
          ],
          "alpha": 1,
          "css": "rgb(26 26 24)",
          "hsl": "hsl(60 4% 10%)",
          "oklch": "oklch(21.7% 0.004 106.7)",
          "flattened": "#1A1A18",
          "use": "Raised cards on Surface (the media kit cards)."
        },
        {
          "id": "surface-sand",
          "name": "Surface sand",
          "hex": "#1C1C1A",
          "rgb": [
            28,
            28,
            26
          ],
          "alpha": 1,
          "css": "rgb(28 28 26)",
          "hsl": "hsl(60 4% 11%)",
          "oklch": "oklch(22.6% 0.004 106.7)",
          "flattened": "#1C1C1A",
          "use": "Subtle fills and hover states on cards."
        },
        {
          "id": "track",
          "name": "Track",
          "hex": "#303033",
          "rgb": [
            48,
            48,
            51
          ],
          "alpha": 1,
          "css": "rgb(48 48 51)",
          "hsl": "hsl(240 3% 19%)",
          "oklch": "oklch(31% 0.005 286.1)",
          "flattened": "#303033",
          "use": "Inactive dots, tracks and rails."
        }
      ]
    },
    {
      "id": "text",
      "title": "Text & lines",
      "colors": [
        {
          "id": "on-night",
          "name": "White",
          "hex": "#FFFFFF",
          "rgb": [
            255,
            255,
            255
          ],
          "alpha": 1,
          "css": "rgb(255 255 255)",
          "hsl": "hsl(0 0% 100%)",
          "oklch": "oklch(100% 0 0)",
          "flattened": "#FFFFFF",
          "use": "Headlines and text on Night."
        },
        {
          "id": "text-primary",
          "name": "Text primary",
          "hex": "#F2F1EC",
          "rgb": [
            242,
            241,
            236
          ],
          "alpha": 1,
          "css": "rgb(242 241 236)",
          "hsl": "hsl(50 19% 94%)",
          "oklch": "oklch(95.8% 0.007 97.4)",
          "flattened": "#F2F1EC",
          "use": "Headings and strong text on Surface."
        },
        {
          "id": "text-secondary",
          "name": "Text secondary",
          "hex": "#B6B5AF",
          "rgb": [
            182,
            181,
            175
          ],
          "alpha": 1,
          "css": "rgb(182 181 175)",
          "hsl": "hsl(51 5% 70%)",
          "oklch": "oklch(77.2% 0.008 98.9)",
          "flattened": "#B6B5AF",
          "use": "Running text."
        },
        {
          "id": "text-muted",
          "name": "Text muted",
          "hex": "#8E8D88",
          "rgb": [
            142,
            141,
            136
          ],
          "alpha": 1,
          "css": "rgb(142 141 136)",
          "hsl": "hsl(50 3% 55%)",
          "oklch": "oklch(64.3% 0.007 97.4)",
          "flattened": "#8E8D88",
          "use": "Captions, metadata and helper text."
        },
        {
          "id": "hairline",
          "name": "Hairline white 12%",
          "hex": "#FFFFFF1F",
          "rgb": [
            255,
            255,
            255
          ],
          "alpha": 0.12,
          "css": "rgb(255 255 255 / 0.12)",
          "hsl": "hsl(0 0% 100% / 12%)",
          "oklch": "oklch(100% 0 0 / 12%)",
          "flattened": "#232323",
          "use": "Borders and dividers (white at 12%)."
        }
      ]
    },
    {
      "id": "app",
      "title": "App icon",
      "colors": [
        {
          "id": "icon-top",
          "name": "Icon top",
          "hex": "#1E1F23",
          "rgb": [
            30,
            31,
            35
          ],
          "alpha": 1,
          "css": "rgb(30 31 35)",
          "hsl": "hsl(228 8% 13%)",
          "oklch": "oklch(24% 0.008 274.6)",
          "flattened": "#1E1F23",
          "use": "Top of the app icon gradient."
        },
        {
          "id": "icon-bottom",
          "name": "Icon bottom",
          "hex": "#030304",
          "rgb": [
            3,
            3,
            4
          ],
          "alpha": 1,
          "css": "rgb(3 3 4)",
          "hsl": "hsl(240 14% 1%)",
          "oklch": "oklch(9.8% 0.004 285.6)",
          "flattened": "#030304",
          "use": "Bottom of the app icon gradient."
        }
      ]
    },
    {
      "id": "tints",
      "title": "Tints",
      "colors": [
        {
          "id": "lime-6",
          "name": "Lime 6%",
          "hex": "#E8FC560F",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.06,
          "css": "rgb(232 252 86 / 0.06)",
          "hsl": "hsl(67 97% 66% / 6%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 6%)",
          "flattened": "#13140A",
          "use": "Success panel fill."
        },
        {
          "id": "lime-8",
          "name": "Lime 8%",
          "hex": "#E8FC5614",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.08,
          "css": "rgb(232 252 86 / 0.08)",
          "hsl": "hsl(67 97% 66% / 8%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 8%)",
          "flattened": "#17190B",
          "use": "Soft lime glow."
        },
        {
          "id": "lime-12",
          "name": "Lime 12%",
          "hex": "#E8FC561F",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.12,
          "css": "rgb(232 252 86 / 0.12)",
          "hsl": "hsl(67 97% 66% / 12%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 12%)",
          "flattened": "#20230F",
          "use": "Lime icon well, soft glow."
        },
        {
          "id": "lime-25",
          "name": "Lime 25%",
          "hex": "#E8FC5640",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.25,
          "css": "rgb(232 252 86 / 0.25)",
          "hsl": "hsl(67 97% 66% / 25%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 25%)",
          "flattened": "#3E4319",
          "use": "Lime hairline."
        },
        {
          "id": "lime-35",
          "name": "Lime 35%",
          "hex": "#E8FC5659",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.35,
          "css": "rgb(232 252 86 / 0.35)",
          "hsl": "hsl(67 97% 66% / 35%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 35%)",
          "flattened": "#545B21",
          "use": "Lime border."
        },
        {
          "id": "lime-40",
          "name": "Lime 40%",
          "hex": "#E8FC5666",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.4,
          "css": "rgb(232 252 86 / 0.4)",
          "hsl": "hsl(67 97% 66% / 40%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 40%)",
          "flattened": "#606825",
          "use": "Success border."
        },
        {
          "id": "lime-60",
          "name": "Lime 60%",
          "hex": "#E8FC5699",
          "rgb": [
            232,
            252,
            86
          ],
          "alpha": 0.6,
          "css": "rgb(232 252 86 / 0.6)",
          "hsl": "hsl(67 97% 66% / 60%)",
          "oklch": "oklch(94.7% 0.185 115.9 / 60%)",
          "flattened": "#8D9936",
          "use": "Strong lime border or glow."
        },
        {
          "id": "lavender-14",
          "name": "Lavender 14%",
          "hex": "#CCB6EB24",
          "rgb": [
            204,
            182,
            235
          ],
          "alpha": 0.14,
          "css": "rgb(204 182 235 / 0.14)",
          "hsl": "hsl(265 57% 82% / 14%)",
          "oklch": "oklch(81.3% 0.077 303.7 / 14%)",
          "flattened": "#211E25",
          "use": "Lavender wash."
        },
        {
          "id": "lavender-20",
          "name": "Lavender 20%",
          "hex": "#CCB6EB33",
          "rgb": [
            204,
            182,
            235
          ],
          "alpha": 0.2,
          "css": "rgb(204 182 235 / 0.2)",
          "hsl": "hsl(265 57% 82% / 20%)",
          "oklch": "oklch(81.3% 0.077 303.7 / 20%)",
          "flattened": "#2D2833",
          "use": "Lavender glow."
        },
        {
          "id": "lavender-35",
          "name": "Lavender 35%",
          "hex": "#CCB6EB59",
          "rgb": [
            204,
            182,
            235
          ],
          "alpha": 0.35,
          "css": "rgb(204 182 235 / 0.35)",
          "hsl": "hsl(265 57% 82% / 35%)",
          "oklch": "oklch(81.3% 0.077 303.7 / 35%)",
          "flattened": "#4B4356",
          "use": "Lavender border."
        },
        {
          "id": "lavender-60",
          "name": "Lavender 60%",
          "hex": "#CCB6EB99",
          "rgb": [
            204,
            182,
            235
          ],
          "alpha": 0.6,
          "css": "rgb(204 182 235 / 0.6)",
          "hsl": "hsl(265 57% 82% / 60%)",
          "oklch": "oklch(81.3% 0.077 303.7 / 60%)",
          "flattened": "#7C6F8F",
          "use": "Gradient midpoint between lime and white."
        },
        {
          "id": "coral-60",
          "name": "Coral 60%",
          "hex": "#F1605899",
          "rgb": [
            241,
            96,
            88
          ],
          "alpha": 0.6,
          "css": "rgb(241 96 88 / 0.6)",
          "hsl": "hsl(3 85% 65% / 60%)",
          "oklch": "oklch(67.4% 0.18 26.2 / 60%)",
          "flattened": "#933C37",
          "use": "Destructive action border."
        },
        {
          "id": "white-8",
          "name": "White 8%",
          "hex": "#FFFFFF14",
          "rgb": [
            255,
            255,
            255
          ],
          "alpha": 0.08,
          "css": "rgb(255 255 255 / 0.08)",
          "hsl": "hsl(0 0% 100% / 8%)",
          "oklch": "oklch(100% 0 0 / 8%)",
          "flattened": "#191919",
          "use": "Section hairline on Night."
        },
        {
          "id": "white-55",
          "name": "White 55%",
          "hex": "#FFFFFF8C",
          "rgb": [
            255,
            255,
            255
          ],
          "alpha": 0.55,
          "css": "rgb(255 255 255 / 0.55)",
          "hsl": "hsl(0 0% 100% / 55%)",
          "oklch": "oklch(100% 0 0 / 55%)",
          "flattened": "#8F8F8F",
          "use": "Secondary text on Night."
        },
        {
          "id": "white-68",
          "name": "White 68%",
          "hex": "#FFFFFFAD",
          "rgb": [
            255,
            255,
            255
          ],
          "alpha": 0.68,
          "css": "rgb(255 255 255 / 0.68)",
          "hsl": "hsl(0 0% 100% / 68%)",
          "oklch": "oklch(100% 0 0 / 68%)",
          "flattened": "#AFAFAF",
          "use": "Lead text on Night."
        }
      ]
    }
  ],
  "roles": {
    "primary": "lime",
    "success": "lime",
    "error": "coral",
    "focus": "coral",
    "background": "surface"
  }
}