@brunosouzas/design-system 0.5.3 → 0.6.1

package/dist/src/pieces/cover.js

@@ -12,14 +12,23 @@ import { tokens } from "../../tokens/generated/tokens.js";
 import { PIECE_NAMES, PIECES, rings } from "./library.js";
 import { EIP_ICON_HEIGHT, EIP_ICON_WIDTH, EIP_ICONS } from "./eip-icons.js";
 import { LINK_ICON_SIZE } from "./link-icons.js";
+import { mira } from "./brand-cast.js";
+import { symbol } from "./symbol.js";
 import { el, g, r2 } from "./node.js";
 import { UI_ICON_SIZE } from "./ui-icons.js";
 import { COLOUR_TOKENS, CURRENT_COLOUR, checkParams, isColourLiteral, MAX_SIZE, PATH_DATA } from "./params.js";
 export const SAFE_ID = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
-const TOP_LEVEL = ["id", "title", "description", "format", "background", "rings", "pieces", "custom", "customAt", "height", "text"];
-/** Cover (800x420, the default), banner (1200x420, rounded corners), body diagram (560 laid out, 800 shown) or icon:
- * spec cover-cli, "Banner output", "Diagram output", "Icon output". */
-export const FORMATS = ["cover", "banner", "diagram", "icon"];
+const TOP_LEVEL = ["id", "title", "description", "format", "background", "rings", "pieces", "custom", "customAt", "height", "text", "signature"];
+/** Cover (800x420, the default), banner (1200x420, rounded corners), body diagram (560 laid out, 800 shown),
+ * icon, favicon (the symbol, both themes), linkedin-card (1080x1080) or avatar (500x500, the symbol only):
+ * spec cover-cli, "Banner output", "Diagram output", "Icon output", "New icon formats". */
+export const FORMATS = ["cover", "banner", "diagram", "icon", "favicon", "linkedin-card", "og", "avatar"];
+/** Fixed frame sizes of the platform-shaped formats (not style, so not tokens — like EIP_ICON_WIDTH). */
+export const FAVICON_SIZE = 32;
+export const AVATAR_SIZE = 500;
+export const LINKEDIN_CARD_SIZE = 1080;
+export const OG_WIDTH = 1200;
+export const OG_HEIGHT = 630;
 const CUSTOM_TAGS = ["g", "rect", "circle", "ellipse", "line", "polyline", "polygon", "path", "text"];
 // Attributes a free-form object may use (design §6): geometry, paint, text and transform.
 const CUSTOM_ATTRS = new Set([
@@ -323,10 +332,21 @@ const validateResolved = (spec) => {
             if (spec[key] !== undefined)
                 blocked.push(key);
     }
+    else if (format === "favicon" || format === "avatar") {
+        for (const key of ["background", "rings", "custom", "customAt", "height", "signature"]) {
+            if (spec[key] !== undefined)
+                out.push({ path: key, message: `not used by the ${format} format` });
+        }
+        for (const key of ["background", "rings", "custom"])
+            if (spec[key] !== undefined)
+                blocked.push(key);
+    }
     else {
         if (format === "diagram") {
             if (spec.background !== undefined)
                 out.push({ path: "background", message: "a diagram is drawn on color.panel; background is for covers and banners" });
+            if (spec.signature !== undefined)
+                out.push({ path: "signature", message: "not used by the diagram format" });
             const height = spec.height;
             if (typeof height !== "number" || !Number.isFinite(height) || height < 1 || height > MAX_SIZE)
                 out.push({ path: "height", message: `expected a number from 1 to ${MAX_SIZE}` });
@@ -337,6 +357,8 @@ const validateResolved = (spec) => {
             }
             if (spec.height !== undefined)
                 out.push({ path: "height", message: "only a diagram takes a height" });
+            if (spec.signature !== undefined && typeof spec.signature !== "boolean")
+                out.push({ path: "signature", message: "expected true or false" });
         }
         checkRings(spec, out);
         if (!isPlainObject(spec.rings) && spec.rings !== undefined)
@@ -364,9 +386,12 @@ const validateResolved = (spec) => {
         }
     }
     if (!Array.isArray(pieces)) {
-        out.push({ path: "pieces", message: "missing or not an array" });
-        if (pieces !== undefined)
-            blocked.push("pieces");
+        const piecesOptional = (format === "favicon" || format === "avatar") && pieces === undefined;
+        if (!piecesOptional) {
+            out.push({ path: "pieces", message: "missing or not an array" });
+            if (pieces !== undefined)
+                blocked.push("pieces");
+        }
     }
     else if (format === "icon") {
         const entry = pieces[0];
@@ -382,6 +407,12 @@ const validateResolved = (spec) => {
             checkEntry(piece, { ...params, x: 0, y: 0 }, "pieces[0]", out);
         }
     }
+    else if (format === "favicon" || format === "avatar") {
+        if (pieces.length > 0) {
+            out.push({ path: "pieces", message: `not used by the ${format} format` });
+            blocked.push("pieces");
+        }
+    }
     else {
         for (let index = 0; index < pieces.length; index++) {
             const entry = pieces[index];
@@ -495,23 +526,62 @@ const diagramTree = (spec) => {
     const drawnPieces = spec.pieces.map(draw);
     return root(spec.id, tokens.bodyDiagram.width, r2(height / LAYOUT_SCALE), `0 0 ${width} ${height}`, el("title", { id: `${spec.id}-title` }, spec.title), el("desc", { id: `${spec.id}-desc` }, spec.description), el("defs", {}, el("clipPath", { id: `${spec.id}-frame` }, el("rect", { width, height, rx }))), el("rect", { width, height, rx, fill: tokens.color.panel }), g({ "clip-path": frame }, g({ fill: "none", stroke: tokens.color.ring, "stroke-width": r2(ring.width) }, ...Array.from({ length: ring.count }, (_, i) => el("circle", { cx: spec.rings.cx, cy: spec.rings.cy, r: r2(ring.radius + i * ring.step) })))), g({ "clip-path": frame }, g({ stroke: tokens.color.ink, "stroke-width": tokens.map.outline, "stroke-linejoin": "round" }, ...bodies(spec, drawnPieces)), g({ "font-size": tokens.map.labelSize, "font-weight": tokens.cover.labelWeight, fill: tokens.color.ink, "text-anchor": "middle" }, ...drawnPieces.flatMap((d) => d.text))));
 };
-/** The cover's (banner's, diagram's, icon's) node tree. The spec must be valid for `lang` (validateCoverSpec returned no problem). */
+/** Mira (scale 0.25) and the symbol, bottom-right corner, `cover.signatureMargin` from both edges (spec cover-cli, "Signature lockup"). */
+const signatureGroup = (width, height) => {
+    const margin = tokens.cover.signatureMargin;
+    const miraScale = 0.25;
+    // Mira's own viewBox (sheet7.py's VB): 220 wide, 175 tall, ground at the box's bottom.
+    const miraWidth = 220 * miraScale;
+    const miraHeight = 175 * miraScale;
+    const symbolSize = 24;
+    const gap = 6;
+    const groupWidth = miraWidth + gap + symbolSize;
+    const groupHeight = Math.max(miraHeight, symbolSize);
+    const left = width - margin - groupWidth;
+    const top = height - margin - groupHeight;
+    return g({ "data-piece": "signature" }, ...mira({ x: r2(left + miraWidth / 2), y: r2(top + miraHeight), scale: miraScale }).body, ...symbol({ x: r2(left + miraWidth + gap), y: r2(top + (groupHeight - symbolSize) / 2), scale: symbolSize / 32 }).body);
+};
+/** A favicon (spec cover-cli, "New icon formats"): the symbol, both themes, switched by `prefers-color-scheme`. */
+const faviconTree = (spec) => {
+    const size = FAVICON_SIZE;
+    return root(spec.id, size, size, `0 0 ${size} ${size}`, el("title", { id: `${spec.id}-title` }, spec.title), el("desc", { id: `${spec.id}-desc` }, spec.description), el("style", {}, `.ds-favicon-dark{display:none}@media (prefers-color-scheme:dark){.ds-favicon-light{display:none}.ds-favicon-dark{display:inline}}`), g({ class: "ds-favicon-light" }, ...symbol({ x: 0, y: 0, surface: "light" }).body), g({ class: "ds-favicon-dark" }, ...symbol({ x: 0, y: 0, surface: "dark" }).body));
+};
+/** An avatar (spec cover-cli, "New icon formats"): the symbol only, filling the frame. */
+const avatarTree = (spec) => {
+    const size = AVATAR_SIZE;
+    const scale = size / 32;
+    return root(spec.id, size, size, `0 0 ${size} ${size}`, el("title", { id: `${spec.id}-title` }, spec.title), el("desc", { id: `${spec.id}-desc` }, spec.description), el("rect", { width: size, height: size, fill: tokens.brand.light.accentText }), g({ transform: `scale(${scale})` }, ...symbol({ x: 0, y: 0, surface: "light" }).body));
+};
+/** The cover's (banner's, diagram's, icon's, favicon's, avatar's) node tree. The spec must be valid for `lang` (validateCoverSpec returned no problem). */
 export const coverTree = (input, options = {}) => {
     const spec = forLanguage(input, options.lang);
     if (spec.format === "icon")
         return iconTree(spec);
     if (spec.format === "diagram")
         return diagramTree(spec);
+    if (spec.format === "favicon")
+        return faviconTree(spec);
+    if (spec.format === "avatar")
+        return avatarTree(spec);
     const banner = spec.format === "banner";
-    const { width, height } = banner ? tokens.banner : tokens.cover;
-    // A banner's corners are rounded; a cover keeps today's square frame, attribute for attribute.
+    const linkedinCard = spec.format === "linkedin-card";
+    const og = spec.format === "og";
+    const { width, height } = linkedinCard
+        ? { width: LINKEDIN_CARD_SIZE, height: LINKEDIN_CARD_SIZE }
+        : og
+            ? { width: OG_WIDTH, height: OG_HEIGHT }
+            : banner
+                ? tokens.banner
+                : tokens.cover;
+    // A banner's corners are rounded; a cover, a LinkedIn card and an og image keep the square frame, attribute for attribute.
     const corner = banner ? { rx: tokens.banner.radius } : {};
     const pair = tokens.coverBackground[spec.background];
     const drawnPieces = spec.pieces.map(draw);
     const ringPath = `coverBackground.${spec.background}.ring`;
     const ringCount = banner ? { count: bannerRingCount(spec.rings.cx, spec.rings.cy, spec.rings.radius) } : {};
     const frame = `url(#${spec.id}-frame)`;
-    const outlined = g({ stroke: tokens.color.ink, "stroke-width": tokens.outline.block, "stroke-linejoin": "round" }, ...bodies(spec, drawnPieces));
+    const signature = spec.signature ? signatureGroup(width, height) : null;
+    const outlined = g({ stroke: tokens.color.ink, "stroke-width": tokens.outline.block, "stroke-linejoin": "round" }, ...bodies(spec, drawnPieces), signature);
     const labels = g({ "font-size": tokens.cover.labelSize, "font-weight": tokens.cover.labelWeight, fill: tokens.color.ink, "text-anchor": "middle" }, ...drawnPieces.flatMap((d) => d.text));
     return root(spec.id, width, height, `0 0 ${width} ${height}`, el("title", { id: `${spec.id}-title` }, spec.title), el("desc", { id: `${spec.id}-desc` }, spec.description), el("defs", {}, el("clipPath", { id: `${spec.id}-frame` }, el("rect", { width, height, ...corner }))), el("rect", { width, height, ...corner, fill: pair.fill }), g({ "clip-path": frame }, ...rings({ ...spec.rings, color: ringPath, ...ringCount }).body), 
     // On a banner, pieces and labels are clipped too, so nothing pokes past a rounded corner.

package/dist/src/pieces/index.d.ts

@@ -8,3 +8,8 @@ export { EIP_ICONS, EIP_ICON_NAMES, EIP_ICON_HEIGHT, EIP_ICON_WIDTH, type EipIco
 export { FORMATS, LANGUAGE, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, diagramRings, validateCoverSpec, type CoverFormat, type CoverOptions, type CoverPiece, type CoverRings, type CoverSpec, type CustomNode } from "./cover.ts";
 export { tokens, type Tokens } from "../../tokens/generated/tokens.ts";
 export { EMOTE_KINDS, MASCOTS, MASCOT_ACTIONS, MASCOT_FACES, type EmoteKind, type EmoteParams, type MascotAction, type MascotFace, type MascotName, type MascotParams } from "./cast.ts";
+export { CAST_EXPRESSIONS, CAST_VIEWS, type CastExpression, type CastView, type MiraParams, type VisorParams, type DroneParams, type KiuParams, type SinalParams } from "./brand-cast.ts";
+export { BANK_OBJECT_NAMES, type BankObjectName, type BankObjectParams } from "./bank-objects.ts";
+export { type SymbolParams } from "./symbol.ts";
+export { BRAND_NOTATION_ICON_NAMES, type BrandNotationIconName, type BrandNotationIconParams } from "./brand-notation-icons.ts";
+export { CATEGORY_ICON_NAMES, type CategoryIconName, type CategoryIconParams } from "./category-icon.ts";

package/dist/src/pieces/index.js

@@ -13,3 +13,7 @@ export { EIP_ICONS, EIP_ICON_NAMES, EIP_ICON_HEIGHT, EIP_ICON_WIDTH } from "./ei
 export { FORMATS, LANGUAGE, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, diagramRings, validateCoverSpec } from "./cover.js";
 export { tokens } from "../../tokens/generated/tokens.js";
 export { EMOTE_KINDS, MASCOTS, MASCOT_ACTIONS, MASCOT_FACES } from "./cast.js";
+export { CAST_EXPRESSIONS, CAST_VIEWS } from "./brand-cast.js";
+export { BANK_OBJECT_NAMES } from "./bank-objects.js";
+export { BRAND_NOTATION_ICON_NAMES } from "./brand-notation-icons.js";
+export { CATEGORY_ICON_NAMES } from "./category-icon.js";

package/dist/src/pieces/library.d.ts

@@ -1,5 +1,11 @@
 import { emote, mascot } from "./cast.ts";
-export { emote, mascot };
+import { mira, visor, drone, kiu, sinal, type MiraParams, type VisorParams, type DroneParams, type KiuParams, type SinalParams } from "./brand-cast.ts";
+import { bankObject, type BankObjectName, type BankObjectParams } from "./bank-objects.ts";
+import { symbol, type SymbolParams } from "./symbol.ts";
+import { brandNotationIcon, type BrandNotationIconName, type BrandNotationIconParams } from "./brand-notation-icons.ts";
+import { categoryIcon, type CategoryIconParams } from "./category-icon.ts";
+export { emote, mascot, mira, visor, drone, kiu, sinal, bankObject, symbol, brandNotationIcon, categoryIcon };
+export type { MiraParams, VisorParams, DroneParams, KiuParams, SinalParams, BankObjectName, BankObjectParams, SymbolParams, BrandNotationIconName, BrandNotationIconParams, CategoryIconParams };
 export * from "./metro.ts";
 export * from "./diagram.ts";
 export * from "./ui-icons.ts";
@@ -332,6 +338,15 @@ export declare const PIECES: {
     readonly stateStart: import("./piece.ts").Piece<import("./diagram.ts").StateStartParams>;
     readonly mascot: import("./piece.ts").Piece<import("./cast.ts").MascotParams>;
     readonly emote: import("./piece.ts").Piece<import("./cast.ts").EmoteParams>;
+    readonly mira: import("./piece.ts").Piece<MiraParams>;
+    readonly visor: import("./piece.ts").Piece<VisorParams>;
+    readonly drone: import("./piece.ts").Piece<DroneParams>;
+    readonly kiu: import("./piece.ts").Piece<KiuParams>;
+    readonly sinal: import("./piece.ts").Piece<SinalParams>;
+    readonly bankObject: import("./piece.ts").Piece<BankObjectParams>;
+    readonly symbol: import("./piece.ts").Piece<SymbolParams>;
+    readonly brandNotationIcon: import("./piece.ts").Piece<BrandNotationIconParams>;
+    readonly categoryIcon: import("./piece.ts").Piece<CategoryIconParams>;
 };
 export type PieceName = keyof typeof PIECES;
 export declare const PIECE_NAMES: PieceName[];

package/dist/src/pieces/library.js

@@ -16,8 +16,13 @@ import { DIAGRAM_PIECES, stateStart } from "./diagram.js";
 import { uiIcon } from "./ui-icons.js";
 import { linkIcon } from "./link-icons.js";
 import { emote, mascot } from "./cast.js";
+import { mira, visor, drone, kiu, sinal } from "./brand-cast.js";
+import { bankObject } from "./bank-objects.js";
+import { symbol } from "./symbol.js";
+import { brandNotationIcon } from "./brand-notation-icons.js";
+import { categoryIcon } from "./category-icon.js";
 import { codeLength, spans } from "./ink.js";
-export { emote, mascot };
+export { emote, mascot, mira, visor, drone, kiu, sinal, bankObject, symbol, brandNotationIcon, categoryIcon };
 export * from "./metro.js";
 export * from "./diagram.js";
 export * from "./ui-icons.js";
@@ -397,5 +402,14 @@ export const PIECES = {
     stateStart,
     mascot,
     emote,
+    mira,
+    visor,
+    drone,
+    kiu,
+    sinal,
+    bankObject,
+    symbol,
+    brandNotationIcon,
+    categoryIcon,
 };
 export const PIECE_NAMES = Object.keys(PIECES);

package/dist/src/pieces/node.d.ts

@@ -1,4 +1,4 @@
-export declare const SVG_TAGS: readonly ["svg", "g", "title", "desc", "defs", "clipPath", "rect", "circle", "ellipse", "line", "polyline", "polygon", "path", "text", "tspan"];
+export declare const SVG_TAGS: readonly ["svg", "g", "title", "desc", "defs", "clipPath", "style", "rect", "circle", "ellipse", "line", "polyline", "polygon", "path", "text", "tspan"];
 export type SvgTag = (typeof SVG_TAGS)[number];
 export type AttrValue = string | number;
 export type Attrs = Readonly<Record<string, AttrValue>>;

package/dist/src/pieces/node.js

@@ -15,6 +15,7 @@ export const SVG_TAGS = [
     "desc",
     "defs",
     "clipPath",
+    "style",
     "rect",
     "circle",
     "ellipse",

package/dist/src/pieces/skin.d.ts

@@ -0,0 +1,22 @@
+import { type SurfaceName } from "./ink.ts";
+export type Skin = {
+    readonly body: string;
+    readonly outline: string;
+    readonly visor: string;
+    readonly eye: string;
+    readonly accent: string;
+};
+/**
+ * The cast's resolved colours for one surface. The visor is deliberately not
+ * the mirror of the outline: the approved sheets keep the screen face
+ * near-black in both themes (contrast against the white body), so dark-theme
+ * visor reads `brand.dark.bg`, not the light cream `brand.dark.text`.
+ */
+export declare const skin: (surface: SurfaceName) => Skin;
+/** `fill`/`stroke`/`stroke-width`/`stroke-linejoin` for an outlined body shape (the sheets' `ob()`). */
+export declare const outlined: (s: Skin, width?: number) => {
+    fill: string;
+    stroke: string;
+    "stroke-width": number;
+    "stroke-linejoin": "round";
+};

package/dist/src/pieces/skin.js

@@ -0,0 +1,13 @@
+import { colour } from "./params.js";
+const c = (path) => colour(path);
+/**
+ * The cast's resolved colours for one surface. The visor is deliberately not
+ * the mirror of the outline: the approved sheets keep the screen face
+ * near-black in both themes (contrast against the white body), so dark-theme
+ * visor reads `brand.dark.bg`, not the light cream `brand.dark.text`.
+ */
+export const skin = (surface) => surface === "light"
+    ? { body: c("color.white"), outline: c("brand.light.text"), visor: c("brand.light.text"), eye: c("cast.eyes"), accent: c("brand.light.accent") }
+    : { body: c("color.white"), outline: c("brand.dark.textMuted"), visor: c("brand.dark.bg"), eye: c("cast.eyes"), accent: c("brand.dark.accent") };
+/** `fill`/`stroke`/`stroke-width`/`stroke-linejoin` for an outlined body shape (the sheets' `ob()`). */
+export const outlined = (s, width = 8) => ({ fill: s.body, stroke: s.outline, "stroke-width": width, "stroke-linejoin": "round" });

package/dist/src/pieces/symbol.d.ts

@@ -0,0 +1,9 @@
+import { type SurfaceName } from "./ink.ts";
+export type SymbolParams = {
+    x: number;
+    y: number;
+    surface?: SurfaceName;
+    scale?: number;
+};
+/** The brand symbol ("b" with a moon, I5), in a 32×32 box before `scale`. Favicon and avatar are built from this. */
+export declare const symbol: import("./piece.ts").Piece<SymbolParams>;

package/dist/src/pieces/symbol.js

@@ -0,0 +1,20 @@
+// The brand symbol: the "b" with a moon (identity studio I5): the haste and
+// the ring read as a lowercase b, the moon sits on the accent of the ring.
+// Ported from `~/.hermes/cache/scratch/ab267/board4.py`'s `bmoon()`, the
+// approved source (reused unchanged by every later script, through `final.py`).
+import { drawn, el, g } from "./node.js";
+import { surfaceParam } from "./ink.js";
+import { pos, num } from "./params.js";
+import { definePiece } from "./piece.js";
+import { colour } from "./params.js";
+const c = (path) => colour(path);
+const drawSymbol = (p) => {
+    const light = (p.surface ?? "light") === "light";
+    const color = light ? c("brand.light.text") : c("brand.dark.text");
+    const moon = light ? c("brand.light.accent") : c("brand.dark.accent");
+    const scale = p.scale ?? 1; // size is in the 32×32 glyph box, scaled like any other piece
+    const body = g({ transform: `translate(${p.x} ${p.y}) scale(${scale})` }, el("rect", { x: 5, y: 3, width: 5.5, height: 26, rx: 2.75, fill: color }), el("circle", { cx: 17.5, cy: 20.5, r: 7.3, fill: "none", stroke: color, "stroke-width": 4.6 }), el("circle", { cx: 27.5, cy: 9, r: 2.8, fill: moon }));
+    return drawn([body]);
+};
+/** The brand symbol ("b" with a moon, I5), in a 32×32 box before `scale`. Favicon and avatar are built from this. */
+export const symbol = definePiece("symbol", { x: pos(), y: pos(), surface: surfaceParam, scale: num({ min: 0.1, max: 20 }) }, drawSymbol);

package/dist/tokens/generated/tokens.d.ts

@@ -11,6 +11,42 @@ export declare const tokens: {
         readonly startRadius: 11;
         readonly width: 800;
     };
+    readonly brand: {
+        readonly dark: {
+            readonly accent: "#FF7A45";
+            readonly accentText: "#FF7A45";
+            readonly bg: "#121110";
+            readonly border: "#3B3834";
+            readonly borderStrong: "#ADA79D";
+            readonly cardBg: "#1D1C1A";
+            readonly failure: "#FF6696";
+            readonly onAccent: "#121110";
+            readonly success: "#5BBF86";
+            readonly text: "#F1EEE8";
+            readonly textMuted: "#ADA79D";
+            readonly trackAi: "#1B1F28";
+            readonly trackDelivery: "#18231D";
+            readonly trackIntegration: "#2A1C15";
+            readonly warning: "#EBB34B";
+        };
+        readonly light: {
+            readonly accent: "#E04E17";
+            readonly accentText: "#B83A0C";
+            readonly bg: "#F6F3EC";
+            readonly border: "#D7D1C5";
+            readonly borderStrong: "#5C5852";
+            readonly cardBg: "#FFFFFF";
+            readonly failure: "#A1124B";
+            readonly onAccent: "#FFFFFF";
+            readonly success: "#2B7A4B";
+            readonly text: "#121212";
+            readonly textMuted: "#5C5852";
+            readonly trackAi: "#E2E4EC";
+            readonly trackDelivery: "#DFE8E1";
+            readonly trackIntegration: "#F4E4D8";
+            readonly warning: "#8F5F00";
+        };
+    };
     readonly cast: {
         readonly agent: {
             readonly neck: "#E3E8F5";
@@ -40,6 +76,7 @@ export declare const tokens: {
             readonly mass: 0.7;
             readonly stiffness: 170;
         };
+        readonly eyes: "#FFC98A";
         readonly glow: "#7FD1FF";
         readonly ground: "#D3DBF5";
         readonly metal: "#C9D2E8";
@@ -58,6 +95,15 @@ export declare const tokens: {
         readonly ink: "#0A1033";
         readonly panel: "#EEF2FF";
         readonly ring: "#E0E7FB";
+        readonly state: {
+            readonly backend: "#FF6B6B";
+            readonly blocked: "#FF8A3D";
+            readonly caller: "#8FB2FF";
+            readonly failFast: "#E0661F";
+            readonly failure: "#E04848";
+            readonly healthy: "#3DDC84";
+            readonly transitional: "#FFD25A";
+        };
         readonly transitional: "#FFD25A";
         readonly white: "#FFFFFF";
     };
@@ -69,6 +115,7 @@ export declare const tokens: {
         readonly ringRadius: 90;
         readonly ringStep: 28;
         readonly ringWidth: 2;
+        readonly signatureMargin: 24;
         readonly width: 800;
     };
     readonly coverBackground: {
@@ -116,6 +163,10 @@ export declare const tokens: {
             readonly fill: "#14215A";
             readonly ring: "#1C2D74";
         };
+        readonly neutral: {
+            readonly fill: "#F6F3EC";
+            readonly ring: "#D8D6D0";
+        };
         readonly olive: {
             readonly fill: "#8A9A3B";
             readonly ring: "#7E8E33";
@@ -148,6 +199,18 @@ export declare const tokens: {
             readonly fill: "#1F8A8A";
             readonly ring: "#2A9A99";
         };
+        readonly trackAi: {
+            readonly fill: "#E2E4EC";
+            readonly ring: "#C7C9D0";
+        };
+        readonly trackDelivery: {
+            readonly fill: "#DFE8E1";
+            readonly ring: "#C4CCC6";
+        };
+        readonly trackIntegration: {
+            readonly fill: "#F4E4D8";
+            readonly ring: "#D7C9BE";
+        };
         readonly violet: {
             readonly fill: "#5B3CC4";
             readonly ring: "#6748CF";

package/dist/tokens/generated/tokens.js

@@ -12,6 +12,42 @@ export const tokens = {
         "startRadius": 11,
         "width": 800
     },
+    "brand": {
+        "dark": {
+            "accent": "#FF7A45",
+            "accentText": "#FF7A45",
+            "bg": "#121110",
+            "border": "#3B3834",
+            "borderStrong": "#ADA79D",
+            "cardBg": "#1D1C1A",
+            "failure": "#FF6696",
+            "onAccent": "#121110",
+            "success": "#5BBF86",
+            "text": "#F1EEE8",
+            "textMuted": "#ADA79D",
+            "trackAi": "#1B1F28",
+            "trackDelivery": "#18231D",
+            "trackIntegration": "#2A1C15",
+            "warning": "#EBB34B"
+        },
+        "light": {
+            "accent": "#E04E17",
+            "accentText": "#B83A0C",
+            "bg": "#F6F3EC",
+            "border": "#D7D1C5",
+            "borderStrong": "#5C5852",
+            "cardBg": "#FFFFFF",
+            "failure": "#A1124B",
+            "onAccent": "#FFFFFF",
+            "success": "#2B7A4B",
+            "text": "#121212",
+            "textMuted": "#5C5852",
+            "trackAi": "#E2E4EC",
+            "trackDelivery": "#DFE8E1",
+            "trackIntegration": "#F4E4D8",
+            "warning": "#8F5F00"
+        }
+    },
     "cast": {
         "agent": {
             "neck": "#E3E8F5",
@@ -41,6 +77,7 @@ export const tokens = {
             "mass": 0.7,
             "stiffness": 170
         },
+        "eyes": "#FFC98A",
         "glow": "#7FD1FF",
         "ground": "#D3DBF5",
         "metal": "#C9D2E8",
@@ -59,6 +96,15 @@ export const tokens = {
         "ink": "#0A1033",
         "panel": "#EEF2FF",
         "ring": "#E0E7FB",
+        "state": {
+            "backend": "#FF6B6B",
+            "blocked": "#FF8A3D",
+            "caller": "#8FB2FF",
+            "failFast": "#E0661F",
+            "failure": "#E04848",
+            "healthy": "#3DDC84",
+            "transitional": "#FFD25A"
+        },
         "transitional": "#FFD25A",
         "white": "#FFFFFF"
     },
@@ -70,6 +116,7 @@ export const tokens = {
         "ringRadius": 90,
         "ringStep": 28,
         "ringWidth": 2,
+        "signatureMargin": 24,
         "width": 800
     },
     "coverBackground": {
@@ -117,6 +164,10 @@ export const tokens = {
             "fill": "#14215A",
             "ring": "#1C2D74"
         },
+        "neutral": {
+            "fill": "#F6F3EC",
+            "ring": "#D8D6D0"
+        },
         "olive": {
             "fill": "#8A9A3B",
             "ring": "#7E8E33"
@@ -149,6 +200,18 @@ export const tokens = {
             "fill": "#1F8A8A",
             "ring": "#2A9A99"
         },
+        "trackAi": {
+            "fill": "#E2E4EC",
+            "ring": "#C7C9D0"
+        },
+        "trackDelivery": {
+            "fill": "#DFE8E1",
+            "ring": "#C4CCC6"
+        },
+        "trackIntegration": {
+            "fill": "#F4E4D8",
+            "ring": "#D7C9BE"
+        },
         "violet": {
             "fill": "#5B3CC4",
             "ring": "#6748CF"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Design tokens and illustration pieces of brunosouzas.com: tokens as CSS, JSON and TypeScript, pieces that draw SVG (and React), and a cover command.",
   "license": "Apache-2.0",
   "repository": {

package/tokens/generated/tokens.css

@@ -8,6 +8,36 @@
   --ds-body-diagram-ring-radius: 70px;
   --ds-body-diagram-start-radius: 11px;
   --ds-body-diagram-width: 800px;
+  --ds-brand-dark-accent: #FF7A45;
+  --ds-brand-dark-accent-text: #FF7A45;
+  --ds-brand-dark-bg: #121110;
+  --ds-brand-dark-border: #3B3834;
+  --ds-brand-dark-border-strong: #ADA79D;
+  --ds-brand-dark-card-bg: #1D1C1A;
+  --ds-brand-dark-failure: #FF6696;
+  --ds-brand-dark-on-accent: #121110;
+  --ds-brand-dark-success: #5BBF86;
+  --ds-brand-dark-text: #F1EEE8;
+  --ds-brand-dark-text-muted: #ADA79D;
+  --ds-brand-dark-track-ai: #1B1F28;
+  --ds-brand-dark-track-delivery: #18231D;
+  --ds-brand-dark-track-integration: #2A1C15;
+  --ds-brand-dark-warning: #EBB34B;
+  --ds-brand-light-accent: #E04E17;
+  --ds-brand-light-accent-text: #B83A0C;
+  --ds-brand-light-bg: #F6F3EC;
+  --ds-brand-light-border: #D7D1C5;
+  --ds-brand-light-border-strong: #5C5852;
+  --ds-brand-light-card-bg: #FFFFFF;
+  --ds-brand-light-failure: #A1124B;
+  --ds-brand-light-on-accent: #FFFFFF;
+  --ds-brand-light-success: #2B7A4B;
+  --ds-brand-light-text: #121212;
+  --ds-brand-light-text-muted: #5C5852;
+  --ds-brand-light-track-ai: #E2E4EC;
+  --ds-brand-light-track-delivery: #DFE8E1;
+  --ds-brand-light-track-integration: #F4E4D8;
+  --ds-brand-light-warning: #8F5F00;
   --ds-cast-agent-neck: #E3E8F5;
   --ds-cast-agent-shine: #E6ECFF;
   --ds-cast-architect-fill: #22B5A4;
@@ -24,6 +54,7 @@
   --ds-cast-emote-pop-damping: 9;
   --ds-cast-emote-pop-mass: 0.7;
   --ds-cast-emote-pop-stiffness: 170;
+  --ds-cast-eyes: #FFC98A;
   --ds-cast-glow: #7FD1FF;
   --ds-cast-ground: #D3DBF5;
   --ds-cast-metal: #C9D2E8;
@@ -38,6 +69,13 @@
   --ds-color-ink: #0A1033;
   --ds-color-panel: #EEF2FF;
   --ds-color-ring: #E0E7FB;
+  --ds-color-state-backend: #FF6B6B;
+  --ds-color-state-blocked: #FF8A3D;
+  --ds-color-state-caller: #8FB2FF;
+  --ds-color-state-fail-fast: #E0661F;
+  --ds-color-state-failure: #E04848;
+  --ds-color-state-healthy: #3DDC84;
+  --ds-color-state-transitional: #FFD25A;
   --ds-color-transitional: #FFD25A;
   --ds-color-white: #FFFFFF;
   --ds-cover-height: 420px;
@@ -47,6 +85,7 @@
   --ds-cover-ring-radius: 90px;
   --ds-cover-ring-step: 28px;
   --ds-cover-ring-width: 2px;
+  --ds-cover-signature-margin: 24px;
   --ds-cover-width: 800px;
   --ds-cover-background-blush-fill: #F6CFE0;
   --ds-cover-background-blush-ring: #ECBAD0;
@@ -70,6 +109,8 @@
   --ds-cover-background-mustard-ring: #E6B33E;
   --ds-cover-background-navy-fill: #14215A;
   --ds-cover-background-navy-ring: #1C2D74;
+  --ds-cover-background-neutral-fill: #F6F3EC;
+  --ds-cover-background-neutral-ring: #D8D6D0;
   --ds-cover-background-olive-fill: #8A9A3B;
   --ds-cover-background-olive-ring: #7E8E33;
   --ds-cover-background-peach-fill: #F4D8BC;
@@ -86,6 +127,12 @@
   --ds-cover-background-slate-ring: #38466A;
   --ds-cover-background-teal-fill: #1F8A8A;
   --ds-cover-background-teal-ring: #2A9A99;
+  --ds-cover-background-track-ai-fill: #E2E4EC;
+  --ds-cover-background-track-ai-ring: #C7C9D0;
+  --ds-cover-background-track-delivery-fill: #DFE8E1;
+  --ds-cover-background-track-delivery-ring: #C4CCC6;
+  --ds-cover-background-track-integration-fill: #F4E4D8;
+  --ds-cover-background-track-integration-ring: #D7C9BE;
   --ds-cover-background-violet-fill: #5B3CC4;
   --ds-cover-background-violet-ring: #6748CF;
   --ds-cover-background-wine-fill: #6B2340;