Typography

Use this page to inspect the reading experience after changing fonts, colors, spacing, or Markdown styles.

A Real Documentation Section

The local theme favors compact headings, generous line height, and restrained link styling. The result should remain calm during repeated reading while still feeling deliberate on product and reference pages.

When to Create a Guide

Create a guide when the reader is trying to complete a workflow.

• Start with the goal and required context.
• Show the smallest working setup first.
• Add variations after the base path works.
• Link to reference pages for exhaustive option tables.

When to Create Reference

Create reference material when the reader already knows what they need.

1. Name the API or component.
2. Show the import or frontmatter field.
3. List options with types and defaults.
4. Add one complete example.

Inline Elements

This paragraph includes bold text, italic text, inline code, and a local link. Press Ctrl + K to open search.

Blockquotes

Good documentation does not need to shout. It needs to make the next step feel obvious.

A theme is more than colors. It is spacing, motion, affordance, density, and the quiet feeling that every page belongs to the same system.

Code Blocks

src/theme/config.ts

import type { ThemeConfig } from './config';

export const example: ThemeConfig = {
  navLinks: [{ label: 'Docs', link: '/guides/example/' }],
  docs: { includeAiUtilities: false },
  footerText: 'Built with a local Starlight theme.',
};

src/theme/styles/theme.css

@layer lucode {
  :root {
    --radius: 0.5rem;
    --container-max-width: 1440px;
  }
}

Tables

Page type	Primary job	Good fit
Guide	Teach a workflow	Installation, setup, migration
Reference	Describe an API	Options, props, exports
Showcase	Expose visual states	Components, typography, splash layouts
Concept	Explain a model	Architecture, design principles

Images

Images inherit the surrounding Markdown rhythm. Prefer focused diagrams and real product screenshots.

Horizontal Rule

Content above the rule.

---

Content below the rule should still belong to the same visual system.

Definition-Style Content

Theme token : A CSS custom property controlling a repeated visual decision.

Component override : A local Astro component registered in Starlight configuration.

Splash page : A page using template: splash, often with a prominent hero and actions.