The wordmark

The wordmark is KR&A set in Space Grotesk at weight 700, tracked to -0.05em. All four characters share one weight and one size. The ampersand takes 0.02em of optical padding either side because its bowl sits tighter than the flat sides of the R and the A.

The ampersand is the only glyph that carries colour. It is what separates the mark from plain text, so it is never dropped, never reweighted and never replaced with the word "and".

Section ground#222436

Sunken ground#1A1B26

Print ground#F5F3EF

Clear space

Clear space is one cap height of the K on every side. Nothing intrudes into that zone: no rule, no edge, no other mark. The dashed boundary below is drawn to scale.

Gutter = cap height of K

Minimum size

The wordmark holds down to 68px wide on screen and 18mm in print. Below that the ampersand thins past the point where the colour registers, and the mark reads as plain text. Use the mark instead.

170px

110px

68px floor

44px too small

Construction

Property	Value	Token
Face	Space Grotesk	--font-display
Weight	700, all four characters	700
Tracking	-0.05em	--track-display
Ampersand padding	0.02em either side	–
Letter colour	#C8D3F5 on dark, #222436 on light	--ink, --p-ink
Ampersand colour	Section accent	--sec
Aspect	2373 : 700	viewBox
Master format	SVG, outlined paths	.svg

02

The contextual ampersand

The page is syntax-highlighted. Each section owns one accent from the ramp and every accented thing inside it reads from the same variable. The ampersand is one of those things. It inherits --sec from the section it sits in, so the mark shifts colour as the reader moves down the page without a single per-page logo asset existing.

Seven accents are in the rotation. The remainder of the ramp is reserved for section furniture and is not used on the mark, because at small sizes yellow and green sit close enough to ink that the ampersand stops reading as accented, and red reads as an error state rather than a section cue.

Default, cover, contact BLUE #82AAFF

Documentation CYAN1 #7DCFFF

About, infrastructure CYAN #86E1FC

Capabilities, specifications TEAL #4FD6BE

Enterprise delivery, CI and CD ORANGE #FF966C

Career arc, decision records MAGENTA #C099FF

Neutral fallback INK #C8D3F5

Implementation

Use kra-wordmark-live.svg, which fills the letters with currentColor and the ampersand with var(--sec). Inline it rather than loading it through an img element, because an external SVG cannot see the page's custom properties. The fixed-colour files exist for contexts outside the site, not for the site itself.

03

The mark

The mark is a square split on the diagonal. The upper left triangle is ink, the lower right is the accent, and a gap of 6.25% of the mark separates them. The whole figure is inset 16% from the edge of its ground, which is what keeps it legible as a favicon at 16px.

It is not a monogram and carries no letterforms. Where the wordmark is too small to hold, this replaces it: favicons, app icons, avatars, watermarks and anything below 68px wide.

Blue#82AAFF

Cyan#86E1FC

Teal#4FD6BE

Print#3D5DA4

16 / 32 / 48

Favicon

ICO with three frames. Dark for the sites, light for anything rendered on a warm white ground.

favicon-dark.ico

192 / 512

App icon

PNG on the section ground. Android takes 192, the App Store takes 512.

kra-mark-blue-512.png

400 / 800

Avatar

Square, mark centred at 62% of the frame. LinkedIn, GitHub, Slack.

kra-social-dark-800.png

Any

Watermark

Transparent ground. Use at reduced opacity over a solid panel, never over a photograph.

kra-mark-transparent.svg

04

Colour

One theme. Dark only. There is no light variant, no toggle and no automatic detection. Body text meets 7:1 against its background and muted text meets 4.5:1. Every ratio printed below is measured, not estimated.

The Moon surfaces sit close together, so depth is carried by hairlines rather than by tonal contrast. The sunken surface exists to give alternating sections a visible step where the panel surface would be indistinguishable.

Surfaces

Background

--bg · #222436

bg1.00:1 vs bg

Section ground and page default

Sunken

--bg-sink · #1A1B26

page_bg1.12:1 vs bg

Alternating sections, footer, code

Panel

--bg-panel · #1F2335

bg_dark1.02:1 vs bg

Wells, form panels, feature cells

Raised

--bg-raise · #2F334D

bg_highlight1.24:1 vs bg

Hover only

Hairline

--line · #3B4261

fg_gutter1.56:1 vs bg

Every structural rule, 1px

Rule strong

