@inherent.design/brand 0.3.1 → 0.4.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@inherent.design/brand",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "type": "module",
   "description": "Design tokens, web fonts, and Starwind components for inherent.design projects.",
-  "license": "OFL-1.1",
+  "license": "Apache-2.0",
   "author": "inherent.design",
   "exports": {
     "./fonts/vars": {
@@ -33,14 +33,18 @@
     "./components/button": "./components/button/index.ts",
     "./components/image": "./components/image/index.ts",
     "./components/prose": "./components/prose/index.ts",
-    "./components/separator": "./components/separator/index.ts"
+    "./components/separator": "./components/separator/index.ts",
+    "./typst": "./typst/inherent.typ",
+    "./typst/prelude": "./typst/prelude.typ"
   },
   "files": [
     "fonts/vars.css",
     "fonts/dist/",
+    "fonts/src/typst/",
+    "fonts/licenses/LICENSE*",
     "styles/",
     "components/",
-    "license/LICENSE*"
+    "typst/"
   ],
   "scripts": {
     "fonts:download": "node fonts/scripts/download.js",

package/typst/inherent.typ

@@ -0,0 +1,22 @@
+// brand/typst/inherent.typ: Base template for inherent.design documents
+//
+// Pure Typst entry point. Templates use: #show: base-template.with(title: ..., date: ...)
+
+#import "lib/colors.typ": *
+#import "lib/tokens.typ": *
+#import "lib/typography.typ": apply-typography
+#import "lib/layout.typ": apply-layout
+#import "lib/tables.typ": apply-tables
+#import "lib/code.typ": apply-code
+
+#let base-template(
+  title: "",
+  date: none,
+  body,
+) = {
+  show: apply-typography
+  show: apply-layout.with(title: title, date: date)
+  show: apply-tables
+  show: apply-code
+  body
+}

package/typst/lib/code.typ

@@ -0,0 +1,24 @@
+// Code/raw block styling
+
+#import "colors.typ": accent, text-gray, bg-subtle
+#import "typography.typ": font-code
+#import "tokens.typ": border-thin, radius-md
+
+#let apply-code(doc) = {
+  show raw: set text(font: font-code, size: 0.9em)
+
+  show raw.where(block: true): it => {
+    block(
+      width: 100%,
+      fill: bg-subtle,
+      stroke: border-thin + text-gray,
+      inset: 10pt,
+      radius: radius-md,
+      it,
+    )
+  }
+
+  show raw.where(block: false): set text(fill: accent)
+
+  doc
+}

package/typst/lib/colors.typ

@@ -0,0 +1,22 @@
+// Brand color tokens for inherent.design
+// All document modules import from this file.
+
+#let text-dark = rgb("#1a1a1a")    // CSS: oklch(21.78% 0 0)
+#let text-gray = rgb("#6b7280")    // CSS: oklch(55.10% 0.0234 264.4)
+#let accent = rgb("#2563eb")       // CSS: oklch(54.61% 0.2152 262.9)
+
+#let accent-light = accent.lighten(80%)
+#let accent-dark = accent.darken(20%)
+
+// Semantic tokens
+#let success = rgb("#2E7D32")
+#let warning = rgb("#F57F17")
+#let error = rgb("#C62828")
+#let info = rgb("#1565C0")
+
+// Background variants
+#let bg-subtle = rgb("#F8F9FA")
+#let bg-card = rgb("#FFFFFF")
+
+// Border
+#let border = rgb("#DEE2E6")

package/typst/lib/components-content.typ

