Style Guide

Typography

Headings

Headings use Poppins (H1, H2) and Akkurat Pro (H3-H6) from the Northwestern CDN.

Fourth Level

Content below an h4 heading.

Fifth Level

Content below an h5 heading.

Sixth Level

Content below an h6 heading.

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.

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

Ordered

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

---

Asides

Note

A default note aside for supplementary information.

Tip

A tip aside for helpful suggestions and best practices.

Caution

A caution aside for something that needs attention.

Danger

A danger aside for critical warnings about data loss or security.

Custom Title

Asides support custom titles through the bracket syntax.

Pro Tip

Custom titles make asides more scannable in longer documents.

---

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

Install the theme

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

Syntax Highlighting

astro.config.ts

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

package.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

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

npm

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

yarn

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

bun

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

Content Tabs

Light Mode

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.

Dark Mode

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

1. Install the theme package

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

2. Add the plugin to your Astro config

   astro.config.ts

   import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";
   
   export default defineConfig({
       integrations: [
           starlight({
               plugins: [northwesternTheme()],
           }),
       ],
   });

3. Start the dev server

   pnpm dev

4. 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

---

Horizontal Rule

Content above a horizontal rule.

---

Content below a horizontal rule. Rules render as a 3px gray bar.

---

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.

Footnotes

1. Nine men gathered to incorporate a university that would serve the Northwest Territory. ↩

2. The Evanston campus sits on the lakefront; the Chicago campus is in Streeterville. ↩

3. Constructed in 1962, the Lakefill created 22 acres of new land. ↩