Singular 3 Theme

TL;DR: Single-file theme system using Geist Mono font, golden ratio typography, unified blue accent color, and an interactive Three.js torus knot logo. Theme lives in custom.scss, logo config in logo.inline.ts.

Singular 3 Theme (v1)

---

Files

Your Theme (edit this)

File	Contents
quartz/styles/custom.scss	Everything - fonts, colors, typography, layout

Quartz Core (don’t edit)

File	Purpose
quartz/styles/base.scss	Base element styles
quartz/styles/variables.scss	Breakpoints, grid
quartz/styles/callouts.scss	Callout styling

Output

File	Note
public/index.css	Compiled CSS (auto-generated)

Other

File	Purpose
content/guides/design-system-v1.md	This documentation
quartz/static/fonts/	Geist Mono font files
quartz/components/scripts/logo.inline.ts	Three.js logo configuration

---

Workflow

Edit theme: Open quartz/styles/custom.scss, make changes, rebuild

Rebuild: npx quartz build --serve

Backup: Copy design-system.md to design-system-v2.md before major changes

---

custom.scss Structure

1. FONTS           - @font-face declarations
2. THEME COLORS    - Light/dark CSS variables
3. TYPOGRAPHY      - Golden ratio scale, headings
4. LAYOUT          - Components, links, tables
5. RESPONSIVE      - Mobile/tablet/print overrides

---

Layout

Breakpoint	Width	Sidebar	Center
Mobile	< 800px	Hidden	100%
Tablet	800-1200px	220px	100%
Desktop	> 1200px	320px	Auto

Content Width

Element	Value
article	min(100%, 90vw)
p	min(100%, 85vw)

---

Tables

Default: Fit container, text wraps, no horizontal scroll

Wide tables: Wrap in <div class="table-scroll">...</div> for scroll

---

Typography

Base: 20px (golden ratio scale, φ = 1.618)

Element	Size	Weight
Body	20px	400
H1	52.4px	700
H2	41.2px	600
H3	32.4px	600
H4	25.4px	500
H5/H6	20px	500/400
Code	0.9em	400

Font: Geist Mono throughout

Mobile: 17px base, scaled headings

---

Theme Colors

Edit these in custom.scss under :root (light) and :root[saved-theme="dark"]

Core Palette

Light Mode

Variable	Color	Value
--light		#FFFFFF
--lightgray		#E8E8E8
--gray		#8E8E8E
--darkgray		#4A4A4A
--dark		#1A1A1A
--secondary		#1D6BBE
--tertiary		#2D8CFF

Dark Mode

Variable	Color	Value
--light		#1D1F21
--lightgray		#373B41
--gray		#707880
--darkgray		#C5C8C6
--dark		#E0E0E0
--secondary		#5DA5DA
--tertiary		#7CB9E8

---

Accent Color Usage

Single unified blue accent (--secondary / --tertiary) used throughout:

Element	Variable
Links	--secondary
Link hover	--tertiary
TOC active	--secondary
Backlinks	--secondary
Tags	--secondary
Blockquote border	--secondary
Graph focused node	--secondary
Icon active	--secondary
Code values	--secondary

---

Semantic Colors

Variable	Light	Dark	Usage
--color-red	#e93147	#fb464c	Errors
--color-orange	#ec7500	#e9973f	Warnings
--color-yellow	#e0ac00	#e0de71	Caution
--color-green	#08b94e	#44cf6e	Success
--color-cyan	#00bfbc	#53dfdd	Info
--color-blue	#086ddd	#027aff	Links
--color-pink	#d53984	#fa99cd	Highlight

---

Code Syntax

Variable	Light	Dark
--code-keyword	#d53984	#fa99cd
--code-string	#08b94e	#44cf6e
--code-function	#e0ac00	#e0de71
--code-property	#00bfbc	#53dfdd
--code-value	var(--secondary)	var(--secondary)

---

Element Showcase

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph with bold, italic, and inline code.

Links

Internal: Home Page External: GitHub Tags: design theme

Lists

• Unordered item
  • Nested item

1. Ordered item
2. Second item

Code

function fibonacci(n) {
  const phi = (1 + Math.sqrt(5)) / 2;
  return Math.round(Math.pow(phi, n) / Math.sqrt(5));
}

Callouts

Note

Info callout

Tip

Helpful suggestion

Warning

Caution message

Table

Element	File
Everything	custom.scss

---

Three.js Logo

The site uses an interactive 3D torus knot logo built with Three.js.

Configuration

Edit quartz/components/scripts/logo.inline.ts:

const LOGO_CONFIG = {
  size: 69,           // Logo size in pixels
  shader: "obsidian", // Material preset
  shape: "classic",   // Knot shape
  radius: 0.45,       // Knot radius
  tube: 0.19,         // Tube thickness
  rotationSpeed: 1,   // Base rotation speed
  showSettings: true  // Show settings panel (gear icon)
}

Features

• Mouse tracking: Logo rotation follows cursor position
• Interactive: Settings panel (gear icon, bottom-right) for live customization
• Materials: chrome, obsidian, gold, holographic, neon, glass, copper, emerald, midnight, lava, silver, plasma
• Shapes: classic, trefoil, complex, twisted, star, spiral

Disabling Settings Panel

For production, set showSettings: false to hide the gear icon.