diff --git a/.changeset/ui-icon-rules.md b/.changeset/ui-icon-rules.md new file mode 100644 index 0000000..8d8648c --- /dev/null +++ b/.changeset/ui-icon-rules.md @@ -0,0 +1,5 @@ +--- +"@variablelab/brand": patch +--- + +The Iconography chapter keeps the rules for drawing a UI icon and no longer lists icons: the Copy and Copied icons, with their geometry, move to the site that uses them. diff --git a/skills/vlab-brand/iconography.md b/skills/vlab-brand/iconography.md index d5fbed3..51c5464 100644 --- a/skills/vlab-brand/iconography.md +++ b/skills/vlab-brand/iconography.md @@ -4,17 +4,14 @@ Two families, and nothing else: filled shapes, which are the Signs and the Class ## UI icons +This guideline holds the rules for drawing a UI icon, not the icons: a site draws the icons it needs and keeps their geometry in its own specs. Every UI icon follows these rules: + - `viewBox 0 0 16 16`, shown at 14px. Stroke 1.5, no fill, `stroke-linecap: square`, `stroke-linejoin: miter`: square corners, like every other shape. - `currentColor`: `dim` at rest, `ink` on hover. - Decorative, so `aria-hidden="true"`. The control that holds the icon carries the accessible name. - Outlined, so a UI icon never reads as a Sign, which is filled. -| Icon | Use | Geometry | -| --- | --- | --- | -| Copy | Copies a command. | `` and `` | -| Copied | Replaces Copy for a moment after a copy. | `` | - -A new icon follows the stroke rules. Before it ships, set it at 14px beside every Project's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them. +Before an icon ships, set it at 14px beside every Project's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them. ## Shapes beside text