Kitchen Sink

Every component, callout, code language, and styling primitive the theme ships — visible at once. Use this page to spot regressions after any visual change.

Headings

H1 — auto-rendered by Starlight (with bracket bar)

H2 — Orbitron, with bracket-bar adjacent

H3 — Inter, semibold, no bracket bar

H4 — Inter, smaller

H5

H6

Body copy

This is a paragraph with bold text, italic text, ~~strikethrough~~, and inline code styling. Inline code should appear in gold on dark surfaces and burgundy-deep on light. Links like this one should be cyan with a dashed underline that becomes solid on hover.

A second paragraph for line-height verification. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. The five boxing wizards jump quickly.

Lists

Unordered:

First item with a link inside
Second item with inline code
Nested:
- Sub-item one
- Sub-item two with bold emphasis

Ordered:

First step
Second step with a sentence that wraps to confirm leading and indentation behave when items are multi-line and naturally extend across the column.
Third step

Glitch component

The signature <Glitch /> component, in inline and block variants:

Inline: This 404 error tells you the page is gone.
Inline larger phrase: ABSTRACT DATA

Block (centered, full-width):

DOCUMENTATION, ENGINEERED

Callouts (asides)

Code blocks

Bash / shell

# add the theme to a Starlight project
bun add @abstractdata/starlight-theme

# run the dev server
bun dev

# build for production
bun run build

TypeScript

import type { StarlightPlugin } from '@astrojs/starlight/types';

export interface Config {
  motion: 'full' | 'calm';
  credit: 'auto' | 'hide';
  version?: string;
}

export default function plugin(opts: Config = {} as Config): StarlightPlugin {
  const motion = opts.motion ?? 'full';
  return {
    name: '@abstractdata/starlight-theme',
    hooks: {
      'config:setup'({ updateConfig, logger }) {
        updateConfig({ /* ... */ });
        logger.info(`motion: ${motion}`);
      },
    },
  };
}

JavaScript / Astro config

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import abstractData from '@abstractdata/starlight-theme';
import { abstractDataThemes } from '@abstractdata/starlight-theme/shiki';

export default defineConfig({
  site: 'https://docs.example.com',
  integrations: [
    starlight({
      title: 'Acme Docs',
      expressiveCode: { themes: [...abstractDataThemes] },
      plugins: [abstractData({ motion: 'full', version: 'v1.0.0' })],
    }),
  ],
});

Python (sanity check for non-JS languages)

from dataclasses import dataclass
from typing import Literal

@dataclass(frozen=True)
class ThemeConfig:
    motion: Literal["full", "calm"] = "full"
    credit: Literal["auto", "hide"] = "auto"
    version: str | None = None

def apply(config: ThemeConfig) -> None:
    """Apply the Abstract Data theme config."""
    print(f"motion={config.motion} credit={config.credit}")

CSS

:root {
  --ad-cyan: #00d9ff;
  --ad-gold: #d4af37;
  --ad-burgundy: #8b2635;
}

.brand-headline {
  font-family: 'Orbitron Variable', sans-serif;
  color: var(--ad-cyan);
  text-shadow: 0 0 14px rgba(0, 217, 255, 0.45);
}

JSON

{
  "name": "@abstractdata/starlight-theme",
  "version": "0.3.0",
  "exports": {
    ".": "./src/index.ts",
    "./shiki": "./src/shiki/index.ts"
  }
}

Tables

Mode	Hex grid	Glow	Scanline	Glitch	Recommended for
HUD (default)	yes	yes	yes	yes	abstractdata.io, marketing-y docs
Calm	no	no	no	no	client docs, internal wikis

Tabs

bun add @abstractdata/starlight-theme

npm install @abstractdata/starlight-theme

pnpm add @abstractdata/starlight-theme

Steps

Install the theme.
Terminal window
```
bun add @abstractdata/starlight-theme
```

import abstractData from '@abstractdata/starlight-theme';

starlight({ plugins: [abstractData()] });

Run the dev server and verify the brand renders.
Terminal window
```
bun dev
```

Cards

HUD surface

Animated hex grid, holographic shimmer on code, version chip glitch, cyan glow on H1.

Calm surface

Same palette and fonts, no animations. Recommended for prose-heavy client docs.

Quickstart Five-minute install and config walkthrough.

Migrating to this theme Already running Starlight? Drop the theme in without losing your existing setup.

Expressive code features

These meta-features are part of Astro’s expressive-code integration and are worth verifying in both dark and light modes.

File title + line highlight

import type { StarlightPlugin } from '@astrojs/starlight/types';

export interface Config {
  motion: 'full' | 'calm';
  credit: 'auto' | 'hide';
  version?: string;
}

export default function plugin(opts: Config): StarlightPlugin {
  return { name: '@abstractdata/starlight-theme', hooks: {} };
}

Diff markers

const motion = opts.motion ?? 'full';
const motion = opts.motion ?? 'calm';

Line numbers

bun install
bun dev
bun run build
bun run preview

Terminal frame

$ bun create @abstractdata/docs my-project
┌─[ ABSTRACT DATA · DOCS ]─────────────────┐
│ Scaffolding a branded Starlight site      │
└──────────────────────────────────────────┘

✓ my-project scaffolded.

Code + title together

{
  "entryPoints": ["../../my-lib/src/index.ts"],
  "tsconfig": "../../my-lib/tsconfig.json",
  "outputDir": "src/content/docs/api/ts"
}

Badge

All five variants Starlight ships:

New Caution Danger Note Success

Badges inline with a heading:

Feature Beta v0.4+

FileTree

<FileTree>

Directorypackages/
- Directorystarlight-theme/
  - Directorysrc/
    Directorycomponents/
    Footer.astro
    Glitch.astro
    Hero.astro
    SocialIcons.astro
    VersionPicker.astro New in v0.4
    Directorystyles/
    theme.css
    hud.css
    index.ts The plugin entry
- Directorycreate-docs/
  - Directorybin/
    cli.js
Directoryapps/
- Directoryplayground/
  - …

Icon

A sample of Starlight’s built-in icon set (Heroicons + Phosphor subset):

Icon sizes:

LinkButton

Get started Read the docs View on GitHub

Blockquote

“Documentation, engineered.”

— Abstract Data

Horizontal rule

Above the rule.

Below the rule.

Keyboard

Press ⌘ + K to open the search modal. Press Esc to close.

End

If everything above looks right, the theme is in good shape. If anything is off, open a screenshot diff against docs/round-2-mockup.html and tell me what’s drifting.