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

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

<pre><code>.card {
  background-color: var(--background-primary);
  color: var(--text-primary);
}</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

• 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

Usage rules

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

CSS reference

This section documents how the component is built. For usage, see the sections above.

Inline code

Code blocks (pre)

pre code resets the inline code background, padding, and border-radius to prevent stacking.

Keyboard shortcut (kbd)

Selectors