Design Tokens

CSS custom properties that define the framework's visual identity. Override these to create custom themes without touching structural CSS.

Typography

--font-body: Inter, system-ui, sans-serif — Body text, headings, UI elements
--font-mono: JetBrains Mono, ui-monospace, monospace — Code, data values, navigation separators

These map to Pico's internal variables:

--asw-font-body: 'Inter', system-ui, sans-serif;
--asw-font-mono: 'JetBrains Mono', monospace;

Colors

Background

Token	Default	Usage
`--bg-primary`	#0a0a0a	Main page background
`--bg-secondary`	#111111	Code blocks, alternating rows
`--bg-card`	#0f0f0f	Articles, cards, elevated surfaces

Borders

Token	Default	Usage
`--border-color`	#262626	Default borders
`--border-color-subtle`	#1a1a1a	Very subtle dividers

Text

Token	Default	Usage
`--text-primary`	#e5e5e5	Main body text
`--text-secondary`	#a3a3a3	Secondary text
`--text-muted`	#737373	Metadata, muted content
`--text-dim`	#525252	Very dim, separators

Accents

Token	Default	Semantic Use
`--accent`	#22c55e	Primary actions, positive status, "awake"
`--accent-blue`	#3b82f6	Links, wikilinks, internal references
`--accent-orange`	#f59e0b	Warnings, pending tasks, attention
`--accent-red`	#ef4444	Errors, blocked states, critical issues

Complete Token Table

Token	Default	Category
`--font-body`	Inter	Typography
`--font-mono`	JetBrains Mono	Typography
`--bg-primary`	#0a0a0a	Background
`--bg-secondary`	#111111	Background
`--bg-card`	#0f0f0f	Background
`--border-color`	#262626	Border
`--border-color-subtle`	#1a1a1a	Border
`--text-primary`	#e5e5e5	Text
`--text-secondary`	#a3a3a3	Text
`--text-muted`	#737373	Text
`--text-dim`	#525252	Text
`--accent`	#22c55e	Accent
`--accent-blue`	#3b82f6	Accent
`--accent-orange`	#f59e0b	Accent
`--accent-red`	#ef4444	Accent
`--asw-radius-md`	4px	Border radius

Creating Custom Themes

Override tokens in a CSS file loaded after agentic.css:

Light Theme Example

/* custom-light.css */
:root {
  --bg-primary:       #ffffff;
  --bg-secondary:     #f5f5f5;
  --bg-card:          #fafafa;

  --border-color:     #e5e5e5;
  --border-color-subtle: #f0f0f0;

  --text-primary:     #171717;
  --text-secondary:   #525252;
  --text-muted:       #a3a3a3;
  --text-dim:         #d4d4d4;

  --accent:           #16a34a;
  --accent-blue:      #2563eb;
  --accent-orange:    #ea580c;
  --accent-red:       #dc2626;
}

Load order matters:


<link rel="stylesheet" href="/assets/agentic.css">
<link rel="stylesheet" href="/assets/custom-light.css">  <!-- Last -->

How it works

Override --asw-* semantic aliases — the values cascade through the framework automatically.

Light/Dark Switching

Via Media Query

:root {
  /* Light defaults */
  --bg-primary: #ffffff;
  --text-primary: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0a0a0a;
    --text-primary: #e5e5e5;
  }
}

Via Data Attribute Toggle

<html data-theme="dark">

:root { /* light defaults */ }

[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --text-primary: #e5e5e5;
}

Best Practices

Override at :root level. All tokens are scoped to :root; your overrides should be too.
Use semantic tokens, not Pico variables. Override --accent, not --pico-primary. The mapping handles the rest.
Maintain semantic meaning. If you change --accent-red, it should still mean "error" or "blocked."
Test with data-attributes. After changing tokens, verify [data-task], [data-status], [data-callout] still look correct.
Keep font fallbacks. Always include system fallbacks: --font-body: 'Your Font', system-ui, sans-serif;