@stridge/noctis-design-tokens 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/graph/components.js

@@ -3230,7 +3230,7 @@ const radio = {
 * The avatar mints its box edge and its initials type, both retuned per the `size` axis (`xs`…`xl`),
 * plus the corner radius the `square` shape reads (the default `circle` shape is the literal
 * `--noctis-radius-full` extreme, never minted). Avatars are static-identity and accent-independent:
-* the fallback fill is a `--noctis-color-avatar-N` role chosen by a stable hash, so it carries its own
+* the fallback fill is a `--noctis-color-palette-N` role chosen by a stable hash, so it carries its own
 * light/dark values and never re-themes on the accent. Its sizes are a deliberate own scale (not the
 * control-height ladder) — an avatar is an image footprint, not a control.
 */
@@ -3340,6 +3340,87 @@ const avatar = {
 		}, "0px", "Corner inset of the presence/status indicator.", "How far the indicator is pulled in from the avatar's corner (logical); zero sits it flush against the edge, where the round box curves away from it.")
 	]
 };
+const badge = {
+	component: "badge",
+	category: "data",
+	slotPrefix: "noctis",
+	anatomy: [
+		"badge",
+		"badge-dot",
+		"badge-icon"
+	],
+	options: {
+		variant: [
+			"solid",
+			"soft",
+			"outline",
+			"dot"
+		],
+		tone: [
+			"neutral",
+			"accent",
+			"success",
+			"warning",
+			"danger",
+			"info",
+			"red",
+			"orange",
+			"amber",
+			"green",
+			"teal",
+			"blue",
+			"purple",
+			"pink"
+		],
+		size: ["sm", "md"]
+	},
+	states: [],
+	consumes: [],
+	optionSlots: {
+		variant: "badge",
+		tone: "badge",
+		size: "badge"
+	},
+	mints: [
+		aliased("dbb503f3-d915-428f-a2ba-c6bad40ae7d5", {
+			kind: "component",
+			component: "badge",
+			property: "padding-inline"
+		}, { raw: "0.5rem" }, "Inline padding of the chip.", "The horizontal inset between the chip edge and its content, per size.", { size: { sm: { raw: "0.4375rem" } } }),
+		aliased("aaecfaef-d3b1-4c85-a1bd-dde224acdbc6", {
+			kind: "component",
+			component: "badge",
+			property: "padding-block"
+		}, { raw: "0.1875rem" }, "Block padding of the chip.", "The vertical inset between the chip edge and its content, per size.", { size: { sm: { raw: "0.125rem" } } }),
+		aliased("c3e686b3-1588-401e-ac41-4ab58c34b8cc", {
+			kind: "component",
+			component: "badge",
+			property: "gap"
+		}, { raw: "0.3125rem" }, "Gap between the chip's dot/icon and its label.", "The spacing the chip holds between a leading dot or icon and the label text, per size.", { size: { sm: { raw: "0.25rem" } } }),
+		aliased("acd27e33-13ac-4d0e-a772-6ac25f34208c", {
+			kind: "component",
+			component: "badge",
+			property: "font-size"
+		}, { raw: "var(--noctis-text-mini)" }, "Label type size.", "The font size of the chip's label, per size; the 12px `mini` step at `md`, the 11px `micro` step at `sm`.", { size: { sm: { raw: "var(--noctis-text-micro)" } } }),
+		raw("27e0ac6b-60dc-4179-9d7e-ecad248c2ee7", {
+			kind: "component",
+			component: "badge",
+			property: "border-radius"
+		}, "var(--noctis-radius-full)", "Chip corner radius.", "The rounding of the chip; the full-round pill extreme so the chip reads as a label, not a button — override the public var for a squarer chip."),
+		aliased("d73ca89d-4d8c-4663-8f28-3ad69877ef92", {
+			kind: "component",
+			component: "badge",
+			anatomy: "dot",
+			property: "size"
+		}, { raw: "0.375rem" }, "Edge length of the leading status dot.", "The diameter of the optional status dot, per size; the dot inherits the label colour via `currentColor`, so it stays legible in every variant.", { size: { sm: { raw: "0.3125rem" } } }),
+		aliased("0fcef652-7887-4bc4-a85f-08137936f1c0", {
+			kind: "component",
+			component: "badge",
+			anatomy: "icon",
+			property: "size"
+		}, { raw: "0.875rem" }, "Edge length of a leading icon glyph.", "The width and height the chip clamps a leading icon to, per size, so the glyph tracks the label.", { size: { sm: { raw: "0.75rem" } } })
+	]
+};
 const colorSwatch = {
 	component: "color-swatch",
 	category: "fields",
@@ -4260,6 +4341,7 @@ const COMPONENT_DECLARATIONS = [
 	slider,
 	checkbox,
 	avatar,
+	badge,
 	otpField,
 	switchControl,
 	progress,

package/dist/graph/model.d.ts

@@ -24,7 +24,7 @@ type TokenBridge = {
   readonly name: string;
 };
 /** How a token is grouped in the reference view (display metadata, not the structural category). */
-type TokenGroup = "surface" | "text" | "border" | "accent" | "control" | "status" | "utility" | "chart" | "avatar";
+type TokenGroup = "surface" | "text" | "border" | "accent" | "control" | "status" | "utility" | "chart" | "palette";
 /**
  * A structured token name. The flat form carries an id verbatim (seed, foundation, and semantic
  * tokens — the category segment comes from `tier`/`category` at serialization, never the id);

package/dist/graph/model.js

@@ -55,7 +55,7 @@ const groupSchema = z.enum([
 	"status",
 	"utility",
 	"chart",
-	"avatar"
+	"palette"
 ]);
 const tokenBridgeSchema = z.discriminatedUnion("kind", [
 	z.object({ kind: z.literal("color") }).strict(),

package/dist/graph/statics.js

@@ -202,19 +202,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-1"
+			id: "palette-1"
 		},
 		value: {
 			raw: "oklch(0.62 0.17 264)",
 			rawLight: "oklch(0.58 0.18 264)"
 		},
-		description: "Generative avatar swatch 1.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 1.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 1",
+		label: "Palette 1",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-1",
+		group: "palette",
+		utility: "bg-palette-1",
 		bridge: { kind: "color" }
 	},
 	{
@@ -222,19 +222,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-2"
+			id: "palette-2"
 		},
 		value: {
 			raw: "oklch(0.62 0.15 196)",
 			rawLight: "oklch(0.56 0.15 196)"
 		},
-		description: "Generative avatar swatch 2.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 2.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 2",
+		label: "Palette 2",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-2",
+		group: "palette",
+		utility: "bg-palette-2",
 		bridge: { kind: "color" }
 	},
 	{
@@ -242,19 +242,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-3"
+			id: "palette-3"
 		},
 		value: {
 			raw: "oklch(0.62 0.16 152)",
 			rawLight: "oklch(0.56 0.16 152)"
 		},
-		description: "Generative avatar swatch 3.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 3.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 3",
+		label: "Palette 3",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-3",
+		group: "palette",
+		utility: "bg-palette-3",
 		bridge: { kind: "color" }
 	},
 	{
@@ -262,19 +262,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-4"
+			id: "palette-4"
 		},
 		value: {
 			raw: "oklch(0.64 0.15 130)",
 			rawLight: "oklch(0.58 0.15 130)"
 		},
-		description: "Generative avatar swatch 4.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 4.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 4",
+		label: "Palette 4",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-4",
+		group: "palette",
+		utility: "bg-palette-4",
 		bridge: { kind: "color" }
 	},
 	{
@@ -282,19 +282,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-5"
+			id: "palette-5"
 		},
 		value: {
 			raw: "oklch(0.66 0.16 70)",
 			rawLight: "oklch(0.62 0.16 70)"
 		},
-		description: "Generative avatar swatch 5.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 5.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 5",
+		label: "Palette 5",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-5",
+		group: "palette",
+		utility: "bg-palette-5",
 		bridge: { kind: "color" }
 	},
 	{
@@ -302,19 +302,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-6"
+			id: "palette-6"
 		},
 		value: {
 			raw: "oklch(0.62 0.18 40)",
 			rawLight: "oklch(0.58 0.19 40)"
 		},
-		description: "Generative avatar swatch 6.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 6.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 6",
+		label: "Palette 6",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-6",
+		group: "palette",
+		utility: "bg-palette-6",
 		bridge: { kind: "color" }
 	},
 	{
@@ -322,19 +322,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-7"
+			id: "palette-7"
 		},
 		value: {
 			raw: "oklch(0.6 0.2 18)",
 			rawLight: "oklch(0.56 0.21 18)"
 		},
-		description: "Generative avatar swatch 7.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 7.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 7",
+		label: "Palette 7",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-7",
+		group: "palette",
+		utility: "bg-palette-7",
 		bridge: { kind: "color" }
 	},
 	{
@@ -342,19 +342,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-8"
+			id: "palette-8"
 		},
 		value: {
 			raw: "oklch(0.6 0.18 330)",
 			rawLight: "oklch(0.56 0.19 330)"
 		},
-		description: "Generative avatar swatch 8.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 8.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 8",
+		label: "Palette 8",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-8",
+		group: "palette",
+		utility: "bg-palette-8",
 		bridge: { kind: "color" }
 	},
 	{
@@ -362,19 +362,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-9"
+			id: "palette-9"
 		},
 		value: {
 			raw: "oklch(0.6 0.18 300)",
 			rawLight: "oklch(0.56 0.19 300)"
 		},
-		description: "Generative avatar swatch 9.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 9.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 9",
+		label: "Palette 9",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-9",
+		group: "palette",
+		utility: "bg-palette-9",
 		bridge: { kind: "color" }
 	},
 	{
@@ -382,19 +382,19 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-10"
+			id: "palette-10"
 		},
 		value: {
 			raw: "oklch(0.6 0.15 285)",
 			rawLight: "oklch(0.56 0.16 285)"
 		},
-		description: "Generative avatar swatch 10.",
-		usage: "Avatar / initials background, indexed by a stable id hash.",
+		description: "Categorical palette swatch 10.",
+		usage: "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
 		introduced: "0.0.0",
-		label: "Avatar 10",
+		label: "Palette 10",
 		category: "color",
-		group: "avatar",
-		utility: "bg-avatar-10",
+		group: "palette",
+		utility: "bg-palette-10",
 		bridge: { kind: "color" }
 	},
 	{
@@ -402,16 +402,16 @@ const STATIC_SEMANTIC_TOKENS = [
 		tier: "semantic",
 		name: {
 			kind: "flat",
-			id: "avatar-foreground"
+			id: "palette-foreground"
 		},
 		value: { raw: "oklch(0.99 0 0)" },
-		description: "Initials text on an avatar background.",
-		usage: "Initials text on an avatar — the page background as a knockout.",
+		description: "Knockout text on a saturated palette swatch.",
+		usage: "Knockout text that reads on any saturated palette swatch — avatar initials, solid Badge labels.",
 		introduced: "0.0.0",
-		label: "Avatar foreground",
+		label: "Palette foreground",
 		category: "color",
-		group: "avatar",
-		utility: "text-avatar-foreground",
+		group: "palette",
+		utility: "text-palette-foreground",
 		bridge: { kind: "color" }
 	}
 ];

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { ComponentDeclaration, DesignToken, GraphValidationError, TokenBridge, T
 import { COMPONENT_DECLARATIONS } from "./graph/components.js";
 import { DESIGN_TOKENS, SemanticRoleId } from "./graph/index.js";
 import { internalVar, serializeTokenName } from "./graph/serialize.js";
-import { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, avatarIndex } from "./palettes.js";
+import { CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, avatarIndex } from "./palettes.js";
 import { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX } from "./scales.js";
 import { ACCENT_SWATCHES, BACKGROUND_SWATCHES, ThemeSwatch } from "./swatches.js";
 import { ELEVATION_SCOPES, ElevationScope, SEMANTIC_ROLES, STATIC_TOKENS, SemanticRole, StaticToken } from "./semantic.js";
@@ -23,4 +23,4 @@ import { ThemeOverrides, ThemePreset, defaultPreset, presets } from "@stridge/no
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 declare const DESIGN_TOKENS_PACKAGE: "@stridge/noctis-design-tokens";
 //#endregion
-export { ACCENT_SWATCHES, AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, type ComponentCategory, type ComponentDeclaration, type CompositeProperty, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, type DesignToken, EASINGS, ELEVATION_SCOPES, type ElevationScope, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, type ModePalette, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, type SemanticRole, type SemanticRoleId, type StaticToken, TOKEN_CATEGORIES, TOKEN_TIERS, type ThemeOverrides, type ThemePreset, type ThemeSwatch, type TokenBridge, type TokenCategory, type TokenDeprecation, type TokenGroup, type TokenName, type TokenState, type TokenTier, type TokenValue, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };
+export { ACCENT_SWATCHES, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, type ComponentCategory, type ComponentDeclaration, type CompositeProperty, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, type DesignToken, EASINGS, ELEVATION_SCOPES, type ElevationScope, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, type ModePalette, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, type SemanticRole, type SemanticRoleId, type StaticToken, TOKEN_CATEGORIES, TOKEN_TIERS, type ThemeOverrides, type ThemePreset, type ThemeSwatch, type TokenBridge, type TokenCategory, type TokenDeprecation, type TokenGroup, type TokenName, type TokenState, type TokenTier, type TokenValue, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };

package/dist/index.js

@@ -5,7 +5,7 @@ import { CATEGORY_REGISTRY, COMPOSITE_PROPERTIES, ROLE_VAR_PREFIX, STATE_REGISTR
 import { internalVar, serializeTokenName } from "./graph/serialize.js";
 import { GraphValidationError, bridgeVarName, componentDeclarationSchema, cssVarName, designTokenSchema, validateGraph } from "./graph/model.js";
 import { DESIGN_TOKENS } from "./graph/index.js";
-import { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, avatarIndex } from "./palettes.js";
+import { CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, avatarIndex } from "./palettes.js";
 import { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX } from "./scales.js";
 import { ACCENT_SWATCHES, BACKGROUND_SWATCHES } from "./swatches.js";
 import { ELEVATION_SCOPES, SEMANTIC_ROLES, STATIC_TOKENS } from "./semantic.js";
@@ -22,4 +22,4 @@ import { defaultPreset, presets } from "@stridge/noctis-theme-engine";
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 const DESIGN_TOKENS_PACKAGE = "@stridge/noctis-design-tokens";
 //#endregion
-export { ACCENT_SWATCHES, AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, EASINGS, ELEVATION_SCOPES, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, TOKEN_CATEGORIES, TOKEN_TIERS, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };
+export { ACCENT_SWATCHES, BACKGROUND_SWATCHES, BREAKPOINTS, CATEGORY_REGISTRY, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, COMPONENT_DECLARATIONS, COMPOSITE_PROPERTIES, DENSITY_VAR, DESIGN_TOKENS, DESIGN_TOKENS_PACKAGE, EASINGS, ELEVATION_SCOPES, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, GraphValidationError, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, RADII, RADIUS_VAR, ROLE_VAR_PREFIX, SEMANTIC_ROLES, SPEEDS, STATE_REGISTRY, STATIC_TOKENS, TOKEN_CATEGORIES, TOKEN_TIERS, Z_INDEX, applyThemeWithScopes, avatarIndex, bridgeVarName, componentDeclarationSchema, cssVarName, defaultPreset, defaultThemeCss, designTokenSchema, internalVar, presets, serializeTokenName, validateGraph };

package/dist/palettes.d.ts

@@ -2,10 +2,11 @@
 /**
  * Static, accent-independent palettes the engine does not generate.
  *
- * Charts and avatars need **categorical distinctness that stays stable** regardless of the
- * active theme accent, so these are authored in OKLCH (not derived from the seed) with
- * explicit light and dark values. They are emitted as Tailwind colors (`bg-chart-1`,
- * `bg-avatar-3`, `text-chart-positive`) and switch on the resolved mode via `data-theme`.
+ * Charts and categorical UI (avatar swatches, badge decorative tones) need **categorical
+ * distinctness that stays stable** regardless of the active theme accent, so these are authored in
+ * OKLCH (not derived from the seed) with explicit light and dark values. They are emitted as Tailwind
+ * colors (`bg-chart-1`, `bg-palette-3`, `text-chart-positive`) and switch on the resolved mode via
+ * `data-theme`.
  *
  * Hue choices are spread across the wheel and separated in lightness as well as hue, so the
  * series remain distinguishable under the common forms of color-vision deficiency (the worst
@@ -22,18 +23,19 @@ interface ModePalette {
  */
 declare const CHART_PALETTE: ModePalette;
 /**
- * Avatar / identity backgrounds (10). Saturated mid-lightness colors chosen so white initials
- * read clearly on every swatch; picked deterministically by hashing a stable id.
+ * The categorical palette (10). Saturated mid-lightness colors chosen so a white knockout reads
+ * clearly on every swatch — shared by Avatar fallback backgrounds (picked by hashing a stable id) and
+ * Badge decorative tones (mapped by name). Accent-independent, so categorical identity stays stable.
  */
-declare const AVATAR_PALETTE: ModePalette;
-/** Number of distinct chart series and avatar swatches. */
+declare const PALETTE: ModePalette;
+/** Number of distinct chart series and categorical palette swatches. */
 declare const CHART_SERIES_COUNT: number;
-declare const AVATAR_SWATCH_COUNT: number;
-/** On-avatar text — a fixed knockout that reads on every (saturated) avatar swatch. */
-declare const AVATAR_FOREGROUND: "oklch(0.99 0 0)";
+declare const PALETTE_SWATCH_COUNT: number;
+/** Knockout text on a palette swatch — a fixed near-white that reads on every (saturated) swatch. */
+declare const PALETTE_FOREGROUND: "oklch(0.99 0 0)";
 /**
- * Pick a stable avatar swatch index (1-based, matching `bg-avatar-N`) for an id. A small FNV-1a
- * hash keeps the mapping deterministic across renders and sessions.
+ * Pick a stable palette swatch index (1-based, matching `bg-palette-N`) for an id — Avatar's identity
+ * hash. A small FNV-1a hash keeps the mapping deterministic across renders and sessions.
  */
 declare function avatarIndex(id: string): number;
 /** Chart roles that alias engine semantics (kept here so the swatch/reference lists them together). */
@@ -67,4 +69,4 @@ declare const CHART_SEMANTIC_ROLES: readonly [{
   readonly description: "Chart tooltip surface.";
 }];
 //#endregion
-export { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, avatarIndex };
+export { CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, ModePalette, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, avatarIndex };

package/dist/palettes.js

@@ -26,10 +26,11 @@ const CHART_PALETTE = {
 	]
 };
 /**
-* Avatar / identity backgrounds (10). Saturated mid-lightness colors chosen so white initials
-* read clearly on every swatch; picked deterministically by hashing a stable id.
+* The categorical palette (10). Saturated mid-lightness colors chosen so a white knockout reads
+* clearly on every swatch — shared by Avatar fallback backgrounds (picked by hashing a stable id) and
+* Badge decorative tones (mapped by name). Accent-independent, so categorical identity stays stable.
 */
-const AVATAR_PALETTE = {
+const PALETTE = {
 	dark: [
 		"oklch(0.62 0.17 264)",
 		"oklch(0.62 0.15 196)",
@@ -55,14 +56,14 @@ const AVATAR_PALETTE = {
 		"oklch(0.56 0.16 285)"
 	]
 };
-/** Number of distinct chart series and avatar swatches. */
+/** Number of distinct chart series and categorical palette swatches. */
 const CHART_SERIES_COUNT = CHART_PALETTE.dark.length;
-const AVATAR_SWATCH_COUNT = AVATAR_PALETTE.dark.length;
-/** On-avatar text — a fixed knockout that reads on every (saturated) avatar swatch. */
-const AVATAR_FOREGROUND = "oklch(0.99 0 0)";
+const PALETTE_SWATCH_COUNT = PALETTE.dark.length;
+/** Knockout text on a palette swatch — a fixed near-white that reads on every (saturated) swatch. */
+const PALETTE_FOREGROUND = "oklch(0.99 0 0)";
 /**
-* Pick a stable avatar swatch index (1-based, matching `bg-avatar-N`) for an id. A small FNV-1a
-* hash keeps the mapping deterministic across renders and sessions.
+* Pick a stable palette swatch index (1-based, matching `bg-palette-N`) for an id — Avatar's identity
+* hash. A small FNV-1a hash keeps the mapping deterministic across renders and sessions.
 */
 function avatarIndex(id) {
 	let hash = 2166136261;
@@ -70,7 +71,7 @@ function avatarIndex(id) {
 		hash ^= id.charCodeAt(i);
 		hash = Math.imul(hash, 16777619);
 	}
-	return (hash >>> 0) % AVATAR_SWATCH_COUNT + 1;
+	return (hash >>> 0) % PALETTE_SWATCH_COUNT + 1;
 }
 /** Chart roles that alias engine semantics (kept here so the swatch/reference lists them together). */
 const CHART_SEMANTIC_ROLES = [
@@ -111,4 +112,4 @@ const CHART_SEMANTIC_ROLES = [
 	}
 ];
 //#endregion
-export { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, avatarIndex };
+export { CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, PALETTE, PALETTE_FOREGROUND, PALETTE_SWATCH_COUNT, avatarIndex };

package/dist/tokens.css

@@ -477,7 +477,7 @@
 }
 
 /* ── Authored static palettes (accent-independent; switch on the resolved mode) ─────────
- * Chart and avatar series stay categorically stable regardless of the accent (re-theming
+ * Chart and categorical-palette series stay categorically stable regardless of the accent (re-theming
  * them would break legend↔series identity), so they are authored — not engine-derived. Dark
  * values sit on `:root`; light values under `[data-theme="light"]`, set by the app shell and the
  * theme provider from the resolved mode. Hues are spread across the wheel and separated in
@@ -493,17 +493,17 @@
     --noctis-color-chart-7: oklch(0.7 0.17 310);
     --noctis-color-chart-8: oklch(0.76 0.14 350);
 
-    --noctis-color-avatar-1: oklch(0.62 0.17 264);
-    --noctis-color-avatar-2: oklch(0.62 0.15 196);
-    --noctis-color-avatar-3: oklch(0.62 0.16 152);
-    --noctis-color-avatar-4: oklch(0.64 0.15 130);
-    --noctis-color-avatar-5: oklch(0.66 0.16 70);
-    --noctis-color-avatar-6: oklch(0.62 0.18 40);
-    --noctis-color-avatar-7: oklch(0.6 0.2 18);
-    --noctis-color-avatar-8: oklch(0.6 0.18 330);
-    --noctis-color-avatar-9: oklch(0.6 0.18 300);
-    --noctis-color-avatar-10: oklch(0.6 0.15 285);
-    --noctis-color-avatar-foreground: oklch(0.99 0 0);
+    --noctis-color-palette-1: oklch(0.62 0.17 264);
+    --noctis-color-palette-2: oklch(0.62 0.15 196);
+    --noctis-color-palette-3: oklch(0.62 0.16 152);
+    --noctis-color-palette-4: oklch(0.64 0.15 130);
+    --noctis-color-palette-5: oklch(0.66 0.16 70);
+    --noctis-color-palette-6: oklch(0.62 0.18 40);
+    --noctis-color-palette-7: oklch(0.6 0.2 18);
+    --noctis-color-palette-8: oklch(0.6 0.18 330);
+    --noctis-color-palette-9: oklch(0.6 0.18 300);
+    --noctis-color-palette-10: oklch(0.6 0.15 285);
+    --noctis-color-palette-foreground: oklch(0.99 0 0);
 }
 
 :root[data-theme="light"] {
@@ -516,16 +516,16 @@
     --noctis-color-chart-7: oklch(0.55 0.19 310);
     --noctis-color-chart-8: oklch(0.6 0.16 350);
 
-    --noctis-color-avatar-1: oklch(0.58 0.18 264);
-    --noctis-color-avatar-2: oklch(0.56 0.15 196);
-    --noctis-color-avatar-3: oklch(0.56 0.16 152);
-    --noctis-color-avatar-4: oklch(0.58 0.15 130);
-    --noctis-color-avatar-5: oklch(0.62 0.16 70);
-    --noctis-color-avatar-6: oklch(0.58 0.19 40);
-    --noctis-color-avatar-7: oklch(0.56 0.21 18);
-    --noctis-color-avatar-8: oklch(0.56 0.19 330);
-    --noctis-color-avatar-9: oklch(0.56 0.19 300);
-    --noctis-color-avatar-10: oklch(0.56 0.16 285);
+    --noctis-color-palette-1: oklch(0.58 0.18 264);
+    --noctis-color-palette-2: oklch(0.56 0.15 196);
+    --noctis-color-palette-3: oklch(0.56 0.16 152);
+    --noctis-color-palette-4: oklch(0.58 0.15 130);
+    --noctis-color-palette-5: oklch(0.62 0.16 70);
+    --noctis-color-palette-6: oklch(0.58 0.19 40);
+    --noctis-color-palette-7: oklch(0.56 0.21 18);
+    --noctis-color-palette-8: oklch(0.56 0.19 330);
+    --noctis-color-palette-9: oklch(0.56 0.19 300);
+    --noctis-color-palette-10: oklch(0.56 0.16 285);
 }
 
 /* ── Light-mode shadows ─────────────────────────────────────────────────────────────────
@@ -2437,6 +2437,31 @@
     [data-slot="noctis-avatar"][data-size="xl"] [data-slot="noctis-avatar-indicator"] {
         --_avatar-indicator-size: var(--noctis-avatar-indicator-size, 1rem);
     }
+    [data-slot="noctis-badge"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.5rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.1875rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.3125rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-mini));
+        --_badge-border-radius: var(--noctis-badge-border-radius, var(--noctis-radius-full));
+    }
+    [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.375rem);
+    }
+    [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.875rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.4375rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.125rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.25rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-micro));
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.3125rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.75rem);
+    }
     [data-slot="noctis-otp-field"] {
         --_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
     }

package/dist/tokens.dtcg.json

@@ -1433,124 +1433,124 @@
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-1": {
+                "palette-1": {
                     "$type": "color",
                     "$value": "oklch(0.62 0.17 264)",
-                    "$description": "Generative avatar swatch 1.",
+                    "$description": "Categorical palette swatch 1.",
                     "$extensions": {
                         "org.stridge.uuid": "e3a3fffd-08c6-4428-b1c4-2ef6871cd105",
-                        "org.stridge.cssVar": "--noctis-color-avatar-1",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-1",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-2": {
+                "palette-2": {
                     "$type": "color",
                     "$value": "oklch(0.62 0.15 196)",
-                    "$description": "Generative avatar swatch 2.",
+                    "$description": "Categorical palette swatch 2.",
                     "$extensions": {
                         "org.stridge.uuid": "c94440a3-9695-4a60-a30f-d4208264fb9c",
-                        "org.stridge.cssVar": "--noctis-color-avatar-2",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-2",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-3": {
+                "palette-3": {
                     "$type": "color",
                     "$value": "oklch(0.62 0.16 152)",
-                    "$description": "Generative avatar swatch 3.",
+                    "$description": "Categorical palette swatch 3.",
                     "$extensions": {
                         "org.stridge.uuid": "9a123d6a-99a1-47d6-894e-f8d4955443e9",
-                        "org.stridge.cssVar": "--noctis-color-avatar-3",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-3",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-4": {
+                "palette-4": {
                     "$type": "color",
                     "$value": "oklch(0.64 0.15 130)",
-                    "$description": "Generative avatar swatch 4.",
+                    "$description": "Categorical palette swatch 4.",
                     "$extensions": {
                         "org.stridge.uuid": "17763bc9-6671-4f36-858d-d8a598a00987",
-                        "org.stridge.cssVar": "--noctis-color-avatar-4",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-4",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-5": {
+                "palette-5": {
                     "$type": "color",
                     "$value": "oklch(0.66 0.16 70)",
-                    "$description": "Generative avatar swatch 5.",
+                    "$description": "Categorical palette swatch 5.",
                     "$extensions": {
                         "org.stridge.uuid": "7728d6d9-a196-4d33-8113-2fae86a08a2b",
-                        "org.stridge.cssVar": "--noctis-color-avatar-5",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-5",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-6": {
+                "palette-6": {
                     "$type": "color",
                     "$value": "oklch(0.62 0.18 40)",
-                    "$description": "Generative avatar swatch 6.",
+                    "$description": "Categorical palette swatch 6.",
                     "$extensions": {
                         "org.stridge.uuid": "d5536df4-39ab-4dd2-a3a2-e9acbcf0ec77",
-                        "org.stridge.cssVar": "--noctis-color-avatar-6",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-6",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-7": {
+                "palette-7": {
                     "$type": "color",
                     "$value": "oklch(0.6 0.2 18)",
-                    "$description": "Generative avatar swatch 7.",
+                    "$description": "Categorical palette swatch 7.",
                     "$extensions": {
                         "org.stridge.uuid": "c27d7067-d36c-486d-87bd-8c9d6ec2c5a9",
-                        "org.stridge.cssVar": "--noctis-color-avatar-7",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-7",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-8": {
+                "palette-8": {
                     "$type": "color",
                     "$value": "oklch(0.6 0.18 330)",
-                    "$description": "Generative avatar swatch 8.",
+                    "$description": "Categorical palette swatch 8.",
                     "$extensions": {
                         "org.stridge.uuid": "14d955f4-5a36-43b1-91c3-8aa452ea097d",
-                        "org.stridge.cssVar": "--noctis-color-avatar-8",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-8",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-9": {
+                "palette-9": {
                     "$type": "color",
                     "$value": "oklch(0.6 0.18 300)",
-                    "$description": "Generative avatar swatch 9.",
+                    "$description": "Categorical palette swatch 9.",
                     "$extensions": {
                         "org.stridge.uuid": "9ce232b0-56f8-4098-983a-a3af52fb0ffb",
-                        "org.stridge.cssVar": "--noctis-color-avatar-9",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-9",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-10": {
+                "palette-10": {
                     "$type": "color",
                     "$value": "oklch(0.6 0.15 285)",
-                    "$description": "Generative avatar swatch 10.",
+                    "$description": "Categorical palette swatch 10.",
                     "$extensions": {
                         "org.stridge.uuid": "a78cb6f4-a317-455a-930d-96687f38d69f",
-                        "org.stridge.cssVar": "--noctis-color-avatar-10",
-                        "org.stridge.usage": "Avatar / initials background, indexed by a stable id hash.",
+                        "org.stridge.cssVar": "--noctis-color-palette-10",
+                        "org.stridge.usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 },
-                "avatar-foreground": {
+                "palette-foreground": {
                     "$type": "color",
                     "$value": "oklch(0.99 0 0)",
-                    "$description": "Initials text on an avatar background.",
+                    "$description": "Knockout text on a saturated palette swatch.",
                     "$extensions": {
                         "org.stridge.uuid": "8ac67b72-d712-4c92-af5f-c0caae413e20",
-                        "org.stridge.cssVar": "--noctis-color-avatar-foreground",
-                        "org.stridge.usage": "Initials text on an avatar — the page background as a knockout.",
+                        "org.stridge.cssVar": "--noctis-color-palette-foreground",
+                        "org.stridge.usage": "Knockout text that reads on any saturated palette swatch — avatar initials, solid Badge labels.",
                         "org.stridge.introduced": "0.0.0"
                     }
                 }

package/dist/tokens.json

@@ -1965,15 +1965,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-1"
+                "id": "palette-1"
             },
-            "cssVar": "--noctis-color-avatar-1",
+            "cssVar": "--noctis-color-palette-1",
             "value": {
                 "raw": "oklch(0.62 0.17 264)",
                 "rawLight": "oklch(0.58 0.18 264)"
             },
-            "description": "Generative avatar swatch 1.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 1.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -1981,15 +1981,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-2"
+                "id": "palette-2"
             },
-            "cssVar": "--noctis-color-avatar-2",
+            "cssVar": "--noctis-color-palette-2",
             "value": {
                 "raw": "oklch(0.62 0.15 196)",
                 "rawLight": "oklch(0.56 0.15 196)"
             },
-            "description": "Generative avatar swatch 2.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 2.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -1997,15 +1997,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-3"
+                "id": "palette-3"
             },
-            "cssVar": "--noctis-color-avatar-3",
+            "cssVar": "--noctis-color-palette-3",
             "value": {
                 "raw": "oklch(0.62 0.16 152)",
                 "rawLight": "oklch(0.56 0.16 152)"
             },
-            "description": "Generative avatar swatch 3.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 3.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2013,15 +2013,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-4"
+                "id": "palette-4"
             },
-            "cssVar": "--noctis-color-avatar-4",
+            "cssVar": "--noctis-color-palette-4",
             "value": {
                 "raw": "oklch(0.64 0.15 130)",
                 "rawLight": "oklch(0.58 0.15 130)"
             },
-            "description": "Generative avatar swatch 4.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 4.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2029,15 +2029,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-5"
+                "id": "palette-5"
             },
-            "cssVar": "--noctis-color-avatar-5",
+            "cssVar": "--noctis-color-palette-5",
             "value": {
                 "raw": "oklch(0.66 0.16 70)",
                 "rawLight": "oklch(0.62 0.16 70)"
             },
-            "description": "Generative avatar swatch 5.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 5.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2045,15 +2045,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-6"
+                "id": "palette-6"
             },
-            "cssVar": "--noctis-color-avatar-6",
+            "cssVar": "--noctis-color-palette-6",
             "value": {
                 "raw": "oklch(0.62 0.18 40)",
                 "rawLight": "oklch(0.58 0.19 40)"
             },
-            "description": "Generative avatar swatch 6.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 6.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2061,15 +2061,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-7"
+                "id": "palette-7"
             },
-            "cssVar": "--noctis-color-avatar-7",
+            "cssVar": "--noctis-color-palette-7",
             "value": {
                 "raw": "oklch(0.6 0.2 18)",
                 "rawLight": "oklch(0.56 0.21 18)"
             },
-            "description": "Generative avatar swatch 7.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 7.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2077,15 +2077,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-8"
+                "id": "palette-8"
             },
-            "cssVar": "--noctis-color-avatar-8",
+            "cssVar": "--noctis-color-palette-8",
             "value": {
                 "raw": "oklch(0.6 0.18 330)",
                 "rawLight": "oklch(0.56 0.19 330)"
             },
-            "description": "Generative avatar swatch 8.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 8.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2093,15 +2093,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-9"
+                "id": "palette-9"
             },
-            "cssVar": "--noctis-color-avatar-9",
+            "cssVar": "--noctis-color-palette-9",
             "value": {
                 "raw": "oklch(0.6 0.18 300)",
                 "rawLight": "oklch(0.56 0.19 300)"
             },
-            "description": "Generative avatar swatch 9.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 9.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2109,15 +2109,15 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-10"
+                "id": "palette-10"
             },
-            "cssVar": "--noctis-color-avatar-10",
+            "cssVar": "--noctis-color-palette-10",
             "value": {
                 "raw": "oklch(0.6 0.15 285)",
                 "rawLight": "oklch(0.56 0.16 285)"
             },
-            "description": "Generative avatar swatch 10.",
-            "usage": "Avatar / initials background, indexed by a stable id hash.",
+            "description": "Categorical palette swatch 10.",
+            "usage": "Accent-independent categorical fill — avatar initials (chosen by id hash) and Badge decorative tones.",
             "introduced": "0.0.0"
         },
         {
@@ -2125,14 +2125,14 @@
             "tier": "semantic",
             "name": {
                 "kind": "flat",
-                "id": "avatar-foreground"
+                "id": "palette-foreground"
             },
-            "cssVar": "--noctis-color-avatar-foreground",
+            "cssVar": "--noctis-color-palette-foreground",
             "value": {
                 "raw": "oklch(0.99 0 0)"
             },
-            "description": "Initials text on an avatar background.",
-            "usage": "Initials text on an avatar — the page background as a knockout.",
+            "description": "Knockout text on a saturated palette swatch.",
+            "usage": "Knockout text that reads on any saturated palette swatch — avatar initials, solid Badge labels.",
             "introduced": "0.0.0"
         },
         {
@@ -13399,6 +13399,190 @@
                 }
             ]
         },
+        {
+            "component": "badge",
+            "category": "data",
+            "slotPrefix": "noctis",
+            "anatomy": ["badge", "badge-dot", "badge-icon"],
+            "options": {
+                "variant": ["solid", "soft", "outline", "dot"],
+                "tone": [
+                    "neutral",
+                    "accent",
+                    "success",
+                    "warning",
+                    "danger",
+                    "info",
+                    "red",
+                    "orange",
+                    "amber",
+                    "green",
+                    "teal",
+                    "blue",
+                    "purple",
+                    "pink"
+                ],
+                "size": ["sm", "md"]
+            },
+            "states": [],
+            "consumes": [],
+            "optionSlots": {
+                "variant": "badge",
+                "tone": "badge",
+                "size": "badge"
+            },
+            "mints": [
+                {
+                    "uuid": "dbb503f3-d915-428f-a2ba-c6bad40ae7d5",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "property": "padding-inline"
+                    },
+                    "value": {
+                        "raw": "0.5rem"
+                    },
+                    "description": "Inline padding of the chip.",
+                    "usage": "The horizontal inset between the chip edge and its content, per size.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "0.4375rem"
+                            }
+                        }
+                    }
+                },
+                {
+                    "uuid": "aaecfaef-d3b1-4c85-a1bd-dde224acdbc6",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "property": "padding-block"
+                    },
+                    "value": {
+                        "raw": "0.1875rem"
+                    },
+                    "description": "Block padding of the chip.",
+                    "usage": "The vertical inset between the chip edge and its content, per size.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "0.125rem"
+                            }
+                        }
+                    }
+                },
+                {
+                    "uuid": "c3e686b3-1588-401e-ac41-4ab58c34b8cc",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "property": "gap"
+                    },
+                    "value": {
+                        "raw": "0.3125rem"
+                    },
+                    "description": "Gap between the chip's dot/icon and its label.",
+                    "usage": "The spacing the chip holds between a leading dot or icon and the label text, per size.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "0.25rem"
+                            }
+                        }
+                    }
+                },
+                {
+                    "uuid": "acd27e33-13ac-4d0e-a772-6ac25f34208c",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "property": "font-size"
+                    },
+                    "value": {
+                        "raw": "var(--noctis-text-mini)"
+                    },
+                    "description": "Label type size.",
+                    "usage": "The font size of the chip's label, per size; the 12px `mini` step at `md`, the 11px `micro` step at `sm`.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "var(--noctis-text-micro)"
+                            }
+                        }
+                    }
+                },
+                {
+                    "uuid": "27e0ac6b-60dc-4179-9d7e-ecad248c2ee7",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "property": "border-radius"
+                    },
+                    "value": {
+                        "raw": "var(--noctis-radius-full)"
+                    },
+                    "description": "Chip corner radius.",
+                    "usage": "The rounding of the chip; the full-round pill extreme so the chip reads as a label, not a button — override the public var for a squarer chip.",
+                    "introduced": "0.0.0"
+                },
+                {
+                    "uuid": "d73ca89d-4d8c-4663-8f28-3ad69877ef92",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "anatomy": "dot",
+                        "property": "size"
+                    },
+                    "value": {
+                        "raw": "0.375rem"
+                    },
+                    "description": "Edge length of the leading status dot.",
+                    "usage": "The diameter of the optional status dot, per size; the dot inherits the label colour via `currentColor`, so it stays legible in every variant.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "0.3125rem"
+                            }
+                        }
+                    }
+                },
+                {
+                    "uuid": "0fcef652-7887-4bc4-a85f-08137936f1c0",
+                    "tier": "component",
+                    "name": {
+                        "kind": "component",
+                        "component": "badge",
+                        "anatomy": "icon",
+                        "property": "size"
+                    },
+                    "value": {
+                        "raw": "0.875rem"
+                    },
+                    "description": "Edge length of a leading icon glyph.",
+                    "usage": "The width and height the chip clamps a leading icon to, per size, so the glyph tracks the label.",
+                    "introduced": "0.0.0",
+                    "variants": {
+                        "size": {
+                            "sm": {
+                                "raw": "0.75rem"
+                            }
+                        }
+                    }
+                }
+            ]
+        },
         {
             "component": "otp-field",
             "category": "fields",

package/dist/tokens.tailwind.css

@@ -161,17 +161,17 @@
     --color-chart-6: var(--noctis-color-chart-6);
     --color-chart-7: var(--noctis-color-chart-7);
     --color-chart-8: var(--noctis-color-chart-8);
-    --color-avatar-1: var(--noctis-color-avatar-1);
-    --color-avatar-2: var(--noctis-color-avatar-2);
-    --color-avatar-3: var(--noctis-color-avatar-3);
-    --color-avatar-4: var(--noctis-color-avatar-4);
-    --color-avatar-5: var(--noctis-color-avatar-5);
-    --color-avatar-6: var(--noctis-color-avatar-6);
-    --color-avatar-7: var(--noctis-color-avatar-7);
-    --color-avatar-8: var(--noctis-color-avatar-8);
-    --color-avatar-9: var(--noctis-color-avatar-9);
-    --color-avatar-10: var(--noctis-color-avatar-10);
-    --color-avatar-foreground: var(--noctis-color-avatar-foreground);
+    --color-palette-1: var(--noctis-color-palette-1);
+    --color-palette-2: var(--noctis-color-palette-2);
+    --color-palette-3: var(--noctis-color-palette-3);
+    --color-palette-4: var(--noctis-color-palette-4);
+    --color-palette-5: var(--noctis-color-palette-5);
+    --color-palette-6: var(--noctis-color-palette-6);
+    --color-palette-7: var(--noctis-color-palette-7);
+    --color-palette-8: var(--noctis-color-palette-8);
+    --color-palette-9: var(--noctis-color-palette-9);
+    --color-palette-10: var(--noctis-color-palette-10);
+    --color-palette-foreground: var(--noctis-color-palette-foreground);
 
     /* Named text sizes + their paired line-height keys (`--text-<size>--line-height`). */
     --text-micro: var(--noctis-text-micro);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stridge/noctis-design-tokens",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "zod": "4.4.3",
-    "@stridge/noctis-theme-engine": "1.0.0-beta.3"
+    "@stridge/noctis-theme-engine": "1.0.0-beta.4"
   },
   "peerDependencies": {
     "react": "19.2.7"