Style Guide

This page shows all styling elements in one place for comparison and iteration.

Font Sandbox

Candidate display fonts for headings and the homepage masthead. Body text stays Inter.

Display Fonts — Heading Samples

Monospace Fonts — Count/Data Samples

Color Palette

Accent colors are set per-section via CSS custom properties. HSL format: H S% L%

Current Accents

Artifact Palette (Current)

Muted, desaturated colors that feel like a wizard's study.

Implementation

Set in layout files via CSS variables:

<div style={{
  "--primary": "200 80% 55%",
  "--primary-foreground": "0 0% 98%",
} as React.CSSProperties}>

Typography

Heading Hierarchy

Heading 2 — Major Section

Heading 3 — Subsection

Heading 4 — Detail Header

Body Text

This is standard body text. It should be comfortable to read at length. The quick brown fox jumps over the lazy dog. Bold text draws attention to key terms. Italic text is used for flavor, emphasis, or game term categories.

A second paragraph tests spacing between blocks. Lists, tables, and other elements should flow naturally from prose without excessive gaps.

Links

Here is a standard link within body text, and here is a link to another page.

Lists

Unordered List

• First item with brief content
• Second item that spans multiple lines to show how wrapping behaves in the current typography settings
• Third item
  • Nested item one
  • Nested item two
• Fourth item

Ordered List

1. First numbered item
2. Second numbered item with more text to show line wrapping behavior
3. Third numbered item
   1. Nested numbered item
   2. Another nested item

Definition-Style (Bold Lead)

Ability Score Increase. Increase one ability score of your choice by 1, to a maximum of 20.

Damage Reduction. When you're hit by an attack while wearing Heavy armor, any Bludgeoning, Piercing, or Slashing damage is reduced by your Proficiency Bonus.

Spellcasting Focus. You can use an arcane focus as a spellcasting focus for your wizard spells.

Tables

Simple Two-Column

Multi-Column Data Table

Spell Table Format

Tabs Component

Callouts

Blockquotes

This is a blockquote, typically used for flavor text or quoted material from the source. It should be visually distinct but not overwhelming.

Horizontal Rules

Content above a horizontal rule.

Content below a horizontal rule. Rules separate major sections.

Combined Example: Feat Entry

Great Weapon Master

General Feat (Prerequisite: Level 4+, Strength 13+)

You've learned to use the weight of a weapon to your advantage, granting you the following benefits:

Ability Score Increase. Increase your Strength score by 1, to a maximum of 20.

Heavy Weapon Mastery. When you hit a creature with a weapon that has the Heavy property as part of the Attack action on your turn, you can cause the weapon to deal extra damage to the target. The extra damage equals your Proficiency Bonus.

Hew. Immediately after you score a Critical Hit with a Melee weapon or reduce a creature to 0 Hit Points with one, you can make one attack with the same weapon as a Bonus Action.

Combined Example: Class Traits Table

Combined Example: Species Entry

Elf Traits

Darkvision. You have Darkvision with a range of 60 feet.

Fey Ancestry. You have Advantage on saving throws you make to avoid or end the Charmed condition.

Keen Senses. You have proficiency in the Perception skill.

Trance. You don't need to sleep, and magic can't put you to sleep. You can finish a Long Rest in 4 hours if you spend those hours in a trancelike meditation, during which you retain consciousness.

Spacing Reference

The following shows stacked elements to evaluate vertical rhythm:

Section A

First paragraph of section A.

Second paragraph of section A.

Section B

First paragraph of section B with a list following:

• Item one
• Item two
• Item three

And then continuing prose after the list.

Section C

Text immediately after a table to show spacing.