Aesthetium

A classless CSS framework driven by design tokens. Drop in the stylesheet, write semantic HTML, and add expressive attributes when you need variants. No class names. No build step.

<link rel="stylesheet" href="aesthetium.css">

Typography

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Body copy. Aesthetium is designed with a deliberately constrained palette and a healthy dose of whitespace. Typography should be invisible — the reader should notice the content, not the design.

Links look like this anchor. They use the accent color and fade on hover. Bold text for emphasis, italics for tone, small text for metadata, deleted content, and highlighted passages.

Good design is as little design as possible. — Dieter Rams

Inline code: const x = 42. For longer snippets use a <pre> block:

/* Override the accent color to match your brand */
:root {
  --color-accent:    #6d28d9;
  --color-accent-fg: #ffffff;
}

Lists

Colors

The palette is neutral by default. Override --color-accent to apply your brand. Positive, negative, and alert accents are pre-defined.

Surface stack — light

Depth in light mode: white cards sit on a near-white page. Shadows complete the separation.

Shadow scale

Semantic accents

Neutral scale

Badges

Buttons

Buttons are styled by attribute, not class. The default is a neutral secondary button. Add highlight for a primary action.

Variants

Sizes

Shapes

Markup

<button>Default</button>
<button highlight>Call to Action</button>
<button ghost>Ghost</button>
<button positive>Confirm</button>
<button negative>Delete</button>
<button alert>Warning</button>
<button small pill>Small Pill</button>

Forms

Progress

Components

Callouts

Disclosure

:root {
  --color-accent:    #6d28d9;
  --color-accent-fg: #ffffff;
}

Table

Articles

Customizing & Token Reference

All tokens are defined as CSS variables in system.css. For customization override any at the :root level in your own stylesheet.

Colors — Surfaces

Colors — Accent

Colors — Semantic

Colors — Neutral scale

Typography — Fonts

Typography — Type scale

Typography — Leading

Spacing

Border radius

Motion

Shadows

Layout