Tokens

Every value. One source.

Generated from tokens.json. Load tokens.css and use the custom properties; never paste raw values.

Colour

Token	Night (site default)	Paper	Use
`bg`	`#080e10`	`#f4f7f6`	Page ground. The site is dark-first (`--bg`, theme-color #080e10); Paper is for documents, decks and light placements of the light lockup.
`surface`	`#0b1314`	`#ffffff`	Raised panels on `bg`: role cards, article cards, testimonial blocks.
`surface-glass`	`#101d20e8`	`#ffffffeb`	Solid fallback for the glass panel (contact dialog, coming-soon) where backdrop-filter is unsupported.
`field`	`#050c0f`	`#ffffff`	Input and textarea fill.
`media`	`#0b1314`	`#0b1314`	Fixed dark ground behind imagery (role cards, article images) in both themes, so the white card title over the scrim always holds contrast.
`ink`	`#edf5f3`	`#080e10`	Headlines, the brand name, input text. 17.5:1 on `bg` (dark), 18:1 (light).
`ink-strong`	`#dfede8`	`#101a1c`	Bold names inside lists (experience rows, expertise list `b`) and active card titles.
`text`	`#aebfbe`	`#34403f`	Paragraph copy on `bg` and `surface`. 10:1 dark, 10:1 light.
`text-muted`	`#9dacac`	`#4a5857`	Secondary copy, footer meta, the second (muted) half of a headline (`h1 em`). 8.3:1 dark, 6.9:1 light.
`text-subtle`	`#839d9a`	`#566463`	Eyebrows, detail numbers, captions, counters. 6.7:1 dark, 5.7:1 light, small caps text only, never body.
`line`	`#ffffff26`	`#080e1024`	Hairline rules: section markers, list dividers, detail tops (`--line`). Decorative, never the only boundary of a control.
`line-strong`	`#69807e`	`#7d8c8a`	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).
`accent`	`#4bffa5`	`#047a47`	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.
`accent-soft`	`#72dea9`	`#0b6e45`	Mint words inside headlines (`.mint-word`), counters, eyebrows on glass, primary button fill (dark). 11.8:1 on `bg` dark; 5.9:1 light.
`accent-phrase`	`#9adbb9`	`#0a6a42`	A supporting phrase in mint inside paragraph copy (`.mint-phrase`). Use once per block.
`accent-tag`	`#8fbea5`	`#2f6b50`	Tag lines under role panels (`Strategy · Operating models · Delivery`).
`accent-line`	`#4bffa566`	`#047a4766`	Underline of text links, big links and the contact link (`--accent-line`); focus border on fields.
`accent-tint`	`#4bffa514`	`#047a470d`	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.
`on-accent`	`#0c211a`	`#ffffff`	Label on a filled accent button: #0c211a on `accent-soft` = 10.2:1 (dark); white on `accent` = 5.4:1 (light).
`focus`	`#4bffa5`	`#047a47`	Focus-visible outline, 2px solid, offset 7px on links, 4px on buttons. ≥5:1 on every ground.
`logo-mint`	`#5ef9c9`	`#5ef9c9`	Logo spectrum: top-left of the K. Graphic use only (gradients, cover blocks); never text on Paper.
`logo-cyan`	`#00f0fe`	`#00f0fe`	Logo spectrum: the luminous centre of all three letterforms.
`logo-green`	`#05f58a`	`#05f58a`	Logo spectrum: the foot of the D bowl. Sits closest to the site `accent`.
`logo-blue`	`#1774fe`	`#1774fe`	Logo spectrum: the foot of the A and the reverse panel's deep end.
`logo-cobalt`	`#0065f0`	`#0065f0`	Logo spectrum: the shadowed top of the D stem.
`logo-lime`	`#e6fdcb`	`#e6fdcb`	Logo spectrum: the highlight at the apex of the A. Tiny amounts only.
`panel-start`	`#72f3d4`	`#72f3d4`	Reverse-lockup panel gradient, top-left stop (with `panel-end` at bottom-right). White logo sits on this panel only.
`panel-end`	`#1f5df8`	`#1f5df8`	Reverse-lockup panel gradient, bottom-right stop.
`danger`	`#ff9a7a`	`#b3401c`	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.

