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.

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. Real portraits of Keith, never stock faces. 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.