{
 "name": "NUBAYIN Brand Kit",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "cinema",
    "name": "Cinema"
   },
   {
    "id": "reading",
    "name": "Reading"
   }
  ],
  "tokens": [
   {
    "name": "canvas",
    "value": {
     "cinema": "#0B0F13",
     "reading": "#F2F4F6"
    },
    "usage": "Page ground. Cinema is kohl-950, for what we show (film, music, title acts). Reading is gypsum, for what we explain (about, press, credits, long text)."
   },
   {
    "name": "surface",
    "value": {
     "cinema": "#13161B",
     "reading": "#FBFCFD"
    },
    "usage": "Panels, cards and bands set one step off the canvas."
   },
   {
    "name": "raised",
    "value": {
     "cinema": "#1B2025",
     "reading": "#FBFCFD"
    },
    "usage": "Menus and anything above a surface. Never a shadow: the system has none."
   },
   {
    "name": "rule",
    "value": {
     "cinema": "#292E34",
     "reading": "#D5D8DB"
    },
    "usage": "Hairlines and 1px dividers. Decorative only: a control border uses text-3, which meets 3:1."
   },
   {
    "name": "text",
    "value": {
     "cinema": "#F2F4F6",
     "reading": "#0B0F13"
    },
    "usage": "Primary text on canvas, surface and raised (at least 14.88:1 on cinema, 17.44:1 on reading)."
   },
   {
    "name": "text-2",
    "value": {
     "cinema": "#BABEC3",
     "reading": "#43484F"
    },
    "usage": "Secondary text and lead paragraphs on canvas, surface and raised (at least 8.78:1 cinema, 8.36:1 reading)."
   },
   {
    "name": "text-3",
    "value": {
     "cinema": "#9A9FA5",
     "reading": "#5E646B"
    },
    "usage": "Metadata, captions, eyebrows and control borders on canvas, surface and raised (at least 6.15:1 cinema, 5.42:1 reading)."
   },
   {
    "name": "accent",
    "value": {
     "cinema": "#8CBAF0",
     "reading": "#2561A5"
    },
    "usage": "Links only (lāzaward). Text on canvas, surface and raised (at least 8.12:1 cinema, 5.72:1 reading). Never a fill."
   },
   {
    "name": "accent-strong",
    "value": {
     "cinema": "#B4D4F9",
     "reading": "#1B4D88"
    },
    "usage": "Link hover and pressed text. Never a fill."
   },
   {
    "name": "focus",
    "value": {
     "cinema": "#639BDF",
     "reading": "#2561A5"
    },
    "usage": "Keyboard focus: a solid 2px ring with a 3px offset, on every surface (at least 5.69:1 cinema, 5.72:1 reading)."
   },
   {
    "name": "point",
    "value": {
     "cinema": "#639BDF",
     "reading": "#2561A5"
    },
    "usage": "The mark's point and the harakat of the two-colour lockup. Lāzaward marks what has been made clear: it never fills a button, never glows, never forms a gradient."
   },
   {
    "name": "drench",
    "value": "#2561A5",
    "usage": "One studio moment per page at most: a full-bleed lāzaward-600 band. Text on it is on-drench (5.72:1)."
   },
   {
    "name": "on-drench",
    "value": "#F2F4F6",
    "usage": "Text and the one-colour mark on a drench band."
   },
   {
    "name": "success",
    "value": {
     "cinema": "#83D494",
     "reading": "#137738"
    },
    "usage": "Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on success-tint (at least 8.83:1 cinema, 4.98:1 reading)."
   },
   {
    "name": "success-tint",
    "value": {
     "cinema": "#102816",
     "reading": "#E5F5E7"
    },
    "usage": "Background behind success messages."
   },
   {
    "name": "warning",
    "value": {
     "cinema": "#EDB161",
     "reading": "#905C01"
    },
    "usage": "Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on warning-tint (at least 8.45:1 cinema, 4.95:1 reading)."
   },
   {
    "name": "warning-tint",
    "value": {
     "cinema": "#2F1E06",
     "reading": "#FBEEDE"
    },
    "usage": "Background behind warning messages."
   },
   {
    "name": "danger",
    "value": {
     "cinema": "#FFA196",
     "reading": "#A04038"
    },
    "usage": "Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on danger-tint (at least 8.32:1 cinema, 5.57:1 reading)."
   },
   {
    "name": "danger-tint",
    "value": {
     "cinema": "#341916",
     "reading": "#FFEBE8"
    },
    "usage": "Background behind danger messages."
   },
   {
    "name": "kohl-1000",
    "value": "#06080B",
    "usage": "Deepest kohl, for letterbox bars only."
   },
   {
    "name": "kohl-950",
    "value": "#0B0F13",
    "usage": "Kohl. The cinema canvas."
   },
   {
    "name": "kohl-900",
    "value": "#13161B",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-850",
    "value": "#1B2025",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-800",
    "value": "#292E34",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-700",
    "value": "#43484F",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-600",
    "value": "#5E646B",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-500",
    "value": "#7B8187",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-400",
    "value": "#9A9FA5",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-300",
    "value": "#BABEC3",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-200",
    "value": "#D5D8DB",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-100",
    "value": "#E6E8EB",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "kohl-50",
    "value": "#F2F4F6",
    "usage": "Gypsum. The reading canvas and light text on cinema."
   },
   {
    "name": "kohl-0",
    "value": "#FBFCFD",
    "usage": "Kohl ramp, tinted toward galena blue-grey (OKLCH hue 255)."
   },
   {
    "name": "lazaward-950",
    "value": "#091931",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-900",
    "value": "#0F294C",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-800",
    "value": "#143A6A",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-700",
    "value": "#1B4D88",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-600",
    "value": "#2561A5",
    "usage": "Lāzaward on light grounds (the point, links, focus). Built on the lapis stone."
   },
   {
    "name": "lazaward-500",
    "value": "#3E7CC5",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-400",
    "value": "#639BDF",
    "usage": "Lāzaward on dark grounds (the point, focus)."
   },
   {
    "name": "lazaward-300",
    "value": "#8CBAF0",
    "usage": "Links on cinema."
   },
   {
    "name": "lazaward-200",
    "value": "#B4D4F9",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-100",
    "value": "#D9EAFD",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   },
   {
    "name": "lazaward-50",
    "value": "#EEF6FE",
    "usage": "Lāzaward ramp. Use it only through the role tokens."
   }
  ]
 },
 "type": {
  "fonts": [],
  "families": {
   "display": "\"Kufam\", \"Noto Kufi Arabic\", system-ui, sans-serif",
   "text": "\"Noto Serif\", \"Noto Naskh Arabic\", Georgia, serif",
   "arabic": "\"Noto Naskh Arabic\", \"Noto Serif\", Georgia, serif"
  },
  "groups": [
   {
    "name": "Display",
    "family": "display",
    "styles": [
     {
      "name": "display-xl",
      "fontSize": "144px",
      "lineHeight": 0.95,
      "fontWeight": 400,
      "letterSpacing": "-0.02em",
      "sample": "We make clear",
      "usage": "The meeting title and title cards. On screens it is clamp(56px, 11vw, 144px)."
     },
     {
      "name": "display-l",
      "fontSize": "72px",
      "lineHeight": 0.98,
      "fontWeight": 400,
      "letterSpacing": "-0.02em",
      "sample": "A Quiet Return",
      "usage": "Section openers and posters. On screens clamp(44px, 6vw, 72px)."
     },
     {
      "name": "title",
      "fontSize": "39px",
      "lineHeight": 1.1,
      "fontWeight": 400,
      "letterSpacing": "-0.015em",
      "sample": "Show the work first",
      "usage": "Page and card titles."
     },
     {
      "name": "heading",
      "fontSize": "25px",
      "lineHeight": 1.2,
      "fontWeight": 500,
      "letterSpacing": "-0.005em",
      "sample": "Title acts",
      "usage": "Subsections."
     },
     {
      "name": "label",
      "fontSize": "14px",
      "lineHeight": 1.2,
      "fontWeight": 500,
      "letterSpacing": "0.02em",
      "sample": "Watch the film",
      "usage": "Buttons and controls."
     },
     {
      "name": "eyebrow",
      "fontSize": "12px",
      "lineHeight": 1.3,
      "fontWeight": 500,
      "letterSpacing": "0.12em",
      "sample": "NOW SHOWING",
      "usage": "Set in uppercase in text-3, with the point beside it."
     },
     {
      "name": "credit",
      "fontSize": "14px",
      "lineHeight": 1.5,
      "fontWeight": 400,
      "fontStyle": "italic",
      "sample": "Directed by",
      "usage": "Film credits: the role in Kufam italic, the name in Kufam 500."
     }
    ]
   },
   {
    "name": "Text",
    "family": "text",
    "styles": [
     {
      "name": "lede",
      "fontSize": "21px",
      "lineHeight": 1.55,
      "fontWeight": 400,
      "sample": "A studio named we make clear should reveal, not decorate.",
      "usage": "Opening paragraphs, in text-2."
     },
     {
      "name": "body",
      "fontSize": "17px",
      "lineHeight": 1.6,
      "fontWeight": 400,
      "sample": "Faces are lit, and the light has a source.",
      "usage": "Reading text, at most 65 characters a line."
     },
     {
      "name": "caption",
      "fontSize": "13px",
      "lineHeight": 1.5,
      "fontWeight": 400,
      "family": "display",
      "letterSpacing": "0.015em",
      "sample": "Photograph: Amman, 2026",
      "usage": "Captions and small print, in Kufam, in text-3."
     }
    ]
   },
   {
    "name": "Arabic",
    "family": "arabic",
    "styles": [
     {
      "name": "ar-display",
      "fontSize": "161px",
      "lineHeight": 1.4,
      "fontWeight": 500,
      "family": "display",
      "sample": "نُبَيِّن",
      "usage": "Arabic beside display-xl: 1.12 times the Latin size, line height 1.4 so the harakat clear. Never letter-spaced."
     },
     {
      "name": "ar-title",
      "fontSize": "44px",
      "lineHeight": 1.4,
      "fontWeight": 500,
      "family": "display",
      "sample": "نُبَيِّن",
      "usage": "Arabic beside title."
     },
     {
      "name": "ar-body",
      "fontSize": "19px",
      "lineHeight": 1.8,
      "fontWeight": 400,
      "sample": "نُبَيِّن",
      "usage": "Arabic reading text in Noto Naskh Arabic, 1.12 times body, line height 1.8. Written by a native writer, never machine-translated."
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Hairline gaps."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Tight stacks."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Label to field."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Minimum side gutter on phones."
   },
   {
    "name": "space-5",
    "value": "24px",
    "usage": "Card padding."
   },
   {
    "name": "space-6",
    "value": "32px",
    "usage": "Between groups."
   },
   {
    "name": "space-7",
    "value": "48px",
    "usage": "Between blocks."
   },
   {
    "name": "space-8",
    "value": "64px",
    "usage": "Section padding on phones."
   },
   {
    "name": "space-9",
    "value": "96px",
    "usage": "Section padding on laptops."
   },
   {
    "name": "space-10",
    "value": "128px",
    "usage": "Hero padding."
   },
   {
    "name": "section-gap",
    "value": "136px",
    "usage": "The largest section gap. On screens clamp(64px, 10vw, 136px)."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-0",
    "value": "0",
    "usage": "Every corner, everywhere: frames are sharp cuts."
   },
   {
    "name": "radius-avatar",
    "value": "50%",
    "usage": "Social avatar crops only. Nothing else is round."
   }
  ]
 },
 "duration": {
  "tokens": [
   {
    "name": "dur-fast",
    "value": "120ms",
    "usage": "Hover and press."
   },
   {
    "name": "dur-state",
    "value": "200ms",
    "usage": "State changes."
   },
   {
    "name": "dur-layout",
    "value": "320ms",
    "usage": "Layout changes and the dots toggle."
   },
   {
    "name": "dur-reveal",
    "value": "480ms",
    "usage": "The focus pull. Up to 700ms on a hero."
   }
  ]
 },
 "easing": {
  "tokens": [
   {
    "name": "ease-out",
    "value": "cubic-bezier(0, 0, 0.2, 1)",
    "usage": "Things arriving."
   },
   {
    "name": "ease-in",
    "value": "cubic-bezier(0.4, 0, 1, 1)",
    "usage": "Things leaving."
   },
   {
    "name": "ease-reveal",
    "value": "cubic-bezier(0.2, 0, 0, 1)",
    "usage": "The focus pull."
   }
  ]
 },
 "frame": {
  "tokens": [
   {
    "name": "frame-scope",
    "value": "2.39 / 1",
    "usage": "Heroes and title cards."
   },
   {
    "name": "frame-wide",
    "value": "16 / 9",
    "usage": "Video and stills."
   },
   {
    "name": "frame-poster",
    "value": "2 / 3",
    "usage": "Posters and key art."
   },
   {
    "name": "frame-portrait",
    "value": "4 / 5",
    "usage": "Portraits and social posts."
   }
  ]
 }
}