@devosurf/tesser-brand 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,60 @@
+# @devosurf/tesser-brand
+
+The Tesser design system as code. One blue, used on purpose: ink on paper with a
+single cobalt accent, Inter anchored by Geist Mono, a 12 column grid on a 4px
+rhythm, square corners, two rule weights, no shadows.
+
+The TypeScript source under `src/` is the source of truth. The static files at the
+package root are generated from it.
+
+## Consumers
+
+Server-rendered pages (the connect handoff) inline the stylesheet:
+
+```ts
+import { inlineCss, markSvg } from "@devosurf/tesser-brand";
+
+const html = `<style>${inlineCss()}</style> ... ${markSvg({ size: 22 })}`;
+```
+
+Static sites (the landing page) import the files directly:
+
+```css
+@import "@devosurf/tesser-brand/tokens.css"; /* custom properties only */
+@import "@devosurf/tesser-brand/ui.css";     /* t- prefixed primitives built on them */
+```
+
+Programmatic consumers (CLI output, tests) read the raw values:
+
+```ts
+import { color, text, space } from "@devosurf/tesser-brand";
+
+color.cobalt;   // #1B45E0
+text.h1;        // { family: "sans", weight: 800, size: 58, line: 60, ... }
+```
+
+## Tokens
+
+| Group | Tokens |
+| --- | --- |
+| color | `cobalt`, `cobaltPress`, `cobaltWash`, `ink`, `paper`, `grey700/500/400/200`, `hairline`, `positive`, `warning`, `danger` |
+| font | `sans` (Inter), `mono` (Geist Mono) |
+| text | `display`, `h1`, `h2`, `h3`, `bodyLg`, `body`, `bodySm`, `label`, `mono` |
+| space | 4, 8, 12, 16, 24, 32, 48, 64, 80, 112 |
+| grid | 12 columns, 64px margin, 24px gutter, 1440px max |
+| rule | `strong` (1.5px ink), `hairline` (1px ink at 16%) |
+| radius | `none` (square by default) |
+
+Fonts are referenced by stack with system fallbacks; pages that should render the
+canonical faces self-host Inter and Geist Mono and declare the `@font-face` rules
+themselves. Product pages served by the instance stay dependency-free on purpose.
+
+## Editing
+
+Change `src/tokens.ts`, `src/ui.ts`, or `src/mark.ts`, then regenerate:
+
+```sh
+pnpm --filter @devosurf/tesser-brand emit
+```
+
+`pnpm test` fails if the generated files drift from the source.

package/mark.svg

@@ -0,0 +1 @@
+<svg width="48" height="48" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tesser"><rect x="12" y="12" width="76" height="76" stroke="#1B45E0" stroke-width="6"/><rect x="36" y="36" width="28" height="28" stroke="#111111" stroke-width="6"/><line x1="12" y1="12" x2="36" y2="36" stroke="#111111" stroke-width="5"/><line x1="88" y1="12" x2="64" y2="36" stroke="#111111" stroke-width="5"/><line x1="12" y1="88" x2="36" y2="64" stroke="#111111" stroke-width="5"/><line x1="88" y1="88" x2="64" y2="64" stroke="#111111" stroke-width="5"/></svg>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@devosurf/tesser-brand",
+  "version": "0.1.0-alpha.0",
+  "description": "Tesser design tokens, UI primitive styles, and the mark. One blue, used on purpose.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens.css": "./tokens.css",
+    "./ui.css": "./ui.css",
+    "./mark.svg": "./mark.svg"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "tokens.css",
+    "ui.css",
+    "mark.svg",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "emit": "tsx scripts/emit.ts",
+    "emit:check": "tsx scripts/emit.ts --check"
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+// @devosurf/tesser-brand — the Tesser design system as code.
+// Tokens (color, type, grid, spacing), the UI primitive layer, and the mark.
+// Static consumers import tokens.css / ui.css; TypeScript consumers import here.
+
+export { color, font, text, space, grid, rule, radius, tokens, tokensCss, type TypeStep } from "./tokens.js";
+export { uiCss } from "./ui.js";
+export { markSvg, type MarkOptions, type MarkVariant } from "./mark.js";
+
+import { tokensCss } from "./tokens.js";
+import { uiCss } from "./ui.js";
+
+/** The full stylesheet (tokens + primitives) for inlining into a server-rendered page. */
+export function inlineCss(): string {
+  return `${tokensCss()}\n${uiCss}`;
+}

