Skip to content
heyrav design system
ComponentsSpec

Code block

Mono on --surface, with an optional file header and copy button. Inline code gets a soft surface-2 pill.

tokens.css
:root{
  --ink:#161616;
  --ink-hover:#212121;
  --r-pill:99px;
}
Show code
  <div class="code">
    <div class="code-head">tokens.css<button class="d-copy" type="button" aria-label="Copy code"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button></div>
    <pre>:root{
  --ink:#161616;
  --ink-hover:#212121;
  --r-pill:99px;
}</pre>
  </div>

Inline

Set --ink on anything filled, and hover it to --ink-hover.

Show code
<p class="prose">Set <code class="inline">--ink</code> on anything filled, and hover it to <code class="inline">--ink-hover</code>.</p>

13px mono at line-height 1.6, tab size 2, horizontal scroll instead of wrapping. Highlighting stays monochrome - tags in ink, attributes in --ink-3, strings italic.