Style guide

This page exercises every text effect, every Starlight built-in component, and the custom ember components. Use it as a styling test surface and as a reference when authoring new docs.

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Inline text

Plain paragraph with bold text, italic text, bold italic, strikethrough, inline code, and a link to the homepage.

Keyboard combination: press Ctrl+Shift+P to open the command palette.

A custom highlighted term sits inline without breaking the flow. Useful for emphasizing a single phrase like the EmbersTextAPI.

Footnote demo¹.

Paragraphs and blockquotes

A standard paragraph of body text. Manrope renders here at 16px with 1.65 line-height. Long-form prose should remain comfortable to read for several minutes; the cream-on-deep-brown contrast aims for a relaxed reading session by firelight rather than a clinical datasheet.

A blockquote with a single line of attribution.

A multi-line blockquote that spans more than one sentence to demonstrate how the left-border, italic body, and rounded right corners hold up across line wraps. The accent color reinforces the warm palette without competing with the surrounding body text.

— Anonymous

Lists

Unordered:

• First item
• Second item
  • Nested item
  • Another nested item
    • Deeper nest
• Third item

Ordered:

1. Open the project
2. Run the dev server
3. Iterate on styles

Mixed:

1. Top-level numbered step
   • Sub-bullet under a numbered step
   • Another sub-bullet
2. Second numbered step

Task list (GitHub-flavored):

• Define design tokens
• Restyle Starlight components
• Add scroll-driven decorations (out of scope)
• Add KaTeX support (deferred)

Tables

Token	Value	Where used
--ember-accent	#E8804A / #B8472E	Links, buttons, focus
--radius-lg	14px	Cards, raised surfaces, codeblocks
--motion-base	240ms	Buttons, tab indicators

Aligned columns:

Left aligned	Centered	Right aligned
Maroon	Red	Orange
Cream	Amber	Gold

Inside an aside:

Tokens at a glance

Layer	File
Tokens	src/styles/theme.css
Rules	src/styles/global.css

Code blocks

A plain fenced block:

const flame = { color: 'ember', radius: 14 };

With a filename:

ember.ts

export interface Ember {
  size: 'sm' | 'md' | 'lg';
  ariaLabel?: string;
}

export function ignite(ember: Ember): string {
  return `Ember of size ${ember.size}`;
}

With line highlights {2,4-6}:

theme.ts

export const tokens = {
  accent: '#E8804A',
  radius: { sm: 6, md: 12, lg: 14 },
  motion: {
    fast: 160,
    base: 240,
  },
};

With diff syntax (ins / del):

const config = {
 background: '#000',
 accent:     '#fff',
 background: 'var(--ember-bg-base)',
 accent:     'var(--ember-accent)',
};

Terminal example:

npm install @fontsource/manrope @fontsource/jetbrains-mono
npm run dev

A long line that wraps:

const description = "This is a deliberately long single line of code that should wrap inside the code block frame to demonstrate how Expressive Code handles overflow without horizontal scroll.";

Asides

Note

A note aside in palette-aligned amber-tan. Useful for supplementary information that’s good to know but not load-bearing.

Use the toggle

The header’s sun/moon icon flips between Glowing Ember and Warm Hearth. Try it.

Heads up

Caution asides reuse the ember accent color so warnings stay in palette without fighting the rest of the page.

Stop and read

Danger asides use the deeper --ember-accent-deep red. Reserved for corrections users absolutely must read.

Hearth callout

The custom <Hearth> component is a warmer cousin to the four standard asides. Use it for editorial context — motivation, background, personal notes — not for strict semantic warnings.

Why Manrope

Manrope’s letterforms are slightly rounder than Inter’s, especially on the lowercase a and g. On a deep-brown background, the softness reads as warm rather than clinical — closer to a paperback than a datasheet.

Reduced motion is honored

Every animated effect (hover lifts, glow pulses) collapses to static when the user’s OS reports prefers-reduced-motion: reduce. Color and opacity transitions remain, because they’re informational rather than motion-triggering.

Cards & CardGrid

EmbersTextAPI

A text-rendering API used by other mods.

Orbital Railgun

High-impact gameplay mod for 1.20.1.

Spelunkery Plus

Cave generation and exploration tweaks.

LogFilter

Filter noisy log lines for cleaner consoles.

LootLog

Per-mob loot logging for balance reviews.

Browse mods Jump to the mod documentation index.

LinkButton variants

Primary action Secondary Minimal

Tabs

Gradle

build.gradle

dependencies {
  implementation 'dev.tysontheember:embers-text-api:1.0.0'
}

Maven

pom.xml

<dependency>
  <groupId>dev.tysontheember</groupId>
  <artifactId>embers-text-api</artifactId>
  <version>1.0.0</version>
</dependency>

SBT

build.sbt

libraryDependencies += "dev.tysontheember" %% "embers-text-api" % "1.0.0"

Steps

1. Install the dependency.

   npm install @fontsource/manrope

2. Register it in astro.config.mjs under customCss.

3. Reference the font via var(--font-sans) in your stylesheet.

4. Run npm run dev to verify.

FileTree

• Directorysrc

  • Directorycomponents

    • Ember.astro
    • Hearth.astro
  • Directorycontent

    • Directorydocs

      • index.mdx
      • styleguide.mdx
  • Directorystyles

    • theme.css
    • global.css
• Directorypublic

  • favicon.svg
• astro.config.mjs
• package.json

Badges

default note tip caution danger success

Icons

A small grid of Starlight built-in icons, recolored to the ember accent through global CSS:

warning

rocket

document

github

external

information

Horizontal rule

Below this paragraph is a horizontal rule rendered as a soft fade.

---

And another paragraph after the rule.

Image

An image with a caption (uses the site favicon as test content):

Figure 1 — the site favicon.

Embedded iframe

A placeholder iframe with rounded corners (uses about:blank so no external request is made):

---

End of style guide.

Footnotes

1. This is the footnote body. Backlink should appear at the end. ↩