System Reference
Every text pattern available in Axiom01 — fully automatic, zero classes needed. Our typography scales mathematically and adapts to viewport dimensions.
Axiom01 uses a mathematical type scale based on the Golden Ratio (1.618). Headings scale naturally using --a-heading-scale: 1.15 on mobile and 1.25 on desktop. All sizes are calculated — change one variable in your theme to adjust the entire scale instantly.
Axiom01 uses CSS variables to assign three distinct font stacks.
Inter, system-ui, -apple-system, "Segoe UI", sans-serif
"Lora", Georgia, Cambria, "Times New Roman", serif
"JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace
Standard HTML elements are fully styled without any classes.
You can bold text, or use emphasis.
Highlight important text using the mark element.
Display deleted or inserted edits.
Small print uses the small element.
Keyboard shortcuts like ⌘ + K are distinct.
By default, text blocks in Axiom01 are constrained to 65ch — the optimal reading length supported by typography research. On large monitors it will not stretch edge-to-edge, preserving comfortable line length without any extra markup.
This is a standard paragraph element. It demonstrates the ideal line height and character limits for maximum readability. Notice how it wraps automatically to prevent eye strain.
This paragraph uses the muted class to apply --a-color-on-surface-variant for secondary information.
When writing articles or documentation, wrap your content in <div class="prose">. This automatically styles all nested headers, paragraphs, lists, and blockquotes with perfect vertical rhythm and spacing, ensuring a beautiful reading experience.
Axiom01 handles everything inside a prose block seamlessly.
"Typography is the foundation of the web. If your text is hard to read, your design has failed." — Unknown Designer
You can even include inline code snippets effortlessly.