# Foundations

Keith de Alwis is a technologist, builder and operator: twenty-plus years turning complex change into real-world results, now through AI. The brand is **different disciplines, one connected mind**, shown as a dark, quiet field of connected nodes, lit by a single mint signal and signed with the KDA monogram's luminous spectrum.

This is the one system for everything that carries Keith's name: the website, decks, diagrams, proposals and documents, social tiles, video, print. Start here, then open the section for your surface.

| Making | Theme | Read |
| --- | --- | --- |
| Web pages, landing pages, apps | Night | this page, then the web components |
| Decks, slides, architecture and process diagrams | Night on screen, Paper when printed or sent as a document | Slides and diagrams |
| Proposals, reports, one-pagers, anything printed | Paper | this page, Formats |
| LinkedIn, newsletter, YouTube, podcast, event and print assets | Night | Formats, Illustration and imagery |
| Any copy at all | – | Voice and content |

Three ideas carry every surface. If a piece of work doesn't carry at least one of them, it isn't finished.

- **Connection.** Nodes, lines and hairlines. Things are joined, never boxed. Sections are separated by `line` rules, not cards.
- **Calm confidence.** Dark ground, light-weight type, lots of space. Nothing shouts because nothing needs to.
- **One signal.** Mint (`accent`) is the only interface colour. Use it once and it means something. The logo's cyan-to-blue spectrum belongs to the mark and to brand moments, never to type, UI or charts.

## Visual foundations

### Colour

