skill
Adom UI Design System
Public Made by Adomby adom
How the AI builds and tests interfaces people love to use in Adom. Ships as one installable skill that bundles focused skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths).
← Commit history
1.10.1: currentColor renders BLACK in a favicon (isolated document); hardcode #e6edf3 for img-loaded icons
2 files changed
+16−7
package.json+1−1@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.10.0",+ "version": "1.10.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": {},
skills/icons/SKILL.md+15−6@@ -34,9 +34,15 @@ same brother-from-another-mother problem the dashboard contract fixed, in miniat 1. **Line drawing, not a silhouette.** Strokes describe the shape; the interior stays empty. `fill="none"` on the paths, `stroke="currentColor"`, `stroke-width` 1.5 to 2 at a `viewBox="0 0 24 24"`, `stroke-linecap="round"`, `stroke-linejoin="round"`.-2. **White or currentColor. Never a brand color.** `#e6edf3` or, better, `currentColor` so- the icon inherits its surface. The ONLY place brand color is allowed is marketing art:- the wiki hero and the page thumbnail.+2. **White. Never a brand color.** The ONLY place brand color is allowed is marketing art:+ the wiki hero and the page thumbnail. Which white depends on HOW the icon is loaded, and+ getting this backwards ships an invisible icon:+ - **Inline SVG** (pasted into your markup): `currentColor`, so it inherits the surface.+ - **Tab favicon, `<img src>`, `background-image`, anything loaded as its own file:**+ hardcode `#e6edf3`. A favicon is an ISOLATED DOCUMENT with no host to inherit from, so+ `currentColor` resolves to black and your icon vanishes on the dark tab strip. (Found+ the hard way by nb on 2026-08-24: shipped with currentColor, rendered at 16px on+ `#161b22`, and it was effectively invisible.) `webview.favicon` is always this case. 3. **Transparent background. Always.** No rounded-rect plate, no colored tile, no white card behind the glyph. On a dark tab strip the icon reads as white lines on the strip's own dark; that is the intended look, and it is why transparency matters more than@@ -86,8 +92,8 @@ The file must satisfy every rule above. A tab strip of six apps should read as o </svg> ``` -No `<rect>` background, no `fill` on paths, no hardcoded hex unless you genuinely cannot-inherit color, in which case use `#e6edf3`.+No `<rect>` background, no `fill` on paths. Swap `currentColor` for `#e6edf3` in the file+you point `webview.favicon` at, per rule 2. ## Pre-publish audit (all four return zero hits) @@ -99,4 +105,7 @@ ls path/to/icon.png 2>/dev/null # a raster where an SVG belo ``` Then LOOK at it: render the icon at 16px on `#161b22` next to two other Adom app icons. If-yours is the one that stands out, it is wrong, however nice it is on its own.+yours is the one that stands out, it is wrong, however nice it is on its own. Look for the+invisible case too: an icon that inherited black on a dark strip reads as "no icon", which+is easy to miss when you are checking whether it looks RIGHT rather than whether it is+THERE.