{
  "$description": "SCRNSVRS brand palette – https://www.scrnsvrs.com/media-kit/",
  "color": {
    "brand": {
      "$type": "color",
      "ink": {
        "$value": "#030303",
        "$description": "The brand black: logo backgrounds, the app icon tile, text on lime."
      },
      "lime": {
        "$value": "#E8FC56",
        "$description": "The signature accent: primary buttons, highlights, links, focus rings, success states."
      },
      "lavender": {
        "$value": "#CCB6EB",
        "$description": "Secondary accent: glows, secondary cards, tags."
      },
      "coral": {
        "$value": "#F16058",
        "$description": "Eyebrow dots, keyboard focus outlines and error states."
      },
      "paper": {
        "$value": "#F9F8F3",
        "$description": "The brand white: light backgrounds for the black logo, print."
      }
    },
    "surface": {
      "$type": "color",
      "night": {
        "$value": "#050505",
        "$description": "Always-dark chapters, hero backgrounds, footer, the app window."
      },
      "panel-deep": {
        "$value": "#0B0B0C",
        "$description": "Alternating section bands and inset wells."
      },
      "surface": {
        "$value": "#111110",
        "$description": "The page background."
      },
      "panel": {
        "$value": "#141416",
        "$description": "Cards, tiles and panels on Night."
      },
      "tile": {
        "$value": "#161615",
        "$description": "Scene tiles in the app gallery."
      },
      "surface-raised": {
        "$value": "#1A1A18",
        "$description": "Raised cards on Surface (the media kit cards)."
      },
      "surface-sand": {
        "$value": "#1C1C1A",
        "$description": "Subtle fills and hover states on cards."
      },
      "track": {
        "$value": "#303033",
        "$description": "Inactive dots, tracks and rails."
      }
    },
    "text": {
      "$type": "color",
      "on-night": {
        "$value": "#FFFFFF",
        "$description": "Headlines and text on Night."
      },
      "text-primary": {
        "$value": "#F2F1EC",
        "$description": "Headings and strong text on Surface."
      },
      "text-secondary": {
        "$value": "#B6B5AF",
        "$description": "Running text."
      },
      "text-muted": {
        "$value": "#8E8D88",
        "$description": "Captions, metadata and helper text."
      },
      "hairline": {
        "$value": "#FFFFFF1F",
        "$description": "Borders and dividers (white at 12%)."
      }
    },
    "app": {
      "$type": "color",
      "icon-top": {
        "$value": "#1E1F23",
        "$description": "Top of the app icon gradient."
      },
      "icon-bottom": {
        "$value": "#030304",
        "$description": "Bottom of the app icon gradient."
      }
    },
    "tints": {
      "$type": "color",
      "lime-6": {
        "$value": "#E8FC560F",
        "$description": "Success panel fill."
      },
      "lime-8": {
        "$value": "#E8FC5614",
        "$description": "Soft lime glow."
      },
      "lime-12": {
        "$value": "#E8FC561F",
        "$description": "Lime icon well, soft glow."
      },
      "lime-25": {
        "$value": "#E8FC5640",
        "$description": "Lime hairline."
      },
      "lime-35": {
        "$value": "#E8FC5659",
        "$description": "Lime border."
      },
      "lime-40": {
        "$value": "#E8FC5666",
        "$description": "Success border."
      },
      "lime-60": {
        "$value": "#E8FC5699",
        "$description": "Strong lime border or glow."
      },
      "lavender-14": {
        "$value": "#CCB6EB24",
        "$description": "Lavender wash."
      },
      "lavender-20": {
        "$value": "#CCB6EB33",
        "$description": "Lavender glow."
      },
      "lavender-35": {
        "$value": "#CCB6EB59",
        "$description": "Lavender border."
      },
      "lavender-60": {
        "$value": "#CCB6EB99",
        "$description": "Gradient midpoint between lime and white."
      },
      "coral-60": {
        "$value": "#F1605899",
        "$description": "Destructive action border."
      },
      "white-8": {
        "$value": "#FFFFFF14",
        "$description": "Section hairline on Night."
      },
      "white-55": {
        "$value": "#FFFFFF8C",
        "$description": "Secondary text on Night."
      },
      "white-68": {
        "$value": "#FFFFFFAD",
        "$description": "Lead text on Night."
      }
    }
  },
  "role": {
    "$type": "color",
    "primary": {
      "$value": "{color.brand.lime}",
      "$description": "Primary action"
    },
    "success": {
      "$value": "{color.brand.lime}",
      "$description": "Success (sent, saved, done)"
    },
    "error": {
      "$value": "{color.brand.coral}",
      "$description": "Errors and invalid fields"
    },
    "focus": {
      "$value": "{color.brand.coral}",
      "$description": "Keyboard focus outline"
    },
    "background": {
      "$value": "{color.surface.surface}",
      "$description": "Page background"
    }
  },
  "font": {
    "$type": "fontFamily",
    "poppins": {
      "$value": [
        "Poppins",
        "system-ui",
        "sans-serif"
      ],
      "$description": "Headlines, buttons, labels"
    },
    "inter": {
      "$value": [
        "Inter",
        "system-ui",
        "sans-serif"
      ],
      "$description": "Body text, UI, captions"
    }
  },
  "radius": {
    "$type": "dimension",
    "sm": {
      "$value": "12px",
      "$description": "global.css --radius-sm (inputs, swatches)"
    },
    "lg": {
      "$value": "20px",
      "$description": "global.css --radius (cards)"
    },
    "xl": {
      "$value": "26px",
      "$description": "/creator/ reward tiles"
    },
    "full": {
      "$value": "999px",
      "$description": "global.css .btn (buttons, chips)"
    }
  },
  "spacing": {
    "$type": "dimension",
    "gutter-min": {
      "$value": "16px",
      "$description": "global.css --gutter clamp(16px, 4vw, 32px)"
    },
    "gutter-max": {
      "$value": "32px",
      "$description": "global.css --gutter clamp(16px, 4vw, 32px)"
    },
    "gap": {
      "$value": "16px",
      "$description": "card grids"
    },
    "card-padding": {
      "$value": "28px",
      "$description": "panels (CreatorForm .cform-done)"
    },
    "section-min": {
      "$value": "64px",
      "$description": "global.css --section clamp(64px, 10vw, 120px)"
    },
    "section-max": {
      "$value": "120px",
      "$description": "global.css --section clamp(64px, 10vw, 120px)"
    },
    "wrap-max": {
      "$value": "1320px",
      "$description": "global.css --wrap"
    },
    "header-offset": {
      "$value": "88px",
      "$description": "global.css scroll-padding-top"
    }
  }
}