- Build on `bg` (#080e10). Night is the default on every screen. Use the **Paper** theme for proposals, reports, printed decks and anything that goes out as a document.
- Set headlines in `ink`, paragraphs in `text`, secondary copy and second beats in `text-muted`, eyebrows, captions and metadata in `text-subtle`. All pass 4.5:1 on `bg` and `surface` in both themes.
- Use `accent` for arrows, hover, active and focus states and progress; `accent-soft` for the mint word inside a headline; `accent-phrase` for one supporting phrase in a paragraph; `accent-tint` behind the single focal category on a slide or diagram. If you can see more than a sliver of mint, there's too much.
- Proportion, as a guide: roughly two thirds `bg`, a fifth `surface`, a tenth text, the rest `line` and mint.
- Rules and dividers use `line`. A control boundary or a diagram box that must be seen uses `line-strong`.
- The logo spectrum (`logo-mint`, `logo-cyan`, `logo-green`, `logo-blue`, `logo-cobalt`, `logo-lime`) is for the mark, covers, social tiles and hero moments only.
- The panel gradient runs `panel-start` → `panel-end` at 135°, for covers and openers. Type on it is `bg`; only the reverse (all-white) lockup sits on it.
- Avoid purple, warm neutrals and any second accent. Errors use `danger` with written text.

### Typography

- Two typefaces, both light. **Manrope** (display) carries headlines, titles and node names; **DM Sans** (body) does the reading and the labels. Both are free on Google Fonts: no substitutes.
- Headlines are Manrope **Light 300**, tracking −0.06em, line height 1.08: `display-closing` for the last line of a page, `display-xl` for the hero, `display-l` for chapters, `display-m` in dialogs, `heading` in sections. Use 400 only when light type has to sit very small. Never bold a headline.
- **Every headline has two beats.** The first sets it up in `ink`, the second turns it in `text-muted`, or in mint once per page for the line that matters most: "See the whole. *Move the parts.*" Never three beats, title case, heavy weight, all mint or an exclamation mark.
- Body is DM Sans **Light 300** at 16px / 1.8 (`body`); `body-l` (18px) for long reading; `lead` for the hero intro. Keep measure to about 62 characters (`measure-text`).
- Eyebrows and labels are `eyebrow`: 12px, uppercase, +0.16em, in `text-subtle`. Slashes separate levels ("01 / The intelligent organisation"), middle dots separate items. Section numbers are two-digit: 01, 02.
- Pick from the scale. Don't invent sizes in between. Slides have their own small scale (`slide-display` to `slide-label`) sized for a 1280 × 720 canvas.

### Layout and spacing

- Web: full-viewport scenes (`min-height: 100svh`), side `gutter` of 7% (10% above `breakpoint-wide`). Each chapter opens with a `SectionMarker` `space-10` from the top, then eyebrow → headline → paragraph → detail block in a column of `measure-chapter`. Chapters alternate left and right so the node field stays visible.
- Space from the scale: `space-3` inside lists, `space-4` between fields, `space-5` after headlines, `space-9` from marker to copy.
- Below `breakpoint-mobile` (800px): stack everything, anchor copy to the bottom of the scene, hide secondary captions.
- Slides and diagrams: a 1280 × 720 canvas (`slide-width`, `slide-height`) with a 40px `slide-gutter`; header top-left, lockup top-right, a `line` rule and footer meta at the bottom. Full grammar in Slides and diagrams.

### Shape, depth and surfaces

- Mostly square: links have no box (`radius-0`); cards and diagram boxes `radius-xs`; buttons and inputs `radius-sm`; glass panels `radius-lg`; round controls `radius-round`.
- On the web, depth is soft and deep (`shadow-card`, `shadow-glass`); glass panels over the node field are the one tactile place. On slides, documents, diagrams and anything exported to an image: **no shadows, hairlines only**. Soft shadows read as glow at raster scale.
- Joined, not boxed: only the thing that matters gets a box. On a slide, plain cells are separated by `line` hairlines; the focal category is boxed in `accent` over `accent-tint`; external systems get a dashed `line-strong` box.
- No left-border accent cards, no gradient buttons, no mint pills around calls to action, no drop shadows on text.

### Motion

- Slow and eased: `cubic-bezier(.22,.8,.2,1)` at 0.3–0.65s. Things drift, lift and dissolve; nothing bounces.
- Link arrows travel (gap 32 → 43px on hover). Active cards lift 6px. Lists roll continuously with masked edges.
- The node field drifts on screen and holds still in print. Every animated surface offers a **Pause motion** control (`Ⅱ`), and `prefers-reduced-motion` removes motion entirely.

### States and accessibility

- Focus-visible: 2px solid `focus`, offset 7px on links and 4px on buttons.
- Hover: link labels move to `accent-soft`, arrows stay `accent`; borders move to `accent-line`.
- Disabled: 25–50% opacity, no hover.
- Include a skip link, a visible pause control, and real `alt` text on people's photos.

## Iconography

There's one icon set: **Phosphor 2.1.1**, served at `/v1/assets/icons/` (names in `icons.json`). Nothing else: no second library, no hand-drawn icons, no emoji, no vendor logos. If Phosphor hasn't got it, use words.

- **Weight follows size, so the line always matches Manrope Light.** Light is the default (24–56px); Thin at 64px and above; Regular at 20px and below. Never Bold, Fill or Duotone.
- **An icon labels, it never decorates.** Every icon sits beside the words it stands for (a step name, a point's heading, a row label) and adds recognition, not meaning. No icon on its own, no icon on every line of a list, no icon in a headline.
- **Colour:** `ink`, like the label beside it. `accent` only when the icon belongs to the one thing that is mint on the page (the focus step, the chosen option); it is that mint, not a second one.
- **Placement:** above the label in columns and pipeline steps, left of the label in rows, `space-3` from the words. One size per page.
- **One concept, one icon** across a piece: once the document store is `database`, it stays `database`.
- Choose the plain, literal icon (`file-text` for a document, `users-three` for a team). Avoid the clichés: no sparkles for AI, no rockets for growth, no light-bulb-as-idea on every page.

Nine typographic glyphs still do the interface work, set in the same type as the words around them: `↗` leaves the page or starts a conversation, `↓` scrolls on or downloads, `→` `←` step through a sequence, `↑` back to top, `Ⅱ` pause, `×` close, `+` open or expand, `·` separates items.

- Arrows are always `accent`. The other glyphs take the colour of the text they sit with.
- Calls to action are words plus a mint arrow, not buttons: label in `ink`, one space, arrow in `accent`. "Let's talk ↗".
- Social icons are single-path 14px SVGs in `ink`, 8px from their label. Where space allows, the platform name and an arrow beat the icon alone.

## Imagery

- One illustration idea: the **node field**, pale points joined by threads with one mint node. Use the five graphics in the **Illustration** group first (orbital sphere for covers, vortex for closings, converging streams for section openers, branching constellation for quotes, flowing network for banners); `NodeField` draws it live for animated web heroes. Night grounds only: on Paper, set the graphic in a Night panel. Full rules in Illustration and imagery.
- Photography is dark, desaturated and atmospheric, with one grade for every image. Real portraits of Keith, never stock faces; licensed photographs of places and work in decks and documents, never on covers. Type over a photo sits on a scrim from `bg` at 0% (45% down) to 90% at the bottom edge.

## Using the logo

The KDA monogram and lockup are artwork: always place the supplied file from the **Logos** group, matched to the ground (transparent file on Night, light file on white, the Paper file on `bg` Paper, reverse file on the panel gradient). Never retype "keith de alwis" or redraw the letterforms. Full rules are in the Logo section.