@nadicodeai/design-system 12.1.180 → 12.1.182

package/DESIGN.md

@@ -558,7 +558,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
 
 ### Colour as stage
 
-The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has three jobs: the first stripe of Nadia's ribbon, the inner stripe of Alveare's mark ("Brand media authority"), and a band of a company's card foil ("Company card").
+The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has three jobs: the first stripe of Nadia's ribbon, the last cell of Alveare's mark and the last band of Alveare Server's ("Brand media authority"), and a band of a company's card foil ("Company card").
 
 The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places. The one exception is the website's shader objects, each the material of one object and never a section's ground: the threads she holds, a fan of lines in her stripes from her orb to her colleagues, on black; Alveare's hive, cells that light in its hues as the work passes; and the company card's holographic foil ("Company card"). Stripes and cells stay pure bands of their hues, never a colour between two of them. Ruled by the founder: "shaders are not backgrounds all over the place".
 
@@ -568,7 +568,7 @@ The hues appear at full strength and flat, with no tints, steps, gradients or ho
 - **Agents.** The orbs ("Agent orbs").
 - **Alveare's channels.** Each channel's mark sits on a tile of one hue, in the Mac's sidebar and the iPhone's channel list; the channel's id picks the hue, so a channel is the same colour on every device, and a direct conversation shows its people instead. On the iPhone the person's own messages are cobalto bubbles with white text. Ruled by the owner.
 - **Objects.** The saturated pieces of the art direction's objects, one per benefit ("Iconography").
-- **The logo.** The dot of the wordmark, the icon tile and Alveare's striped mark ("Brand media authority"), and the compact company identity marks ("Identity marks").
+- **The logo.** The dot of the wordmark, the icon tile and Alveare's and Alveare Server's marks ("Brand media authority"), and the compact company identity marks ("Identity marks").
 - **Imagery.** Art direction reads these tokens and keeps no private palette.
 
 Text on a colour ground is the pole that clears AA on that hue: `{colors.identity-white}` on cobalto and rosso; `{colors.identity-ink}` on verde, arancio and giallo. A control on a colour ground uses the button's on-colour variants ("Components"). Product chrome in the Portal and Nadia stays neutral: grounds, text, lines and navigation, a selected row included, whatever it opens. Colour inside that structure is the identity palette at full strength in both themes: the primary control and the on switch in cobalto, feedback and state in cobalto, verde, giallo and rosso with their pole for text, and links in cobalto, the dark theme's links and coloured text one light step of the same hue. It also identifies Agents, providers and categories; an Agent's own colour is her orb, so her row in a list never takes a hue. Choose a typed component tone from the semantic palette; never paint a control with an arbitrary identity hex.
@@ -1215,7 +1215,7 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
 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's mark is its own, chosen by the founder: the AV line, nadicode's n arch running down into a V's cup, drawn as a ribbon of six flat stripes 7 units wide, from the outside of the arch in: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six lanes running as one line are the hive. It sits on the dark tile everywhere, the app icon included, since Alveare opens onto black, and on a black screen it stands alone without its tile. Alveare Server's mark is the same ribbon turned and mirrored into an S. Both are drawn in `apps/alveare/brand/icons/`.
+Alveare's mark is its own, chosen by the founder: six flat honeycomb cells, pointed at the top, stacked one, two and three into a pyramid, in the identity colours row by row from the top: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six cells of one comb are the hive. It sits on the dark tile everywhere, the app icon included, since Alveare opens onto black, and on a black screen it stands alone without its tile. Alveare Server's mark is a server rack of six bands, each with its light, in the same colours in the same order from the top, drawn a tenth smaller than the cells so the solid rack weighs what the open cells do beside it. Both are drawn from one geometry source, `@nadicodeai/design-system/assets/alveare-geometry`: Alveare's app icons and marks and `PlatformMark` render it, and nothing copies its paths.
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.180",
+  "version": "12.1.182",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -206,6 +206,11 @@
       "import": "./src/assets/logo-geometry.js",
       "default": "./src/assets/logo-geometry.js"
     },
