Mark · Patterns

Halves

Two (or three) introductions standing side by side — each column an eyebrow, a heading and a lead, sharing a top line. The shape the landing page used to present Accent CMS and Mark Design as equals: not a comparison table, not feature cards — two section headers holding the same rank.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

The two systems

Full page preview ↗

The landing page's own use — the CMS and the design system, presented as equals.

Accent CMS

Content management for the AI era.

Accent is the publishing half: pages, fields and workflow built from the very partials the theme ships. An editor composes real blocks — never a lookalike copy that drifts.

Mark Design

A design system you cannot drift from.

Mark is the design system inside the Accent theme. Its pieces are not a description of the site — they are the site, and the same blocks an editor places in the CMS.

<section class="mk-section">
  <div class="mk-container">
    <div class="mk-row mk-row--2up align-items-start justify-content-center" style="--mk-row-gap:3rem">
      <div>
        <div class="mk-title-block mk-title-block--center mb-0 mx-auto">
          <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Accent CMS</p>
          <h2 class="mb-2">Content management for the AI era.</h2>
          <p class="lead text-body-secondary mb-0">Accent is the publishing half: pages, fields and workflow built from the very partials the theme ships. An editor composes real blocks — never a lookalike copy that drifts.</p>
        </div>
      </div>
      <div>
        <div class="mk-title-block mk-title-block--center mb-0 mx-auto">
          <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Mark Design</p>
          <h2 class="mb-2">A design system you cannot drift from.</h2>
          <p class="lead text-body-secondary mb-0">Mark is the design system inside the Accent theme. Its pieces are not a description of the site — they are the site, and the same blocks an editor places in the CMS.</p>
        </div>
      </div>
    </div>
  </div>
</section>
items: [2 items]
Fields (11)
FieldTypeNotes
eyebrow text
title text
intro textarea
padding text Vertical rhythm; `mk-section` is the section rhythm
surface text empty (page), muted, subtle, primary, or dark
align text center (default) or start
id text
shape_bottom group Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
shape_top group The same, on the band's TOP edge — it hangs upward over the band above.
class_names text
items repeater
On this page