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.0: icons sub-skill (line drawings, white, transparent, tab favicons, no vendor logos)
5 files changed
+113−3
SKILL.md+2−1@@ -338,7 +338,7 @@ a grey. - 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.-- **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.+- **Icons are simple LINE DRAWINGS: outline style, never filled/solid glyphs** (the **icons** sub-skill is the full how-to, including tab favicons) (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@@ -423,6 +423,7 @@ This whole system ships as **one installable skill**. `adom-wiki pkg install ado |---|---| | [**input-feedback**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/input-feedback/SKILL.md) | The acknowledgment doctrine: hover, mousedown/:active, and focus-visible states on EVERY interactive element - the UI answers 'yes, you just hovered me / pressed me' before the action even runs | | [**settings-layout**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/settings-layout/SKILL.md) | The settings surface every Adom app shares: a cog in the header opening a dismissible MODAL, backdrop dimmed 20-30% and NEVER blurred (settings often change what is behind them), teal-accent cards that explain themselves, toggles not checkboxes, defaults shown on every row, two-click Restore defaults, and a category sidebar with jump-to and scroll-spy once settings outgrow a screen |+| [**icons**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/icons/SKILL.md) | How to MAKE an Adom icon: a line drawing, white or currentColor, on a transparent background, 24x24 with fill none and stroke 1.8, never a filled silhouette, never a brand color, never a vendor's logo, plus the webview tab favicon case and the pre-publish audit | | [**dock-dashboard**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/dock-dashboard/SKILL.md) | THE parent contract for every Dock Bar launch dashboard: one anatomy (house header, say strip, status pill row, then the app's own content), the two legitimate species (bridge launch page vs full app whose main UI is the dock target), and the shared token stub - ends the seven-dashboards-seven-designs era | | [**dash-header**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/dash-header/SKILL.md) | One header grammar for dashboards: human name never a slug echo, version NEVER inline in the bar (popover only), the standard target box chip, and the ? that recalls the newbie scaffolding | | [**say-strip**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/say-strip/SKILL.md) | The ONE say strip: "Say it" heading, quoted phrases with the noun in teal, two buttons on every phrase: Copy (clipboard + the fleet toast) and Send to AI (a NEW AI thread via the panel API, submitted), with the unfocused-window clipboard recipe |
package.json+3−2@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.9.4",+ "version": "1.10.0", "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": {},@@ -30,7 +30,8 @@ "skills/newbie-graduation/SKILL.md", "skills/say-strip/SKILL.md", "skills/status-leds/SKILL.md",- "skills/dash-demo/SKILL.md"+ "skills/dash-demo/SKILL.md",+ "skills/icons/SKILL.md" ], "scripts": { "install": "./install.sh",
skills/dash-header/SKILL.md+4@@ -38,6 +38,10 @@ This skill adds the dashboard-specific rulings the 2026-08-24 audit showed being Same spot on every app so a user's eye learns it once. A full app served in-container that cannot learn the box name (ab's cross-origin /status projection does not carry it yet) says `target: this machine` honestly rather than guessing or hiding the chip.+- **The app mark and the tab favicon are the SAME line-drawing SVG**, per the **icons**+ sub-skill: white or currentColor strokes on transparent, never the wrapped vendor's logo+ and never a filled colored badge. This is what the user sees at 16px in ah's tab strip,+ so a brand-colored plate there breaks the fleet look faster than anything on the page. - **The ? lives left of the gear** and recalls the newbie scaffolding - see **newbie-graduation**. Gear opens settings per **settings-layout**.
skills/dock-dashboard/SKILL.md+2@@ -74,6 +74,8 @@ broken - is ALWAYS carried by the led tokens, never by a brand color alone. ## What already exists (reference, never duplicate) +- **icons** - how to draw the app's mark and its webview tab favicon: line drawing, white+ or currentColor, transparent, never a vendor logo. - **scrollbars** - the house pill, mandatory on every scrolling surface. - **settings-layout** - the cog-opens-a-modal settings surface. - **toasts** - bottom-center, success green / error red / info teal.
skills/icons/SKILL.mdadded+102@@ -0,0 +1,102 @@+---+name: icons+user-invocable: true+description: >-+ How to make an Adom icon, and the one look they all share: a simple LINE DRAWING, white+ (or currentColor), on a TRANSPARENT background. No filled silhouettes, no brand colors, no+ vendor logos, no emoji, no raster PNGs where an SVG belongs. Covers the drawing rules+ (24x24 viewBox, fill none, stroke 1.5-2, round caps and joins), where icons appear (in-app+ buttons, app header mark, webview TAB FAVICONS, dock cards, the wiki page icon), how to+ derive a line mark for an app that wraps a third-party product without shipping that+ vendor's logo, and the pre-publish audit. Read BEFORE drawing, choosing, or shipping ANY+ icon or favicon. Trigger words: icon, icons, favicon, tab icon, webview icon, app icon,+ line icon, outline icon, filled icon, brand color icon, logo in icon, svg icon, icon audit,+ dock icon, monochrome icon.+---++Parent skill: **adom-ui-design** (this is the how-to behind section 9's icon rules)++# Adom icons: line drawings, white, transparent++John, 2026-08-24, looking at the ah webview tab strip where two dashboards showed their+vendor's filled brand mark:++> "this is awful. all of these should be our standard type of icon which is just a line+> drawing in white on a transparent background (or i guess on a dark background in the case+> of these wv tabs)"++One look, everywhere. An icon that is a filled colored logo next to five line icons is the+same brother-from-another-mother problem the dashboard contract fixed, in miniature and at+16 pixels.++## The rules++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.+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+ picking a background.+4. **Never the third party's logo.** An app that drives KiCad, Fusion, Mouser or Chrome does+ NOT ship that vendor's mark as its icon: it is off-palette, usually filled, often+ trademarked, and it makes the fleet look like a logo salad. Draw the OBJECT the app+ works on instead (see below).+5. **SVG, not PNG.** Vector scales to 16px tab icons and 64px cards from one file. A PNG+ favicon is a bug report waiting to happen.+6. **No emoji, ever**, as an icon or anywhere else (adom-ui-design section 11).+7. **One icon per app, used everywhere**: the header mark, the webview tab favicon, the+ dock card, the wiki page. Same file, same look, so the app is recognizable at a glance+ in the tab strip.++## Deriving a mark when your app wraps someone else's product++Draw what the user is doing, never the vendor's badge:++- a KiCad bridge: a schematic node, a board outline with pads, a footprint pattern+- a Fusion bridge: a parametric solid, an extrusion, a sketch profile+- a parts search: a magnifier over a component body, or a chip with a query mark+- a browser bridge: a window frame with a cursor, not the browser's roundel+- a chip fetcher: a chip body with a download arrow++Keep it to two or three strokes' worth of idea. At 16 pixels a detailed drawing turns to+mush; test it at 16 before you fall in love with it at 256.++## The webview tab favicon (the case everyone gets wrong)++Dock apps declare `webview.favicon` in `dockbar.json`, and it renders in ah's tab strip at+16px on a dark background. Point it at the SAME line-drawing SVG the rest of your app uses:++```json+"webview": { "title": "KiCad Dashboard", "favicon": "docs/img/dock-kicad.svg" }+```++The file must satisfy every rule above. A tab strip of six apps should read as one set.++## Skeleton++```svg+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"+ fill="none" stroke="currentColor" stroke-width="1.8"+ stroke-linecap="round" stroke-linejoin="round">+ <!-- two or three strokes that say what this app acts on -->+</svg>+```++No `<rect>` background, no `fill` on paths, no hardcoded hex unless you genuinely cannot+inherit color, in which case use `#e6edf3`.++## Pre-publish audit (all four return zero hits)++```bash+grep -nE 'fill="(?!none)' path/to/icon.svg # filled paths+grep -nE '#(00b8b1|00d4cb)|fill="#[0-9a-f]{6}"' path/to/icon.svg # brand or hardcoded color+grep -nE '<rect[^>]*(width="24"|width="100%")' path/to/icon.svg # background plate+ls path/to/icon.png 2>/dev/null # a raster where an SVG belongs+```++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.