Code

The design system styles three code-related elements: inline code, block-level pre, and keyboard shortcuts kbd. All use the mono font (var(--font-quaternary)).

Inline code

<p>Use <code>var(--text-primary)</code> for the main text colour.</p>

Inline code gets a subtle background, small padding, and rounded corners. It uses word-break: break-word to wrap within narrow containers.

Code blocks

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

<pre><code>.button {
  background: var(--button-primary);
  color: var(--button-text);
}</code></pre>

Code blocks use pre with a nested code element. The inner code resets inline code styles (background, padding, border-radius) so they don't stack.

Keyboard shortcuts

<kbd>⌘</kbd> + <kbd>K</kbd>

The kbd element renders with a subtle 3D key appearance using border and box-shadow.

Combining kbd elements

<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> to open the command palette.</p>

Accessibility notes

• code and pre elements are announced by screen readers as code
• kbd is announced as "keyboard input" by most screen readers
• Ensure code blocks have sufficient colour contrast in both light and dark modes

Do / Don't

Do:

• Use code for inline references to variables, functions, filenames
• Use pre > code for multi-line code examples
• Use kbd for keyboard shortcuts and key references

Don't:

• Don't use code for emphasis — use strong or em instead
• Don't use pre without a nested code element