Text

Mark a few words with a blue or signal red highlight, and link with a bold underline.

Mark a few words with a <Highlight>blue</Highlight> or{" "}
<Highlight tone="red">signal red</Highlight> highlight, and link with a{" "}
<Link href="#">bold underline</Link>.

Text styles#Link to this section

Tailwind utilities for the type scale. They set the font, size, weight and spacing, and leave colour to you.

Eyebrow

Title

Heading

Subheading

Label

type Code = string

<p class="type-eyebrow text-accent">Eyebrow</p>
<h1 class="type-title">Title</h1>
<h2 class="type-heading">Heading</h2>
<h3 class="type-subheading">Subheading</h3>
<p class="type-label text-muted">Label</p>
<code class="type-code">type Code = string</code>

Long-form text#Link to this section

markdown styles rendered Markdown with one component per element: headings, paragraphs, links, lists, quotes, tables and code. Each element carries its own classes, so nothing reaches in from outside. In Astro, give it to an MDX page’s content:

---
import { markdown } from "@bhodgson/design-system";
const { Content } = await render(entry);
---

<Content components={markdown} />

Only MDX takes components, so write long-form pages as .mdx. The components are exported one by one too (H2, P, Pre and the rest), to swap one out or use one on its own.

Spacing groups things, so a page can be skimmed. A new section (h2) sits well clear of the last, a heading sits close to what it heads, and a list, code block or callout sits close to the paragraph that introduces it. Bold is full weight, so the few phrases worth catching on a skim stand out. Subheadings (h3) are in the tertiary colour, so they don’t read as links.

Code blocks sit on the sunken surface. To highlight them with Shiki in both themes, give it a light and a dark theme and no default colour, and each token follows the page’s theme:

astro.config.mjs

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: { light: "github-light", dark: "github-dark" },
      defaultColor: false,
    },
  },
});

Callout#Link to this section

Callout is for the one thing a reader should leave with: an accent bar on a soft accent background. In MDX, leave blank lines inside it for Markdown:

<Callout>

**Focus must happen during the tap**, while the browser is still handling it.

</Callout>