A copy-paste UI theme with two versions:
- Pure CSS
- Tailwind CSS
The theme is based on compact editor-style interfaces with dark surfaces, soft borders, rounded panels, muted text, dense spacing, and a customizable accent color.
simple-theme/
├─ README.md
├─ LICENSE
├─ DESIGN.md
├─ pure-css/
│ └─ globals.css
└─ tailwind/
└─ globals.css
Use this version when you want plain CSS variables and reusable classes without any framework.
Copy:
pure-css/globals.css
Into your project, then import it:
@import "./globals.css";Example:
<section class="st-panel">
<h1 class="st-title">Cloud Projects</h1>
<p class="st-muted">Log in to save projects to the cloud.</p>
<button class="st-button st-button-primary">New Project</button>
</section>Use this version when your project already uses Tailwind CSS.
Copy:
tailwind/globals.css
Into your project, then import it in your app entry file:
import "./globals.css";Example:
export function Panel() {
return (
<section className="st-panel p-xl">
<h1 className="st-title">Cloud Projects</h1>
<p className="st-muted">Log in to save projects to the cloud.</p>
<button className="st-button st-button-primary">New Project</button>
</section>
);
}Dark theme is the default.
<html data-theme="dark">Light theme:
<html data-theme="light">The accent color is intentionally commented in both versions.
/* --color-accent: 245 158 11; */Uncomment it and change the RGB values to customize the theme.
Example:
--color-accent: 59 130 246;See:
DESIGN.md
DESIGN.md is written for AI agents to read, similar to an AGENTS.md file. It defines visual rules, UX rules, layout behavior, component patterns, and implementation constraints for building interfaces with this theme.
It is recommended to reference DESIGN.md from your project AGENTS.md, so AI tools can follow the same UI direction when generating or editing screens.
Example AGENTS.md addition:
- Follow the UI rules from `DESIGN.md` when creating or editing interface code.
- Use the theme tokens from `globals.css` instead of hardcoded visual values.
- Preserve the compact editor-style visual language: dark-first surfaces, soft borders, rounded panels, muted text, dense spacing, and restrained accent usage.MIT