--line-strong · #444A73

terminal_black1.80:1 vs bg

Table head, field border

Foregrounds

Ink

--ink · #C8D3F5

fg10.3:1

Headings, emphasis, figures

Ink 2

--ink-2 · #A9B1D6

fg_dark7.2:1

Body copy

Ink 3

--ink-3 · #828BB8

change_gray4.6:1

Labels and metadata. Muted floor

Ink 4

--ink-4 · #737AA2

dark53.7:1

Decorative only. Never type

Comment

--comment · #636DA6

comment3.1:1

Decorative only. Never type

Accents

Every accent clears 4.5:1 on the section ground except blue 0 and red 1, which are borders and markers and never carry type.

Blue

--blue · #82AAFF

on bg6.7:1

Interaction, cover, contact, top bar

Blue 1

--blue1 · #7AA2F7

on bg6.1:1

Clients

Blue 0

--blue0 · #3D59A1

on bg2.3:1

Borders and markers only

Cyan

--cyan · #86E1FC

on bg10.3:1

About, infrastructure

Cyan 1

--cyan1 · #7DCFFF

on bg8.9:1

Documentation

Teal

--teal · #4FD6BE

on bg8.5:1

Capabilities, specifications

Green

--green · #C3E88D

on bg11.1:1

Certifications, observability, live state

Yellow

--yellow · #FFC777

on bg10.0:1

Published work, sites, draft state

Orange

--orange · #FF966C

on bg7.2:1

Enterprise delivery, CI and CD

Red

--red · #FF757F

on bg5.9:1

The problem, risk, failure state

Magenta

--magenta · #C099FF

on bg6.7:1

Career arc, decision records

Red 1

--red1 · #C53B53

on bg3.0:1

Markers only

Print accents

Every Moon accent falls below 4.5:1 on warm white, so print takes a darkened set. Hue is held from the Moon value and lightness is walked down until the colour clears 5.5:1, which is a derivation rather than a choice and can be rerun from tools/printset.py. Print ink is the site background itself, so the light lockup stays in the family instead of falling back to black, paired with print blue on the ampersand.

Print ink

--p-ink · #222436

on #F5F3EF13.8:1

Print blue

--p-blue · #3D5DA4

on #F5F3EF5.7:1

Print cyan

--p-cyan · #00697F

on #F5F3EF5.7:1

Print teal

--p-teal · #006D5F

on #F5F3EF5.7:1

Print green

--p-green · #4C6913

on #F5F3EF5.7:1

Print yellow

--p-yellow · #865901

on #F5F3EF5.5:1

Print orange

--p-orange · #A04822

on #F5F3EF5.5:1

Print red

--p-red · #AD3543

on #F5F3EF5.6:1

Print magenta

--p-magenta · #714DA3

on #F5F3EF5.8:1

05

Typography

Three families with fixed roles. Space Grotesk for display, headings and names. IBM Plex Sans for reading body only. IBM Plex Mono for all structure: numbers, metadata, tags, buttons, labels and table headers.

Uppercase is set in the mono face and nowhere else. The display and body faces are never uppercased by CSS. All three are self-hosted as woff2. No request leaves the origin to render type, which is a sovereignty requirement rather than a performance one.

Display

Aa

Space Grotesk

Weights 500, 600, 700. Headings, the wordmark, names and figures.

--font-display

Body

Aa

IBM Plex Sans

Weights 400, 600. Reading copy only. Never a label, never a number.

--font-body

Mono

Aa

IBM Plex Mono

Weights 400, 500. Every label, tag, figure, button and table header.

--font-mono

The scale

Eleven fixed steps. Two are fluid and clamped. Generated output uses these steps and no intermediate values.

--text-display100px · clamped 44 to 100
Space Grotesk 700

KR&A

--text-h144px · clamped 30 to 44
Space Grotesk 700

Digital sovereignty

--text-h224px
Space Grotesk 600

AI-native engineering

--text-h321px
Space Grotesk 600

Specification quality is the bottleneck

--text-lead19px
IBM Plex Sans 400

A locked specification is the single source of authority.

--text-read17px
IBM Plex Sans 400

Forkability under an OSI-approved licence, plus jurisdictional control of data flow at runtime.

--text-ui14px
IBM Plex Sans 400

Vendor domicile alone is insufficient. The licence model is the operative mechanism.

--text-code13px
IBM Plex Mono 400

