Digital publishing offers something traditional print never could: the ability to design your argument, not just write it. Every choice you make about typography, images, headers, and layout shapes how readers experience your ideas. A pull quote can emphasize a key insight. An image positioned just right can reinforce a claim. A carefully chosen header can shift the mood between sections. These aren’t just aesthetic flourishes—they’re rhetorical tools.
Xanthan gives you powerful, reusable components that handle the technical complexity while leaving you in creative control.
Each guide in this section follows the same pattern: we show you the code in a highlighted box, then you see the result immediately below it. Copy the code. Paste it into your own page. Change the content. See what happens. This is how you learn—not by memorizing syntax, but by experimenting with real examples.
Start with typography and images. These are fundamental to any digital project and you’ll use them on every page. Add headers when you want to create more sophisticated visual structure.
And remember: good design serves your content. If a visual element doesn’t strengthen your argument or improve your readers’ experience, you don’t need it. The goal isn’t to use every feature Xanthan offers—it’s to use the features that make your work more effective and engaging.
Text formatting shapes reading experiences. Create clear visual hierarchies with headings, emphasize key passages with pull quotes and blockquotes, and use footnotes that don't disrupt the reading flow. Good typography isn't about making text look pretty—it's about making ideas clear.
Integrate visual evidence into your writing. Position images alongside text, create full-width "jumbotron" moments, compare images side-by-side, and build image carousels. Where do readers need visual evidence? When should an image dominate the screen? How can images work with text rather than just illustrate it?
Use header images to create visual structure and atmosphere. Headers aren't just decorative—they signal transitions, establish mood, and give readers mental breaks between sections. Add header images to pages, control what parts of images are visible, and create "peekaboo" effects where images reveal themselves as readers scroll.
Define the visual identity of your entire site. Choose a color palette that sets your site's tone, select typefaces that match your content's character, and create consistent visual unity across all your pages. Want a serious, academic feel? Playful and experimental? Minimalist and modern?
Help visitors navigate your content with top navigation bars, card-based layouts for essay collections, and interactive maps. Good navigation isn't just about usability—it's about showing readers how your ideas connect and inviting them to explore.
Bring design elements together into immersive narrative experiences. Layer text over background images, create side-scrolling sequences, and build stories that reveal themselves as readers scroll. This is where typography, images, and layout combine into something greater than the sum of their parts.
You don’t need to be a designer or developer to experiment with Xanthan’s features. AI tools can help you modify styles, troubleshoot problems, and try new approaches without needing deep technical knowledge.
“Make the pull quotes a different color” or “Increase the spacing between sections”—AI can show you exactly where to make CSS changes
“My image carousel isn’t working” or “Why is my text overlapping?”—AI can identify syntax errors and suggest fixes
“I want a section with a colored background and two columns”—AI can create custom components based on Xanthan’s existing patterns
“Why does this include need a page-dir parameter?”—AI can explain what code does and how to adapt it
Xanthan’s clean, well-documented structure makes AI assistance more reliable and trustworthy. The AI can see your site’s patterns and suggest changes that work within your existing design system.
Learn how to work productively with AI →
As you experiment, you’ll have questions and hit snags. That’s normal and expected.
Troubleshooting addresses common issues and how to fix them—from pages not updating to images not loading.
Using AI Assistance shows you how to get help from AI tools when you’re stuck or want to try something new.