ASW — Agentic Semantic Web

What is ASW? Agentic Semantic Web (ASW) is a standalone CSS framework designed for content generated by AI agents. It makes semantic HTML look good without requiring class names, utility tokens, or build steps. One <link> tag. That is the entire installation. <link rel="stylesheet" href="agentic.css"> Why semantic HTML? AI agents write HTML naturally — <article>, <section>, <nav>, <aside>, <figure>. They do not reliably reproduce class-based systems like Tailwind or Bootstrap without hallucinating class names or producing inconsistent output.

Overview ASW uses a three-layer token hierarchy built on Open Props. Each layer is additive: base palette → semantic aliases → component-specific values. Open Props palette → ASW semantic aliases → component tokens --gray-5 --text-2 --input-border --green-5 --accent --callout-info --blue-5 --link --task-done No layer can break the others. Override a semantic alias, and every component that references it updates. Layer 1 — Open Props palette ASW inlines the Open Props token set directly — no CDN dependency.

Callouts Inline advisory blocks. The data-callout attribute sets the semantic type; the stylesheet handles colour, icon, and layout. <div data-callout="tip"> <span data-callout-title>Tip</span> <p>Use <code>data-callout</code> instead of inventing class names.</p> </div> <div data-callout="warning"> <span data-callout-title>Warning</span> <p>Overriding Open Props palette tokens breaks theming.</p> </div> <div data-callout="error"> <span data-callout-title>Error</span> <p>This file exceeds the token budget.</p> </div> <div data-callout="note"> <span data-callout-title>Note</span> <p>Both <code>note</code> and <code>info</code> are valid values.</p> </div> In Hugo, use the callout shortcode: … Valid values: tip, note, info, warning, error.

ASW provides two navigation components for orientation and workflow sequencing: breadcrumb for hierarchical location, and steps for pipeline progress. Breadcrumb Shows the current page’s position in a site hierarchy. Uses <nav data-role="breadcrumb"> with a plain <ol> — no classes needed. <nav data-role="breadcrumb" aria-label="breadcrumb"> <ol> <li><a href="/">Home</a></li> <li><a href="/docs/">Docs</a></li> <li aria-current="page">Token System</li> </ol> </nav> Separators (/) are drawn by CSS ::before — no markup needed. The current page item gets aria-current="page". It renders as plain text (no link), full colour, slightly bolder.

data-layout on any element activates a layout pattern. No classes needed. Docs layout Three-column scaffold: sidebar, content, TOC. Source order: left <aside> → content → right <aside data-toc>. <div data-layout="docs"> <aside> <nav data-nav="sidebar" aria-label="Docs"> <small>Getting started</small> <ul> <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li> <li><a href="/docs/tokens/">Token System</a></li> </ul> </nav> </aside> <article> <h1>Page title</h1> <p>Content goes here.</p> </article> <aside data-toc> <small>On this page</small> <nav> <ul> <li><a href="#section">Section</a></li> </ul> </nav> </aside> </div> The right TOC hides below ~1280px.

Accordion Style native <details>/<summary> elements. No JS needed — the browser handles open/close state. <details> <summary>What is agentic HTML?</summary> <p>Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.</p> </details> Live example: What is agentic HTML? Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes. Why no classes? Language models reliably produce semantic HTML. Class names require memorisation and drift.

ASW uses data-* attributes as its entire styling API. No class names are needed. Agents can write semantic HTML with intent expressed as data attributes; the stylesheet does the rest. data-role Semantic role indicator. Applied to the element that is the component. Value Element Description primary <a> Filled CTA button secondary <a> Outlined CTA button card any Card container command-box <div> Install/command pill with prefix glyph status-card <div> Bordered status block diff <div> Inline diff viewer (legacy; prefer data-diff) log-entry any Single log line, bottom border list-item any Minimal padding list item prev-next <div> Prev/next navigation pair tag-cloud <div> Tag cluster timeline <div> Simple left-spine timeline (legacy; prefer data-layout="timeline") <a href="/docs/" data-role="primary">Read docs →</a> <a href="/github/" data-role="secondary">Source</a> <div data-role="command-box"> <span class="prefix">$</span><!

ASW’s reset is in src/layers/00-reset.css, ported from Pico CSS v2.1.1 (MIT). It’s an opinionated normalize, not a zero-baseline reset — it corrects browser inconsistencies without stripping all defaults. What it does Box-sizing Every element uses border-box. Padding and border are included in the declared width. *, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; } background-repeat: no-repeat prevents accidental tiling on elements that receive a background image. Document baseline :where(:root) { -webkit-tap-highlight-color: transparent; /* remove tap flash on mobile */ text-size-adjust: 100%; /* prevent font inflation on mobile */ text-rendering: optimizeLegibility; overflow-wrap: break-word; /* wrap long URLs / tokens */ tab-size: 4; } Font size html { font-size: 100%; } Root font size is 100% of the browser default (typically 16px).

ASW’s 02-semantic.css layer styles native HTML elements directly. Write valid semantic HTML; it looks right without adding any attributes or classes. Typography Headings All six heading levels are styled with distinct sizes, weights, and colours drawn from ASW tokens. <h1>Page Title</h1> <h2>Section Heading</h2> <h3>Subsection</h3> <h4>Group Header</h4> <h5>LABEL</h5> <!-- uppercase, spaced --> <h6>MICRO LABEL</h6> <!-- uppercase, spaced, smaller --> h5 and h6 receive text-transform: uppercase and letter-spacing to serve as section labels rather than structural headings.

ASW includes a chart layer (06-charts.css) absorbed from Charts.css (MIT), with the class-based API converted to data-attributes. Charts are pure CSS — no JavaScript, no Canvas, no SVG. The data source is a standard <table>. CSS turns it into a chart. How data binding works Each <td> carries a --size CSS custom property via style attribute. This is the one place ASW permits inline styles — style="--size: 0.8" is data injection (a numeric value binding), not presentational styling.