Adom UI Design System

@@ -337,7 +337,8 @@ a grey. - **Never ALL CAPS body text.** Small uppercase is fine for tiny eyebrow labels and chips, never for sentences. - Do not fall back to Inter, Arial, Helvetica, or the system stack as the primary face. Load the brand fonts from `https://adom.inc/fonts/`. - **Spacing grid:** 8px, 12px, 16px. **Radius:** `8px` for buttons and cards, `12px` for larger containers, `999px` for pills.-- **Icons are monochrome white. No exceptions.** `#e6edf3` or `currentColor`, in-app icons, the tab-strip icon, and the favicon. Prefer a clean custom SVG (`viewBox="0 0 24 24"`, stroke 1.5 to 2px). No emoji as icons. The only place brand color is allowed is marketing art: the hero and the page thumbnail.+- **Icons are monochrome white. No exceptions.** `#e6edf3` or `currentColor`, in-app icons, the tab-strip icon, and the favicon. Prefer a clean custom SVG (`viewBox="0 0 24 24"`, stroke 1.5 to 2px). No emoji as icons.+- **Icons are simple LINE DRAWINGS: outline style, never filled/solid glyphs** (John's ruling, 2026-08-24, starting from the settings cog). Stroke-based paths, `fill="none" stroke="currentColor"`, or the `-outline` variant of an icon set glyph (`mdi:cog-outline`, not `mdi:cog`). A solid silhouette reads as a different design language; one filled icon in a header full of line icons is the brother-from-another-mother problem in miniature. The only place brand color is allowed is marketing art: the hero and the page thumbnail.   - Pre-publish icon audit, both must return zero hits:     ```bash     grep -nE 'fill="(#00b8b1|#00d4cb)"|stroke="(#00b8b1|#00d4cb)"' docs/icon.svg src/**/*.html src/**/*.svg

@@ -7,12 +7,12 @@ the surrounding text colour and font-size. Size it with CSS (`width: 20px`) or a  | File | Icon | Use for | |---|---|---|-| `settings-cog.svg` | mdi:cog (filled) | THE settings entry point: the cog at the right end of an app header. This is the default. |-| `settings-cog-outline.svg` | mdi:cog-outline | The same affordance on a dense or light surface where the filled cog reads too heavy. Pick one per app and stay with it. |+| `settings-cog-outline.svg` | mdi:cog-outline | THE settings entry point: the cog at the right end of an app header. Every app, every surface. |+| `settings-cog.svg` | mdi:cog (filled) | DEPRECATED (John's ruling 2026-08-24: Adom icons are line drawings, never filled glyphs). Kept only so old references do not 404; swap it out when you touch a header that still uses it. | -Source: Material Design Icons (`mdi:cog`, `mdi:cog-outline`), Apache 2.0. If your app already-renders Iconify, `<Icon icon="mdi:cog" />` is the identical glyph and is preferred over-copying the file; these exist for apps with no icon runtime.+Source: Material Design Icons (`mdi:cog-outline`, `mdi:cog`), Apache 2.0. If your app already+renders Iconify, `<Icon icon="mdi:cog-outline" />` is the identical glyph and is preferred+over copying the file; these exist for apps with no icon runtime.  ## Using it 

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.9.0",+  "version": "1.9.1",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},

@@ -64,20 +64,24 @@ standard hover / press / focus-visible treatment (see the **input-feedback** sub tooltip and `aria-label` are "Settings", never "Preferences" or "Options". A user who learns where the cog is in one Adom app has learned it in all of them. -**Use the shared glyph, so every Adom cog is the same cog.** This repo ships it, alongside a-short usage note, so an app with no icon runtime can just take the file:+**Use the shared glyph, so every Adom cog is the same cog, and the cog is the OUTLINE one**+(John's ruling, 2026-08-24: Adom icons are simple line drawings, so the filled cog is out).+This repo ships it, alongside a short usage note, so an app with no icon runtime can just+take the file: -- [`assets/icons/settings-cog.svg`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/settings-cog.svg) (filled, the default)-- [`assets/icons/settings-cog-outline.svg`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/settings-cog-outline.svg) (for dense or light surfaces; pick one per app and stay with it)+- [`assets/icons/settings-cog-outline.svg`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/settings-cog-outline.svg) (THE cog, every app, every surface) - [`assets/icons/README.md`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/README.md)+- `assets/icons/settings-cog.svg` (the old filled cog) is DEPRECATED: do not use it in+  anything new, and swap it out when you touch a header that still has it. -Both are `viewBox="0 0 24 24"`, sized `1em`, painted `fill="currentColor"`, so they inherit-colour and size from the button. If your app already renders Iconify, `<Icon icon="mdi:cog" />`-is the identical glyph and is preferred; the files exist for apps with no icon runtime.+It is `viewBox="0 0 24 24"`, sized `1em`, painted `currentColor`, so it inherits colour and+size from the button. If your app already renders Iconify, `<Icon icon="mdi:cog-outline" />`+is the identical glyph and is preferred (NOT `mdi:cog`, which is the filled one); the file+exists for apps with no icon runtime.  ```html <button class="icon-btn" aria-label="Settings" title="Settings">-  <img src="/assets/icons/settings-cog.svg" alt="" width="20" height="20">+  <img src="/assets/icons/settings-cog-outline.svg" alt="" width="20" height="20"> </button> ```