Your site’s visual identity shapes how readers experience the work itself. A cool palette with spare layout carries different weight than something warm and textured. A scholarly serif heading reads differently than a clean sans-serif. These are rhetorical choices, not just aesthetic ones, and they’re entirely yours to make.
Xanthan keeps all visual decisions — colors, fonts, spacing — in a single file: assets/css/base.css. Understanding a little about how that file works will let you make changes with confidence.
Rather than styling each element individually, base.css uses named variables. Think of it like a publisher’s house style: you define a small palette of colors with human-readable names, then assign those names to roles — background, body text, accent, card surface. Change a color in the palette and it updates everywhere that color appears. Swap which color plays which role, and you shift the whole composition without touching the underlying palette.
Here’s what that looks like in the file:
/* Named colors — your raw palette */
--sage: #6b8e7f;
--warm-white: #f5f3f0;
--golden-clay: #b8956a;
/* Semantic roles — what each color does */
--bg-page: var(--warm-white);
--text-body: var(--sage-dark);
--accent-primary: var(--sage);
The first group is material — just colors with names. The second group is decision — which color plays which part. Most of the time, you’ll only need to change one of these groups.
The four variables that make the biggest visual difference:
| Variable | Controls |
|---|---|
--bg-page |
Page background |
--text-body |
Body text |
--accent-primary |
Links, buttons, highlights |
--bg-card |
Card and panel backgrounds |
Use the color pickers below to explore how these four variables interact. The preview updates live. When you find something you like, the CSS snippet at the bottom shows exactly what to paste into base.css.
This is what your body text looks like at reading length. Good typography — the right color contrast, size, and spacing — lets readers follow an argument without effort.
View the full project →Open assets/css/base.css in your editor. Use Cmd-F / Ctrl-F to search for the variable name you want to change — for example, --accent-primary. You’ll find it in the :root { } block near the top of the file.
You can paste a hex color directly:
--accent-primary: #5b7fa6;
Or define a named color first and reference it — useful if you plan to use the same color in multiple places:
--slate-blue: #5b7fa6;
--accent-primary: var(--slate-blue);
Both work the same way. Save the file. If you’re previewing locally with bundle exec jekyll serve, the page will refresh automatically. If you’re working through GitHub, push your change and wait a minute for the site to rebuild.
Fonts work the same way — three variables control almost everything you see:
--font-heading: 'Lora', serif;
--font-body: 'Source Sans 3', sans-serif;
--font-mono: 'Fira Mono', monospace;
To use a different font, you need two things: an import that fetches it from the web, and the variable that tells the site to use it.
Google Fonts is the easiest source. Find a font you like, click “Get font,” then “Get embed code,” and copy the @import line. Paste it at the very top of base.css, before anything else, then update the corresponding variable in :root:
/* At the very top of base.css */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');
/* In the :root block */
--font-body: 'EB Garamond', serif;
The font name in the @import URL and in the variable value must match exactly, including capitalization.
A few that work well for academic and humanities sites:
| Font | Character | Works well for |
|---|---|---|
| Lora | Literary, slightly formal | Body text in longer essays |
| EB Garamond | Classic, scholarly | Traditional academic feel |
| Source Serif 4 | Clean, readable | General use, mixed content |
| Playfair Display | Elegant, high-contrast | Display headings |
| Inter | Modern, neutral | Navigation, UI, captions |
Contrast is worth checking before you commit to a color scheme. A soft sage on warm white might look elegant and still fail accessibility standards for body text at small sizes.
Colors didn’t change after saving: Clear your browser cache (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows). If you’re on GitHub Pages, confirm your change was pushed and that the build completed successfully.
Only some elements changed:
Not every element uses the four main semantic variables. Navigation, headers, and some components have their own rules in nav.css, headers.css, and elsewhere. Use your browser’s Inspect tool (right-click any element → Inspect) to see exactly which CSS rule is controlling a given color.
A font isn’t loading:
Check that the @import line is the very first thing in base.css — before even the comment block. Confirm the font name in the URL matches the variable value exactly, including spaces and capitalization.