package/src/mark.ts

@@ -0,0 +1,56 @@
+// The mark (Paper design system page 01): a tesseract — a square nested inside a
+// square, joined at the corners. Cobalt outer, ink inner. It sits upright, flat,
+// always square. Below 20px the connectors drop and only the two squares remain.
+
+import { color } from "./tokens.js";
+
+export type MarkVariant =
+  /** Cobalt outer, ink inner. The primary mark on paper. */
+  | "brand"
+  /** One color, ink. Print, stamps. */
+  | "mono"
+  /** On ink. Cobalt outer, white inner. */
+  | "reversed"
+  /** On cobalt. All white. */
+  | "on-accent";
+
+export interface MarkOptions {
+  /** Rendered size in px. Minimum 16. */
+  size?: number;
+  variant?: MarkVariant;
+  /** Accessible name. Omitted: the mark is decorative (aria-hidden). */
+  title?: string;
+}
+
+const PALETTE: Record<MarkVariant, { outer: string; inner: string }> = {
+  brand: { outer: color.cobalt, inner: color.ink },
+  mono: { outer: color.ink, inner: color.ink },
+  reversed: { outer: color.cobalt, inner: color.paper },
+  "on-accent": { outer: color.paper, inner: color.paper },
+};
+
+const escAttr = (s: string): string =>
+  s.replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]!);
+
+/** The mark as an inline SVG string. */
+export function markSvg(options: MarkOptions = {}): string {
+  const { size = 22, variant = "brand", title } = options;
+  const { outer, inner } = PALETTE[variant];
+  // Outer square frames the bounding box; inner square is two fifths, centered;
+  // four connectors join matching corners. Stroke ~ one fortieth of the width.
+  const connectors =
+    size >= 20
+      ? `<line x1="12" y1="12" x2="36" y2="36" stroke="${inner}" stroke-width="5"/>` +
+        `<line x1="88" y1="12" x2="64" y2="36" stroke="${inner}" stroke-width="5"/>` +
+        `<line x1="12" y1="88" x2="36" y2="64" stroke="${inner}" stroke-width="5"/>` +
+        `<line x1="88" y1="88" x2="64" y2="64" stroke="${inner}" stroke-width="5"/>`
+      : "";
+  const a11y = title ? `role="img" aria-label="${escAttr(title)}"` : `aria-hidden="true"`;
+  return (
+    `<svg width="${size}" height="${size}" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" ${a11y}>` +
+    `<rect x="12" y="12" width="76" height="76" stroke="${outer}" stroke-width="6"/>` +
+    `<rect x="36" y="36" width="28" height="28" stroke="${inner}" stroke-width="6"/>` +
+    connectors +
+    `</svg>`
+  );
+}

package/src/tokens.ts

