Core Philosophy
Zero Dependencies
Pure HTML, CSS, and JavaScript. No build tools, no package managers, no complexity.
Fibonacci Design
Spacing, typography, and grid layouts built on the Golden Ratio and Fibonacci sequence.
Modular CSS
Import the full framework or pick only the components you need. No bloat.
Accessibility First
ARIA attributes, focus-visible states, reduced motion support, and semantic HTML.
Phosphor Icons
1,500+ icons in 6 weights, bundled locally. No CDN required.
Regular
Fill
Bold
Light
Thin
Duotone
Icons by Phosphor Icons — MIT Licensed. See full documentation →
Getting Started
Quick Start
Include the CSS and JS files in your HTML. No build tools needed.
<!-- CSS -->
<link rel="stylesheet" href="css/vanduo.css">
<!-- JS (order matters) -->
<script src="js/utils/helpers.js"></script>
<script src="js/vanduo.js"></script>
<!-- Add only the components you need -->
<script src="js/components/navbar.js"></script>
<script src="js/components/modals.js"></script>
<!-- ... -->Modular CSS Imports
Import only what you need instead of the full bundle:
<!-- Full framework -->
<link rel="stylesheet" href="css/vanduo.css">
<!-- Or pick individual modules -->
<link rel="stylesheet" href="css/core/reset.css">
<link rel="stylesheet" href="css/core/colors.css">
<link rel="stylesheet" href="css/core/typography.css">
<link rel="stylesheet" href="css/core/grid.css">
<link rel="stylesheet" href="css/components/buttons.css">
<!-- ... add what you need -->Color System
All colors support dark mode and are fully customizable via CSS variables. Learn more →