kubectl get nodes -o wide

--text-caption12px
IBM Plex Mono 500

01 · CAPABILITIES

--text-label11px
IBM Plex Mono 500

Enterprise delivery

--text-micro10px
IBM Plex Mono 500

Live Draft Planned

06

Grid and spacing

All spacing derives from an 8px scale. An arbitrary pixel value is a defect, not a judgement call. The shell is 1400px with fluid padding, and the cover uses a twelve column grid that collapses to one at 900px.

The scale

--sp-1 · 8

--sp-2 · 16

--sp-3 · 24

--sp-4 · 32

--sp-5 · 40

--sp-6 · 48

--sp-7 · 56

--sp-8 · 64

--sp-10 · 80

--sp-14 · 112

Shell1400px

Page paddingclamp(24, 5vw, 72)

Top bar52px

Section padding112px, 64 below 900

Reading measure68ch

Cover grid12 col, 7 / 5 split

Break, wide1180px

Break, narrow900px

07

Structure and motion

01

Zero radius

Border radius is zero on every element without exception. Buttons, fields, panels, pills and images all square.

02

No depth effects

No shadows, gradients, glows or glass. Depth is expressed with the surface ramp and hairlines only.

03

Hairline structure

Structural lines are 1px. Emphasis edges are 2px and appear only on blockquotes, callout edges, cell hover edges and figure rules.

04

One dashed border

The dashed border belongs to the empty state and the clear-space diagram. It appears nowhere else.

05

Motion on input

Nothing animates on entry. Scroll-triggered reveals, marquees and any self-starting animation are prohibited.

06

Visible focus

Focus is a 2px square ring in the section accent at 3px offset. All motion is suppressed under reduced-motion.

Components that exist

The system is deliberately small. Adding a component is a decision, not a convenience.

Component	Rule
Status pill	Exactly three: live, draft, planned
Callout	Left edge and label carry colour. Body stays neutral. No icons
Table	No vertical rules, no zebra, no outer border
Button	One primary per view
Top bar	Left-aligned routes. No wordmark, no progress bar
Cell grid	The only card primitive. Two, three or four across

Deliberate absences

Non-bloat is a feature. These are not gaps waiting to be filled.

No icon set

Labels do the work icons would do.

No light theme

Adopting Tokyo Night Day is a separate decision.

No animation library

Transitions are CSS and respond to input.

No component framework

Plain CSS classes, consumable from any renderer.

08

Usage

✓ Do

Use the outlined SVG masters as the primary source. They render identically everywhere.
Inline kra-wordmark-live.svg on the sites so the ampersand inherits the section accent.
Keep one cap height of clear space on every side of the wordmark.
Swap to the mark below 68px wide, rather than shrinking the wordmark further.
Use the print accent set on warm white grounds, and only there.
Take colours, sizes and spaces by token name. Copy the token, not the value.

✕ Do not

Reweight, resize or reposition the ampersand relative to the letters.
Set the ampersand in yellow, green or red. Those three are outside the rotation.
Recreate the wordmark by typing it. Space Grotesk must be present and tracked, so use the file.
Apply shadows, gradients, outlines, glows or opacity changes to either mark.
Place a mark on a photograph without a solid backing panel.
Introduce a colour, a type size or a spacing value that is not in this document.

If the palette changes

This identity does not own its colours. They are read from the Tokyo Night Moon block in the dotfiles repository. If that block changes, regenerate the assets and this document rather than editing a hex value in either. The generator lives beside the site.

09

Asset library

111 files. SVG is the master format in every case. Rasters are provided for contexts that cannot take vector, and are regenerated from the SVG rather than edited.

Contents

The wordmark

Clear space

Minimum size

Construction

The contextual ampersand

The mark

Favicon

App icon

Avatar

Watermark

Colour

Surfaces

Foregrounds

Accents

Print accents

Typography

Space Grotesk

IBM Plex Sans

IBM Plex Mono

The scale

Grid and spacing

The scale

Structure and motion

Zero radius

No depth effects

Hairline structure

One dashed border

Motion on input

Visible focus

Components that exist

Deliberate absences

No icon set

No light theme

No animation library

No component framework

Usage

✓ Do

✕ Do not

Asset library

Wordmark, SVG masters

Mark, SVG masters

Wordmark rasters, 1200 and 2000px

Mark rasters, 192 and 512px

Social avatars

Favicons