@@ -0,0 +1,161 @@
+// Content components: metric-card, service-card, competency-block, callout-box, pull-quote
+
+#import "tokens.typ": sp-xs, sp-sm, sp-md, sp-lg, sp-xl, ts-h1, ts-h2, ts-h3, ts-h4, ts-body, ts-caption, border-thin, radius-md
+#import "colors.typ": accent, text-dark, text-gray, bg-subtle, success, warning, error, info
+
+#let metric-card(
+  value,
+  label,
+  description: none,
+  fill: accent.lighten(92%),
+  value-color: accent,
+) = {
+  block(
+    width: 100%,
+    fill: fill,
+    radius: radius-md,
+    inset: sp-md,
+  )[
+    #text(size: ts-h1, weight: "bold", fill: value-color)[#value]
+    #v(sp-xs)
+    #text(size: ts-h4, weight: "semibold", fill: text-dark)[#label]
+    #if description != none {
+      v(sp-xs)
+      text(size: ts-caption, fill: text-gray)[#description]
+    }
+  ]
+}
+
+#let service-card(
+  name,
+  description,
+  deliverables: (),
+  accent-color: accent,
+) = {
+  block(
+    width: 100%,
+    stroke: (left: 3pt + accent-color, rest: border-thin + text-gray.lighten(70%)),
+    radius: (right: radius-md),
+    inset: sp-md,
+    below: sp-md,
+  )[
+    #text(size: ts-h3, weight: "bold", fill: accent-color)[#name]
+    #v(sp-sm)
+    #text(fill: text-dark)[#description]
+    #if deliverables.len() > 0 {
+      v(sp-sm)
+      text(size: ts-caption, weight: "bold", fill: text-gray)[Deliverables:]
+      for item in deliverables {
+        v(sp-xs)
+        grid(
+          columns: (12pt, 1fr),
+          column-gutter: sp-xs,
+          text(fill: accent-color)[--],
+          text(size: ts-caption)[#item],
+        )
+      }
+    }
+  ]
+}
+
+#let competency-block(
+  title,
+  items,
+  accent-color: accent,
+  columns: 2,
+) = {
+  block(below: sp-lg)[
+    #text(size: ts-h3, weight: "bold", fill: accent-color)[#title]
+    #v(sp-sm)
+    #grid(
+      columns: (1fr,) * columns,
+      column-gutter: sp-lg,
+      row-gutter: sp-sm,
+      ..items.map(item => {
+        grid(
+          columns: (8pt, 1fr),
+          column-gutter: sp-xs,
+          align(horizon, circle(radius: 3pt, fill: accent-color)),
+          text(size: ts-body, fill: text-dark)[#item],
+        )
+      }),
+    )
+  ]
+}
+
+#let callout-box(
+  body,
+  title: none,
+  variant: "info",
+  icon: none,
+) = {
+  let (fill, stroke-color, title-color) = if variant == "info" {
+    (info.lighten(90%), info, info)
+  } else if variant == "warning" {
+    (warning.lighten(88%), warning, warning)
+  } else if variant == "success" {
+    (success.lighten(90%), success, success)
+  } else if variant == "error" {
+    (error.lighten(90%), error, error)
+  } else {
+    (bg-subtle, text-gray, text-dark)
+  }
+
+  block(
+    width: 100%,
+    fill: fill,
+    stroke: (left: 3pt + stroke-color, rest: none),
+    radius: (right: radius-md),
+    inset: sp-md,
+    above: sp-md,
+    below: sp-md,
+  )[
+    #if title != none {
+      text(weight: "bold", fill: title-color, size: ts-body)[
+        #if icon != none [#icon ] #title
+      ]
+      v(sp-xs)
+    }
+    #body
+  ]
+}
+
+// Preset variants via .with()
+#let info-box = callout-box.with(variant: "info")
+#let warning-box = callout-box.with(variant: "warning")
+#let success-box = callout-box.with(variant: "success")
+#let error-box = callout-box.with(variant: "error")
+#let note-box = callout-box.with(variant: "note", title: "Note")
+#let tip-box = callout-box.with(variant: "info", title: "Tip")
+#let important-box = callout-box.with(variant: "warning", title: "Important")
+
+#let pull-quote(
+  body,
+  attribution: none,
+  accent-color: accent,
+) = {
+  block(
+    width: 100%,
+    inset: (left: sp-xl, right: sp-lg, y: sp-lg),
+    above: sp-lg,
+    below: sp-lg,
+  )[
+    #block(
+      stroke: (left: 3pt + accent-color),
+      inset: (left: sp-md),
+    )[
+      #text(
+        size: ts-h2,
+        style: "italic",
+        fill: text-dark,
+        weight: "regular",
+      )[#body]
+    ]
+    #if attribution != none {
+      v(sp-sm)
+      align(right)[
+        #text(size: ts-body, fill: text-gray)[--- #attribution]
+      ]
+    }
+  ]
+}

package/typst/lib/components-document.typ

