Getting Started
Axiom CSS is an experimental CSS project that serves as a thoughtful starting point for modern web interfaces. Unlike traditional frameworks that impose rigid structures, Axiom CSS is designed to be entirely customised by you. Think of it as a boilerplate, or perhaps a carefully curated foundation—change it, tweak it, delete most of it if you wish. It's your CSS.
The framework draws inspiration from many existing CSS approaches but charts its own course, prioritising flexibility and customisation over convention. As such, the very notion of documentation might seem contradictory—but these pages serve as a reference for the default utility classes and patterns, should you choose to use them.
The core philosophy and key features of Axiom CSS are outlined on the home page.
Installation
Axiom CSS is currently in active development and experimentation. Rather than formal distribution channels, you can obtain the latest version directly from this documentation site, which always reflects the current state of the project.
The framework consists of three essential files:
- config.css — Contains all custom properties and design tokens
- base.css — Provides sensible defaults and foundational styles
- utility.css — Houses all utility classes and functional styles
You can download these files directly from this site's source. Link them in your HTML in the order above, ensuring config.css loads first as it contains the custom properties that other modules depend upon.
Configuration
Axiom CSS is built around the concept of complete customisation. The config.css file contains design tokens for colours, spacing, typography, and other foundational elements. These tokens are designed to be modified to match your project's specific needs.
The framework's colour system is particularly flexible, supporting automatic dark mode inversion and contextual colour relationships. Spacing follows a consistent scale, and typography utilities are built to work harmoniously with your chosen typefaces.
See the Configuration section for detailed information about customising these design tokens.
Philosophy
Axiom CSS embraces the utility-first approach while maintaining semantic clarity. Rather than prescribing how you should build interfaces, it provides the tools to build them your way. The framework is intentionally minimal, avoiding the bloat that comes with trying to solve every possible use case.
This approach means that Axiom CSS grows with your project—you add what you need, modify what doesn't quite fit, and remove what you don't use. It's a foundation, not a framework; a starting point, not a destination.