Mark Design

Documentation

Everything the Accent theme is built from — and how to build with it.

---

The system

Accent is the default theme package for Accent CMS. A partial declares its own field contract in frontmatter, so the markup an editor sees and the fields they fill in are the same file — they cannot drift apart.

Layers

Each layer only knows about the one below it.

• Site — pages, partials, and content: everything you read here.
• Design — Mark: the markup grammar and the token contract (tokens, elements, components, patterns, chrome).
• Theme — a full binding of the contract: type, radii, tracking, motion, and a default palette. Chosen at build; a theme binds tokens and never touches markup.
• Palette — the color binding inside whatever theme is worn: an accent pair, optionally the ground it stands on. Flips at runtime.
• Mode — the ground's polarity: light or dark, inside all of the above. Mode owns the ground, a palette owns the accent.

Underneath sits the engine — Bootstrap 5 — internal by design: swapping it must not change the rendering.

Theming

Change the accent in scss/_variables.scss, then rebuild:

$primary:      #2f6feb;
$primary-dark: #3a95f7;
$secondary:    #22b8cf;

Light and dark both ship. The mode is applied before first paint by an inline script, falling back to the operating system preference.

Beyond the one-knob brand: a theme is a JSON record (themes/*.json) binding the full contract, compiled to a stylesheet — production wears one theme per build. A palette rebinds the colors at runtime, and mode flips inside both. The rule that holds it together: a theme binds tokens; it never touches markup.

Field contracts

A partial can declare the fields it accepts. The block is optional — markup renders fine without it — and it maps onto the CMS field vocabulary.

---
id: hero
kind: partial
label: Hero
fields:
  - { id: headline, label: Headline, type: text, required: true }
  - { id: body,     label: Body,     type: wysiwyg }
---