@@ -0,0 +1,121 @@
+// Tesser design tokens — the single source of truth, transcribed from the Paper
+// design system (pages 01-04: The Mark, Color, Typography, Grid & Spacing).
+// tokens.css is generated from this file: `pnpm --filter @devosurf/tesser-brand emit`.
+
+/** Core, neutral, and functional colors. One blue, used on purpose. */
+export const color = {
+  /** The single brand accent. Links, indices, focus, primary action. */
+  cobalt: "#1B45E0",
+  /** Active / pressed cobalt. */
+  cobaltPress: "#1438B0",
+  /** Subtle fills, grid backgrounds. */
+  cobaltWash: "#EEF1FD",
+  /** Primary text, rules, and primary buttons. The structural color. */
+  ink: "#111111",
+  /** The page and every surface. White space is part of the system. */
+  paper: "#FFFFFF",
+  /** Body strong. */
+  grey700: "#444444",
+  /** Muted text. */
+  grey500: "#666666",
+  /** Captions. */
+  grey400: "#8A8A8A",
+  /** Borders. */
+  grey200: "#E6E6E6",
+  /** Dividers: ink at 16%. */
+  hairline: "rgba(17, 17, 17, 0.16)",
+  /** Run status: live, passing. Never a brand accent. */
+  positive: "#1F7A4D",
+  /** Run status: halted, pending. */
+  warning: "#B7791F",
+  /** Run status: failed, rolled back. */
+  danger: "#C0392B",
+} as const;
+
+/** Inter carries the system; Geist Mono carries code and machine values. */
+export const font = {
+  sans: `"Inter", system-ui, -apple-system, "Segoe UI", sans-serif`,
+  mono: `"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`,
+} as const;
+
+export interface TypeStep {
+  family: keyof typeof font;
+  weight: number;
+  /** px */
+  size: number;
+  /** px */
+  line: number;
+  /** em */
+  tracking: number;
+  uppercase?: boolean;
+}
+
+/** The type scale. Scale and weight do the work that color does not. */
+export const text = {
+  /** Hero statements. */
+  display: { family: "sans", weight: 800, size: 80, line: 80, tracking: -0.04 },
+  /** Page titles. */
+  h1: { family: "sans", weight: 800, size: 58, line: 60, tracking: -0.035 },
+  /** Section titles. */
+  h2: { family: "sans", weight: 700, size: 38, line: 44, tracking: -0.03 },
+  /** Card and subsection titles. */
+  h3: { family: "sans", weight: 700, size: 24, line: 30, tracking: -0.02 },
+  /** Lead paragraphs. */
+  bodyLg: { family: "sans", weight: 400, size: 19, line: 30, tracking: 0 },
+  /** Default body. */
+  body: { family: "sans", weight: 400, size: 17, line: 26, tracking: 0 },
+  /** Secondary and captions. */
+  bodySm: { family: "sans", weight: 400, size: 15, line: 23, tracking: 0 },
+  /** Eyebrows and tracked labels. */
+  label: { family: "sans", weight: 600, size: 12, line: 16, tracking: 0.14, uppercase: true },
+  /** Code and machine values. */
+  mono: { family: "mono", weight: 400, size: 14, line: 22, tracking: 0 },
+} as const satisfies Record<string, TypeStep>;
+
+/** Base unit 4px. Every gap and pad is a multiple. */
+export const space = [4, 8, 12, 16, 24, 32, 48, 64, 80, 112] as const;
+
+/** Every layout sits on a 12 column grid with a 64px margin. */
+export const grid = {
+  columns: 12,
+  /** px, page edge to content */
+  margin: 64,
+  /** px, space between columns */
+  gutter: 24,
+  /** px, canvas width */
+  max: 1440,
+} as const;
+
+/** Two rules. 1.5px ink separates bands; 1px ink at 16% separates rows. Nothing heavier. */
+export const rule = {
+  strong: `1.5px solid ${color.ink}`,
+  hairline: `1px solid ${color.hairline}`,
+} as const;
+
+/** Square by default. The system is built from rules and the grid, not rounded shapes. */
+export const radius = { none: "0px" } as const;
+
+export const tokens = { color, font, text, space, grid, rule, radius } as const;
+
+const kebab = (s: string): string => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([a-z]{2,})([0-9]+)$/, "$1-$2").toLowerCase();
+
+/** The :root custom-property block. tokens.css is exactly this string. */
+export function tokensCss(): string {
+  const lines: string[] = [];
+  for (const [name, value] of Object.entries(color)) lines.push(`  --color-${kebab(name)}: ${value};`);
+  for (const [name, value] of Object.entries(font)) lines.push(`  --font-${name}: ${value};`);
+  for (const [name, step] of Object.entries(text) as Array<[string, TypeStep]>) {
+    const n = kebab(name);
+    lines.push(
+      `  --text-${n}: ${step.weight} ${step.size}px/${step.line}px var(--font-${step.family});`,
+      `  --text-${n}-tracking: ${step.tracking}em;`,
+    );
+  }
+  for (const step of space) lines.push(`  --space-${step}: ${step}px;`);
+  for (const [name, value] of Object.entries(grid)) {
+    lines.push(`  --grid-${name}: ${typeof value === "number" && name !== "columns" ? `${value}px` : value};`);
+  }
+  for (const [name, value] of Object.entries(rule)) lines.push(`  --rule-${name}: ${value};`);
+  lines.push(`  --radius-none: ${radius.none};`);
+  return `:root {\n${lines.join("\n")}\n}\n`;
+}