+    "./assets/alveare-geometry": {
+      "types": "./src/assets/alveare-geometry.d.ts",
+      "import": "./src/assets/alveare-geometry.js",
+      "default": "./src/assets/alveare-geometry.js"
+    },
     "./assets/house-icons": {
       "types": "./src/assets/house-icons.d.ts",
       "import": "./src/assets/house-icons.js",
@@ -223,6 +228,7 @@
     "LICENSES",
     "src/assets/*.d.ts",
     "src/assets/logo-geometry.js",
+    "src/assets/alveare-geometry.js",
     "src/assets/house-icons.js",
     "src/assets/empty",
     "src/tokens",

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

@@ -0,0 +1,22 @@
+export type AlveareToken =
+  | "dark-logo-dot"
+  | "identity-arancio"
+  | "identity-verde"
+  | "identity-rosso"
+  | "identity-giallo"
+  | "identity-azzurro";
+
+export type AlveareGeometry = Readonly<{
+  viewBox: string;
+  nodes: readonly Readonly<{
+    element: "path";
+    attributes: Readonly<Record<string, string>>;
+  }>[];
+}>;
+
+/** The colour a consumer paints the shape that takes `token` with. */
+export type AlvearePaint = (token: AlveareToken) => string;
+
+export declare const ALVEARE_DRAWING: number;
+export declare function alveareMarkGeometry(paint: AlvearePaint): AlveareGeometry;
+export declare function alveareServerMarkGeometry(paint: AlvearePaint): AlveareGeometry;

package/src/assets/alveare-geometry.js

@@ -0,0 +1,127 @@
+/**
+ * Framework-neutral SVG geometry for Alveare's and Alveare Server's marks.
+ *
+ * This module is the only drawing of either mark. Alveare's app icons, the marks
+ * its scenes and the website show, and the shared PlatformMark render these
+ * descriptors instead of copying paths.
+ *
+ * Both marks are drawn in one square of ALVEARE_DRAWING units, centred in it,
+ * so an icon places them alike; each view box crops to its own shapes. A
+ * consumer paints each shape by the design token it takes, which `paint`
+ * turns into a colour: a CSS variable in a page, a hex value in a file. The
+ * six tokens run from the top in the same order on both marks.
+ *
+ * Alveare's mark is six pointy-top cells of one comb, stacked one, two and
+ * three: on a grid of radius 31, each cell is 5 units from its neighbours.
+ * Alveare Server's is a rack 160 units square of six bands 6 apart, its outer
+ * corners of radius 18, each band with a light of radius 4.4 cut out 50 units
+ * right of centre; it is drawn at nine tenths, so the solid rack weighs what
+ * the open cells do beside it.
+ */
+
+const freeze = (geometry) => {
+  geometry.nodes.forEach((node) => {
+    Object.freeze(node.attributes);
+    Object.freeze(node);
+  });
+  Object.freeze(geometry.nodes);
+  return Object.freeze(geometry);
+};
+
+const round2 = (value) => Number(value.toFixed(2)).toString();
+
+export const ALVEARE_DRAWING = 200;
+const CENTRE = ALVEARE_DRAWING / 2;
+
+const TOKENS = [
+  "dark-logo-dot",
+  "identity-arancio",
+  "identity-verde",
+  "identity-rosso",
+  "identity-giallo",
+  "identity-azzurro",
+];
+
+const viewBox = (left, top, right, bottom) =>
+  [left, top, right - left, bottom - top].map(round2).join(" ");
+
+const GRID = 31;
+const CELL_GAP = 5;
+const CELL_RADIUS = GRID - CELL_GAP / Math.sqrt(3);
+/** Each cell's place on the grid, in cells across and rows down from the centre. */
+const CELLS = [
+  [0, -1],
+  [-0.5, 0],
+  [0.5, 0],
+  [-1, 1],
+  [0, 1],
+  [1, 1],
+];
+
+const cellCorners = ([across, down]) => {
+  const x = CENTRE + across * Math.sqrt(3) * GRID;
+  const y = CENTRE + down * 1.5 * GRID;
+  return Array.from({ length: 6 }, (_, corner) => {
+    const angle = ((-90 + 60 * corner) * Math.PI) / 180;
+    return [
+      Number(round2(x + CELL_RADIUS * Math.cos(angle))),
+      Number(round2(y + CELL_RADIUS * Math.sin(angle))),
+    ];
+  });
+};
+
+/** Alveare's mark: the six cells, painted from the top. */
+export const alveareMarkGeometry = (paint) => {
+  const cells = CELLS.map(cellCorners);
+  const xs = cells.flat().map(([x]) => x);
+  const ys = cells.flat().map(([, y]) => y);
+  return freeze({
+    viewBox: viewBox(Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)),
+    nodes: cells.map((corners, index) => ({
+      element: "path",
+      attributes: {
+        fill: paint(TOKENS[index]),
+        d: `M${corners.map(([x, y]) => `${x} ${y}`).join("L")}Z`,
+      },
+    })),
+  });
+};
+
+const RACK_BALANCE = 0.9;
+const RACK_SIDE = 160;
+const BAND_GAP = 6;
+const CORNER = 18;
+const LIGHT = 4.4;
+const LIGHT_RIGHT = 50;
+
+/** Alveare Server's mark: the rack's six bands, painted from the top, each with its light. */
+export const alveareServerMarkGeometry = (paint) => {
+  const at = (unit) => Number(round2(CENTRE + RACK_BALANCE * (unit - CENTRE)));
+  const size = (unit) => round2(RACK_BALANCE * unit);
+  const left = CENTRE - RACK_SIDE / 2;
+  const right = CENTRE + RACK_SIDE / 2;
+  const band = (RACK_SIDE - 5 * BAND_GAP) / 6;
+  const r = size(CORNER);
+  const corner = `A${r} ${r} 0 0 1`;
+  const light = size(LIGHT);
+  const lightX = CENTRE + LIGHT_RIGHT;
+  return freeze({
+    viewBox: viewBox(at(left), at(left), at(right), at(right)),
+    nodes: TOKENS.map((token, index) => {
+      const top = left + index * (band + BAND_GAP);
+      const bottom = top + band;
+      const middle = at(top + band / 2);
+      let body = `M${at(left)} ${at(top)}H${at(right)}V${at(bottom)}H${at(left)}Z`;
+      if (index === 0) {
+        body = `M${at(left)} ${at(bottom)}V${at(top + CORNER)}${corner} ${at(left + CORNER)} ${at(top)}H${at(right - CORNER)}${corner} ${at(right)} ${at(top + CORNER)}V${at(bottom)}Z`;
+      } else if (index === TOKENS.length - 1) {
+        body = `M${at(left)} ${at(top)}H${at(right)}V${at(bottom - CORNER)}${corner} ${at(right - CORNER)} ${at(bottom)}H${at(left + CORNER)}${corner} ${at(left)} ${at(bottom - CORNER)}Z`;
+      }
+      const hole = `M${at(lightX + LIGHT)} ${middle}A${light} ${light} 0 1 0 ${at(lightX - LIGHT)} ${middle}A${light} ${light} 0 1 0 ${at(lightX + LIGHT)} ${middle}Z`;
+      return {
+        element: "path",
+        attributes: { fill: paint(token), "fill-rule": "evenodd", d: `${body} ${hole}` },
+      };
+    }),
+  });
+};