--- url: /components/typography.md --- # Typography Semantic text hierarchy for TUIs. Since terminals can't vary font size, these presets use color + bold/dim/italic to create clear visual levels. Typography presets accept `color` overrides. Their defaults come from the theme's variants; see the [styling guide](/guide/styling). ```tsx import { H1, H2, H3, P, Lead, Muted, Small, Strong, Em, Code, Kbd, Blockquote, CodeBlock, SyntaxHighlighter, HR, UL, OL, LI, } from "silvery" ``` ## Headings | Component | Default Style | Use For | | --------- | ---------------------------------- | ----------------- | | `

` | `$fg-accent` + bold | Page title | | `

` | `mix($fg-accent, $fg, 50%)` + bold | Section heading | | `

` | inherited foreground + bold | Group heading | | `

` | `$fg-muted` + bold | Sub-group heading | | `

` | `$fg-muted` + italic | Minor heading | | `
` | `$fg-muted` + dim | Deepest heading | ```tsx

Settings

// $fg-accent + bold

General

// halfway from accent to foreground + bold

Appearance

// bold

Panel A

// override color for differentiation ``` Headings have no underline by default. Their color takes precedence over nested inline styling; an explicit `color` overrides the heading's default. ## Body Text | Component | Default Style | Use For | | --------- | ------------------------------------- | ------------------------------- | | `

` | `mix($fg, $fg-muted, 12.5%)` | Body text | | `` | `$fg-muted` + italic | Introductory/lead text | | `` | `$fg-muted` | Secondary/supporting text | | `` | `$fg-muted` (pre-dimmed at truecolor) | Fine print, captions, footnotes | ```tsx

Use dark colors for the UI.

// slightly muted body text Welcome to the app // $fg-muted + italic Requires restart // $fg-muted Last updated 2 hours ago // $fg-muted (pre-dimmed) ``` ## Inline Emphasis | Component | Default Style | Use For | | ---------- | --------------------------------- | ---------------------- | | `` | bold + brighter body foreground | Inline strong emphasis | | `` | italic + brighter body foreground | Inline emphasis | ```tsx This is important and emphasized. ``` Both emphasis presets blend halfway from the body color back toward `$fg`. Use `` for body styling without a `

` wrapper; bare `` still inherits its foreground. ## Code & Keys | Component | Default Style | Use For | | ------------- | --------------------------------------------------- | ----------------------- | | `` | `mix($fg-muted, $fg-link, 20%)`, no chip or padding | Inline code | | `` | `$bg-muted` + bold | Keyboard shortcut badge | | `` | `$bg-surface-subtle` padded surface | Multi-line code block | ```tsx npm install silvery // inline code Ctrl+C // keyboard shortcut {"const x = 1\nconst y = 2"} ``` `` starts expanded, with two cells of horizontal padding and one blank row above and below the content. Plain code is halfway between `$fg` and `$fg-muted`. There is no border or rail. Hover reveals a faint label in the top padding row without changing the expanded background. Click to collapse to one line: a hanging `▸` followed by the label. Click again to expand; selecting text does not collapse the block. Collapsed blocks may highlight on hover. Use `label` to name the block (default `text`), `defaultExpanded` for its initial state, or `expanded` and `onExpandedChange` for controlled state. `content` accepts rendered content instead of plain `children`. `` reuses this frame with a language label. It preserves authored lines and blends syntax token colors halfway toward the plain-code foreground. `bare` renders only the source, for an existing frame such as a frontmatter panel; it does not add another frame or disclosure. `DocumentView` outdents code surfaces so source text aligns with prose. Below the `md` breakpoint (90 columns), it uses the available width while preserving the left marker gutter and one trailing cell. Generic `` fills its container by default and leaves document gutters to its caller. Inline code and links have no underline by default. Links use `$fg-link` and brighten on plain hover; inline code is muted and non-interactive. An explicit `color` on `` still wins. `` keeps its padded background badge. ## Block Elements | Component | Default Style | Use For | | -------------- | ---------------------------------------- | --------------- | | `

` | `$fg-muted` italic body, inset two cells | Quotations | | `
` | `$border-default` dashes | Horizontal rule | ```tsx
Less is more.
``` `
` has a two-cell left inset and no border or text prefix. Wrapped rows keep the same inset, muted foreground, and italic styling. ## Lists Lists support nesting via `UL`/`OL` containers. | Component | Style | Use For | | --------- | ------------------------ | -------------- | | `
    ` | container | Unordered list | | `
      ` | container (auto-numbers) | Ordered list | | `
    1. ` | bullet/number + indented | List item | ```tsx
      • First item
      • Second item
        • Nested bullet
      1. Step one
      2. Step two
      ``` Unordered lists use `•` at the outer level, `◦` one level in, and `■` at all deeper levels. Indentation also grows with nesting. Ordered lists retain their numbers. ## Props ### TypographyProps Inline typography presets accept `TextProps` plus children: ```typescript interface TypographyProps extends Omit { children?: ReactNode color?: string // Override the default color } ``` `CodeBlock` instead accepts Box geometry props plus the disclosure props above. The `color` prop overrides the default semantic color, useful for panel differentiation: ```tsx

      Success Panel

      Warning Panel

      ```