@@ -0,0 +1,275 @@
+// Document components: cover-page, contact-strip, registration-block, invoice-header, line-items-table
+
+#import "tokens.typ": sp-xs, sp-sm, sp-md, sp-lg, sp-xl, sp-2xl, sp-3xl, ts-display, ts-h1, ts-h2, ts-body, ts-small, ts-caption, border-thin, border-medium, border-thick, radius-md
+#import "colors.typ": accent, text-dark, text-gray, bg-subtle
+#import "typography.typ": font-display
+
+#let cover-page(
+  title: [],
+  subtitle: none,
+  date: none,
+  company: none,
+  fill: white,
+  accent-color: accent,
+) = {
+  page(
+    margin: (x: 1.5in, top: 2.5in, bottom: 1.5in),
+    header: none,
+    footer: none,
+    fill: fill,
+  )[
+    // Accent bar at top
+    #place(top + left, dx: -1.5in, dy: -2.5in)[
+      #rect(width: 100% + 3in, height: 6pt, fill: accent-color)
+    ]
+
+    // Title block
+    #text(
+      font: font-display,
+      size: ts-display + 8pt,
+      weight: "bold",
+      fill: text-dark,
+    )[#title]
+
+    #if subtitle != none {
+      v(sp-md)
+      text(size: ts-h2, fill: text-gray)[#subtitle]
+    }
+
+    #v(sp-xl)
+    #line(length: 100pt, stroke: border-thick + accent-color)
+
+    #if date != none {
+      v(sp-xl)
+      text(size: ts-body, fill: text-gray)[#date]
+    }
+
+    // Company name at bottom
+    #if company != none {
+      align(bottom + left)[
+        #text(size: 12pt, fill: text-gray)[#company]
+      ]
+    }
+  ]
+}
+
+#let contact-strip(
+  name: none,
+  title: none,
+  email: none,
+  phone: none,
+  address: none,
+  separator: [ | ],
+) = {
+  block(
+    width: 100%,
+    inset: (y: sp-sm),
+  )[
+    #set text(size: ts-small, fill: text-gray)
+    #{
+      let parts = ()
+      if name != none { parts.push(text(weight: "bold", fill: text-dark)[#name]) }
+      if title != none { parts.push(title) }
+      if email != none { parts.push(link("mailto:" + email)[#email]) }
+      if phone != none { parts.push(phone) }
+      if address != none { parts.push(address) }
+      parts.join(separator)
+    }
+  ]
+}
+
+#let registration-block(
+  uei: none,
+  cage: none,
+  sam: none,
+  naics-primary: none,
+  naics-secondary: none,
+  certifications: none,
+  ein-last4: none,
+) = {
+  block(
+    width: 100%,
+    fill: bg-subtle,
+    radius: radius-md,
+    inset: sp-md,
+    below: sp-md,
+  )[
+    #text(size: 11pt, weight: "bold", fill: accent)[Federal Registration]
+    #v(sp-sm)
+    #grid(
+      columns: (auto, 1fr),
+      row-gutter: sp-sm,
+      column-gutter: sp-md,
+      ..{
+        let pairs = ()
+        if uei != none { pairs.push((strong[UEI:], uei)) }
+        if cage != none { pairs.push((strong[CAGE Code:], cage)) }
+        if sam != none { pairs.push((strong[SAM.gov:], sam)) }
+        if naics-primary != none { pairs.push((strong[NAICS (Primary):], naics-primary)) }
+        if naics-secondary != none { pairs.push((strong[NAICS (Secondary):], naics-secondary)) }
+        if certifications != none { pairs.push((strong[Certifications:], certifications)) }
+        if ein-last4 != none { pairs.push((strong[EIN (last 4):], ein-last4)) }
+        pairs.flatten()
+      },
+    )
+  ]
+}
+
+#let invoice-header(
+  company: none,
+  client: none,
+  number: none,
+  date: none,
+  due: none,
+  po-number: none,
+) = {
+  grid(
+    columns: (1fr, auto),
+    column-gutter: sp-xl,
+
+    // Left: company identity
+    {
+      if company != none {
+        text(size: 14pt, weight: "bold", fill: accent)[#company.at("name", default: "")]
+        v(sp-xs)
+        if "address" in company {
+          text(size: ts-small, fill: text-gray)[#company.address]
+        }
+        if "email" in company {
+          v(sp-xs)
+          text(size: ts-small, fill: text-gray)[#company.email]
+        }
+        if "phone" in company {
+          v(sp-xs)
+          text(size: ts-small, fill: text-gray)[#company.phone]
+        }
+      }
+    },
+
+    // Right: invoice metadata
+    {
+      text(size: ts-h1, weight: "bold", fill: accent)[INVOICE]
+      v(sp-sm)
+      grid(
+        columns: (auto, auto),
+        row-gutter: sp-xs,
+        column-gutter: sp-md,
+        text(size: ts-small, weight: "bold")[Invoice \#:], text(size: ts-small)[#number],
+        text(size: ts-small, weight: "bold")[Date:], text(size: ts-small)[#date],
+        text(size: ts-small, weight: "bold")[Due:], text(size: ts-small)[#due],
+        ..if po-number != none {
+          (text(size: ts-small, weight: "bold")[PO \#:], text(size: ts-small)[#po-number])
+        } else { () },
+      )
+    },
+  )
+
+  v(sp-lg)
+
+  // Client: "Bill To" section
+  if client != none {
+    text(size: ts-small, weight: "bold", fill: text-gray)[BILL TO]
+    v(sp-xs)
+    text(size: ts-body)[#client.at("name", default: "")]
+    if "address" in client {
+      v(sp-xs)
+      text(size: ts-small, fill: text-gray)[#client.address]
+    }
+  }
+
+  v(sp-lg)
+  line(length: 100%, stroke: border-thin + text-gray.lighten(40%))
+  v(sp-md)
+}
+
+#let line-items-table(
+  items,
+  tax-rate: none,
+  tax-label: "Tax",
+  currency: "$",
+  show-quantity: true,
+) = {
+  // Calculate totals
+  let subtotal = items.fold(0, (acc, item) => acc + item.at("amount", default: 0))
+  let tax-amount = if tax-rate != none { subtotal * tax-rate } else { 0 }
+  let total = subtotal + tax-amount
+
+  // Format currency
+  let fmt(n) = {
+    currency + str(calc.round(n, digits: 2))
+  }
+
+  // Header + items
+  table(
+    columns: if show-quantity {
+      (1fr, auto, auto, auto)
+    } else {
+      (1fr, auto)
+    },
+    inset: sp-sm,
+    stroke: (x, y) => if y == 0 {
+      (bottom: border-medium + accent)
+    } else {
+      (bottom: border-thin + text-gray.lighten(70%))
+    },
+
+    // Header row
+    ..if show-quantity {
+      (
+        table.cell(text(weight: "bold", size: ts-small)[Description]),
+        table.cell(text(weight: "bold", size: ts-small)[Qty]),
+        table.cell(text(weight: "bold", size: ts-small)[Rate]),
+        table.cell(text(weight: "bold", size: ts-small, fill: text-dark)[Amount]),
+      )
+    } else {
+      (
+        table.cell(text(weight: "bold", size: ts-small)[Description]),
+        table.cell(text(weight: "bold", size: ts-small, fill: text-dark)[Amount]),
+      )
+    },
+
+    // Item rows
+    ..items.map(item => {
+      if show-quantity {
+        (
+          text(size: ts-body)[#item.description],
+          align(right, text(size: ts-small)[#item.at("quantity", default: 1)]),
+          align(right, text(size: ts-small)[#fmt(item.at("rate", default: 0))]),
+          align(right, text(size: ts-body, weight: "medium")[#fmt(item.amount)]),
+        )
+      } else {
+        (
+          text(size: ts-body)[#item.description],
+          align(right, text(size: ts-body, weight: "medium")[#fmt(item.amount)]),
+        )
+      }
+    }).flatten(),
+  )
+
+  // Totals section
+  v(sp-sm)
+  align(right)[
+    #grid(
+      columns: (auto, 6em),
+      row-gutter: sp-xs,
+      column-gutter: sp-lg,
+      text(size: ts-small, fill: text-gray)[Subtotal:],
+      align(right, text(size: ts-body)[#fmt(subtotal)]),
+      ..if tax-rate != none {
+        (
+          text(size: ts-small, fill: text-gray)[#tax-label (#str(calc.round(tax-rate * 100, digits: 2))%):],
+          align(right, text(size: ts-body)[#fmt(tax-amount)]),
+        )
+      } else { () },
+    )
+    #v(sp-xs)
+    #line(length: 10em, stroke: border-thin + text-gray.lighten(40%))
+    #v(sp-xs)
+    #grid(
+      columns: (auto, 6em),
+      column-gutter: sp-lg,
+      text(size: 12pt, weight: "bold")[Total:],
+      align(right, text(size: 12pt, weight: "bold", fill: accent)[#fmt(total)]),
+    )
+  ]
+}

package/typst/lib/components-layout.typ

@@ -0,0 +1,104 @@
+// Layout components: hero-section, two-column, sidebar-layout, card, card-grid
+
+#import "tokens.typ": sp-xs, sp-sm, sp-md, sp-lg, sp-xl, sp-2xl, sp-3xl, ts-display, ts-body, border-thin, border-thick, radius-md
+#import "colors.typ": accent, text-dark, text-gray, bg-card, border
+#import "typography.typ": font-display
+
+#let hero-section(
+  title: [],
+  subtitle: none,
+  accent-line: true,
+  fill: accent.lighten(92%),
+  text-fill: text-dark,
+) = {
+  block(
+    width: 100%,
+    fill: fill,
+    inset: (x: sp-2xl, top: sp-3xl, bottom: sp-2xl),
+    below: sp-xl,
+  )[
+    #text(
+      font: font-display,
+      size: ts-display,
+      fill: text-fill,
+      weight: "bold",
+    )[#title]
+    #if subtitle != none {
+      v(sp-sm)
+      text(size: ts-body + 2pt, fill: text-gray)[#subtitle]
+    }
+    #if accent-line {
+      v(sp-md)
+      line(length: 80pt, stroke: border-thick + accent)
+    }
+  ]
+}
+
+#let two-column(
+  left,
+  right,
+  ratio: (2fr, 1fr),
+  gutter: sp-xl,
+) = {
+  grid(
+    columns: ratio,
+    column-gutter: gutter,
+    left,
+    right,
+  )
+}
+
+#let sidebar-layout(
+  main,
+  sidebar,
+  sidebar-width: 2.2in,
+  gutter: sp-xl,
+  sidebar-position: "right",
+) = {
+  let cols = if sidebar-position == "left" {
+    (sidebar-width, 1fr)
+  } else {
+    (1fr, sidebar-width)
+  }
+  let cells = if sidebar-position == "left" {
+    (sidebar, main)
+  } else {
+    (main, sidebar)
+  }
+  grid(
+    columns: cols,
+    column-gutter: gutter,
+    ..cells,
+  )
+}
+
+#let card(body, title: none, fill: bg-card, stroke: border-thin + border) = {
+  block(
+    width: 100%,
+    fill: fill,
+    stroke: stroke,
+    radius: radius-md,
+    inset: sp-md,
+    above: sp-sm,
+    below: sp-sm,
+  )[
+    #if title != none {
+      text(weight: "bold", size: 11pt)[#title]
+      v(sp-xs)
+    }
+    #body
+  ]
+}
+
+#let card-grid(
+  cards,
+  columns: 3,
+  gutter: sp-md,
+) = {
+  grid(
+    columns: (1fr,) * columns,
+    column-gutter: gutter,
+    row-gutter: gutter,
+    ..cards,
+  )
+}

package/typst/lib/components.typ

@@ -0,0 +1,55 @@
+// Title block, info-table, signature-block, separator
+
+#import "colors.typ": accent, text-gray
+#import "typography.typ": font-display
+#import "tokens.typ": ts-h1, ts-body, sp-xs, sp-sm, sp-md, border-thin
+
+#let title-block(title: [], date: none) = {
+  align(left)[
+    #text(font: font-display, size: ts-h1, fill: accent, weight: "bold")[#title]
+    #v(sp-sm)
+    #if date != none [
+      #text(size: ts-body, fill: text-gray)[#date]
+      #v(sp-xs)
+    ]
+  ]
+  v(sp-sm)
+  pdf.artifact(line(length: 100%, stroke: border-thin + text-gray.lighten(40%)))
+  v(sp-md)
+}
+
+#let info-table(..pairs) = {
+  grid(
+    columns: (auto, 1fr),
+    row-gutter: sp-sm,
+    column-gutter: sp-md,
+    ..pairs.pos().map(((label, value)) => {
+      (strong(label), value)
+    }).flatten()
+  )
+}
+
+#let signature-block(party-name, include-title: true) = {
+  v(1em)
+  strong(party-name)
+  v(2em)
+  grid(
+    columns: (1fr, auto),
+    column-gutter: 2em,
+    [Name: #box(width: 12em, stroke: (bottom: border-thin))],
+    [Date: #box(width: 6em, stroke: (bottom: border-thin))],
+  )
+  if include-title {
+    v(1em)
+    [Title: #box(width: 12em, stroke: (bottom: border-thin))]
+  }
+}
+
+#let separator() = {
+  pdf.artifact(line(length: 100%, stroke: border-thin + text-gray.lighten(40%)))
+}
+
+// Re-export component modules (barrel file)
+#import "components-layout.typ": *
+#import "components-content.typ": *
+#import "components-document.typ": *