Articles
Everything in the article library — drafts in progress and published pieces.
Every admin screen is built from the same chrome: a dot-grid topbar carrying the wordmark and breadcrumb, a grouped sidebar for navigation, and a main column that opens each view with a view header and an optional filter bar. The shell is identical across content types — only the main column changes.
.topbar.dot-surface · .sidebar > .nav-section > .nav-label / .nav-item.is-active · .main > .view > .view-header · .filter-bar
Buttons carry every admin action. The primary button is reserved for the one main action on a screen (new, publish, save); secondary handles everything alongside it; danger is destructive only. The tiny size is for table rows and tight toolbars, and the dashed add button opens repeatable fields.
.btn-pri · .btn-sec · .btn-danger · .btn-icon.btn-icon-danger · .btn-tiny (size modifier) · .btn-add-dashed
Editor forms use one field language: a label (with an optional required mark), the control, and an optional note. The slug field shows its permanent path prefix inline. Filter pills sit above a library to narrow it — single-select within a group, tinted to the category colour.
.field-group > .field-label / .field-req · .field-input · .field-select · .slug-field > .slug-prefix / .slug-input · .field-note-box
.filter-bar > .filter-label / .filter-group > .filter-pill · active state tints to --pill-cat
The system tells the author where a piece is and what just happened. Stage pills track the pipeline from idea to live; type and status badges label rows; banners confirm a save, surface errors, and mark a piece as live or scheduled.
The pipeline order: .pill-idea → .pill-concept → .pill-outline → .pill-draft → .pill-live. .pill-scheduled / .pill-hidden are publish states.
.type-badge.tb-* labels the content type in tables · .st.st-* is the compact status chip
.flash-success · .form-errors · .live-banner (green, with .cms-live-dot) · .schedule-banner (amber)
.tag / .tag.special · .val-pill · .cat-label > .cat-label-dot
Two ways to hold content. Tables are the library's default — clickable rows with title, status, date, and row actions. Cards are for boards and grids: the ideation/draft kanban card and the published-library card. The publish box is the editor's sidebar panel.
| Title | Stage | Updated | |
|---|---|---|---|
A Discipline Reset /articles/a-discipline-reset | Draft | 2026-06-04 | |
Notes on Craft /journals/notes-on-craft | Live | 2026-05-28 |
.table-card > .cms-table · rows .row-clickable · cells .td-title / .td-mono / .cell-actions
.kcard — ideation / draft-writing board · .pub-card — published-library grid
.cms-publish-box.is-live — the Publish panel that opens an editor's right rail