feat: Add BerkeleyMono font with S3 download for release builds (#951)

Author: charlesvien

.github/workflows/twig-release.yml

@@ -12,6 +12,9 @@ concurrency:
 jobs:
   publish:
     runs-on: macos-latest
+    permissions:
+      id-token: write
+      contents: write
     env:
       NODE_OPTIONS: "--max-old-space-size=8192"
       NODE_ENV: production
@@ -68,6 +71,17 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_TWIG_APP_ASSETS_ROLE_ARN }}
+          aws-region: ${{ secrets.AWS_TWIG_APP_ASSETS_REGION }}
+          mask-aws-account-id: true
+          unset-current-credentials: true
+
+      - name: Download BerkeleyMono fonts from S3
+        run: aws s3 cp s3://${{ secrets.AWS_TWIG_APP_ASSETS_BUCKET }}/fonts/BerkeleyMono/ apps/twig/assets/fonts/BerkeleyMono/ --recursive
+
       - name: Build electron-trpc package
         run: pnpm --filter @posthog/electron-trpc run build
 

.gitignore

@@ -50,3 +50,6 @@ test-results/
 
 # Downloaded binaries
 apps/twig/resources/codex-acp/
+
+# Licensed fonts (downloaded from S3 during CI)
+apps/twig/assets/fonts/BerkeleyMono/

apps/twig/README.md

@@ -51,6 +51,18 @@ If you don't have Xcode installed, the build will automatically fall back to the
 
 The `generateAssets` hook will automatically attempt to compile the icon during packaging if Xcode is available.
 
+### BerkeleyMono Font (PostHog employees)
+
+Twig uses [Berkeley Mono](https://usgraphics.com/products/berkeley-mono) as its primary font, falling back to JetBrains Mono if the files aren't present. The font is licensed and not committed to the repo — it's downloaded from S3 during CI builds.
+
+To use it locally, go to the Twig app assets S3 bucket in the AWS console, download the `.woff2` files from the `fonts/` folder, and place them in:
+
+```
+apps/twig/assets/fonts/BerkeleyMono/
+```
+
+The directory is gitignored, so these files won't be committed.
+
 ### Environment Variables
 
 You can set these environment variables instead of entering credentials in the app:

apps/twig/src/renderer/styles/globals.css

@@ -2,6 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("/assets/fonts/BerkeleyMono/BerkeleyMono-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("/assets/fonts/BerkeleyMono/BerkeleyMono-Oblique.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("/assets/fonts/BerkeleyMono/BerkeleyMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("/assets/fonts/BerkeleyMono/BerkeleyMono-Bold-Oblique.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: italic;
+}
+
 @font-face {
   font-family: "JetBrains Mono";
   src: url("/assets/fonts/JetBrainsMono/JetBrainsMono-Light.woff2")
@@ -131,19 +162,25 @@
 .radix-themes {
   /* Font families */
   --default-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   --heading-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   --code-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   --strong-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   --em-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   --quote-font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
 
-  /* Font weights - mapped to JetBrains Mono weights */
+  /* Font weights — Berkeley Mono provides 400/700, JetBrains Mono fills 300/500/600 */
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
@@ -156,7 +193,8 @@
 
 body {
   font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -211,7 +249,8 @@ body {
 
 .plan-markdown code {
   font-family:
-    "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+    "Berkeley Mono", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono",
+    "Courier New", monospace;
   font-size: 11px;
   background: rgba(0, 0, 0, 0.2);
   padding: 0 4px;
@@ -546,7 +585,7 @@ body {
 }
 
 .sidebar-tree {
-  font-family: "JetBrains Mono", monospace;
+  font-family: "Berkeley Mono", "JetBrains Mono", monospace;
   font-size: 12px;
   line-height: 1.5;
   color: var(--gray-11);

apps/twig/tailwind.config.js

@@ -46,7 +46,13 @@ module.exports = {
         },
       },
       fontFamily: {
-        mono: ["JetBrains Mono", "Consolas", "Monaco", "monospace"],
+        mono: [
+          "Berkeley Mono",
+          "JetBrains Mono",
+          "Consolas",
+          "Monaco",
+          "monospace",
+        ],
       },
     },
   },