@codecavepro/brand 1.0.0

package/dist/fonts.css

@@ -0,0 +1,71 @@
+/* CODECAVE — font faces (standalone)
+ *
+ * colors_and_type.css already declares these faces with paths relative to the
+ * package root. This file exists so `fonts/` can be dropped into another
+ * project on its own; the paths here are relative to fonts/ itself.
+ *
+ * PROVENANCE
+ * The production site (codecave.pro/src/styles/global.css) declares ONE face:
+ *
+ *     @font-face { font-family: Satoshi; src: url("../assets/fonts/Satoshi-Regular.ttf"); }
+ *
+ * with no font-weight descriptor, which is why live 300 and 700 text is
+ * browser-synthesized rather than a real cut. The brand asset upload supplied
+ * genuine Light / Regular / Medium / Bold / Black cuts, so this package binds
+ * them properly. Expect package output at 700 to be marginally tighter than
+ * the live site until production ships the same files.
+ */
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Light.woff2") format("woff2"),
+       url("./Satoshi-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Regular.woff2") format("woff2"),
+       url("./Satoshi-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Italic.woff2") format("woff2"),
+       url("./Satoshi-Italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Medium.woff2") format("woff2"),
+       url("./Satoshi-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Bold.woff2") format("woff2"),
+       url("./Satoshi-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("./Satoshi-Black.woff2") format("woff2"),
+       url("./Satoshi-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tokens/colors.js';
+export * from './tokens/layout.js';
+export * from './tokens/typography.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../.tmp/index.ts"],"names":[],"mappings":"AAEA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+// GENERATED by packages/brand/scripts/build.mjs — do not edit.
+// Origin: docs/tokens/*.ts
+export * from './tokens/colors.js';
+export * from './tokens/layout.js';
+export * from './tokens/typography.js';

package/dist/tokens/colors.d.ts

@@ -0,0 +1,94 @@
+/**
+ * CODECAVE — color tokens as a typed module.
+ *
+ * A faithful mirror of `colors_and_type.css`, for consumers that cannot read a
+ * stylesheet: design tooling, canvas/WebGL renderers, PDF and email builders,
+ * native apps. The CSS file remains the source of truth — if the two ever
+ * disagree, the CSS wins.
+ *
+ * Originals: source_examples/styles/global.css (codecave.pro @theme,
+ *            2026 palette rebuild). Old and new ramps share step names with
+ *            different values — never map by step name across the rebuild;
+ *            map by hex or by role.
+ */
+/** The violet brand ramp: light to dark, 12 steps.
+ *  Do NOT consume these directly — use the semantic layer below.
+ *  Non-monotonic quirk: brand-500 is lighter than brand-400. */
+export declare const brand: {
+    readonly 25: "#E8E6F0";
+    readonly 50: "#BBB9CB";
+    readonly 100: "#B8AFDB";
+    readonly 200: "#B19AFE";
+    readonly 300: "#735CAB";
+    readonly 400: "#5F3ABD";
+    readonly 500: "#5F20FE";
+    readonly 600: "#4705ED";
+    readonly 700: "#4004AF";
+    readonly 800: "#1B0D4E";
+    readonly 900: "#1E113B";
+    readonly 950: "#0A0A0B";
+};
+/** The gray ramp: light to dark, 13 steps.
+ *  Non-monotonic quirk: gray-1100 (card) is lighter than gray-1000. */
+export declare const gray: {
+    readonly 50: "#F4F4F6";
+    readonly 100: "#DCDCE5";
+    readonly 200: "#D5D5DD";
+    readonly 300: "#C7C7DB";
+    readonly 400: "#A3A3C2";
+    readonly 500: "#9595BB";
+    readonly 600: "#6B6699";
+    readonly 700: "#2B2848";
+    readonly 800: "#232339";
+    readonly 900: "#1C1C27";
+    readonly 950: "#15151E";
+    readonly 1000: "#050505";
+    readonly 1100: "#0F0F15";
+};
+/** Single-use accents (global.css calls them "once used"). RAW-OK. */
+export declare const accent: {
+    readonly glow25: "#9980FF";
+    readonly shadow0: "#281470";
+    readonly progress0: "#8252FC";
+};
+/** Technology-card wash — the only place cyan survives (0.1-alpha wash).
+ *  The old cyan #20EFFE is an imagery-only art literal since the rebuild. */
+export declare const technologyGradient: {
+    readonly 0: "#077689";
+    readonly 25: "#1A0452";
+    readonly 50: "#070312";
+};
+export declare const error: {
+    readonly 100: "#FE9A9A";
+    readonly 200: "#FE2020";
+    readonly 300: "#B42318";
+    readonly 400: "#CA1400";
+};
+/** The semantic layer. Consume these. */
+export declare const color: {
+    readonly heading: "#F4F4F6";
+    readonly action: "#5F20FE";
+    readonly neutral: "#6B6699";
+    readonly hovered: "#B19AFE";
+    readonly outlinePrimaryHover: "#1B0D4E";
+    readonly bodyPrimary: "#F4F4F6";
+    readonly textBodyPrimary: "#D5D5DD";
+    readonly bodySecondary: "#9595BB";
+    readonly bodySecondaryLighter: "#C7C7DB";
+    readonly surfacePrimary: "#0A0A0B";
+    readonly surfacePrimaryHover: "#232339";
+    readonly surfaceSecondary: "#0F0F15";
+    readonly surfaceTertiary: "#1C1C27";
+    readonly surfaceQuaternary: "#2B2848";
+    readonly failureproof0: "#050505";
+    readonly defaultTransparent: "#DCDCE5";
+    readonly error: "#B42318";
+};
+/** Violet to near-white, left to right. Display type and rule accents only.
+ *  The mid stop is the once-used progress accent, NOT brand-300 — the rebuilt
+ *  ramp's brand-300 (#735CAB) is a different, muted violet. */
+export declare const gradientBrand: "linear-gradient(to right, #5F20FE 0%, #8252FC 60%, #B19AFE 75%, #E8E6F0 100%)";
+export type BrandStep = keyof typeof brand;
+export type GrayStep = keyof typeof gray;
+export type SemanticColor = keyof typeof color;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../.tmp/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;gEAEgE;AAChE,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAaR,CAAC;AAEX;uEACuE;AACvE,eAAO,MAAM,IAAI;;;;;;;;;;;;;;CAcP,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX;6EAC6E;AAC7E,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;CAKR,CAAC;AAEX,yCAAyC;AACzC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAqBR,CAAC;AAEX;;+DAE+D;AAC/D,eAAO,MAAM,aAAa,iFAC6F,CAAC;AAExH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,IAAI,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/dist/tokens/colors.js

@@ -0,0 +1,90 @@
+/**
+ * CODECAVE — color tokens as a typed module.
+ *
+ * A faithful mirror of `colors_and_type.css`, for consumers that cannot read a
+ * stylesheet: design tooling, canvas/WebGL renderers, PDF and email builders,
+ * native apps. The CSS file remains the source of truth — if the two ever
+ * disagree, the CSS wins.
+ *
+ * Originals: source_examples/styles/global.css (codecave.pro @theme,
+ *            2026 palette rebuild). Old and new ramps share step names with
+ *            different values — never map by step name across the rebuild;
+ *            map by hex or by role.
+ */
+/** The violet brand ramp: light to dark, 12 steps.
+ *  Do NOT consume these directly — use the semantic layer below.
+ *  Non-monotonic quirk: brand-500 is lighter than brand-400. */
+export const brand = {
+    25: '#E8E6F0', //  near-white tint — gradient endpoint
+    50: '#BBB9CB',
+    100: '#B8AFDB',
+    200: '#B19AFE', // hover foreground
+    300: '#735CAB',
+    400: '#5F3ABD', // feature-card ring mid-stop (was cyan)
+    500: '#5F20FE', // ACTION — links, borders, eyebrows
+    600: '#4705ED',
+    700: '#4004AF', // primary button hover; tertiary border hover
+    800: '#1B0D4E', // text ON the glow button; outline hover
+    900: '#1E113B', // primary button active; secondary fill
+    950: '#0A0A0B', // THE PAGE — a neutral black kept in the brand ramp
+};
+/** The gray ramp: light to dark, 13 steps.
+ *  Non-monotonic quirk: gray-1100 (card) is lighter than gray-1000. */
+export const gray = {
+    50: '#F4F4F6', //   headings, body text
+    100: '#DCDCE5',
+    200: '#D5D5DD', //  long-form body copy
+    300: '#C7C7DB', //  secondary body, lighter
+    400: '#A3A3C2',
+    500: '#9595BB', //  secondary body, placeholders
+    600: '#6B6699', //  neutral — muted metadata, LARGE TEXT ONLY (3.76:1)
+    700: '#2B2848', //  borders / quaternary surface
+    800: '#232339', //  surface hover
+    900: '#1C1C27', //  tertiary surface
+    950: '#15151E',
+    1000: '#050505', // one dark section ground ("failureproof")
+    1100: '#0F0F15', // card surface
+};
+/** Single-use accents (global.css calls them "once used"). RAW-OK. */
+export const accent = {
+    glow25: '#9980FF', //    GLOW BUTTON FILL (takes brand-800 text)
+    shadow0: '#281470', //   seeds the upward section glow
+    progress0: '#8252FC', // gradient mid — .rule / .progress
+};
+/** Technology-card wash — the only place cyan survives (0.1-alpha wash).
+ *  The old cyan #20EFFE is an imagery-only art literal since the rebuild. */
+export const technologyGradient = {
+    0: '#077689', //  deep cyan
+    25: '#1A0452',
+    50: '#070312',
+};
+export const error = {
+    100: '#FE9A9A', // error value + message text (9.71:1 on the page)
+    200: '#FE2020', // error halo
+    300: '#B42318', // --color-error: icons and rules, NOT body text (3.01:1)
+    400: '#CA1400', // the pulsing navigation dot
+};
+/** The semantic layer. Consume these. */
+export const color = {
+    heading: gray[50],
+    action: brand[500],
+    neutral: gray[600],
+    hovered: brand[200],
+    outlinePrimaryHover: brand[800],
+    bodyPrimary: gray[50],
+    textBodyPrimary: gray[200],
+    bodySecondary: gray[500],
+    bodySecondaryLighter: gray[300],
+    surfacePrimary: brand[950],
+    surfacePrimaryHover: gray[800],
+    surfaceSecondary: gray[1100],
+    surfaceTertiary: gray[900],
+    surfaceQuaternary: gray[700],
+    failureproof0: gray[1000],
+    defaultTransparent: gray[100],
+    error: error[300],
+};
+/** Violet to near-white, left to right. Display type and rule accents only.
+ *  The mid stop is the once-used progress accent, NOT brand-300 — the rebuilt
+ *  ramp's brand-300 (#735CAB) is a different, muted violet. */
+export const gradientBrand = `linear-gradient(to right, ${brand[500]} 0%, ${accent.progress0} 60%, ${brand[200]} 75%, ${brand[25]} 100%)`;

package/dist/tokens/layout.d.ts

@@ -0,0 +1,65 @@
+/**
+ * CODECAVE — layout, radius and elevation tokens as a typed module.
+ *
+ * Mirrors `colors_and_type.css`. Original:
+ * source_examples/brand-repo-tokens/layout.css and the production
+ * `.section-container` rule in source_examples/styles/global.css.
+ */
+export declare const maxWidthDesktop: "1280px";
+export declare const breakpointSm: "457px";
+/**
+ * Radii. CODECAVE runs unusually large corners — this is the loudest brand
+ * signal in the system, louder than the violet. Only one value here is small,
+ * and it exists for a geometric reason rather than a stylistic one: the small
+ * checkbox box is 16px, and the 8px control corner on a 16px box is exactly
+ * half its side, i.e. a circle, i.e. a radio button rendering for a pick-any
+ * control. Use `controlSm` for that box and nothing else.
+ *
+ * Every key is named for what it wraps rather than for a t-shirt size. `sm` and
+ * `md` used to be here, and `--radius-sm` / `--radius-md` are also Tailwind
+ * default theme names at *different* values (0.25rem, 0.375rem) — so markup
+ * authored against one system and rendered in the other changed shape with
+ * nothing to notice. The semantic names cannot collide.
+ */
+export declare const radius: {
+    readonly controlSm: "0.25rem";
+    readonly control: "0.5rem";
+    readonly tile: "0.75rem";
+    readonly card: "1.5rem";
+    readonly article: "2.25rem";
+    readonly custom: "2.75rem";
+    readonly section: "4rem";
+    readonly sectionMd: "7.5rem";
+    readonly pill: "9999px";
+};
+/** Page gutters, by breakpoint. */
+export declare const gutter: {
+    readonly base: "0.5rem";
+    readonly md: "1rem";
+    readonly xl: "2rem";
+};
+/**
+ * Section rhythm is deliberately asymmetric — a section carries far more air
+ * above it than below, so a heading always arrives with space in front of it.
+ */
+export declare const spacing: {
+    readonly sectionPaddingTop: "12.5rem";
+    readonly sectionPaddingBottom: "7.5rem";
+    readonly cardPadding: "2rem 2rem 3rem";
+    readonly controlHeight: "3rem";
+    readonly inputHeight: "4rem";
+};
+/**
+ * Elevation. Every Y offset is NEGATIVE: section panels throw violet light
+ * upward, as if the source sat beneath the panel edge. It is physically wrong
+ * and it is the single most recognizable thing in the system. Cards receive no
+ * shadow at all — they separate with radius and a 1px `brand.110` hairline.
+ */
+export declare const shadow: {
+    readonly section: string;
+    readonly glowButton: "0 0 64px 0 #7A58FFA8, 0 0 16px 0 #4F22FFA6, 0 0 4px 2px #5B34FA";
+    readonly inputFocus: string;
+    readonly inputError: string;
+};
+export type Radius = keyof typeof radius;
+//# sourceMappingURL=layout.d.ts.map

package/dist/tokens/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../.tmp/tokens/layout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,eAAO,MAAM,eAAe,EAAG,QAAiB,CAAC;AACjD,eAAO,MAAM,YAAY,EAAG,OAAgB,CAAC;AAE7C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAEX,mCAAmC;AACnC,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;CAuBT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC"}

package/dist/tokens/layout.js

@@ -0,0 +1,85 @@
+/**
+ * CODECAVE — layout, radius and elevation tokens as a typed module.
+ *
+ * Mirrors `colors_and_type.css`. Original:
+ * source_examples/brand-repo-tokens/layout.css and the production
+ * `.section-container` rule in source_examples/styles/global.css.
+ */
+// The `.js` extension is required, not a typo: these modules are published as
+// ESM, and Node's resolver needs the extension it will see at runtime.
+// TypeScript maps it back to ./colors.ts when compiling.
+import { accent, brand, error } from './colors.js';
+export const maxWidthDesktop = '1280px';
+export const breakpointSm = '457px';
+/**
+ * Radii. CODECAVE runs unusually large corners — this is the loudest brand
+ * signal in the system, louder than the violet. Only one value here is small,
+ * and it exists for a geometric reason rather than a stylistic one: the small
+ * checkbox box is 16px, and the 8px control corner on a 16px box is exactly
+ * half its side, i.e. a circle, i.e. a radio button rendering for a pick-any
+ * control. Use `controlSm` for that box and nothing else.
+ *
+ * Every key is named for what it wraps rather than for a t-shirt size. `sm` and
+ * `md` used to be here, and `--radius-sm` / `--radius-md` are also Tailwind
+ * default theme names at *different* values (0.25rem, 0.375rem) — so markup
+ * authored against one system and rendered in the other changed shape with
+ * nothing to notice. The semantic names cannot collide.
+ */
+export const radius = {
+    controlSm: '0.25rem', // 4px — the 16px checkbox box ONLY
+    control: '0.5rem', //   8px — inputs, small chips
+    tile: '0.75rem', //    12px — inline chips, icon tiles
+    card: '1.5rem', //     24px — the DEFAULT card, dominant sitewide
+    article: '2.25rem', // 36px — article / insight cards
+    custom: '2.75rem', //  44px — feature and testimonial cards
+    section: '4rem', //    64px — section panel below 768px
+    sectionMd: '7.5rem', // 120px — section panel at and above 768px
+    pill: '9999px', //          buttons, pills, avatars
+};
+/** Page gutters, by breakpoint. */
+export const gutter = {
+    base: '0.5rem', // <768px
+    md: '1rem', //    >=768px
+    xl: '2rem', //    >=1280px
+};
+/**
+ * Section rhythm is deliberately asymmetric — a section carries far more air
+ * above it than below, so a heading always arrives with space in front of it.
+ */
+export const spacing = {
+    sectionPaddingTop: '12.5rem', //   200px
+    sectionPaddingBottom: '7.5rem', // 120px
+    cardPadding: '2rem 2rem 3rem', //  bottom-heavy: seats a footer action
+    controlHeight: '3rem', //          48px — every button (a floor, not a fixed height)
+    inputHeight: '4rem', //            64px — every text field
+};
+/**
+ * Elevation. Every Y offset is NEGATIVE: section panels throw violet light
+ * upward, as if the source sat beneath the panel edge. It is physically wrong
+ * and it is the single most recognizable thing in the system. Cards receive no
+ * shadow at all — they separate with radius and a 1px `brand.110` hairline.
+ */
+export const shadow = {
+    // accent.shadow0 (#281470) is what --color-shadow-0 resolves to in
+    // colors_and_type.css. This previously read `brand[660]`, a step that has
+    // never existed in the ramp, so all three layers interpolated as
+    // `hsl(from undefined h s l / …)` — an invalid colour the browser drops.
+    section: [
+        `0 -64px 64px 0 hsl(from ${accent.shadow0} h s l / 0.20)`,
+        `0 -10px 24px 0 hsl(from ${accent.shadow0} h s l / 0.10)`,
+        `0 -6px 6px 0 hsl(from ${accent.shadow0} h s l / 0.08)`,
+    ].join(', '),
+    glowButton: '0 0 64px 0 #7A58FFA8, 0 0 16px 0 #4F22FFA6, 0 0 4px 2px #5B34FA',
+    inputFocus: [
+        `0 0 16px 0 hsl(from ${brand[500]} h s l / 0.5)`,
+        `0 0 4px 0 hsl(from ${brand[500]} h s l / 0.6)`,
+    ].join(', '),
+    // The invalid-field halo. `--shadow-input-error` has been in
+    // colors_and_type.css since the rebuild; this mirror simply never grew the
+    // matching key, so a consumer reading tokens from the module could style a
+    // focus ring and had nothing to reach for on the error state.
+    inputError: [
+        `0 0 16px 0 hsl(from ${error[200]} h s l / 0.5)`,
+        `0 0 4px 0 hsl(from ${error[100]} h s l / 0.6)`,
+    ].join(', '),
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,97 @@
+/**
+ * CODECAVE — typography tokens as a typed module.
+ *
+ * Mirrors `colors_and_type.css`. Original:
+ * source_examples/brand-repo-tokens/typography.css, whose named heading sizes
+ * come from the production `@theme` block; the remaining steps were measured
+ * from the rendered site.
+ *
+ * One family, no display face, no serif, no second sans.
+ */
+export declare const fontFamily: {
+    readonly sans: "Satoshi, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+};
+/**
+ * Nine steps. Size and line-height travel together — never pair them freely.
+ *
+ * The body steps are named for what they are, not for a t-shirt size, and that
+ * is load-bearing rather than stylistic. `lg`, `sm` and `base` are also Tailwind
+ * default theme names, at 1.125rem, 0.875rem and 1rem — so while this scale used
+ * them, importing the stylesheet into any Tailwind app silently resized every
+ * `text-lg` and `text-sm` in it. See CCWEB2-323, and the identical reasoning
+ * already recorded against `--radius-sm` / `--radius-md` in colors_and_type.css.
+ *
+ * `md` survives only because Tailwind happens to have no `--text-md`;
+ * `npm run check:collisions` is what will notice if that ever changes.
+ */
+export declare const fontSize: {
+    readonly headingLg: {
+        readonly size: "3.5rem";
+        readonly lineHeight: "130%";
+    };
+    readonly headingMd: {
+        readonly size: "2.75rem";
+        readonly lineHeight: "115%";
+    };
+    readonly headingSm: {
+        readonly size: "2rem";
+        readonly lineHeight: "110%";
+    };
+    readonly stat: {
+        readonly size: "2.25rem";
+        readonly lineHeight: "2.5rem";
+    };
+    readonly subhead: {
+        readonly size: "1.5rem";
+        readonly lineHeight: "2rem";
+    };
+    readonly md: {
+        readonly size: "1.25rem";
+        readonly lineHeight: "1.75rem";
+    };
+    readonly label: {
+        readonly size: "1.125rem";
+        readonly lineHeight: "1.75rem";
+    };
+    readonly body: {
+        readonly size: "1rem";
+        readonly lineHeight: "1.5rem";
+    };
+    readonly caption: {
+        readonly size: "0.875rem";
+        readonly lineHeight: "1.25rem";
+    };
+};
+/**
+ * Two weights carry the whole system. 300, 500 and 900 exist in `fonts/` and
+ * are bound, but no captured source uses them: 400 for everything, 700 for
+ * headings, eyebrows, labels and button text.
+ *
+ * Production ships only Satoshi-Regular and lets the browser synthesize 700.
+ * This package binds the real cuts — see DESIGN.md section 10.3.
+ */
+export declare const fontWeight: {
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+    readonly black: 900;
+};
+/**
+ * The eyebrow: the system's one typographic signature. A bold, uppercase-weight
+ * violet line paired with a larger light lead line, both `display: block` inside
+ * a single heading element — one heading, two voices. Never render the eyebrow
+ * as a separate sibling paragraph, and never let it appear without its lead.
+ */
+export declare const eyebrow: {
+    readonly size: "1rem";
+    readonly weight: 700;
+    readonly colorToken: "--color-action";
+    readonly leadSize: "2rem";
+    readonly leadWeight: 400;
+    readonly leadColorToken: "--color-heading";
+};
+export type FontSizeStep = keyof typeof fontSize;
+export type FontWeight = keyof typeof fontWeight;
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../.tmp/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUX,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/typography.js

@@ -0,0 +1,67 @@
+/**
+ * CODECAVE — typography tokens as a typed module.
+ *
+ * Mirrors `colors_and_type.css`. Original:
+ * source_examples/brand-repo-tokens/typography.css, whose named heading sizes
+ * come from the production `@theme` block; the remaining steps were measured
+ * from the rendered site.
+ *
+ * One family, no display face, no serif, no second sans.
+ */
+export const fontFamily = {
+    sans: 'Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+};
+/**
+ * Nine steps. Size and line-height travel together — never pair them freely.
+ *
+ * The body steps are named for what they are, not for a t-shirt size, and that
+ * is load-bearing rather than stylistic. `lg`, `sm` and `base` are also Tailwind
+ * default theme names, at 1.125rem, 0.875rem and 1rem — so while this scale used
+ * them, importing the stylesheet into any Tailwind app silently resized every
+ * `text-lg` and `text-sm` in it. See CCWEB2-323, and the identical reasoning
+ * already recorded against `--radius-sm` / `--radius-md` in colors_and_type.css.
+ *
+ * `md` survives only because Tailwind happens to have no `--text-md`;
+ * `npm run check:collisions` is what will notice if that ever changes.
+ */
+export const fontSize = {
+    headingLg: { size: '3.5rem', lineHeight: '130%' }, //  56px — hero
+    headingMd: { size: '2.75rem', lineHeight: '115%' }, // 44px — section heading
+    headingSm: { size: '2rem', lineHeight: '110%' }, //    32px — eyebrow + lead pair
+    stat: { size: '2.25rem', lineHeight: '2.5rem' }, //    36px — stat figures
+    subhead: { size: '1.5rem', lineHeight: '2rem' }, //    24px — subsection heading
+    md: { size: '1.25rem', lineHeight: '1.75rem' }, //     20px — intro copy
+    label: { size: '1.125rem', lineHeight: '1.75rem' }, // 18px — names, labels
+    body: { size: '1rem', lineHeight: '1.5rem' }, //       16px — body, buttons
+    caption: { size: '0.875rem', lineHeight: '1.25rem' }, // 14px — captions, labels
+};
+/**
+ * Two weights carry the whole system. 300, 500 and 900 exist in `fonts/` and
+ * are bound, but no captured source uses them: 400 for everything, 700 for
+ * headings, eyebrows, labels and button text.
+ *
+ * Production ships only Satoshi-Regular and lets the browser synthesize 700.
+ * This package binds the real cuts — see DESIGN.md section 10.3.
+ */
+export const fontWeight = {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    bold: 700,
+    black: 900,
+};
+/**
+ * The eyebrow: the system's one typographic signature. A bold, uppercase-weight
+ * violet line paired with a larger light lead line, both `display: block` inside
+ * a single heading element — one heading, two voices. Never render the eyebrow
+ * as a separate sibling paragraph, and never let it appear without its lead.
+ */
+export const eyebrow = {
+    size: fontSize.body.size,
+    weight: fontWeight.bold,
+    colorToken: '--color-action',
+    leadSize: fontSize.headingSm.size,
+    leadWeight: fontWeight.regular,
+    leadColorToken: '--color-heading',
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@codecavepro/brand",
+  "version": "1.0.0",
+  "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
+  "license": "Unlicense",
+  "type": "module",
+  "homepage": "https://brand.codecave.pro/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CodeCavePro/brand.git",
+    "directory": "packages/brand"
+  },
+  "keywords": [
+    "codecave",
+    "design-system",
+    "design-tokens",
+    "css-custom-properties"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": "./dist/colors_and_type.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "check": "node scripts/build.mjs --check",
+    "prepack": "node scripts/build.mjs"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}