--- title: "Code" subtitle: "Inline code, code blocks and keyboard keys" description: "Three code elements the design system styles: inline code, block-level pre with a nested code element, and kbd for keyboard shortcuts and key references." author: "Studio" section: "Website" subsection: "Foundations" order: 10 status: "published" --- Three elements carry code styling and all three take the mono slot documented on the [Typography](/website/typography.html) page: `

` for a reference inside a sentence, `` wrapping a `` for a block, and `` for a key. None of them needs a class.

## Inline code


  Use var(--text-primary) for body text, never a hex value.


```html
Use var(--text-primary) for body text.
```

Inline code sits on a 5 % mix of the text colour — not `--background-faded`, which is a different value — with small padding and a 4px radius. It is set `white-space: nowrap`, so a long token will **not** wrap and will overflow a narrow column.

## Code blocks


  .article-card {
  background-color: var(--background-plain);
  color: var(--text-primary);
  border-radius: var(--radius-m);
}


```html
.article-card {
  background-color: var(--background-plain);
}
```

A block is always `` with a nested ``. The inner element resets the inline ground, padding and radius so the two treatments do not stack into a box inside a box.

## Keyboard keys


  Press Ctrl + Shift + P to open the command palette.


```html
Press Ctrl + Shift + P.
```

`` renders as a key cap, with a border and a shadow doing the work. Chain them with a literal `+` between, outside the elements.

## Rules

- **Keep inline code short.** It cannot wrap, so a long path or selector will push out of its column — anything that long belongs in a block.
- **Use `` for a thing you could type** — a token, a class, a filename, a function. Not for emphasis; that is `` or ``.
- **Never write a `` without a nested ``.** The reset that stops the two styles compounding lives on the inner element.
- **Do not expect syntax colouring.** highlight.js runs and stamps its classes, but no theme stylesheet is loaded, so blocks render monochrome and follow the theme like any other text. If one is ever added it has to be themed twice, light and dark.