@nadicodeai/design-system 12.1.161 → 12.1.163

package/DESIGN.md

@@ -1208,7 +1208,7 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
 
 1. **Mark.** The n, the logo itself, as tall as it is wide, with nothing added. It stands for the company wherever the company is recognised by its sign: app headers and compact navigation, the corner of a slide, a sticker, a stamp.
 2. **Wordmark.** nadicode in one geometric line with one dot over the i. The dot is the only colour in the logo, where an Agent sits. Use it wherever the company is named: the website's header, documents, proposals, invoices, email signatures, a first slide.
-3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, a dark profile, an app's own dark screen.
+3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. Where the platform crops the picture itself, a profile picture cut to a circle or a square and a phone's home screen, the tile has square corners and the platform draws its shape: the avatar is the brand tile, or the light or dark tile where a profile wants white or black, with the n across 46% of the side, so a circle cut keeps it whole with its clear space. The mark is never a profile picture: it has no field, and its n runs to the edges a crop cuts. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, an app's own dark screen.
 4. **Signature form.** The light tile with its construction guides in `{colors.logo-guide}`: a dotted circle around the arch whose radius is the golden section of the n's width, the two centre axes, and the n's width and height, each measured 1.000. It is drawn from 128 px up, on light grounds: Nadia's desktop icon, a cover or closing slide, a poster, print; on a dark ground the dark tile stands in for it. Below 128 px a guide is a fraction of a pixel, so the icon drops them; drawn on a screen as a logo, such as at the top of an entry scene, it drops them at any size. Alveare draws its own mark's desktop icon the same way.
 
 The mark and the wordmark never stand side by side: the wordmark already begins with the n, so together they read "n nadicode". Each place takes one of them.

package/README.md

@@ -26,8 +26,8 @@ Individual font files are also exposed under `@nadicodeai/design-system/assets/f
 
 [Brand media authority](DESIGN.md#brand-media-authority) says what each form
 is and where it goes, and [`examples/logo.html`](./examples/logo.html) shows
-them all. This table is the file behind each, with transparent PNG fallbacks
-for software that cannot place SVG.
+them all. This table is the file behind each, with PNG fallbacks for software
+that cannot place SVG.
 
 | Form | On white or a soft neutral | On black or another dark ground |
 | --- | --- | --- |
@@ -37,14 +37,18 @@ for software that cannot place SVG.
 | Icon, brand tile | `assets/app-icon` | `assets/app-icon` |
 | Icon, light and dark tiles | `assets/app-icon-light` | `assets/app-icon-dark` |
 | Signature form, from 128 px | `assets/app-icon-signature` | `assets/app-icon-dark` |
+| Avatar, brand tile | `assets/avatar` | `assets/avatar` |
+| Avatar, light and dark tiles | `assets/avatar-light` | `assets/avatar-dark` |
 
 The one-ink files exist for embossing, stamps and one-colour print, where a
 second colour cannot be laid down. The brand tile carries its own field, so
-one file serves both grounds.
+one file serves both grounds. The avatars are the three tiles with square
+corners, for any place that crops the picture to a circle or a square, and
+their PNGs are opaque.
 
 Prefix each route with `@nadicodeai/design-system/`. Append `.png` for the
-transparent PNG fallback, for example
-`@nadicodeai/design-system/assets/wordmark-white.png`.
+PNG fallback, for example `@nadicodeai/design-system/assets/wordmark-white.png`.
+Every PNG but the avatars is transparent outside its drawing.
 
 ```ts
 import wordmarkUrl from "@nadicodeai/design-system/assets/wordmark";

package/dist/assets/avatar-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#000000"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/dist/assets/avatar-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#ffffff"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#111111" stroke-width="18"/></svg>

package/dist/assets/avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="0" fill="#1e3cff"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.161",
+  "version": "12.1.163",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -97,6 +97,30 @@
       "types": "./src/assets/logo-asset.d.ts",
       "default": "./dist/assets/app-icon-signature.png"
     },
