---
name: add-style-topics
description: Stylesheets written as topics, so a user's AI can make a new look
spec: style-topics
status: archived
date: 2026-09-24
tags: ai, spec, openspec, change
---

# Proposal

## Why

The two built-in stylesheets were the only looks d2 had, and changing one meant changing code. A user should be able to ask their AI for a new look (colours, fonts, the logo text) and get it without an install or a deploy.

## What Changes

- New topic category `Style`: a stylesheet written as a topic, through the ordinary topics API.
- `brand` in its frontmatter replaces the logo text on every page.
- The save reply checks it (`style: {ok, errors}`); a broken one is listed with its errors and can't be picked.
- Help gets "Make your own stylesheet"; the diesel2 skill gets "Make a stylesheet".

## Impact

- Affected specs: [[OpenSpec:style-topics]] (new).
- Affected code: `src/styles.ts`, `src/stylespage.ts`, the top bar, the topics API.

# Tasks

## 1. Build

- [x] 1.1 Parse and check Style topics
- [x] 1.2 List them on the Styles page, broken ones with their errors
- [x] 1.3 Apply `brand` in the top bar and on the landing page
- [x] 1.4 Report `style: {ok, errors}` on save

## 2. Document

- [x] 2.1 Help: Make your own stylesheet
- [x] 2.2 Skill:diesel2: Make a stylesheet
- [x] 2.3 Try it end to end: `Style:yahoo`

# Design

- A broken Style topic is stored anyway and never applied, so a mistake can't break a page.
- The choice stays in the `d2style` cookie, now holding the topic id (`Style:yahoo`), until real login brings user preferences.

# Spec delta

## ADDED Requirements

### Requirement: Stylesheets as topics
The system SHALL accept a stylesheet written as a topic in category `Style`, through the ordinary topics API.

#### Scenario: AI makes a stylesheet
- **WHEN** the user's AI saves `Style:yahoo` with valid tokens and `brand: YAHOO`
- **THEN** the save reply has `style: {ok: true}`
- **AND** the stylesheet is listed under Style topics on the Styles page

### Requirement: Logo text
The system SHALL show a Style topic's `brand` as the logo text on every page while that stylesheet is in use.

#### Scenario: Picking a branded stylesheet
- **WHEN** the user picks `Style:yahoo` on the Styles page
- **THEN** every page shows YAHOO next to the logo

### Requirement: Broken stylesheets are harmless
The system MUST NOT apply a Style topic that has errors; it SHALL list it with its errors instead.

#### Scenario: Unknown token
- **WHEN** a Style topic sets a token that doesn't exist
- **THEN** the save reply lists the error
- **AND** the Styles page shows the topic as "Has errors" with no button to use it

#### Scenario: A broken stylesheet in the cookie
- **WHEN** the browser's cookie names a Style topic that has errors
- **THEN** pages use the default stylesheet