@tfrc/marketing 1.0.0

package/README.md

@@ -0,0 +1,27 @@
+# @tfrc/marketing
+
+The marketing dialect of the company's visual language. Marketing pages,
+case studies, careers. Persuades a stranger once; desktop-first; motion is
+generous because motion sells here.
+
+**This package is not the website.** It is one of two dialects — the other
+is `@tfrc/product` — and thefullremotecompany.com is a separate repository
+that *installs* this one (`decisions/0007.md`). Building that site? Read
+`CONSUMING.md` at the repo root, not this file. Renamed from `@tfrc/web`
+for exactly this reason; see `decisions/0008.md`.
+
+~14 components. None of them have a product equivalent — a hero, a CTA
+band, and a stat strip mean nothing inside a finance app, which is exactly
+why they live here and not in `@tfrc/foundation`.
+
+Never imports from `@tfrc/product`. If you need something from there, it
+belongs in `@tfrc/foundation` instead — see `decisions/0001.md`.
+
+## Files
+
+- `src/tokens.css` — the semantic layer. Same token names as `@tfrc/product`,
+  different values (`CONTRACT.md` in the foundation package documents which
+  names are required).
+- `src/components.css` — button, card, stats, CTA band.
+- `src/index.css` — entry point; import order is foundation → tokens →
+  components.

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@tfrc/marketing",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "The marketing dialect of the visual language — corporate site, campaigns, careers. Expressive, desktop-first, ~14 components. Never imports from @tfrc/product.",
+  "keywords": ["design-system", "design-tokens", "css", "tailwind", "marketing"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/the-full-remote-company/design-system.git",
+    "directory": "packages/marketing"
+  },
+  "homepage": "https://github.com/the-full-remote-company/design-system/tree/main/packages/marketing#readme",
+  "bugs": "https://github.com/the-full-remote-company/design-system/issues",
+  "main": "src/index.css",
+  "exports": {
+    ".": "./src/index.css"
+  },
+  "files": ["src", "README.md"],
+  "dependencies": {
+    "@tfrc/foundation": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/components.css

@@ -0,0 +1,101 @@
+/* ==========================================================================
+   @tfrc/marketing — components
+   Reference only tokens defined in tokens.css. Zero raw color literals.
+   See AGENTS.md rule 2.
+   ========================================================================== */
+
+h1, h2, h3 {
+  font-family: var(--font-display);
+  font-weight: 800;
+  margin: 0;
+  letter-spacing: -0.032em;
+  line-height: 1.02;
+}
+
+.wrap {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 0 var(--gutter);
+}
+
+/* ---- Button — same API/class names as @tfrc/product, different values ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: var(--control-h);
+  padding: 0 1.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background var(--duration-fast) var(--ease-quint),
+              color var(--duration-fast) var(--ease-quint),
+              border-color var(--duration-fast) var(--ease-quint),
+              transform var(--duration-fast) var(--ease-quint);
+}
+.btn:hover { transform: translateY(-1px); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-fg); }
+.btn--primary:hover { background: var(--color-accent-hover); }
+.btn--secondary {
+  background: var(--color-surface-raised);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+.btn--secondary:hover { background: var(--color-surface-sunken); }
+.btn--onDark {
+  background: transparent;
+  border-color: var(--ramp-neutral-700);
+  color: var(--color-text-inverse);
+}
+.btn--onDark:hover { border-color: var(--gold); color: var(--gold); }
+
+/* ---- Card — web only, no app equivalent ---- */
+.card {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 1.75rem;
+  transition: transform var(--duration-base) var(--ease-quint),
+              box-shadow var(--duration-base) var(--ease-quint),
+              border-color var(--duration-base) var(--ease-quint);
+}
+.card--interactive:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-border-strong);
+}
+
+/* ---- Stat strip — layout primitive, no app equivalent ---- */
+.stats {
+  display: grid;
+  gap: 1px;
+  background: var(--color-border-subtle);
+  border-top: 1px solid var(--color-border-subtle);
+  border-bottom: 1px solid var(--color-border-subtle);
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
+.stat { background: var(--color-surface); padding: 2rem var(--gutter); }
+.stat__n {
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  font-weight: 800;
+  letter-spacing: -0.035em;
+  line-height: 1;
+}
+.stat__l { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 0.5rem; }
+
+/* ---- CTA band — full-bleed accent, no app equivalent.
+   Inside a product this density of persuasion would be an interruption;
+   on a marketing page it is the entire point. ---- */
+.cta {
+  background: var(--color-accent);
+  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: clamp(2.5rem, 6vw, 4.5rem);
+}

package/src/index.css

@@ -0,0 +1,10 @@
+/* ==========================================================================
+   @tfrc/marketing — entry point
+   Import order matters: foundation (ramps + reset) -> tokens (semantic
+   layer) -> components. Never import anything from @tfrc/product — see
+   AGENTS.md rule 3 and scripts/lint-boundaries.js.
+   ========================================================================== */
+
+@import "@tfrc/foundation";
+@import "./tokens.css";
+@import "./components.css";

package/src/tokens.css

@@ -0,0 +1,76 @@
+/* ==========================================================================
+   @tfrc/marketing — semantic tokens
+   Same token NAMES as @tfrc/product (see CONTRACT.md). Values diverge on
+   purpose — this file is self-contained per decisions/0004.md and does
+   not import anything from @tfrc/product.
+   ========================================================================== */
+
+:root {
+  --color-surface:         oklch(0.988 0.003 270);
+  --color-surface-raised:  oklch(1 0 0);
+  --color-surface-sunken:  oklch(0.962 0.006 270);
+  --color-surface-inverse: var(--ramp-neutral-950);
+
+  --color-border-subtle: oklch(0.912 0.010 270);
+  --color-border-strong: oklch(0.808 0.016 270);
+
+  --color-text-primary:   var(--ramp-neutral-900);
+  --color-text-secondary: var(--ramp-neutral-600);
+  --color-text-muted:     var(--ramp-neutral-400);
+  --color-text-inverse:   oklch(0.980 0.004 270);
+
+  --color-accent:       var(--ramp-brand-600);
+  --color-accent-hover: var(--ramp-brand-700);
+  --color-accent-fg:    #fff;
+  --color-accent-bg:    var(--ramp-brand-100);
+  --color-accent-bg-fg: var(--ramp-brand-800);
+
+  --color-focus: oklch(0.560 0.150 235);
+
+  --color-info-bg:   oklch(0.940 0.032 235);
+  --color-info-fg:   oklch(0.360 0.070 237);
+  --color-info-line: oklch(0.560 0.150 235);
+
+  --color-danger-solid: oklch(0.615 0.205 25);
+  --color-danger-bg:    oklch(0.940 0.035 25);
+  --color-danger-fg:    oklch(0.475 0.170 25);
+  --color-danger-line:  oklch(0.615 0.205 25);
+
+  --color-success-bg:   oklch(0.940 0.040 150);
+  --color-success-fg:   oklch(0.455 0.090 150);
+  --color-success-line: oklch(0.590 0.110 150);
+
+  /* NOTE: --color-gain / --color-loss are intentionally NOT defined here.
+     @tfrc/marketing must never reference them. See decisions/0002.md and
+     scripts/lint-boundaries.js, which checks this mechanically. */
+
+  --gold: var(--ramp-support-500);
+
+  /* ---- corporate-only scale: this is most of the divergence ---- */
+  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
+  --font-sans:    "Instrument Sans", system-ui, sans-serif;
+  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
+
+  --step-hero: clamp(2.75rem, 7.5vw, 6rem);   /* app tops out at 1.75rem */
+  --step-xl:   clamp(2rem, 4vw, 3.25rem);
+  --step-lg:   1.5rem;
+  --step-body: 1.0625rem;                      /* app body is 0.9375rem */
+  --step-sm:   0.875rem;
+  --step-xs:   0.6875rem;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;                          /* app caps at 0.75rem */
+
+  --control-h: 3rem;
+  --gutter:    clamp(1.25rem, 5vw, 4rem);
+  --section-y: clamp(4rem, 10vw, 8rem);
+
+  --duration-fast: 160ms;
+  --duration-base: 320ms;
+  --duration-slow: 640ms;                       /* app never exceeds 200ms */
+
+  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07);
+  --shadow-lg: 0 24px 60px oklch(0 0 0 / 0.13), 0 4px 12px oklch(0 0 0 / 0.06);
+}