+    "./assets/avatar": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar.svg"
+    },
+    "./assets/avatar.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar.png"
+    },
+    "./assets/avatar-light": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-light.svg"
+    },
+    "./assets/avatar-light.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-light.png"
+    },
+    "./assets/avatar-dark": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-dark.svg"
+    },
+    "./assets/avatar-dark.png": {
+      "types": "./src/assets/logo-asset.d.ts",
+      "default": "./dist/assets/avatar-dark.png"
+    },
     "./assets/empty/agents": {
       "types": "./src/assets/logo-asset.d.ts",
       "default": "./src/assets/empty/agents.webp"

package/src/assets/logo-geometry.d.ts

@@ -25,6 +25,7 @@ export declare const logoWordmarkGeometry: LogoGeometry;
 export declare const APP_ICON_MARK_RATIO: number;
 export declare const FAVICON_MARK_RATIO: number;
 export declare function logoIconGeometry(size: number, markRatio: number): LogoGeometry;
+export declare function logoSquareIconGeometry(size: number): LogoGeometry;
 export declare function logoSignatureGeometry(size: number): LogoGeometry;
 export declare function resolveLogoGeometry(
   geometry: LogoGeometry,

package/src/assets/logo-geometry.js

@@ -119,12 +119,12 @@ const markTransform = (size, markRatio) => {
   return `translate(${round2(inset)} ${round2(inset - N_TOP * scale)}) scale(${round2(scale)})`;
 };
 
-const tileNode = (size) => ({
+const tileNode = (size, radiusRatio = TILE_RADIUS_RATIO) => ({
   element: "rect",
   attributes: {
     width: String(size),
     height: String(size),
-    rx: String(Math.round(size * TILE_RADIUS_RATIO)),
+    rx: String(Math.round(size * radiusRatio)),
     fill: "{paint:tile}",
   },
 });
@@ -151,6 +151,20 @@ export const logoIconGeometry = (size, markRatio) =>
     nodes: [tileNode(size), placedMarkNode(markTransform(size, markRatio))],
   });
 
+/**
+ * The icon with square corners, for a place that crops or masks the picture
+ * itself: a profile picture, which WhatsApp, Telegram and Google cut to a
+ * circle and Slack and LinkedIn to a square, and the iOS and Android home
+ * screens. A rounded tile there would show its transparent corners inside the
+ * crop. The n stays the app icon's, so a circle cut inside the square keeps
+ * the letter whole.
+ */
+export const logoSquareIconGeometry = (size) =>
+  freezeGeometry({
+    viewBox: `0 0 ${size} ${size}`,
+    nodes: [tileNode(size, 0), placedMarkNode(markTransform(size, APP_ICON_MARK_RATIO))],
+  });
+
 const ONE_POINT_ZERO_OUTLINE =
   "M0.86 0L0.86 -3.04L0 -3.04L0 -3.47L0.35 -3.47Q0.57 -3.47 0.71 -3.53Q0.85 -3.59 0.91 -3.73Q0.96 -3.87 0.96 -4.11L1.36 -4.11L1.36 0ZM2.25 0L2.25 -0.66L2.9 -0.66L2.9 0ZM5.07 0.09Q4.58 0.09 4.21 -0.17Q3.85 -0.43 3.65 -0.91Q3.45 -1.39 3.45 -2.05Q3.45 -2.71 3.65 -3.19Q3.85 -3.68 4.21 -3.94Q4.58 -4.2 5.07 -4.2Q5.58 -4.2 5.94 -3.94Q6.31 -3.68 6.51 -3.19Q6.71 -2.72 6.71 -2.05Q6.71 -1.39 6.51 -0.91Q6.31 -0.43 5.94 -0.17Q5.58 0.09 5.07 0.09ZM5.07 -0.39Q5.61 -0.39 5.9 -0.82Q6.19 -1.26 6.19 -2.05Q6.19 -2.58 6.06 -2.96Q5.92 -3.33 5.68 -3.52Q5.43 -3.72 5.07 -3.72Q4.72 -3.72 4.47 -3.52Q4.23 -3.33 4.1 -2.96Q3.97 -2.58 3.97 -2.05Q3.97 -1.26 4.26 -0.82Q4.55 -0.39 5.07 -0.39ZM8.97 0.09Q8.47 0.09 8.11 -0.17Q7.74 -0.43 7.54 -0.91Q7.34 -1.39 7.34 -2.05Q7.34 -2.71 7.54 -3.19Q7.74 -3.68 8.11 -3.94Q8.47 -4.2 8.97 -4.2Q9.47 -4.2 9.84 -3.94Q10.2 -3.68 10.4 -3.19Q10.6 -2.72 10.6 -2.05Q10.6 -1.39 10.4 -0.91Q10.2 -0.43 9.84 -0.17Q9.47 0.09 8.97 0.09ZM8.97 -0.39Q9.5 -0.39 9.79 -0.82Q10.08 -1.26 10.08 -2.05Q10.08 -2.58 9.95 -2.96Q9.82 -3.33 9.57 -3.52Q9.33 -3.72 8.97 -3.72Q8.62 -3.72 8.37 -3.52Q8.12 -3.33 8 -2.96Q7.86 -2.58 7.86 -2.05Q7.86 -1.26 8.15 -0.82Q8.44 -0.39 8.97 -0.39ZM12.87 0.09Q12.37 0.09 12 -0.17Q11.64 -0.43 11.44 -0.91Q11.24 -1.39 11.24 -2.05Q11.24 -2.71 11.44 -3.19Q11.64 -3.68 12 -3.94Q12.37 -4.2 12.87 -4.2Q13.37 -4.2 13.74 -3.94Q14.1 -3.68 14.3 -3.19Q14.5 -2.72 14.5 -2.05Q14.5 -1.39 14.3 -0.91Q14.1 -0.43 13.74 -0.17Q13.37 0.09 12.87 0.09ZM12.87 -0.39Q13.4 -0.39 13.69 -0.82Q13.98 -1.26 13.98 -2.05Q13.98 -2.58 13.85 -2.96Q13.72 -3.33 13.47 -3.52Q13.22 -3.72 12.87 -3.72Q12.51 -3.72 12.27 -3.52Q12.02 -3.33 11.89 -2.96Q11.76 -2.58 11.76 -2.05Q11.76 -1.26 12.05 -0.82Q12.34 -0.39 12.87 -0.39Z";