package/src/ui.ts

@@ -0,0 +1,231 @@
+// The UI primitive layer — a small set of classes assembled from the tokens
+// (Paper design system page 05: Components). Square corners, ink rules, one blue.
+// ui.css is generated from this file: `pnpm --filter @devosurf/tesser-brand emit`.
+//
+// Class prefix `t-`. Every value is a token reference; the two literals allowed
+// are pure black (the documented hover state) and the 4px progress bar.
+
+export const uiCss = `/* base ------------------------------------------------------------------ */
+.t-page {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font: var(--text-body-sm);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.t-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-64) var(--space-24) var(--space-80);
+}
+.t-col {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+}
+:is(.t-page) :focus-visible {
+  outline: 2px solid var(--color-cobalt);
+  outline-offset: 2px;
+}
+
+/* type ------------------------------------------------------------------ */
+.t-display { font: var(--text-display); letter-spacing: var(--text-display-tracking); margin: 0; }
+.t-h1 { font: var(--text-h1); letter-spacing: var(--text-h1-tracking); margin: 0; }
+.t-h2 { font: var(--text-h2); letter-spacing: var(--text-h2-tracking); margin: 0; }
+.t-h3 { font: var(--text-h3); letter-spacing: var(--text-h3-tracking); margin: 0; }
+.t-body-lg { font: var(--text-body-lg); margin: 0; }
+.t-body { font: var(--text-body); margin: 0; }
+.t-body-sm { font: var(--text-body-sm); margin: 0; }
+.t-label {
+  font: var(--text-label);
+  letter-spacing: var(--text-label-tracking);
+  text-transform: uppercase;
+  margin: 0;
+}
+.t-mono { font: var(--text-mono); margin: 0; }
+/* Product page title: h2 scale carrying h1 weight, as set on the connect comp. */
+.t-page-title { font: 800 38px/44px var(--font-sans); letter-spacing: -0.03em; margin: 0; }
+.t-lead { font: var(--text-body); color: var(--color-grey-500); margin: var(--space-16) 0 0; }
+
+/* top bar ----------------------------------------------------------------- */
+.t-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-16);
+  padding: var(--space-16) var(--space-32);
+  border-bottom: 1px solid var(--color-grey-200);
+  background: var(--color-paper);
+}
+.t-bar--strong { border-bottom: var(--rule-strong); }
+.t-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: inherit;
+  text-decoration: none;
+}
+.t-brand svg { flex-shrink: 0; display: block; }
+.t-wordmark { font: 700 18px/22px var(--font-sans); letter-spacing: -0.02em; }
+.t-bar-meta { display: flex; align-items: center; gap: var(--space-12); }
+.t-host { font: 400 13px/16px var(--font-mono); color: var(--color-grey-400); }
+
+/* chips, dots, status ------------------------------------------------------ */
+.t-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-4) var(--space-12);
+  border: 1px solid var(--color-grey-200);
+  font: 400 12.5px/16px var(--font-mono);
+  color: var(--color-grey-700);
+  white-space: nowrap;
+}
+.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--color-grey-400); }
+.t-dot--positive { background: var(--color-positive); }
+.t-dot--warning { background: var(--color-warning); }
+.t-dot--danger { background: var(--color-danger); }
+.t-status { display: inline-flex; align-items: center; gap: var(--space-8); font: 400 13.5px/18px var(--font-sans); white-space: nowrap; }
+.t-status--pending { color: var(--color-warning); }
+.t-status--ready { color: var(--color-grey-500); }
+.t-status--danger { color: var(--color-danger); }
+
+/* progress ----------------------------------------------------------------- */
+.t-progress { display: flex; flex-direction: column; gap: var(--space-8); }
+.t-progress-meta { display: flex; align-items: center; justify-content: space-between; font: 400 13px/16px var(--font-mono); color: var(--color-ink); }
+.t-progress-meta .is-remaining { color: var(--color-grey-400); }
+.t-progress-track { height: 4px; background: var(--color-grey-200); }
+.t-progress-fill { height: 4px; background: var(--color-cobalt); }
+
+/* cards ---------------------------------------------------------------- */
+.t-stack { display: flex; flex-direction: column; gap: var(--space-16); }
+.t-card { border: 1px solid var(--color-grey-200); background: var(--color-paper); }
+.t-card-head { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); }
+.t-card-band {
+  display: flex;
+  align-items: center;
+  gap: var(--space-16);
+  padding: var(--space-12) var(--space-24);
+  border-top: 1px solid var(--color-grey-200);
+}
+.t-card-band--stacked { flex-direction: column; align-items: stretch; }
+.t-tile {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid var(--color-grey-200);
+  font: 600 15px/18px var(--font-mono);
+  color: var(--color-ink);
+}
+.t-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.t-card-title-row { display: flex; align-items: center; gap: var(--space-8); }
+.t-card-title { font: 600 16px/20px var(--font-sans); }
+.t-card-title--mono { font: 600 15px/18px var(--font-mono); }
+.t-kind { font: 400 13px/16px var(--font-sans); color: var(--color-grey-400); }
+.t-meta { font: 400 13px/16px var(--font-sans); color: var(--color-grey-400); overflow-wrap: anywhere; }
+.t-scopes { font: 400 12.5px/16px var(--font-mono); color: var(--color-grey-400); overflow-wrap: anywhere; }
+
+/* buttons -------------------------------------------------------------- */
+.t-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  border: 0;
+  border-radius: var(--radius-none);
+  padding: var(--space-12) 20px;
+  font: 600 14.5px/18px var(--font-sans);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.t-btn svg { flex-shrink: 0; display: block; }
+.t-btn--primary { background: var(--color-ink); color: var(--color-paper); }
+.t-btn--primary:hover { background: #000000; }
+.t-btn--accent { background: var(--color-cobalt); color: var(--color-paper); }
+.t-btn--accent:hover, .t-btn--accent:active { background: var(--color-cobalt-press); }
+.t-btn--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); padding: 11px 19px; }
+.t-btn--secondary:hover { background: var(--color-cobalt-wash); }
+.t-btn:disabled { background: var(--color-grey-200); color: var(--color-grey-400); cursor: not-allowed; }
+.t-link { color: var(--color-cobalt); text-decoration: underline; text-underline-offset: 3px; }
+.t-link:hover { color: var(--color-cobalt-press); }
+
+/* forms ----------------------------------------------------------------- */
+.t-field { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-width: 0; }
+.t-field-label {
+  font: var(--text-label);
+  letter-spacing: var(--text-label-tracking);
+  text-transform: uppercase;
+  color: var(--color-grey-500);
+}
+.t-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--color-grey-200);
+  border-radius: var(--radius-none);
+  background: var(--color-paper);
+  padding: var(--space-12) var(--space-16);
+  font: 400 14px/18px var(--font-mono);
+  color: var(--color-ink);
+}
+.t-input::placeholder { color: var(--color-grey-400); }
+.t-input:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: -1px; }
+.t-form-row { display: flex; align-items: center; gap: var(--space-12); flex: 1 1 auto; }
+.t-form-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); flex: 1 1 auto; min-width: 0; }
+.t-form-col .t-btn { align-self: flex-end; }
+
+/* notices, code, footnote ---------------------------------------------- */
+.t-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-12) var(--space-16);
+  border: 1px solid var(--color-grey-200);
+  font: 400 13.5px/18px var(--font-sans);
+  color: var(--color-grey-700);
+}
+.t-pre {
+  margin: 0;
+  padding: var(--space-16);
+  background: var(--color-cobalt-wash);
+  font: 400 13px/20px var(--font-mono);
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.t-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-cobalt-wash); padding: 1px 5px; }
+.t-footnote {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding-top: var(--space-24);
+  font: 400 13.5px/18px var(--font-sans);
+  color: var(--color-grey-400);
+}
+.t-footnote svg { flex-shrink: 0; display: block; }
+
+/* utilities -------------------------------------------------------------- */
+.t-right { margin-left: auto; }
+.t-grow { flex: 1 1 auto; min-width: 0; }
+.t-gap-top-16 { margin-top: var(--space-16); }
+.t-gap-top-24 { margin-top: var(--space-24); }
+.t-gap-top-32 { margin-top: var(--space-32); }
+.t-gap-top-48 { margin-top: var(--space-48); }
+
+/* small screens ----------------------------------------------------------- */
+@media (max-width: 640px) {
+  .t-bar { padding: var(--space-12) var(--space-16); }
+  .t-host { display: none; }
+  .t-main { padding: var(--space-32) var(--space-16) var(--space-48); }
+  .t-page-title { font-size: 28px; line-height: 34px; }
+  .t-card-head { flex-wrap: wrap; }
+  .t-card-band { flex-wrap: wrap; }
+  .t-form-row { flex-wrap: wrap; }
+}
+`;

