github.com/injoon5/mono
Mono
A minimal CSS framework. One file, no build step, no dependencies. Drop it in and start building.
Installation
Option 1 — Download
Grab framework.css from the repo and drop it into your project.
curl -O https://raw.githubusercontent.com/injoon5/mono/main/framework.css
Then link it in your HTML:
<link rel="stylesheet" href="framework.css" />
Option 2 — Clone
git clone https://github.com/injoon5/mono.git cd mono
Open index.html in a browser to browse the component reference locally.
Files
framework.css
The full framework — tokens, reset, components. This is all you need.
index.html
This page. Full component reference with live examples.
llms.txt
Machine-readable docs. Paste into any LLM to get accurate Mono output.
README.md
Project overview and design notes.
Quick example
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="framework.css" />
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<a href="/" class="nav-brand">My site</a>
<div class="nav-spacer"></div>
<a href="/about" class="btn btn-ghost btn-sm">About</a>
<a href="/contact" class="btn btn-primary btn-sm">Contact</a>
</div>
</nav>
<main>
<section class="section">
<div class="container container-md">
<h1>Hello, world</h1>
<p>Start building.</p>
<div class="grid grid-3 mt-8">
<div class="card card-hover">
<div class="card-body">
<p class="card-title">Card</p>
<p class="card-description">A hoverable card.</p>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Dark mode
Dark mode works automatically from prefers-color-scheme. Override manually with data-theme on <html>:
<html data-theme="dark"> <!-- force dark --> <html data-theme="light"> <!-- force light -->
Toggle with JS:
const root = document.documentElement
const isDark = root.getAttribute('data-theme') === 'dark'
|| (!root.getAttribute('data-theme') && matchMedia('(prefers-color-scheme: dark)').matches)
root.setAttribute('data-theme', isDark ? 'light' : 'dark')
Typography
The quick brown fox
The quick brown fox jumps
The quick brown fox jumps over
The quick brown fox jumps over the lazy
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Pretendard is a contemporary typeface designed for both Latin and Korean scripts. Its clean geometry and generous spacing make it exceptional for interface work — readable at small sizes, beautiful at display scale. Letter-spacing is tightened for headings and relaxed for body copy.
Inline elements: strong weight, italic emphasis, inline code, ⌘K, a hyperlink, and struck through text.
Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects.
Palette
Buttons
Badges
Forms
Sizes
Checkboxes
Radios
Switches
Range
Input group
Cards
API calls this month
24,819
↑ 12% from last month
Featured
Ship faster with a solid foundation for your next project.
Accordion
What is Mono built with?
details, dialog) for interactive components. The only external asset is the Pretendard font served from jsDelivr.
Does it support dark mode?
prefers-color-scheme media query for system-level preference, and a data-theme="dark" attribute on the root element for manual toggling. The color palette inverts cleanly across all components.
How should I extend it?
:root to change design tokens globally. Add new component classes following the existing naming patterns. Mono is intentionally low-specificity so project styles can override without !important.
Is it accessible?
<details>/<summary> which are keyboard-navigable and announced by screen readers natively. The modal uses <dialog> which manages focus trapping automatically.
Dropdown
Options
Modal
Loading states
Spinners
Dots
Skeleton
Grid
Table
| Project | Status | Updated | Deployments |
|---|---|---|---|
| design-system-v2 | Active | 2 hours ago | 142 |
| landing-page | Paused | 3 days ago | 58 |
| api-gateway | Active | 1 week ago | 310 |
| auth-service | Error | Just now | 89 |
Misc
Alerts
src/components/Modal.tsx.
Divider
Avatars
Code
/* Using the framework */
import 'framework.css'
const App = () => (
<div className="container">
<nav className="nav">...</nav>
<main className="section">
<div className="grid grid-3">
<div className="card">...</div>
</div>
</main>
</div>
)
Using with LLMs
Mono ships a llms.txt — a machine-readable reference of every token, class, and component pattern. Paste it into any LLM context window and it can generate correct, idiomatic Mono code without hallucinating class names or missing wrappers.
How to use it
System prompt / project context
llms.txt into your system prompt or project instructions. Then ask the model to build UI using Mono. It will use the correct class names, token variables, and JS patterns without being told twice.
You are building UI with the Mono CSS framework. [paste llms.txt contents here] Build me a settings page with a profile form and notification toggles.
Claude Projects / custom instructions
llms.txt as a project file in Claude Projects or paste it into custom instructions. Every conversation in that project will then generate Mono-compatible HTML without needing to re-explain the framework.
Cursor / Copilot / other code editors
llms.txt to your workspace root. Cursor, Copilot, and similar tools will index it alongside your codebase and use it to autocomplete components. No additional configuration needed.
What's inside llms.txt
All design tokens
Every CSS custom property with exact values — colors, spacing, type scale, radius, shadows, transitions.
HTML patterns
Correct markup for every component, including required wrappers, modifiers, and element hierarchy.
JS snippets
Working toggle code for accordion, dropdown, modal, and dark mode — copied verbatim from the demo.