Agentic Semantic Web

A standalone CSS framework for agent-generated web content. Semantic HTML + data-attributes. Zero classes. One file.

The Problem

LLMs generating web pages face a dilemma:

No Framework

Agents invent CSS every time. Inline styles, random hex values, inconsistent spacing. Visual chaos across sessions.

Result

Every page looks different. No design coherence.

Class Frameworks

Bootstrap, Tailwind — agents must memorize exact class strings. navbar-expand-lg vs navbar-expand-md. Hallucination shifts from CSS to class names.

Result

~5% hallucination rate breaks layouts silently.

The Solution

Separate structure from presentation using semantic HTML + data-attributes.

The Insight

Semantic HTML is what LLMs already produce naturally. An agent writing <article> is doing what it does best: expressing structure through language. A semantic CSS framework makes that HTML look good without the agent touching CSS.

IntentSemantic HTMLClass Framework
"this is navigation"<nav>class="navbar navbar-expand-lg"
"this is an article"<article>class="card shadow-sm p-3"
"this can expand"<details>class="accordion-item"
"this is a warning"data-callout="warning"class="alert alert-warning"
"task is done"data-task="done"class="text-success line-through"

What You Get

A single CSS file (agentic.css, ~70KB) with no external dependencies. Drop it in. Write semantic HTML.

Semantic HTML tags styled
30+ — automatically, no classes
Data-attribute vocabulary
15+ — for vault-native concepts
Classes required
0 — semantic HTML only
External dependencies
None — standalone framework
Build step required
None — link and go

Quick Start

One file in your <head>.

<link rel="stylesheet" href="/assets/agentic.css">

Write semantic HTML:

<article>
  <h1>Your Content</h1>
  <p>ASW handles all styling.</p>
  <div data-callout="tip">
    <span data-callout-title>Agent note</span>
    <p>Data-attributes handle vault-native concepts.</p>
  </div>
</article>

Full getting started guide →

Real-World Use

ASW was developed for Trentuna, where it generates marketing pages, agent dashboards, status pages, and session logs. Result: consistent visual design across 100+ pages generated by multiple agents over dozens of sessions. Zero inline styles, zero invented classes, zero CSS hallucinations.

What This Prevents

  • No inline styles
  • No invented classes
  • No framework lock-in
  • No hallucinated CSS
  • No visual chaos

What This Enables

  • Multi-agent visual coherence
  • Readable HTML source
  • Accessible by default
  • No build tools
  • Finite, documented vocabulary

Documentation

Getting Started

Installation, first page, the agent directive. Everything you need to start generating pages with ASW.

Vocabulary Reference

Complete data-attribute reference. Every attribute, every value, every example.

Design Tokens

CSS custom properties for theming. Override --asw-* variables to rebrand without touching source.

Philosophy

Why semantic HTML works better for agents. The lineage, the vision, the agent-first principle.

Lineage

ASW is a standalone framework that absorbed patterns from:

  • Pico CSS — proved classless CSS works for humans. ASW proves it works better for agents.
  • Charts.css — the data-attribute pattern for extending HTML's vocabulary without classes.
  • Open Props — variable-first architecture. ASW's --asw-* token system follows this model.

Not built on any of them. Learned from all of them.