.md

Typography

Two typefaces, like the website: Hanken Grotesk for everything you read and JetBrains Mono for code. Both are self-hosted variable fonts from Fontsource (@fontsource-variable/hanken-grotesk, @fontsource-variable/jetbrains-mono), imported at the top of src/styles.css and registered as font-sans and font-mono.

Markdown pages are styled by the Tailwind Typography plugin through the prose class on ContentWrapperComponent, tuned in styles.css to the docs scale. Component pages use the same scale through the docs-h1, docs-h2 and docs-h3 utilities, so both kinds of page render alike.

The scale

Role Class / element Size Weight · tracking
Page title docs-h1, # h1 44–72px, fluid, leading 1 600 · −0.04em
Section docs-h2, ## h2 32px, rule above in prose 600 · −0.03em
Subsection docs-h3, ### h3 21px 600 · −0.015em
Lead lead paragraph under the title 22px, text-text-secondary 400
Body p, li in prose 17px, leading 1.65 400
Card title column and panel titles 20–24px 600 · −0.015em
Group label nav groups, table heads, labels 12px uppercase 600 · +0.08em
Code code, pre, kbd, file names 14px (0.86em inline) JetBrains Mono

Use 400, 500 and 600 only; font-semibold for headings, titles and buttons. Big display numbers are semibold with tracking-[-0.03em].

Mono is for things you would type or read as data: code, keys, file names, commands, values. It is never a decorative "technical" label. Nothing small sits above a heading as a label: the breadcrumb already says where the page is. Group labels (nav groups, table heads, panel titles, form labels) use the uppercase style: text-xs font-semibold uppercase tracking-[0.08em] text-text-muted.

Headings

Every h2 in prose opens with the 1.5px rule, like a section on the website.

Heading 2

Heading 3

Heading 4

Paragraphs

This is a regular paragraph with some bold text and italic text. You can also combine them with bold and italic text. Running text stays at a reading measure of about 72 characters, while code, tables and figures use the whole column.

A second paragraph shows the spacing between paragraphs. Body text is 17px primary ink on a 1.65 line height.

Here's an inline link: underlined at 1.5px with a 3px offset, and a mint tint on hover.

Lists

Unordered lists

Bullets are small black squares, like the website's legend markers.

  • First item in an unordered list
  • Second item with some bold text
  • Third item with a link
  • Nested lists:
    • Nested item 1
    • Nested item 2
      • Deep nested item
    • Back to second level

Ordered lists

  1. First ordered item
  2. Second ordered item with inline code
  3. Third ordered item
  4. Nested ordered list:
    1. Nested numbered item
    2. Another nested item
  5. Back to root level

Code

Inline code

Use inline code for code inside a sentence: a mono chip on the surface-muted tint, without backticks. For example, ContentWrapperComponent applies the prose class.

Code blocks

Fenced code renders on the dark editor surface with the dcupl Shiki theme. See Code blocks for filename headers and tabs.

import type { ModelDefinition } from '@dcupl/common';

// Keywords white and bold, strings mint, types yellow, comments gray
const productModel: ModelDefinition = {
  key: 'Product',
  properties: [{ key: 'price', type: 'int' }],
};
npm install @dcupl/core

Blockquotes

A blockquote is set off by a 2px rule on the left and secondary ink, without italics.

It can span several paragraphs and include bold text.

For notes, tips and warnings use a callout instead (:::alert, see Feedback & overlays).

Horizontal rules

A horizontal rule separates sections:

Content after a horizontal rule.

Tables

Table heads use the group-label style on the 1.5px rule; rows are separated by hairlines.

Feature Description Status
Typography Tailwind Typography plugin Active
Syntax highlighting Shiki with the dcupl theme Active
Dark mode .dark on <html> Active
Components Standalone Angular components Active

A reference table

Element Tag Example Notes
Heading 1 h1 # Heading Page title
Heading 2 h2 ## Heading Section heading
Bold strong **text** Strong emphasis
Italic em *text* Emphasis
Link a [text](url) Hyperlink
Code code `code` Inline code

Emphasis and strong

This text is emphasized using italic style.

This text has strong emphasis using bold style.

Subscript and superscript

When you need to write formulas like H2O or footnote references[1], subscript and superscript are available.

Abbreviations

The HTML specification is maintained by the W3C.

Definition lists

Component
A reusable, self-contained piece of UI functionality in Angular.
Service
A class that provides specific functionality and can be injected into components.
Directive
A class that can modify the behavior or appearance of DOM elements.

Keyboard input

Press Ctrl + C to copy or Cmd + V to paste.

Sample output

Error: Module not found

Variables

The x value is calculated as y + z.

Deleted and inserted text

This text has been deleted

This text has been inserted

Mark

The most important part of this sentence is highlighted for emphasis.