Style Guide

Typography

Headings

Headings use Noto Serif for H1 and Poppins for H2-H6 from the Northwestern CDN. Body text uses Akkurat Pro.

The page title above is the live H1 example.

Second Level

Content below an h2 heading.

Third Level

Content below an h3 heading.

Fourth Level

Content below an h4 heading.

Fifth Level

Content below an h5 heading.

Sixth Level

Content below an h6 heading.

A Heading That Wraps to Multiple Lines Because the Title Describes a Complex Configuration Scenario

Content below a long heading. The anchor link icon should stay aligned and the heading font should wrap without clipping.

Inline Elements

Regular paragraph text in Akkurat Pro. This text contains bold, italic, inline code, ~~strikethrough~~, and a link. Links render as bold purple with a dashed underline that turns solid on hover.

Blockquotes

“I don’t know why people expect art to make sense. They accept the fact that life doesn’t make sense.”
David Lynch

Blockquotes use a thick purple left border with a tinted background.

Nested blockquotes indent further with the same styling.

Code inside a blockquote:
Terminal window
pnpm add @nu-appdev/northwestern-starlight-theme
The frame borders should coexist with the blockquote border.

Footnotes

Footnotes follow GitHub Flavored Markdown syntax. Use [^label] in text and define the footnote content at the bottom.

Northwestern was founded in 1851¹ and has two campuses in the Chicago metropolitan area². The Lakefill extended the Evanston campus 1,000 feet into Lake Michigan³.

Lists

Unordered

Top-level items use solid purple square bullets. Nested items use outline squares.

First item with some content
Second item
- Nested item with outline bullet
- Another nested item
  - Third level nesting
Third item

Deep Nesting

Level 1 with solid square bullet
- Level 2 with outline square
  - Level 3 inherits level 2 styling
    - Level 4 tests whether bullet styles degrade
- Back to level 2
Mixed list types:
1. Ordered inside unordered
2. Second ordered item
  - Unordered inside ordered inside unordered

Ordered

First step in a process
Second step with detail
1. Sub-step A
2. Sub-step B
Final step

Asides

Badges

Variants

Default Note Tip Success Caution Danger

Sizes

Small Medium Large

Buttons

Variants

Primary Secondary Minimal

With Icons

Get Started Documentation GitHub

Cards

Single Card

A standalone card with a title and descriptive content.

Documentation

Write clear, structured documentation for your projects.

Theming

Apply consistent branding across all documentation sites.

Link Cards

Getting Started Learn how to install and configure the theme.

Customization Override theme tokens with your own CSS.

Code Blocks

Terminal Commands

pnpm add @nu-appdev/northwestern-starlight-theme

Syntax Highlighting

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";

export default defineConfig({
    integrations: [
        starlight({
            plugins: [northwesternTheme()],
            title: "My Docs",
        }),
    ],
});

Diff View

:root {
   --color-primary: blue;
   --color-primary: #4e2a84;
}

JSON

{
    "name": "@nu-appdev/northwestern-starlight-theme",
    "type": "module",
    "version": "2.0.0",
    "peerDependencies": {
        "@astrojs/starlight": ">=0.32.0",
        "astro": ">=5.1.5"
    }
}

Tabs

Package Manager Tabs

pnpm add @nu-appdev/northwestern-starlight-theme

npm i @nu-appdev/northwestern-starlight-theme

yarn add @nu-appdev/northwestern-starlight-theme

bun add @nu-appdev/northwestern-starlight-theme

In light mode, the theme uses --nu-purple-100 (#4e2a84) as the primary accent color. The navigation background is --nu-purple-120 (#401f68) with white text.

In dark mode, the accent shifts to --nu-purple-40 (#a495c3) for better contrast against dark backgrounds. The navigation retains the same purple background.

Steps

Install the theme package

pnpm add @nu-appdev/northwestern-starlight-theme

Add the plugin to your Astro config

import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";

export default defineConfig({
    integrations: [
        starlight({
            plugins: [northwesternTheme()],
        }),
    ],
});

Start the dev server
Terminal window
```
pnpm dev
```
Verify the theme is applied

Open your browser and confirm you see Northwestern purple branding, Poppins headings, and sharp corners.

File Tree

Directorysrc/
- Directorycontent/
  - Directorydocs/
    index.mdx Homepage
    getting-started.mdx
    customization.md
- Directorystyles/
  - custom.css
astro.config.ts
package.json

Tables

Token	Value	Usage
`--nu-purple-100`	`#4e2a84`	Brand primary
`--nu-purple-120`	`#401f68`	Navigation background
`--nu-purple-40`	`#a495c3`	Dark mode accent
`--nu-font-body`	Akkurat Pro	Body text
`--nu-font-heading`	Poppins	Headings

Feature	Light Mode	Dark Mode
Body background	`#f8fafc`	`#18181b`
Card surface	`#fff`	`#292929`
Sidebar	`#fff`	`#1e1e1e`
Navigation	`#401f68`	`#401f68`

Wide Table

Token	Light	Dark	Fallback	Usage	Component	Notes	Source
`--nu-purple-100`	`#4e2a84`	`#4e2a84`	`rebeccapurple`	Brand primary	All	Northwestern Purple	`variables.css`
`--nu-purple-40`	`#a495c3`	`#a495c3`	`#9370db`	Dark accent	Links, badges	Lighter for contrast	`variables.css`
`--nu-border-color`	`#ccc`	`#3a3a3a`	`#e5e7eb`	Borders	Tables, HR, cards	Neutral gray	`variables.css`

Horizontal Rule

Content above a horizontal rule.

Content below a horizontal rule.

Adjacent Components

These components stack with no separators to show margin collapse and spacing between styled blocks.

const theme = northwesternTheme({ homepage: { layout: "split" } });

A blockquote immediately after a code block. Margins between these three elements should be consistent.

Left	Right
Table immediately after a blockquote	Check spacing

Mermaid Diagrams

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[Deploy]

sequenceDiagram
    participant U as User
    participant A as Application
    participant D as Database

    U->>A: Submit form
    A->>D: Save record
    D-->>A: Confirmation
    A-->>U: Success message

pie title Northwestern Schools
    "Weinberg" : 35
    "McCormick" : 25
    "Medill" : 15
    "Kellogg" : 15
    "Other" : 10

For more diagram types see the Mermaid Diagrams page.

Nine men gathered to incorporate a university that would serve the Northwest Territory. ↩
The Evanston campus sits on the lakefront; the Chicago campus is in Streeterville. ↩
Constructed in 1962, the Lakefill created 22 acres of new land. ↩