Display

display-closing Manrope 300 · 110px / 1.08 · -0.06em

What could we make possible?

Closing CTA headline only. clamp(60px, 7.3vw, 110px).

display-xl Manrope 300 · 100px / 1.08 · -0.06em

Real-world technology.

Page hero h1. clamp(60px, 6.15vw, 100px); 48–77px under 800px.

display-l Manrope 300 · 78px / 1.08 · -0.06em

See the whole. Move the parts.

Chapter h2. clamp(49px, 5vw, 78px).

display-m Manrope 300 · 62px / 1.15 · -0.06em

Let's talk.

Dialog and glass-panel headings. clamp(42px, 5vw, 62px).

heading Manrope 300 · 48px / 1.15 · -0.055em

Many roles. One connected perspective.

In-section headings (practice, notebook). clamp(28px, 3.1vw, 48px).

brand Manrope 500 · 25px / 1.2 · -1px

Keith De Alwis

Header name when the logo image is not used.

Titles

title-l Manrope 300 · 32px / 1.2 · -0.04em

Ascendancy IQ / Building the AI-native organisation

Large titles: document headings, slide sub-headings, panel titles on wide layouts.

title-m Manrope 300 · 24px / 1.3 · -0.03em

Shared foundations. Wider possibility.

Medium titles: section openers inside documents, closing-bottom h3.

title-card Manrope 400 · 22px / 1.26 · -0.035em

CTO / Technical co-founder

Titles set over imagery in role cards (Manrope 400 so it holds over the scrim).

title Manrope 400 · 18px / 1.4 · -0.025em

Shared foundations. Wider possibility.

h3 inside detail blocks.

Text

body-l DM Sans 300 · 18px / 1.8

I work across business and technology, connecting the decisions, teams and delivery that move transformation forward.

Long-form reading: articles, proposals, document body on Paper.

lead DM Sans 300 · 17px / 1.8

For 20+ years I've helped global organisations turn complex change into real-world results.

Hero introduction paragraph.

body DM Sans 300 · 16px / 1.8

Today, I work at the intersection of strategy, technology and AI.

Default paragraph. Light 300 is the house weight.

body-s DM Sans 300 · 14px / 1.8

Connecting technology with the practical realities of government.

Detail blocks, dialog intros, card excerpts.

list-strong DM Sans 500 · 15px / 1.45 · -0.01em

Telenor Health

Names in experience rows and expertise lists, in `ink-strong`.

link DM Sans 400 · 14px / 1.4

Explore my world ↓

Text links, nav, button labels.

link-big DM Sans 300 · 30px / 1.3

Let's talk ↗

The one big closing link per page.

Labels

eyebrow DM Sans 400 · 12px / 1.7 · 0.16em

01 / THE INTELLIGENT ORGANISATION

Uppercase section markers and eyebrows, in `text-subtle`.

caption DM Sans 400 · 12px / 1.6 · 0.04em

Dubai, UAE · Working across borders

Meta lines, counters, object labels.

micro DM Sans 400 · 10px / 1.6 · 0.19em

A CONNECTION STARTS HERE

Uppercase eyebrow on glass dialogs only.

Slides

slide-display Manrope 300 · 64px / 1.12 · -0.06em

Technology stack.

Cover title on a 1280 × 720 slide. Two lines: first in `ink`, second in `text-muted`.

slide-title Manrope 300 · 36px / 1.1 · -0.04em

Six layers. One backbone, from the MVP onwards.

The two-beat title on every content slide: lead in `ink`, turn in `text-muted`. One line.

slide-lead DM Sans 300 · 16px / 1.5

