myMat Brand Kit — a CSS design system

This kit ships no React components. window.MyMatBrand is intentionally empty. myMat's design system is a stylesheet — the site it comes from is server-rendered HTML — so build with plain semantic elements plus the class names below. Anything further down this README describing importable components is boilerplate; there are none.

Setup

Link one stylesheet. Nothing else is required — no provider, no JS.

<link rel="stylesheet" href="styles.css">

It @imports tokens/tokens.css (the --ob-* custom properties), fonts/fonts.css (self-hosted Playfair Display + DM Sans) and _ds_bundle.css (every class below). body, a, img and h1–h6 are styled globally, so headings already come out in Playfair Display — do not restyle them. Wrap page content in .container (max 1180px) or .container-narrow (820px, for reading measure).

The idiom

Flat, single-purpose class names on semantic elements. No utility classes, no CSS-in-JS, no component props. For your own layout glue, use the tokens rather than literal values:

Surfaces — --ob-surface (page), --ob-surface-alt (banded sections), --ob-white (cards)
Text — --ob-text, --ob-text-muted, --ob-text-faint
Lines — --ob-border, --ob-border-focus
Accent — --ob-accent (near-black; primary buttons and dark bands), --ob-accent-hover
Type — --ob-heading-font (Playfair Display), --ob-body-font (DM Sans)

The palette is deliberately near-monochrome warm grey. There is no dark-mode variant and no colour accent — do not invent one.

Vocabulary

Family	Classes
Layout	`container` `container-narrow` `section` `section-alt` `section-header` `section-eyebrow` `divider`
Nav	`site-nav` `nav-inner` `nav-logo` `nav-links` `nav-link` `nav-cta`
Buttons	`btn` + `btn-primary` \| `btn-ghost`, plus `btn-lg`
Hero	`hero` `hero-grid` `hero-eyebrow` `hero-sub` `hero-actions` `hero-trust` `hero-card` `hero-card-chrome` `hero-card-grid` `hero-card-tile` `hero-card-title` `hero-card-cta`
Features	`features-grid` `feature` `feature-icon`
Wizard	`wizard-grid` `wizard-copy` `wizard-steps` `wizard-step` `wizard-num` `wizard-visual` `wizard-visual-chrome` `wizard-visual-body` `wizard-visual-title` `wizard-progress` `wizard-field` (+ `filled`)
Pricing	`pricing-card` `pricing-price` `price-period` `price-option` `billing-toggle` `billing-option` `plan-sub`
FAQ	`faq-list` `faq-item` `faq-body` — `faq-item` is a `<details>`; its `<summary>` gets the +/− marker
CTA	`cta-strip` — dark band, light text, already handled
Footer	`footer-grid` `footer-brand` `footer-col` `footer-bottom` `socials`
Editorial	`editorial` `editorial-header` `editorial-empty` `post-list` `post-list-item` `post-list-link` `post-meta` `post-header` `post-lede` `post-hero` `post-body` `post-footer`
Changelog	`changelog-list` `changelog-entry` `changelog-entry-meta` `changelog-body` `changelog-version` `changelog-type` + `changelog-type-added` \| `changelog-type-improved` \| `changelog-type-fixed`
Misc	`icon` (1em, `currentColor` — inline SVG, no icon font) `visually-hidden-focusable`

Two idioms worth copying: an <em> inside .hero h1 renders as a muted italic accent, and .post-body styles raw article markup (headings, lists, blockquote, pre) with no per-element classes.

Read styles.css and the files it imports before styling anything — they are the authority, and this table is only an index of them.

Example

<section className="section section-alt">
  <div className="container">
    <div className="section-header">
      <span className="section-eyebrow">Pricing</span>
      <h2>One price for <em>everything</em></h2>
      <p>Simple, transparent pricing with no hidden fees.</p>
    </div>
    <div className="pricing-card">
      <div className="pricing-price">$249<span className="price-period">per year</span></div>
      <a className="btn btn-primary btn-lg" href="/signup">Sign up free</a>
    </div>
  </div>
</section>