minimaldesign · minimaldesign · Jul 24, 2026 · Jul 24, 2026 · Jul 24, 2026 · Jul 24, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,20 +8,22 @@ The official launch. Everything from the 0.9 beta reviewed, restructured, and bu
 
 ### Added
 
-- **Component library**: 23 documented components, from atoms (button, badge, toggle) through content patterns (card, hero, FAQ, testimonial, pricing, pagination) to full page chrome (header with mobile menu, footer, banner). Every one is dogfooded on mcss.dev itself.
+- **Component library**: 26 documented components, from atoms (button, badge, toggle) through content patterns (card, hero, FAQ, testimonial, pricing, pagination) to full page chrome (header with mobile menu, footer, banner). Every one is dogfooded on mcss.dev itself.
 - **Theme system**: themes are swappable skins, one CSS file that reskins the whole site. New `theme` cascade layer, `theme.default.css` as a copyable starting point, and `theme.wireframe.css`, a hand-drawn wireframe skin, as the worked example. See the [themes docs](https://mcss.dev/docs/themes).
 - **Layout library**: `global.layout.css` rebuilt from mcss.dev-specific styles into six page-level scaffolds: the `.layout` app shell (sticky footer) plus `.layout-centered`, `.layout-sidebar` (with a `.layout-sidebar-end` composition), `.layout-docs` (nav + main + TOC), `.layout-split`, and `.layout-cover`. Column widths come from the new `--layout-content-width` and `--layout-toc-width` tokens alongside `--layout-aside-width`. Every page on mcss.dev runs on them, with full-page demos under `/demos/layout/` and thumbnail diagrams in the [layouts docs](https://mcss.dev/docs/global#layouts).
 - **Marketing template**: a complete one-pager built only from the framework and library components, with a runtime theme switcher. [Live demo](https://mcss.dev/templates/marketing).
 - **`dist/` build**: the whole framework pre-processed as a drop-in `mcss.css` / `mcss.min.css`, plus per-file copies in `dist/css/`. Committed to the repo and kept fresh by CI.
 - **MIT license.**
 - Logical spacing helpers (`mis-*`, `mie-*`, `pis-*`, `pie-*`) and `.text-start` / `.text-end`: reading-direction-relative twins of the physical `ml/mr/pl/pr` and `.text-left/right` helpers, which stay for purely visual offsets.
 - Machine-readable docs for AI agents, fluid heading scale, responsive grid gaps, themeable text selection color.
+- `--highlight-500` token: the text marker color, consumed by the `--marker-color` interface token (what `<mark>` uses), so themes can restyle highlights from the palette.
 
 ### Changed
 
 - The framework now uses **native CSS cascade layers**: `settings, base, elements, global, components, theme, helpers`. Layer order, not import order or specificity, decides priority, and your own unlayered CSS beats the framework by default.
 - Framework and docs-site CSS fully split (`src/styles/framework/` vs `src/styles/site/`).
 - Removed the `--layout-aside-background-color` interface token: no rule in the framework or the docs site ever consumed it. Style `.layout_content_aside` directly if you want an aside background.
+- Removed the `--meter-color` token for the same reason: the `meter` element paints with `--meter-color-track/low/med/high`, and nothing ever consumed `--meter-color`.
 - Docs site upgraded to Astro 7.
 
 ### Breaking

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -39,7 +39,7 @@ All architectural detail is in the `agents/` directory — read these before mak
 
 ## Formatting
 
-- Never use em dashes in prose (site copy, docs, comments, commit messages). Use periods, commas, colons, or parentheses instead.
+- No em/en dashes in sentence construction (site copy, docs, comments, commit messages): when a period, comma, colon, or parentheses would work, use that instead. Legitimately correct typographic uses are fine: ranges (`h1`–`h6`, ideally a closed-up en dash), the dash introducing the name or source of a quote, table-cell placeholders for "no default".
 - 2 spaces everywhere, including `.css` (enforced by `.editorconfig`).
 - Relative imports for all local Astro components.
 - JSX targets Preact (`jsxImportSource: "preact"` in `tsconfig.json`) — do not import from React.

diff --git a/dist/css/elements.form.css b/dist/css/elements.form.css
@@ -109,7 +109,6 @@ legend {
 
 meter {
   --meter-height: var(--sm1);
-  --meter-color: var(--primary-500);
   --meter-radius: var(--radius-md);
   --meter-color-track: var(--primary-100);
   --meter-color-low: var(--no-400);

diff --git a/dist/mcss.css b/dist/mcss.css
@@ -2136,7 +2136,6 @@ legend {
 
 meter {
   --meter-height: var(--sm1);
-  --meter-color: var(--primary-500);
   --meter-radius: var(--radius-md);
   --meter-color-track: var(--primary-100);
   --meter-color-low: var(--no-400);

diff --git a/dist/mcss.min.css b/dist/mcss.min.css
diff --git a/public/_js/triangles.js b/public/_js/triangles.js
@@ -9,7 +9,9 @@
   - Adjust ZOOM if you change density to keep edges filled
 */
 
-export function createTrianglesBackground({ target = ".hero canvas" } = {}) {
+export function createTrianglesBackground({
+  target = ".hero canvas, canvas.triangles",
+} = {}) {
   const PRIMARY_COLORS = [
     "#bae6fd",
     "#7dd3fc",

diff --git a/src/content/blog/colors-in-css.mdx b/src/content/blog/colors-in-css.mdx
@@ -120,13 +120,13 @@ RGB is notorious for interpolating colors with the artistic flair of a vacuum cl
 
 {/* prettier-ignore */}
 <div
-  class="mb-sm2 p-sm2 br-sm"
+  class="mb-sm2 p-sm2"
   style="background: linear-gradient(90deg,  #ff00ff,#00ff00);">sRGB</div>
 <div
-  class="mb-sm2 p-sm2 br-sm"
+  class="mb-sm2 p-sm2"
   style="background: linear-gradient(in oklab  90deg,  #ff00ff,#00ff00);">Oklab</div>
 <div
-  class="mb-md2 p-sm2 br-sm"
+  class="mb-md2 p-sm2"
   style="background: linear-gradient(in oklch  90deg, #ff00ff,#00ff00);">OKLCH</div>
 
 ```css

diff --git a/src/content/blog/css-select-mask-styling.mdx b/src/content/blog/css-select-mask-styling.mdx
@@ -163,7 +163,7 @@ Using `calc(100% - offset)` instead of the three-value `right <length> center` s
 
 ### Putting is all together
 
-**Note:** this code sample is from the [mCSS source code](https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css#L166) so it includes custom properties, but it should be pretty self-explanatory…
+**Note:** this code sample is from the [mCSS source code](https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css#L170) so it includes custom properties, but it should be pretty self-explanatory…
 
 ```css
 select {

diff --git a/src/content/blog/mcss-structure.md b/src/content/blog/mcss-structure.md
@@ -12,12 +12,12 @@ description: "An overview of how and why mCSS file structure is organized the wa
 
 If you look at the imports in `mcss.css` [on Github][1], you'll get the basic idea behind mCSS structure. Each file belongs to a layer, and the layers keep the cascade working _for_ us as opposed to specificity wars and cascading conflicts. This architecture is based on [ITCSS][itcss]. The basic idea is to organize CSS from least specific/broadest reach to most specific/local override so you get a smooth [specificity graph][graph] trending upward.
 
-- Tokens & Themes (`settings`): where all the global variables are set, and easy ways to override them.
+- Settings: where all the global variables are set (tokens and interface tokens).
 - Base: your reset and normalize rules.
 - Elements: HTML elements defaults, without any classes.
 - Global: layouts like `.wrap` and `.grid` and global styling like `.prose`.
 - Components: component specific styling, from single-class pieces like `.bt` buttons to full structures.
-- Pages: page specific styling.
+- Theme: a swappable theme, one file of token overrides that reskins the whole site.
 - Helpers: local overrides (last layer, so they beat everything above).
 - Your own CSS imports unlayered, after the framework, and wins over all of it.
 

diff --git a/src/content/blog/mcss-v.1.0.md b/src/content/blog/mcss-v.1.0.md
@@ -14,25 +14,33 @@ Everything is still pure CSS (plus optional Astro components), still a copy + pa
 
 ## The component library
 
-The [component library][components] went from "a couple of components" to **23 documented components**, covering everything a content or marketing site needs: cards, heroes, FAQs, testimonials, pricing tables, pagination, a header with a proper mobile menu, a footer, banners... Each one is plain HTML and CSS first, with an Astro component on top if you want it, and each docs page lists exactly which files to copy.
+The [component library][components] went from "a couple of components" to 26 documented components, covering everything a content or marketing site needs: cards, heroes, FAQs, testimonials, pricing tables, header with mobile menu, footer… Each one is plain HTML and CSS first, or an Astro component if you want it.
 
 None of it is theoretical: every component is used on this very site.
 
 ## Themes
 
-The part I'm happiest about. A [theme][themes] in mCSS is **one CSS file that reskins your whole site**. Themes get their own cascade layer, sitting above the framework and below your own CSS, so a theme beats every default without ever fighting your code.
+The part I'm happiest about. A [theme][themes] in mCSS is one CSS file that reskins your whole site. Themes get their own cascade layer, sitting above the framework and below your own CSS, so a theme beats every default without ever competing with your code.
 
-To prove the system could do more than swap colors, 1.0 ships with a [wireframe theme][themes]: a hand-drawn skin with wobbly borders, paper-cutout shadows, and per-element sketch variation, done entirely in CSS.
+To show how the system can do more than swap colors, 1.0 ships with a [wireframe theme][themes]: hand-drawn styles with wobbly borders, paper-cutout shadows, and per-element sketch variation, all done in CSS.
 
 ## A template to start from
 
-New in 1.0: a complete [marketing one-pager][template] built only from the framework and the component library. Banner, header, hero, features, testimonials, pricing, FAQ, closing CTA, footer. Copy one file, swap the words, ship. There's a switcher on the live page that flips it between the default look and the wireframe theme, so you can see the theme system do its thing on a real page.
+New in 1.0: a complete [marketing one-pager][template] built with mCSS and the component library you can use as a starter file. Just copy it, swap the words, add you own theme, ship. There's a switcher on the live page that flips it between the default and wireframe themes, so you can see how it works.
 
 More templates are coming! And if you come up with a cool one, I'll definitely feature it here.
 
 ## Everything else
 
-The full list of changes since 0.9, including the breaking renames, is in the [changelog][changelog]. The short version: native cascade layers everywhere, a committed `dist/` build kept fresh by CI, an MIT license, and a lot of polish driven by a top-to-bottom audit.
+The full list of changes since 0.9, including the breaking renames, is in the [changelog][changelog]. The short version:
+
+- Native cascade layers everywhere
+- A bunch of components
+- New layouts
+- A `dist/` folder with copy + paste version of mCSS if you don't want to build it yourself
+- Much better documentation with component playgrounds
+- MIT license, and a lot of
+- Tons of small improvements throughout
 
 If you build something with mCSS, I'd love to see it. Come say hi in the [discussions][discussions].
 

diff --git a/src/content/blog/what-is-bem.md b/src/content/blog/what-is-bem.md
@@ -56,7 +56,7 @@ While BEM is powerful, it's not always necessary. For simple styles that don’t
 
 ### Conclusion
 
-Adopting BEM can significantly improve your front-end development workflow by making your CSS more modular and maintainable. While it may take some getting used to, the benefits in clarity and structure are invaluable for any developer working on collaborative projects. Give BEM a try—it could be the key to cleaner, more efficient code!
+Adopting BEM can significantly improve your front-end development workflow by making your CSS more modular and maintainable. While it may take some getting used to, the benefits in clarity and structure are invaluable for any developer working on collaborative projects. Give BEM a try: it could be the key to cleaner, more efficient code!
 
 #### Resources
 

diff --git a/src/content/components/featuregrid.mdx b/src/content/components/featuregrid.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Feature Grid"
 description: "Responsive grid of feature blurbs with icons, titles, and short descriptions."
-lastUpdate: 2026-07-16
+lastUpdate: 2026-07-23
 version: 0.5
 type: "component"
 ---
@@ -33,10 +33,10 @@ The `.featureGrid` component is the classic marketing "three columns of icon + t
 
 <div class="docs_oversizedTable">
 
-| File                                     | Description                    | Source      |
-| ---------------------------------------- | ------------------------------ | ----------- |
-| `component.featureGrid.css`              | Feature grid + item styles     | [Github][1] |
-| `FeatureGrid.astro`, `FeatureItem.astro` | The Astro components           | [Github][2] |
+| File                                         | Description                        | Source      |
+| -------------------------------------------- | ---------------------------------- | ----------- |
+| `component.featureGrid.css`                  | Feature grid + item styles         | [Github][1] |
+| `FeatureGrid.astro`, `FeatureItem.astro`     | The Astro components               | [Github][2] |
 | `--featureItem-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
 
 </div>
@@ -81,13 +81,22 @@ Depends on `.grid` (`global.grid.css`), part of the mCSS core. Icons are yours t
     check: { preview: check, code: "<svg>[…]</svg>" },
   }}
   controls={[
-    { heading: "Layout", items: [
-      { type: "select", name: "cols", label: "Columns (from --lg)", default: "cols3", options: [
-        { label: "2", value: "cols2", class: "", attr: 'col-lg="2"' },
-        { label: "3", value: "cols3", class: "", attr: 'col-lg="3"' },
-        { label: "4", value: "cols4", class: "", attr: 'col-lg="4"' },
-      ]},
-    ]},
+    {
+      heading: "Layout",
+      items: [
+        {
+          type: "select",
+          name: "cols",
+          label: "Columns (from --lg)",
+          default: "cols3",
+          options: [
+            { label: "2", value: "cols2", class: "", attr: 'col-lg="2"' },
+            { label: "3", value: "cols3", class: "", attr: 'col-lg="3"' },
+            { label: "4", value: "cols4", class: "", attr: 'col-lg="4"' },
+          ],
+        },
+      ],
+    },
   ]}
 />
 
@@ -118,13 +127,13 @@ The following custom properties are available in [`settings.ui.css`](/docs/token
 
 <div class="docs_oversizedTable">
 
-| Property                             | Description                 |
-| ------------------------------------ | --------------------------- |
-| `--featureItem-icon-box-size`        | Icon container width/height. |
-| `--featureItem-icon-size`            | SVG width/height.           |
-| `--featureItem-icon-color`           | Icon (stroke/fill) color.   |
-| `--featureItem-icon-background-color`| Icon container background.  |
-| `--featureItem-icon-border-radius`   | Icon container radius.      |
+| Property                              | Description                  |
+| ------------------------------------- | ---------------------------- |
+| `--featureItem-icon-box-size`         | Icon container width/height. |
+| `--featureItem-icon-size`             | SVG width/height.            |
+| `--featureItem-icon-color`            | Icon (stroke/fill) color.    |
+| `--featureItem-icon-background-color` | Icon container background.   |
+| `--featureItem-icon-border-radius`    | Icon container radius.       |
 
 </div>
 
@@ -149,19 +158,21 @@ The following custom properties are available in [`settings.ui.css`](/docs/token
 
 <div class="docs_oversizedTable">
 
-| Prop    | Type     | Default     | Description                              |
-| ------- | -------- | ----------- | ---------------------------------------- |
-| `title` | `string` | `undefined` | The item's `h3`.                         |
-| `class` | `string` | `undefined` | Additional CSS classes.                  |
+| Prop         | Type     | Default     | Description                                  |
+| ------------ | -------- | ----------- | -------------------------------------------- |
+| `title`      | `string` | `undefined` | The item's `h3`.                             |
+| `class`      | `string` | `undefined` | Additional CSS classes.                      |
+| `titleClass` | `string` | `undefined` | Extra classes added to `.featureItem_title`. |
+| `iconClass`  | `string` | `undefined` | Extra classes added to `.featureItem_icon`.  |
 
 </div>
 
 <div class="docs_oversizedTable">
 
-| Slot      | Description                                          |
-| --------- | ---------------------------------------------------- |
-| `icon`    | An SVG icon, rendered in the tokenized icon box.     |
-| (default) | The item's body text.                                |
+| Slot      | Description                                      |
+| --------- | ------------------------------------------------ |
+| `icon`    | An SVG icon, rendered in the tokenized icon box. |
+| (default) | The item's body text.                            |
 
 </div>