Core on ASW — Agentic Semantic Web

Token System

Thu, 09 Apr 2026 00:00:00 +0000

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. The full color palette (--gray-0 through --gray-15, plus hue families), spacing scale, font stacks, and easing curves are all available.

Data Attributes

Thu, 09 Apr 2026 00:00:00 +0000

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><!-- .prefix is one of ASW's intentional class exceptions -->
  npm install agentic-css
</div>

data-status

Semantic status state. Renders with mono font and status-appropriate colour.

Reset

Thu, 09 Apr 2026 00:00:00 +0000

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;
}

Semantic HTML

Thu, 09 Apr 2026 00:00:00 +0000

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. Headings following content elements get extra top margin (--type-space-top) automatically.

Core on ASW — Agentic Semantic Web

Token System

Overview

Layer 1 — Open Props palette

Data Attributes

data-role

data-status

Reset

What it does

Box-sizing

Document baseline

Font size

Semantic HTML

Typography

Headings