What we build first: a household's paperwork becomes a knowledge graph.

One-sentence intro under a slide title, in `text`.

slide-node-l Manrope 400 · 16px / 1.25 · -0.02em

Application services

Row labels in a layer grid, step names in a pipeline, cover contents.

slide-node Manrope 400 · 14px / 1.3 · -0.01em

Knowledge graph

Cell and store names in diagrams, row labels in a comparison.

slide-sub DM Sans 300 · 12px / 1.35

Upload · scan · forward

Sublabels under a node, in `text-muted`; items separated with `·`. Also footer meta in `text-subtle`.

slide-label DM Sans 400 · 10px / 1.4 · 0.12em

CHUNKS + VECTORS

Uppercase connector labels on diagram lines, in `text-subtle` (or `accent` on the one focal path).

Spacing

Token	Value	Use
`space-1`	`4px`	Base unit. Icon-to-label nudges.
`space-2`	`8px`	Tight gaps: meter segments, tag clusters.
`space-3`	`14px`	List-row vertical padding, small inline gaps.
`space-4`	`20px`	Form field gaps, rail spacing, card inner inset.
`space-5`	`28px`	Headline bottom margin, paragraph block spacing.
`space-6`	`38px`	Nav item gap; control size (38px round buttons).
`space-7`	`44px`	Glass panel padding.
`space-8`	`60px`	Two-column panel gap.
`space-9`	`80px`	Headline block offset from the section marker.
`space-10`	`145px`	Scene top padding (clears the fixed header and section marker).
`gutter`	`7%`	Page side gutter (left 7%, right 8%); 10% / 11% above 1500px; 6–7% on mobile.

Radius

Token	Value	Use
`radius-0`	`0`	Links and underlined CTAs, flush, no box.
`radius-xs`	`2px`	Role cards, small square controls.
`radius-sm`	`3px`	Buttons, inputs, the motion toggle.
`radius-md`	`5px`	Tooltips.
`radius-lg`	`14px`	Glass contact panel.
`radius-xl`	`22px`	Glass announcement panel; app-icon tile.
`radius-round`	`50%`	Round icon controls (38px) and the close button.

Layout

Token	Value	Use
`measure-hero`	`740px`	Max width of hero copy.
`measure-chapter`	`490px`	Chapter copy column (42% wide, max 490px; 550px above 1500px).
`measure-text`	`440px`	Paragraph max width inside a chapter.
`measure-dialog`	`580px`	Contact dialog width.
`breakpoint-mobile`	`800px`	Below: nav collapses, chapters stack, headline clamps shrink.
`breakpoint-wide`	`1500px`	Above: gutters widen to 10% / 11%.
`slide-width`	`1280px`	Slide and diagram canvas width. Every deck is 16:9 at 1280 × 720; export at 2× or 4×.
`slide-height`	`720px`	Slide and diagram canvas height.
`slide-gutter`	`40px`	Side gutter on slides; header, footer rule and content all align to it.
`slide-label-col`	`192px`	Width of the row-label column in a layer grid (number + name + caption).

Shadow

Web only. Slides, documents and anything exported to an image use hairlines, never shadows.

Token	Value	Use
`shadow-card`	`0 10px 35px #00000022`	Resting role/article card.
`shadow-card-active`	`0 16px 40px #00000055, 0 0 24px #4bffa508`	Active or hovered card, adds the faint mint halo.
`shadow-glass`	`0 32px 90px #00000066, 0 8px 24px #00000033, inset 0 1px 0 #ffffff42, inset 0 -1px 0 #00000099`	Glass panels: outer depth plus the engraved top highlight.
`shadow-field`	`inset 0 2px 5px #00000055, 0 1px 0 #ffffff16`	Inset well of inputs on glass.
`shadow-button`	`inset 0 1px #eafff299, inset 0 -1px #143a2555, 0 4px 12px #00000033`	Primary mint button.