package/tokens.css

@@ -0,0 +1,53 @@
+/* GENERATED — edit packages/brand/src and run `pnpm --filter @devosurf/tesser-brand emit`. */
+:root {
+  --color-cobalt: #1B45E0;
+  --color-cobalt-press: #1438B0;
+  --color-cobalt-wash: #EEF1FD;
+  --color-ink: #111111;
+  --color-paper: #FFFFFF;
+  --color-grey-700: #444444;
+  --color-grey-500: #666666;
+  --color-grey-400: #8A8A8A;
+  --color-grey-200: #E6E6E6;
+  --color-hairline: rgba(17, 17, 17, 0.16);
+  --color-positive: #1F7A4D;
+  --color-warning: #B7791F;
+  --color-danger: #C0392B;
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --text-display: 800 80px/80px var(--font-sans);
+  --text-display-tracking: -0.04em;
+  --text-h1: 800 58px/60px var(--font-sans);
+  --text-h1-tracking: -0.035em;
+  --text-h2: 700 38px/44px var(--font-sans);
+  --text-h2-tracking: -0.03em;
+  --text-h3: 700 24px/30px var(--font-sans);
+  --text-h3-tracking: -0.02em;
+  --text-body-lg: 400 19px/30px var(--font-sans);
+  --text-body-lg-tracking: 0em;
+  --text-body: 400 17px/26px var(--font-sans);
+  --text-body-tracking: 0em;
+  --text-body-sm: 400 15px/23px var(--font-sans);
+  --text-body-sm-tracking: 0em;
+  --text-label: 600 12px/16px var(--font-sans);
+  --text-label-tracking: 0.14em;
+  --text-mono: 400 14px/22px var(--font-mono);
+  --text-mono-tracking: 0em;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-112: 112px;
+  --grid-columns: 12;
+  --grid-margin: 64px;
+  --grid-gutter: 24px;
+  --grid-max: 1440px;
+  --rule-strong: 1.5px solid #111111;
+  --rule-hairline: 1px solid rgba(17, 17, 17, 0.16);
+  --radius-none: 0px;
+}

