dblock · Oct 25, 2026 · Oct 25, 2026
diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml
@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2026-10-24 23:19:23 UTC using RuboCop version 1.92.1.
+# on 2026-10-25 15:08:27 UTC using RuboCop version 1.92.1.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@@ -72,7 +72,7 @@ RSpec/ContextWording:
     - 'spec/models/team_spec.rb'
     - 'spec/support/api/endpoints/it_behaves_like_a_cursor_api.rb'
 
-# Offense count: 9
+# Offense count: 13
 # Configuration parameters: CountAsOne.
 RSpec/ExampleLength:
   Max: 11
@@ -94,7 +94,7 @@ RSpec/LetSetup:
 RSpec/MessageSpies:
   EnforcedStyle: receive
 
-# Offense count: 23
+# Offense count: 29
 RSpec/MultipleExpectations:
   Max: 6
 
@@ -128,7 +128,7 @@ RSpec/SpecFilePathFormat:
     - 'spec/commands/whoami_spec.rb'
     - 'spec/version_spec.rb'
 
-# Offense count: 9
+# Offense count: 11
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowHeredoc, AllowURI, AllowQualifiedName, URISchemes, AllowRBSInlineAnnotation, AllowCopDirectives, AllowedPatterns, SplitStrings.
 # URISchemes: http, https

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### Changelog
 
