https://github.com/elemental-mind/aesthetium
A classless & customizable CSS framework for clean semantic html.
https://github.com/elemental-mind/aesthetium
classless classless-css classless-css-framework minimalist-design minimalist-ui
Last synced: 16 days ago
JSON representation
A classless & customizable CSS framework for clean semantic html.
- Host: GitHub
- URL: https://github.com/elemental-mind/aesthetium
- Owner: elemental-mind
- Created: 2026-03-15T04:47:52.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-03-21T03:43:13.000Z (29 days ago)
- Last Synced: 2026-03-21T19:23:31.187Z (28 days ago)
- Topics: classless, classless-css, classless-css-framework, minimalist-design, minimalist-ui
- Language: CSS
- Homepage:
- Size: 3.37 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Aesthetium
A very lightweight CSS framework with a clean and minimalistic black & white aesthetic by default (think OpenAI style):
- **Classless** — semantic HTML styled out of the box, zero class names required
- **Attribute-based** — expressive attributes for variants and states
- **Customizable** — tweak the entire design system through CSS variables
This framework helps you keep your DOM clean, helping drive the separation between *what* to display and *how* to display it. In the very few cases where the HTML element's native name does not allow for fully expressing the *what*, Aesthetium provides a few well considered semantic intent-driven attributes. Take a button for example:
```html
Default Button
Call to Action Button
Delete the internet
```
## Installation
### CDN
```html
```
### npm
```bash
npm install aesthetium
```
```html
```
Or with a bundler:
```css
@import 'aesthetium';
```
## Attributes
Aesthetium uses boolean HTML attributes for variants — no class names needed.
### ``
| Attribute | Effect |
|---|---|
| *(none)* | Neutral secondary button |
| `highlight` | Primary / brand-colored button |
| `ghost` | Transparent background, border only |
| `positive` | Green — confirm, save |
| `negative` | Red — delete, destructive |
| `alert` | Amber — warning action |
| `small` | Reduced padding and font size |
| `large` | Increased padding and font size |
| `pill` | Fully rounded corners |
```html
Save
Cancel
Delete account
```
### ``
| Attribute | Effect |
|---|---|
| *(none)* | Neutral callout |
| `positive` | Green tint — success message |
| `negative` | Red tint — error message |
| `alert` | Amber tint — warning message |
```html
Changes saved.
Something went wrong.
Your trial expires in 3 days.
```
### ``, ``, ``
| Attribute | Effect |
|---|---|
| `valid` | Green border — field passes validation |
| `invalid` | Red border + glow — field fails validation |
```html
```
### ``
| Attribute | Effect |
|---|---|
| *(none)* | Accent color fill |
| `positive` | Green fill |
| `negative` | Red fill |
```html
```
### ` `
| Attribute | Effect |
|---|---|
| `active` | Marks the current page link (bold, filled background) |
```html
```
### `[badge]`
Apply `badge` to any inline element to render it as a pill badge. Combine with a semantic attribute for color.
| Attribute | Effect |
|---|---|
| `badge` | Default gray badge |
| `badge accent` | Accent-colored badge |
| `badge positive` | Green badge |
| `badge negative` | Red badge |
| `badge alert` | Amber badge |
```html
Draft
New
Active
Expired
```
## Customization
Aesthetium is built on CSS custom properties. Override any token in your own `:root` block **after** the framework stylesheet to apply your theme — no build step required.
```css
:root {
--color-accent: #6366f1; /* your brand color for CTAs, links, focus rings */
--color-accent-fg: #ffffff; /* text on top of the accent color */
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
}
```
### Key tokens
| Token | Default | Purpose |
|---|---|---|
| `--color-accent` | `#000000` | CTAs, links, focus rings |
| `--color-accent-fg` | `#ffffff` | Text on accent backgrounds |
| `--color-positive` | `#16a34a` | Success states |
| `--color-negative` | `#dc2626` | Error states |
| `--color-alert` | `#d97706` | Warning states |
| `--font-heading` | Inter | Heading font |
| `--font-body` | Inter | Body font |
| `--container-width` | `72rem` | Max page width |
| `--content-width` | `68ch` | Max paragraph width |
The full token list is in [`source/system.css`](source/system.css) and documented in the [Tokens guide](documentation/guide/tokens.html).
Dark mode is supported automatically via `prefers-color-scheme`.
## License
MIT