basecamp · jzimdars · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 20, 2025
diff --git a/app/assets/images/jf-avatar.jpg b/app/assets/images/jf-avatar.jpg
diff --git a/app/assets/images/jf-signature.svg b/app/assets/images/jf-signature.svg
diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
@@ -79,6 +79,7 @@
   --z-tooltip: 50;
   --z-bar: 60;
   --z-tray: 61;
+  --z-welcome: 62;
 
   /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;

diff --git a/app/assets/stylesheets/welcome-letter.css b/app/assets/stylesheets/welcome-letter.css
@@ -0,0 +1,27 @@
+@layer components {
+  .welcome-letter {
+    position: relative;
+    view-transition-name: welcome-letter;
+    z-index: var(--z-welcome);
+
+    h2, p {
+      text-wrap: pretty;
+    }
+  }
+
+  .welcome-letter__close {
+    inset: var(--block-space) var(--block-space) auto auto;
+    position: absolute;
+  }
+
+  .welcome-letter__signature {
+    background-color: currentColor;
+    block-size: 3em;
+    display: inline-block;
+    inline-size: 8em;
+    mask-image: url("jf-signature.svg");
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 8em 3em;
+  }
+}
diff --git a/app/controllers/landings_controller.rb b/app/controllers/landings_controller.rb
@@ -1,5 +1,7 @@
 class LandingsController < ApplicationController
   def show
+    flash.keep(:welcome_letter)
+
     if Current.user.boards.one?
       redirect_to board_path(Current.user.boards.first)
     else

diff --git a/app/controllers/signups/completions_controller.rb b/app/controllers/signups/completions_controller.rb
@@ -11,6 +11,7 @@ def create
     @signup = Signup.new(signup_params)
 
     if @signup.complete
+      flash[:welcome_letter] = true
       redirect_to landing_url(script_name: @signup.account.slug)
     else
       render :new, status: :unprocessable_entity

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
@@ -5,11 +5,13 @@ export default class extends Controller {
   static targets = [ "dialog" ]
   static values = {
     modal: { type: Boolean, default: false },
-    sizing: { type: Boolean, default: true }
+    sizing: { type: Boolean, default: true },
+    autoOpen: { type: Boolean, default: false }
   }
 
   connect() {
     this.dialogTarget.setAttribute("aria-hidden", "true")
+    if (this.autoOpenValue) this.open()
   }
 
   open() {

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -26,6 +26,8 @@
           <%= render "notifications/tray" %>
         </div>
       <% end %>
+
+      <%= render "layouts/shared/welcome_letter" if flash[:welcome_letter] %>
     </footer>
   </body>
 </html>
diff --git a/app/views/layouts/shared/_welcome_letter.html.erb b/app/views/layouts/shared/_welcome_letter.html.erb
@@ -0,0 +1,28 @@
+<div data-controller="dialog" data-dialog-auto-open-value="true" data-dialog-modal-value="true">
+  <dialog class="welcome-letter panel panel--wide shadow dialog" data-dialog-target="dialog">
+    <button class="welcome-letter__close btn txt-x-small" data-action="dialog#close">
+      <%= icon_tag "close" %>
+      <span class="for-screen-reader">Close dialog</span>
+    </button>
+
+    <div class="txt-align-center margin-block-end">
+      <span class="welcome-letter__avatar txt-xx-large avatar center"><%= image_tag "jf-avatar.jpg", size: 36%></span>
+    </div>
+
+    <h2 class="txt-medium margin-none txt-tight-lines">Welcome, and thanks for signing up for Fizzy.</h2>
+
+    <p></p>
+
+    <p>To get you started, we set you up with a Fizzy board called <em>Playground</em>. It’s got a few cards designed to help you learn Fizzy itself. Open each card, go through the simple steps, and you’ll be an expert in Fizzy in no time. You’ll see the <em>Playground</em> when you close this message.</p>
+
+    <p>If you ever need a hand, please contact me directly at jason@37signals.com. I'm here for you, we’re all here for you.</p>
+
+    <p>Thanks again and all the best,</p>
+
+    <span class="welcome-letter__signature"></span>
+
+    <p><strong>Jason Fried</strong>, jason@37signals.com<br>
+      <em>CEO &amp; co-founder of 37signals, makers of Fizzy, Basecamp, and HEY</em>
+    </p>
+  </dialog>
+</div>
diff --git a/test/controllers/signup/completions_controller_test.rb b/test/controllers/signup/completions_controller_test.rb
@@ -29,6 +29,18 @@ class Signup::CompletionsControllerTest < ActionDispatch::IntegrationTest
     assert_response :redirect, "Valid params should redirect"
   end
 
+  test "shows welcome letter after signup" do
+    untenanted do
+      post signup_completion_path, params: {
+        signup: {
+          full_name: @signup.full_name
+        }
+      }
+    end
+
+    assert flash[:welcome_letter]
+  end
+
   test "create with blank name" do
     untenanted do
       post signup_completion_path, params: {