+* 2026/10/25: [#87](https://github.com/slack-ruby/slack-shellbot/pull/87): Redesign the Shell website with shared responsive layouts, charcoal ribbon artwork, a black-bordered animated demo, an "Is this a joke?" FAQ linked from the homepage, and recommendations with original logos for Slava, Strada, Gamebot, and S'Up above Open source while preserving Slack installation and status flows - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2026/10/24: [#86](https://github.com/slack-ruby/slack-shellbot/pull/86): Upgrade slack-ruby-bot-server to 2.2.1 to fix Grape error handling for unsupported requests and failing health checks - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2026/10/23: Upgrade to Ruby 4.0.9 and refresh dependencies and CI browser tooling - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2025/09/29: Upgraded to Ruby 3.4.6 - [@dblock](https://github.com/dblock).

diff --git a/README.md b/README.md
@@ -13,6 +13,12 @@ A shell bot for Slack. A demo is worth a thousand words.
 
 This bot is built with [slack-ruby-bot-server-events](https://github.com/slack-ruby/slack-ruby-bot-server-events). See [CONTRIBUTING](CONTRIBUTING.md).
 
+## Website artwork
+
+The website follows the shared Slava, Strata, and Strada layout with a terminal-inspired black/charcoal palette (base `#303035`). The editable `public/img/screenshot-background.svg` adapts the shared ribbon artwork and keeps `preserveAspectRatio="none"` on a fixed viewport-sized layer so expanding help does not resize the background. Preserve the original transparent `public/img/icon.png` terminal logo, its matching multi-resolution favicon, and the original `public/img/shell.gif` demonstration when updating the design.
+
+The bot recommendations use local copies of the original logos: `bot-slava.png` and `bot-strada.png` from their respective projects' `public/img/icon.png`, `bot-gamebot.png` from slack-gamebot2's `public/img/game.png`, and `bot-sup.png` from slack-sup2's `public/img/icon.png`. Preserve their original colors rather than applying the Shell website's monochrome styling.
+
 ## Copyright and License
 
 Copyright (c) 2016-2025, Daniel Doubrovkine, Artsy and [Contributors](CHANGELOG.md).

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/help.html.erb b/public/help.html.erb
@@ -1,18 +1,49 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>Shell: Help</title>
     <%= partial 'public/partials/_head.html.erb' %>
   </head>
-  <body>
-    <p class='icon'>
-      <a href='/'><img src='img/icon.png'></a>
-    </p>
-    <div class='help'>
-      <pre>
-        <%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %>
-      </pre>
-    </div>
+  <body class="site-page help-page">
+    <%= partial 'public/partials/_navigation.html.erb' %>
+    <main id="main" class="page-container help-content">
+      <header class="help-header">
+        <h1>Shell: Help</h1>
+        <p class="section-intro">A little help for your channel's command line.</p>
+      </header>
+      <section id="get-started" class="help-section" aria-labelledby="start-title">
+        <h2 id="start-title">Get started</h2>
+        <ol class="getting-started-steps">
+          <li><%= partial 'public/partials/_install_button.html.erb' %> and authorize Shell for your workspace.</li>
+          <li>Invite <code>@sh</code> into a Slack channel.</li>
+          <li>Type <code>man</code> to see the commands, or <code>ls</code> to list files.</li>
+        </ol>
+        <p>Each channel has its own rudimentary file system. This is a shell bot inside Slack, not a connection to your computer's shell.</p>
+      </section>
+      <section class="help-section" aria-labelledby="commands-title">
+        <h2 id="commands-title">Commands &amp; questions</h2>
+        <details id="is-this-a-joke" class="help-topic" open>
+          <summary>Is this a joke?</summary>
+          <p>Yes. Also, it works! Shell is a tiny Unix-like shell inside Slack, because apparently Slack needed a command line. Its commands and per-channel file system really work, but it is a toy, not a remote terminal.</p>
+        </details>
+        <details class="help-topic">
+          <summary>Command reference</summary>
+          <pre><%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %></pre>
+        </details>
+        <details class="help-topic">
+          <summary>How do I create and read a file?</summary>
+          <p>Try <code>touch notes</code> to create a file, <code>ls</code> to see it, and <code>cat notes</code> to read its contents. Use <code>mkdir projects</code> to create a directory.</p>
+        </details>
+        <details class="help-topic">
+          <summary>How do I leave the editor?</summary>
+          <p>The basic <code>vi</code>-like editor updates messages in place. Use <code>:wq</code> to quit and save, or <code>:q</code> to quit without saving.</p>
+        </details>
+      </section>
+      <section id="support" class="help-section" aria-labelledby="support-title">
+        <h2 id="support-title">Need a hand?</h2>
+        <p>Contact <a href="mailto:[email protected]">[email protected]</a>, DM <a href="https://twitter.com/playplayio">@playplayio</a>, or <a href="https://github.com/slack-ruby/slack-shellbot/issues">report an issue on GitHub</a>.</p>
+      </section>
+    </main>
     <%= partial 'public/partials/_footer.html.erb' %>
   </body>
 </html>
-
diff --git a/public/img/bot-gamebot.png b/public/img/bot-gamebot.png
diff --git a/public/img/bot-slava.png b/public/img/bot-slava.png
diff --git a/public/img/bot-strada.png b/public/img/bot-strada.png
diff --git a/public/img/bot-sup.png b/public/img/bot-sup.png
diff --git a/public/img/screenshot-background.svg b/public/img/screenshot-background.svg
diff --git a/public/index.html.erb b/public/index.html.erb
@@ -1,35 +1,83 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
   <title>Shell: A Unix Shell in Every Slack Channel</title>
   <%= partial 'public/partials/_head.html.erb' %>
   <script src="/scripts/register.js"></script>
   <script src="/scripts/status.js"></script>
   <meta name="slack-app-id" content="A01F73M28BF">
-  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
-  <link rel="icon" href="/favicon.ico" type="image/x-icon">
-  <meta name="description" content="Add a rudimentary Unix shell to every Slack channel."/>
+  <meta name="description" content="Add a rudimentary Unix shell to every Slack channel.">
  </head>
- <body>
-  <p class='icon'>
-    <a href="/"><img src='img/icon.png'></a>
-  </p>
-  <p>
-    <h1>Whoa, a bash shell inside Slack!</h1>
-  </p>
-  <p>
-    Creates a rudimentary file system in every channel.<br>Invite the bot into a channel, try <span style="font-family: Courier">man</span>, <span style="font-family: Courier">ls</span>, and other unix commands.
-  </p>
-  <p>&nbsp;</p>
-  <p id='messages' />
-  <p id='register'>
-    <a href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s %>&client_id=<%= ENV['SLACK_CLIENT_ID'] %>"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x"></a>
-  </p>
-  <p id='active_teams_count'>&nbsp;</p>
-  <p>&nbsp;</p>
-  <p class='image'>
-    <img src='img/shell.gif'>
-  </p>
+ <body class="site-page">
+  <%= partial 'public/partials/_navigation.html.erb' %>
+  <main id="main">
+    <section class="hero page-container" aria-labelledby="hero-title">
+      <div class="hero-intro">
+        <img class="hero-logo" src="/img/icon.png" width="512" height="512" alt="Shell terminal logo">
+        <div>
+          <h1 id="hero-title">Shell for Slack</h1>
+          <p class="hero-tagline">Whoa, a bash shell inside Slack!</p>
+          <p class="hero-description">A rudimentary file system in every channel. Invite the bot into a channel, try <code>man</code>, <code>ls</code>, and other Unix commands.</p>
+          <div class="hero-actions">
+            <p id="register"><%= partial 'public/partials/_install_button.html.erb' %></p>
+            <a class="secondary-button" href="/help.html#get-started">Get started</a>
+            <a class="secondary-button" href="/help.html#is-this-a-joke">Is this a joke?</a>
+          </div>
+          <p id="messages" role="status" aria-live="polite"></p>
+          <p id="active_teams_count" class="team-count" aria-live="polite">&nbsp;</p>
+        </div>
+      </div>
+      <figure class="hero-preview">
+        <img src="/img/shell.gif" width="691" height="419" alt="Shell running Unix commands inside a Slack channel">
+        <figcaption>A little command line, right where your team works.</figcaption>
+      </figure>
+    </section>
+    <section class="homepage-section page-container" id="how-to-use" aria-labelledby="how-title">
+      <h2 id="how-title">A shell in every channel</h2>
+      <p class="section-intro">Your familiar commands. A shared space to try them.</p>
+      <ol class="setup-steps">
+        <li><h3>Add Shell to Slack</h3><p>Connect your workspace using Add to Slack.</p></li>
+        <li><h3>Invite <code>@sh</code></h3><p>Invite the bot into a channel to create its own rudimentary file system.</p></li>
+        <li><h3>Try a command</h3><p>Start with <code>man</code> or <code>ls</code>. Create files, explore directories, or try the basic <code>vi</code> editor.</p></li>
+      </ol>
+      <a class="secondary-button" href="/help.html">Explore the commands</a>
+    </section>
+    <section class="homepage-section page-container" id="more-bots" aria-labelledby="bots-title">
+      <h2 id="bots-title">More bots for Slack and Discord</h2>
+      <p class="section-intro">A little more play, a little more connection.</p>
+      <ul class="bot-cards">
+        <li class="bot-card">
+          <img class="bot-logo" src="/img/bot-slava.png" width="72" height="72" alt="" loading="lazy">
+          <h3>Strava in Slack</h3>
+          <p>Share Strava activities, celebrate every finish, and keep your Slack team moving.</p>
+          <a class="secondary-button" href="https://slava.playplay.io/">Meet Slava</a>
+        </li>
+        <li class="bot-card">
+          <img class="bot-logo" src="/img/bot-strada.png" width="72" height="72" alt="" loading="lazy">
+          <h3>Strava in Discord</h3>
+          <p>Bring your running or cycling club together with Strava activities in Discord.</p>
+          <a class="secondary-button" href="https://strada.playplay.io/">Meet Strada</a>
+        </li>
+        <li class="bot-card">
+          <img class="bot-logo" src="/img/bot-sup.png" width="72" height="72" alt="" loading="lazy">
+          <h3>S'Up for Slack</h3>
+          <p>Meet someone new over coffee with fresh groups of three from your Slack channel each week.</p>
+          <a class="secondary-button" href="https://sup2.playplay.io/">Meet S'Up</a>
+        </li>
+        <li class="bot-card">
+          <img class="bot-logo" src="/img/bot-gamebot.png" width="72" height="72" alt="" loading="lazy">
+          <h3>Leaderboards in Slack</h3>
+          <p>Challenge teammates, report scores, and climb your Slack channel's leaderboard.</p>
+          <a class="secondary-button" href="https://gamebot2.playplay.io/">Meet Gamebot</a>
+        </li>
+      </ul>
+    </section>
+    <section class="homepage-section page-container narrow-container" id="open-source" aria-labelledby="source-title">
+      <h2 id="source-title">Open source</h2>
+      <p>Shell is a shell bot for Slack, built with <a href="https://github.com/slack-ruby/slack-ruby-bot-server-events">slack-ruby-bot-server-events</a>. Explore the code, report an issue, or contribute on <a href="https://github.com/slack-ruby/slack-shellbot">GitHub</a>.</p>
+      <p class="install-cta"><%= partial 'public/partials/_install_button.html.erb' %></p>
+    </section>
+  </main>
   <%= partial 'public/partials/_footer.html.erb' %>
  </body>
 </html>
-
diff --git a/public/partials/_footer.html.erb b/public/partials/_footer.html.erb
@@ -1,8 +1,12 @@
-<p>
+<footer class="site-footer">
+ <div class="page-container">
+ <p>
   <small>
-    <a href="https://github.com/slack-ruby/slack-shellbot" target="_blank">Fork me on github</a>, <a href="privacy.html">privacy policy</a>, <a href="help.html">help</a>, hosted on <a href="https://m.do.co/c/5b26011f9a9b">DigitalOcean</a><br>
+    <a href="https://github.com/slack-ruby/slack-shellbot" target="_blank" rel="noopener">Fork me on GitHub</a>, <a href="/privacy.html">privacy policy</a>, <a href="/help.html#get-started">get started</a>, <a href="/help.html">help</a>, hosted on <a href="https://m.do.co/c/5b26011f9a9b">DigitalOcean</a><br>
     Questions? Contact dblock[at]vestris[dot]com or DM <a href='https://twitter.com/playplayio'>@playplayio</a>.
     <br><br>
-    Written by <a href="https://twitter.com/dblockdotorg" target="_blank">@dblockdotorg</a>, <a href="https://www.vestris.com" target="_blank">&copy; Vestris LLC</a>.
+    Written by <a href="https://twitter.com/dblockdotorg" target="_blank" rel="noopener">@dblockdotorg</a>, <a href="https://www.vestris.com" target="_blank" rel="noopener">&copy; Vestris LLC</a>.
   </small>
 </p>
+ </div>
+</footer>
diff --git a/public/partials/_head.html.erb b/public/partials/_head.html.erb
@@ -1,4 +1,7 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.ico?v=charcoal" type="image/x-icon">
 <script src="/scripts/jquery-1.7.1.min.js"></script>
 <script src="/scripts/url.min.js"></script>
 <script src="/scripts/shell.js"></script>
-<link rel="stylesheet" type="text/css" href="styles.css">
+<link rel="stylesheet" type="text/css" href="/styles.css">
diff --git a/public/partials/_install_button.html.erb b/public/partials/_install_button.html.erb
@@ -0,0 +1 @@
+<a class="install-button" href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s %>&client_id=<%= ENV['SLACK_CLIENT_ID'] %>">Add to Slack</a>
diff --git a/public/partials/_navigation.html.erb b/public/partials/_navigation.html.erb
@@ -0,0 +1,12 @@
+<a class="skip-link" href="#main">Skip to content</a>
+<nav class="site-nav" aria-label="Main navigation">
+  <div class="page-container nav-inner">
+    <a class="site-brand" href="/">Shell</a>
+    <div class="nav-links">
+      <a href="/#how-to-use">How to use</a>
+      <a href="/#more-bots">More bots</a>
+      <a href="/#open-source">Open source</a>
+      <a href="/help.html">Help</a>
+    </div>
+  </div>
+</nav>
diff --git a/public/privacy.html.erb b/public/privacy.html.erb
@@ -6,14 +6,10 @@
   <%= partial 'public/partials/_head.html.erb' %>
 </head>
 
-<body style="text-align: center">
-  <p style="margin: 50px;">
-    <a href='/'><img src='img/icon.png' width="120px"></a>
-  </p>
-  <p>
+<body class="site-page">
+  <%= partial 'public/partials/_navigation.html.erb' %>
+  <main id="main" class="page-container content-page">
     <h1>Shell: Privacy Policy</h1>
-  </p>
-  <div style='text-align: left'>
     <h3>tl;dr</h3>
     <p>
       Shell does not want to know who you are and tries to collect just enough data to enable our services. Please contact <b>[email protected]</b> for any questions about this privacy policy.
@@ -79,7 +75,7 @@
     <p>
       If you have any questions or concerns or complaints about our Privacy Policy or our data collection or processing practices, or if you want to report any security violations to us, please <a href="https://twitter.com/dblockdotorg">message @dblockdotorg on Twitter</a> or e-mail <b>[email protected]</b>.
     </p>
-  </div>
+  </main>
   <%= partial 'public/partials/_footer.html.erb' %>
 </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<a class="install-button" href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s %>&client_id=<%= ENV['SLACK_CLIENT_ID'] %>">Add to Slack</a>