{
  "name": "Keith de Alwis",
  "version": 1,
  "meta": {
    "source": "brand.de-alwis.com brand book (26 Sept 2026) + de-alwis.com style.css (Sept 2026) + KDA 'Geometric Harmony' logo sheet + HomeHub technology-stack deck (4 Oct 2026) for slides and diagrams"
  },
  "color": {
    "themes": [
      {
        "id": "dark",
        "name": "Night (site default)"
      },
      {
        "id": "light",
        "name": "Paper"
      }
    ],
    "tokens": [
      {
        "name": "bg",
        "value": {
          "dark": "#080e10",
          "light": "#f4f7f6"
        },
        "usage": "Page ground. The site is dark-first (`--bg`, theme-color #080e10); Paper is for documents, decks and light placements of the light lockup."
      },
      {
        "name": "surface",
        "value": {
          "dark": "#0b1314",
          "light": "#ffffff"
        },
        "usage": "Raised panels on `bg`: role cards, article cards, testimonial blocks."
      },
      {
        "name": "surface-glass",
        "value": {
          "dark": "#101d20e8",
          "light": "#ffffffeb"
        },
        "usage": "Solid fallback for the glass panel (contact dialog, coming-soon) where backdrop-filter is unsupported."
      },
      {
        "name": "field",
        "value": {
          "dark": "#050c0f",
          "light": "#ffffff"
        },
        "usage": "Input and textarea fill."
      },
      {
        "name": "media",
        "value": "#0b1314",
        "usage": "Fixed dark ground behind imagery (role cards, article images) in both themes, so the white card title over the scrim always holds contrast."
      },
      {
        "name": "ink",
        "value": {
          "dark": "#edf5f3",
          "light": "#080e10"
        },
        "usage": "Headlines, the brand name, input text. 17.5:1 on `bg` (dark), 18:1 (light)."
      },
      {
        "name": "ink-strong",
        "value": {
          "dark": "#dfede8",
          "light": "#101a1c"
        },
        "usage": "Bold names inside lists (experience rows, expertise list `b`) and active card titles."
      },
      {
        "name": "text",
        "value": {
          "dark": "#aebfbe",
          "light": "#34403f"
        },
        "usage": "Paragraph copy on `bg` and `surface`. 10:1 dark, 10:1 light."
      },
      {
        "name": "text-muted",
        "value": {
          "dark": "#9dacac",
          "light": "#4a5857"
        },
        "usage": "Secondary copy, footer meta, the second (muted) half of a headline (`h1 em`). 8.3:1 dark, 6.9:1 light."
      },
      {
        "name": "text-subtle",
        "value": {
          "dark": "#839d9a",
          "light": "#566463"
        },
        "usage": "Eyebrows, detail numbers, captions, counters. 6.7:1 dark, 5.7:1 light, small caps text only, never body."
      },
      {
        "name": "line",
        "value": {
          "dark": "#ffffff26",
          "light": "#080e1024"
        },
        "usage": "Hairline rules: section markers, list dividers, detail tops (`--line`). Decorative, never the only boundary of a control."
      },
      {
        "name": "line-strong",
        "value": {
          "dark": "#69807e",
          "light": "#7d8c8a"
        },
        "usage": "Neutral underline for text links not using the accent line; 1px control borders that must hold 3:1 (4.6:1 dark, 3.25:1 light)."
      },
      {
        "name": "accent",
        "value": {
          "dark": "#4bffa5",
          "light": "#047a47"
        },
        "usage": "Mint: the site's one signal colour (`--accent`, sampled from the original de-alwis.com). Link arrows, hover state, active rail tick, progress bar, focus ring. Light theme uses the deepened mint so it holds 5:1 as text on Paper."
      },
      {
        "name": "accent-soft",
        "value": {
          "dark": "#72dea9",
          "light": "#0b6e45"
        },
        "usage": "Mint words inside headlines (`.mint-word`), counters, eyebrows on glass, primary button fill (dark). 11.8:1 on `bg` dark; 5.9:1 light."
      },
      {
        "name": "accent-phrase",
        "value": {
          "dark": "#9adbb9",
          "light": "#0a6a42"
        },
        "usage": "A supporting phrase in mint inside paragraph copy (`.mint-phrase`). Use once per block."
      },
      {
        "name": "accent-tag",
        "value": {
          "dark": "#8fbea5",
          "light": "#2f6b50"
        },
        "usage": "Tag lines under role panels (`Strategy · Operating models · Delivery`)."
      },
      {
        "name": "accent-line",
        "value": {
          "dark": "#4bffa566",
          "light": "#047a4766"
        },
        "usage": "Underline of text links, big links and the contact link (`--accent-line`); focus border on fields."
      },
      {
        "name": "accent-tint",
        "value": {
          "dark": "#4bffa514",
          "light": "#047a470d"
        },
        "usage": "Fill behind the one focal category on a slide or diagram (MVP scope, the step that matters), always with a 1px `accent` border. 8% mint on Night, 5% deep mint on Paper. Never a page or card fill."
      },
      {
        "name": "on-accent",
        "value": {
          "dark": "#0c211a",
          "light": "#ffffff"
        },
        "usage": "Label on a filled accent button: #0c211a on `accent-soft` = 10.2:1 (dark); white on `accent` = 5.4:1 (light)."
      },
      {
        "name": "focus",
        "value": {
          "dark": "#4bffa5",
          "light": "#047a47"
        },
        "usage": "Focus-visible outline, 2px solid, offset 7px on links, 4px on buttons. ≥5:1 on every ground."
      },
      {
        "name": "logo-mint",
        "value": "#5ef9c9",
        "usage": "Logo spectrum: top-left of the K. Graphic use only (gradients, cover blocks); never text on Paper."
      },
      {
        "name": "logo-cyan",
        "value": "#00f0fe",
        "usage": "Logo spectrum: the luminous centre of all three letterforms."
      },
      {
        "name": "logo-green",
        "value": "#05f58a",
        "usage": "Logo spectrum: the foot of the D bowl. Sits closest to the site `accent`."
      },
      {
        "name": "logo-blue",
        "value": "#1774fe",
        "usage": "Logo spectrum: the foot of the A and the reverse panel's deep end."
      },
      {
        "name": "logo-cobalt",
        "value": "#0065f0",
        "usage": "Logo spectrum: the shadowed top of the D stem."
      },
      {
        "name": "logo-lime",
        "value": "#e6fdcb",
        "usage": "Logo spectrum: the highlight at the apex of the A. Tiny amounts only."
      },
      {
        "name": "panel-start",
        "value": "#72f3d4",
        "usage": "Reverse-lockup panel gradient, top-left stop (with `panel-end` at bottom-right). White logo sits on this panel only."
      },
      {
        "name": "panel-end",
        "value": "#1f5df8",
        "usage": "Reverse-lockup panel gradient, bottom-right stop."
      },
      {
        "name": "danger",
        "value": {
          "dark": "#ff9a7a",
          "light": "#b3401c"
        },
        "usage": "Form error text and field border (added: the site has no error styling yet). Always paired with a written message; orange-red differs from `accent` in lightness and hue."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "Manrope, \"DM Sans\", system-ui, sans-serif",
      "body": "\"DM Sans\", system-ui, sans-serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display-closing",
            "fontSize": "110px",
            "lineHeight": 1.08,
            "fontWeight": 300,
            "letterSpacing": "-0.06em",
            "sample": "What could we make possible?",
            "usage": "Closing CTA headline only. clamp(60px, 7.3vw, 110px)."
          },
          {
            "name": "display-xl",
            "fontSize": "100px",
            "lineHeight": 1.08,
            "fontWeight": 300,
            "letterSpacing": "-0.06em",
            "sample": "Real-world technology.",
            "usage": "Page hero h1. clamp(60px, 6.15vw, 100px); 48–77px under 800px."
          },
          {
            "name": "display-l",
            "fontSize": "78px",
            "lineHeight": 1.08,
            "fontWeight": 300,
            "letterSpacing": "-0.06em",
            "sample": "See the whole. Move the parts.",
            "usage": "Chapter h2. clamp(49px, 5vw, 78px)."
          },
          {
            "name": "display-m",
            "fontSize": "62px",
            "lineHeight": 1.15,
            "fontWeight": 300,
            "letterSpacing": "-0.06em",
            "sample": "Let's talk.",
            "usage": "Dialog and glass-panel headings. clamp(42px, 5vw, 62px)."
          },
          {
            "name": "heading",
            "fontSize": "48px",
            "lineHeight": 1.15,
            "fontWeight": 300,
            "letterSpacing": "-0.055em",
            "sample": "Many roles. One connected perspective.",
            "usage": "In-section headings (practice, notebook). clamp(28px, 3.1vw, 48px)."
          },
          {
            "name": "brand",
            "fontSize": "25px",
            "lineHeight": 1.2,
            "fontWeight": 500,
            "letterSpacing": "-1px",
            "sample": "Keith De Alwis",
            "usage": "Header name when the logo image is not used."
          }
        ]
      },
      {
        "name": "Titles",
        "family": "display",
        "styles": [
          {
            "name": "title-l",
            "fontSize": "32px",
            "lineHeight": 1.2,
            "fontWeight": 300,
            "letterSpacing": "-0.04em",
            "sample": "Ascendancy IQ / Building the AI-native organisation",
            "usage": "Large titles: document headings, slide sub-headings, panel titles on wide layouts."
          },
          {
            "name": "title-m",
            "fontSize": "24px",
            "lineHeight": 1.3,
            "fontWeight": 300,
            "letterSpacing": "-0.03em",
            "sample": "Shared foundations. Wider possibility.",
            "usage": "Medium titles: section openers inside documents, closing-bottom h3."
          },
          {
            "name": "title-card",
            "fontSize": "22px",
            "lineHeight": 1.26,
            "fontWeight": 400,
            "letterSpacing": "-0.035em",
            "sample": "CTO / Technical co-founder",
            "usage": "Titles set over imagery in role cards (Manrope 400 so it holds over the scrim)."
          },
          {
            "name": "title",
            "fontSize": "18px",
            "lineHeight": 1.4,
            "fontWeight": 400,
            "letterSpacing": "-0.025em",
            "sample": "Shared foundations. Wider possibility.",
            "usage": "h3 inside detail blocks."
          }
        ]
      },
      {
        "name": "Text",
        "family": "body",
        "styles": [
          {
            "name": "body-l",
            "fontSize": "18px",
            "lineHeight": 1.8,
            "fontWeight": 300,
            "sample": "I work across business and technology, connecting the decisions, teams and delivery that move transformation forward.",
            "usage": "Long-form reading: articles, proposals, document body on Paper."
          },
          {
            "name": "lead",
            "fontSize": "17px",
            "lineHeight": 1.8,
            "fontWeight": 300,
            "sample": "For 20+ years I've helped global organisations turn complex change into real-world results.",
            "usage": "Hero introduction paragraph."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": 1.8,
            "fontWeight": 300,
            "sample": "Today, I work at the intersection of strategy, technology and AI.",
            "usage": "Default paragraph. Light 300 is the house weight."
          },
          {
            "name": "body-s",
            "fontSize": "14px",
            "lineHeight": 1.8,
            "fontWeight": 300,
            "sample": "Connecting technology with the practical realities of government.",
            "usage": "Detail blocks, dialog intros, card excerpts."
          },
          {
            "name": "list-strong",
            "fontSize": "15px",
            "lineHeight": 1.45,
            "fontWeight": 500,
            "letterSpacing": "-0.01em",
            "sample": "Telenor Health",
            "usage": "Names in experience rows and expertise lists, in `ink-strong`."
          },
          {
            "name": "link",
            "fontSize": "14px",
            "lineHeight": 1.4,
            "fontWeight": 400,
            "sample": "Explore my world ↓",
            "usage": "Text links, nav, button labels."
          },
          {
            "name": "link-big",
            "fontSize": "30px",
            "lineHeight": 1.3,
            "fontWeight": 300,
            "sample": "Let's talk ↗",
            "usage": "The one big closing link per page."
          }
        ]
      },
      {
        "name": "Labels",
        "family": "body",
        "styles": [
          {
            "name": "eyebrow",
            "fontSize": "12px",
            "lineHeight": 1.7,
            "fontWeight": 400,
            "letterSpacing": "0.16em",
            "sample": "01 / THE INTELLIGENT ORGANISATION",
            "usage": "Uppercase section markers and eyebrows, in `text-subtle`."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": 1.6,
            "fontWeight": 400,
            "letterSpacing": "0.04em",
            "sample": "Dubai, UAE · Working across borders",
            "usage": "Meta lines, counters, object labels."
          },
          {
            "name": "micro",
            "fontSize": "10px",
            "lineHeight": 1.6,
            "fontWeight": 400,
            "letterSpacing": "0.19em",
            "sample": "A CONNECTION STARTS HERE",
            "usage": "Uppercase eyebrow on glass dialogs only."
          }
        ]
      },
      {
        "name": "Slides",
        "family": "display",
        "styles": [
          {
            "name": "slide-display",
            "fontSize": "64px",
            "lineHeight": 1.12,
            "fontWeight": 300,
            "letterSpacing": "-0.06em",
            "sample": "Technology stack.",
            "usage": "Cover title on a 1280 × 720 slide. Two lines: first in `ink`, second in `text-muted`."
          },
          {
            "name": "slide-title",
            "fontSize": "36px",
            "lineHeight": 1.1,
            "fontWeight": 300,
            "letterSpacing": "-0.04em",
            "sample": "Six layers. One backbone, from the MVP onwards.",
            "usage": "The two-beat title on every content slide: lead in `ink`, turn in `text-muted`. One line."
          },
          {
            "name": "slide-lead",
            "family": "body",
            "fontSize": "16px",
            "lineHeight": 1.5,
            "fontWeight": 300,
            "sample": "What we build first: a household's paperwork becomes a knowledge graph.",
            "usage": "One-sentence intro under a slide title, in `text`."
          },
          {
            "name": "slide-node-l",
            "fontSize": "16px",
            "lineHeight": 1.25,
            "fontWeight": 400,
            "letterSpacing": "-0.02em",
            "sample": "Application services",
            "usage": "Row labels in a layer grid, step names in a pipeline, cover contents."
          },
          {
            "name": "slide-node",
            "fontSize": "14px",
            "lineHeight": 1.3,
            "fontWeight": 400,
            "letterSpacing": "-0.01em",
            "sample": "Knowledge graph",
            "usage": "Cell and store names in diagrams, row labels in a comparison."
          },
          {
            "name": "slide-sub",
            "family": "body",
            "fontSize": "12px",
            "lineHeight": 1.35,
            "fontWeight": 300,
            "sample": "Upload · scan · forward",
            "usage": "Sublabels under a node, in `text-muted`; items separated with `·`. Also footer meta in `text-subtle`."
          },
          {
            "name": "slide-label",
            "family": "body",
            "fontSize": "10px",
            "lineHeight": 1.4,
            "fontWeight": 400,
            "letterSpacing": "0.12em",
            "sample": "CHUNKS + VECTORS",
            "usage": "Uppercase connector labels on diagram lines, in `text-subtle` (or `accent` on the one focal path)."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Base unit. Icon-to-label nudges."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Tight gaps: meter segments, tag clusters."
      },
      {
        "name": "space-3",
        "value": "14px",
        "usage": "List-row vertical padding, small inline gaps."
      },
      {
        "name": "space-4",
        "value": "20px",
        "usage": "Form field gaps, rail spacing, card inner inset."
      },
      {
        "name": "space-5",
        "value": "28px",
        "usage": "Headline bottom margin, paragraph block spacing."
      },
      {
        "name": "space-6",
        "value": "38px",
        "usage": "Nav item gap; control size (38px round buttons)."
      },
      {
        "name": "space-7",
        "value": "44px",
        "usage": "Glass panel padding."
      },
      {
        "name": "space-8",
        "value": "60px",
        "usage": "Two-column panel gap."
      },
      {
        "name": "space-9",
        "value": "80px",
        "usage": "Headline block offset from the section marker."
      },
      {
        "name": "space-10",
        "value": "145px",
        "usage": "Scene top padding (clears the fixed header and section marker)."
      },
      {
        "name": "gutter",
        "value": "7%",
        "usage": "Page side gutter (left 7%, right 8%); 10% / 11% above 1500px; 6–7% on mobile."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-0",
        "value": "0",
        "usage": "Links and underlined CTAs, flush, no box."
      },
      {
        "name": "radius-xs",
        "value": "2px",
        "usage": "Role cards, small square controls."
      },
      {
        "name": "radius-sm",
        "value": "3px",
        "usage": "Buttons, inputs, the motion toggle."
      },
      {
        "name": "radius-md",
        "value": "5px",
        "usage": "Tooltips."
      },
      {
        "name": "radius-lg",
        "value": "14px",
        "usage": "Glass contact panel."
      },
      {
        "name": "radius-xl",
        "value": "22px",
        "usage": "Glass announcement panel; app-icon tile."
      },
      {
        "name": "radius-round",
        "value": "50%",
        "usage": "Round icon controls (38px) and the close button."
      }
    ]
  },
  "shadow": {
    "note": "Shadows are deep and soft: objects float in the dark field; there are no crisp drop shadows.",
    "tokens": [
      {
        "name": "shadow-card",
        "value": "0 10px 35px #00000022",
        "usage": "Resting role/article card."
      },
      {
        "name": "shadow-card-active",
        "value": "0 16px 40px #00000055, 0 0 24px #4bffa508",
        "usage": "Active or hovered card, adds the faint mint halo."
      },
      {
        "name": "shadow-glass",
        "value": "0 32px 90px #00000066, 0 8px 24px #00000033, inset 0 1px 0 #ffffff42, inset 0 -1px 0 #00000099",
        "usage": "Glass panels: outer depth plus the engraved top highlight."
      },
      {
        "name": "shadow-field",
        "value": "inset 0 2px 5px #00000055, 0 1px 0 #ffffff16",
        "usage": "Inset well of inputs on glass."
      },
      {
        "name": "shadow-button",
        "value": "inset 0 1px #eafff299, inset 0 -1px #143a2555, 0 4px 12px #00000033",
        "usage": "Primary mint button."
      }
    ]
  },
  "layout": {
    "note": "Measures and breakpoints lifted from the live stylesheet.",
    "tokens": [
      {
        "name": "measure-hero",
        "value": "740px",
        "usage": "Max width of hero copy."
      },
      {
        "name": "measure-chapter",
        "value": "490px",
        "usage": "Chapter copy column (42% wide, max 490px; 550px above 1500px)."
      },
      {
        "name": "measure-text",
        "value": "440px",
        "usage": "Paragraph max width inside a chapter."
      },
      {
        "name": "measure-dialog",
        "value": "580px",
        "usage": "Contact dialog width."
      },
      {
        "name": "breakpoint-mobile",
        "value": "800px",
        "usage": "Below: nav collapses, chapters stack, headline clamps shrink."
      },
      {
        "name": "breakpoint-wide",
        "value": "1500px",
        "usage": "Above: gutters widen to 10% / 11%."
      },
      {
        "name": "slide-width",
        "value": "1280px",
        "usage": "Slide and diagram canvas width. Every deck is 16:9 at 1280 × 720; export at 2× or 4×."
      },
      {
        "name": "slide-height",
        "value": "720px",
        "usage": "Slide and diagram canvas height."
      },
      {
        "name": "slide-gutter",
        "value": "40px",
        "usage": "Side gutter on slides; header, footer rule and content all align to it."
      },
      {
        "name": "slide-label-col",
        "value": "192px",
        "usage": "Width of the row-label column in a layer grid (number + name + caption)."
      }
    ]
  }
}