package/ui.css

@@ -0,0 +1,224 @@
+/* GENERATED — edit packages/brand/src and run `pnpm --filter @devosurf/tesser-brand emit`. */
+/* base ------------------------------------------------------------------ */
+.t-page {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font: var(--text-body-sm);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.t-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-64) var(--space-24) var(--space-80);
+}
+.t-col {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+}
+:is(.t-page) :focus-visible {
+  outline: 2px solid var(--color-cobalt);
+  outline-offset: 2px;
+}
+
+/* type ------------------------------------------------------------------ */
+.t-display { font: var(--text-display); letter-spacing: var(--text-display-tracking); margin: 0; }
+.t-h1 { font: var(--text-h1); letter-spacing: var(--text-h1-tracking); margin: 0; }
+.t-h2 { font: var(--text-h2); letter-spacing: var(--text-h2-tracking); margin: 0; }
+.t-h3 { font: var(--text-h3); letter-spacing: var(--text-h3-tracking); margin: 0; }
+.t-body-lg { font: var(--text-body-lg); margin: 0; }
+.t-body { font: var(--text-body); margin: 0; }
+.t-body-sm { font: var(--text-body-sm); margin: 0; }
+.t-label {
+  font: var(--text-label);
+  letter-spacing: var(--text-label-tracking);
+  text-transform: uppercase;
+  margin: 0;
+}
+.t-mono { font: var(--text-mono); margin: 0; }
+/* Product page title: h2 scale carrying h1 weight, as set on the connect comp. */
+.t-page-title { font: 800 38px/44px var(--font-sans); letter-spacing: -0.03em; margin: 0; }
+.t-lead { font: var(--text-body); color: var(--color-grey-500); margin: var(--space-16) 0 0; }
+
+/* top bar ----------------------------------------------------------------- */
+.t-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-16);
+  padding: var(--space-16) var(--space-32);
+  border-bottom: 1px solid var(--color-grey-200);
+  background: var(--color-paper);
+}
+.t-bar--strong { border-bottom: var(--rule-strong); }
+.t-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: inherit;
+  text-decoration: none;
+}
+.t-brand svg { flex-shrink: 0; display: block; }
+.t-wordmark { font: 700 18px/22px var(--font-sans); letter-spacing: -0.02em; }
+.t-bar-meta { display: flex; align-items: center; gap: var(--space-12); }
+.t-host { font: 400 13px/16px var(--font-mono); color: var(--color-grey-400); }
+
+/* chips, dots, status ------------------------------------------------------ */
+.t-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-4) var(--space-12);
+  border: 1px solid var(--color-grey-200);
+  font: 400 12.5px/16px var(--font-mono);
+  color: var(--color-grey-700);
+  white-space: nowrap;
+}
+.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--color-grey-400); }
+.t-dot--positive { background: var(--color-positive); }
+.t-dot--warning { background: var(--color-warning); }
+.t-dot--danger { background: var(--color-danger); }
+.t-status { display: inline-flex; align-items: center; gap: var(--space-8); font: 400 13.5px/18px var(--font-sans); white-space: nowrap; }
+.t-status--pending { color: var(--color-warning); }
+.t-status--ready { color: var(--color-grey-500); }
+.t-status--danger { color: var(--color-danger); }
+
+/* progress ----------------------------------------------------------------- */
+.t-progress { display: flex; flex-direction: column; gap: var(--space-8); }
+.t-progress-meta { display: flex; align-items: center; justify-content: space-between; font: 400 13px/16px var(--font-mono); color: var(--color-ink); }
+.t-progress-meta .is-remaining { color: var(--color-grey-400); }
+.t-progress-track { height: 4px; background: var(--color-grey-200); }
+.t-progress-fill { height: 4px; background: var(--color-cobalt); }
+
+/* cards ---------------------------------------------------------------- */
+.t-stack { display: flex; flex-direction: column; gap: var(--space-16); }
+.t-card { border: 1px solid var(--color-grey-200); background: var(--color-paper); }
+.t-card-head { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); }
+.t-card-band {
+  display: flex;
+  align-items: center;
+  gap: var(--space-16);
+  padding: var(--space-12) var(--space-24);
+  border-top: 1px solid var(--color-grey-200);
+}
+.t-card-band--stacked { flex-direction: column; align-items: stretch; }
+.t-tile {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid var(--color-grey-200);
+  font: 600 15px/18px var(--font-mono);
+  color: var(--color-ink);
+}
+.t-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.t-card-title-row { display: flex; align-items: center; gap: var(--space-8); }
+.t-card-title { font: 600 16px/20px var(--font-sans); }
+.t-card-title--mono { font: 600 15px/18px var(--font-mono); }
+.t-kind { font: 400 13px/16px var(--font-sans); color: var(--color-grey-400); }
+.t-meta { font: 400 13px/16px var(--font-sans); color: var(--color-grey-400); overflow-wrap: anywhere; }
+.t-scopes { font: 400 12.5px/16px var(--font-mono); color: var(--color-grey-400); overflow-wrap: anywhere; }
+
+/* buttons -------------------------------------------------------------- */
+.t-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  border: 0;
+  border-radius: var(--radius-none);
+  padding: var(--space-12) 20px;
+  font: 600 14.5px/18px var(--font-sans);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.t-btn svg { flex-shrink: 0; display: block; }
+.t-btn--primary { background: var(--color-ink); color: var(--color-paper); }
+.t-btn--primary:hover { background: #000000; }
+.t-btn--accent { background: var(--color-cobalt); color: var(--color-paper); }
+.t-btn--accent:hover, .t-btn--accent:active { background: var(--color-cobalt-press); }
+.t-btn--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); padding: 11px 19px; }
+.t-btn--secondary:hover { background: var(--color-cobalt-wash); }
+.t-btn:disabled { background: var(--color-grey-200); color: var(--color-grey-400); cursor: not-allowed; }
+.t-link { color: var(--color-cobalt); text-decoration: underline; text-underline-offset: 3px; }
+.t-link:hover { color: var(--color-cobalt-press); }
+
+/* forms ----------------------------------------------------------------- */
+.t-field { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-width: 0; }
+.t-field-label {
+  font: var(--text-label);
+  letter-spacing: var(--text-label-tracking);
+  text-transform: uppercase;
+  color: var(--color-grey-500);
+}
+.t-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--color-grey-200);
+  border-radius: var(--radius-none);
+  background: var(--color-paper);
+  padding: var(--space-12) var(--space-16);
+  font: 400 14px/18px var(--font-mono);
+  color: var(--color-ink);
+}
+.t-input::placeholder { color: var(--color-grey-400); }
+.t-input:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: -1px; }
+.t-form-row { display: flex; align-items: center; gap: var(--space-12); flex: 1 1 auto; }
+.t-form-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); flex: 1 1 auto; min-width: 0; }
+.t-form-col .t-btn { align-self: flex-end; }
+
+/* notices, code, footnote ---------------------------------------------- */
+.t-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-12) var(--space-16);
+  border: 1px solid var(--color-grey-200);
+  font: 400 13.5px/18px var(--font-sans);
+  color: var(--color-grey-700);
+}
+.t-pre {
+  margin: 0;
+  padding: var(--space-16);
+  background: var(--color-cobalt-wash);
+  font: 400 13px/20px var(--font-mono);
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.t-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-cobalt-wash); padding: 1px 5px; }
+.t-footnote {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding-top: var(--space-24);
+  font: 400 13.5px/18px var(--font-sans);
+  color: var(--color-grey-400);
+}
+.t-footnote svg { flex-shrink: 0; display: block; }
+
+/* utilities -------------------------------------------------------------- */
+.t-right { margin-left: auto; }
+.t-grow { flex: 1 1 auto; min-width: 0; }
+.t-gap-top-16 { margin-top: var(--space-16); }
+.t-gap-top-24 { margin-top: var(--space-24); }
+.t-gap-top-32 { margin-top: var(--space-32); }
+.t-gap-top-48 { margin-top: var(--space-48); }
+
+/* small screens ----------------------------------------------------------- */
+@media (max-width: 640px) {
+  .t-bar { padding: var(--space-12) var(--space-16); }
+  .t-host { display: none; }
+  .t-main { padding: var(--space-32) var(--space-16) var(--space-48); }
+  .t-page-title { font-size: 28px; line-height: 34px; }
+  .t-card-head { flex-wrap: wrap; }
+  .t-card-band { flex-wrap: wrap; }
+  .t-form-row { flex-wrap: wrap; }
+}