From 23298b30b74b1013d00ec2e65ba79b5c23e90312 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:40:11 +0000
Subject: [PATCH 1/4] Switch primary font to Lexend and keep footer in SLF
 Dreamer

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 base.css   | 22 ++++++++++++++++++----
 brand.html | 20 ++++++++++++++++----
 style.css  |  4 ++--
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/base.css b/base.css
index 12c4927..29e54aa 100644
--- a/base.css
+++ b/base.css
@@ -1,4 +1,5 @@
 /* base.css - shared variables and minimal resets used by all pages */
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
 :root {
   --bg-color: #ffffff;
   --text-color: #1a1a1a;
@@ -28,9 +29,9 @@
 }
 
 body {
-  /* Primary site font: Slfdreamer (fallbacks provided) */
+  /* Primary site font: Lexend (fallbacks provided) */
   font-family:
-    "Slfdreamer",
+    "Lexend",
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
@@ -38,7 +39,7 @@ body {
     "Helvetica Neue",
     Arial,
     sans-serif;
-  /* Base font size: larger for Slfdreamer legibility */
+  /* Base font size tuned for readability */
   font-size: 18px;
   background: var(--bg-color);
   color: var(--text-color);
@@ -59,7 +60,7 @@ body {
   }
 }
 
-/* Slfdreamer primary display font */
+/* SLF Dreamer font used by footer copyright */
 @font-face {
   font-family: "Slfdreamer";
   src: url("assetlab/faces/Slfdreamer-Regular.ttf") format("truetype");
@@ -167,6 +168,19 @@ footer.site-footer {
   z-index: 1000;
 }
 
+/* Keep footer copyright in SLF Dreamer */
+footer.site-footer .footer-copyright {
+  font-family:
+    "Slfdreamer",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+}
+
 /* link/button groups baseline */
 .links {
   display: flex;
diff --git a/brand.html b/brand.html
index 79ee2be..adc6d9f 100644
--- a/brand.html
+++ b/brand.html
@@ -135,15 +135,24 @@ <h2>SillyLittleTech</h2>
 
       <section class="brand-section">
         <h3>Typography</h3>
-        <p class="muted">Primary display font (example):</p>
+        <p class="muted">Primary font (example):</p>
         <div
           style="
-            font-family: Slfdreamer, system-ui, sans-serif;
+            font-family: Lexend, system-ui, sans-serif;
             font-size: 28px;
             margin-top: 8px;
           "
         >
-          @Sphinx of black quartz judge my vow — Slfdreamer Regular
+          @Sphinx of black quartz judge my vow — Lexend
+        </div>
+        <div
+          style="
+            margin-top: 12px;
+            font-family: Slfdreamer, system-ui, sans-serif;
+            font-size: 22px;
+          "
+        >
+          @Sphinx of black quartz judge my vow — SLF Dreamer (copyright footer)
         </div>
         <div
           style="
@@ -275,7 +284,10 @@ <h3>Licensing & permissions</h3>
 
       <footer class="site-footer">
         <div>
-          <div style="font-size: 12px; opacity: 0.85; margin-top: 4px">
+          <div
+            class="footer-copyright"
+            style="font-size: 12px; opacity: 0.85; margin-top: 4px"
+          >
             © 2026 SillyLittleTech
           </div>
         </div>
diff --git a/style.css b/style.css
index f655b6a..015f237 100644
--- a/style.css
+++ b/style.css
@@ -25,9 +25,9 @@
 }
 
 body {
-  /* Use Slfdreamer site-wide with system fallbacks */
+  /* Use Lexend site-wide with system fallbacks */
   font-family:
-    "Slfdreamer",
+    "Lexend",
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",

From 3e8c45753bb770a70450bf9f4b727029462bd4b6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 19 Mar 2026 09:53:33 +0000
Subject: [PATCH 2/4] Increase button font weight and lighten Tech wordmark

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 apply.html |  2 +-
 brand.css  |  6 ++++--
 brand.html |  2 +-
 index.html |  2 +-
 site.css   | 14 +++++++++++++-
 style.css  |  5 +++--
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apply.html b/apply.html
index a1f8a5f..a97d33d 100644
--- a/apply.html
+++ b/apply.html
@@ -99,7 +99,7 @@
             border: none;
             border-radius: 8px;
             color: #ffffff;
-            font-weight: 600;
+            font-weight: 700;
             font-size: 25px;
             cursor: pointer;
             transition: all 0.3s ease;
diff --git a/brand.css b/brand.css
index cb344c4..38e607f 100644
--- a/brand.css
+++ b/brand.css
@@ -16,10 +16,12 @@
 pre.codebox { max-width: 820px; margin: 12px auto; text-align: left }
 
 /* tabs */
-.tab { padding:6px 10px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-color); cursor:pointer; font-weight:600 }
+.tab { padding:6px 10px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-color); cursor:pointer; font-weight:700 }
 .tab.active { background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, black 8%)); color:white; border-color:transparent }
 
 /* codebox */
 pre.codebox { background: var(--card-bg); color: var(--text-color); padding:14px; border-radius:10px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,0.06); position:relative; overflow:auto }
-button.copy-btn { position:absolute; right:10px; top:10px; background:transparent; color:var(--text-color); border:1px solid var(--border-color); padding:6px 8px; border-radius:6px }
+button.copy-btn { position:absolute; right:10px; top:10px; background:transparent; color:var(--text-color); border:1px solid var(--border-color); padding:6px 8px; border-radius:6px; font-weight:700 }
+/* keep Tech lighter in the brand wordmark */
+.brand-wordmark .tech-thin { font-weight: 300 }
 pre.codebox, pre.codebox code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:14px }
diff --git a/brand.html b/brand.html
index adc6d9f..d7862a2 100644
--- a/brand.html
+++ b/brand.html
@@ -125,7 +125,7 @@ <h1 style="margin: 0">Brand guidelines</h1>
           "
         />
         <div>
-          <h2>SillyLittleTech</h2>
+          <h2 class="brand-wordmark">SillyLittle<span class="tech-thin">Tech</span></h2>
           <p class="muted">
             Non-profit open-source project. We kindly ask you to get our
             permission before using our logo — see the policy below.
diff --git a/index.html b/index.html
index 57f78ba..75c8349 100644
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
               "
             />
           </div>
-          <h1 class="name">Silly Little Tech</h1>
+          <h1 class="name">Silly Little <span class="tech-thin">Tech</span></h1>
         </div>
         <p class="description">
           SillyLittleTech is a small organization building open-source web tools
diff --git a/site.css b/site.css
index e6aee5c..4848089 100644
--- a/site.css
+++ b/site.css
@@ -39,6 +39,18 @@
     Arial,
     sans-serif;
 }
+.name .tech-thin {
+  font-family:
+    "Lexend",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  font-weight: 300;
+}
 .description {
   font-size: 1.125rem; /* ~20px at 18px base */
   color: var(--text-color);
@@ -101,7 +113,7 @@
   border-radius: 10px;
   text-decoration: none;
   color: var(--text-color);
-  font-weight: 600;
+  font-weight: 700;
   transition:
     transform 0.25s ease,
     box-shadow 0.25s ease,
diff --git a/style.css b/style.css
index 015f237..011357f 100644
--- a/style.css
+++ b/style.css
@@ -78,7 +78,7 @@ body {
   background: transparent;
   color: var(--text-color);
   cursor: pointer;
-  font-weight: 600;
+  font-weight: 700;
 }
 .tab.active {
   background: linear-gradient(
@@ -231,7 +231,7 @@ body {
   border-radius: 10px;
   text-decoration: none;
   color: var(--text-color);
-  font-weight: 600;
+  font-weight: 700;
   font-size: 15px;
   transition:
     transform 0.14s ease,
@@ -273,6 +273,7 @@ button.copy-btn {
   padding: 6px 8px;
   border-radius: 6px;
   cursor: pointer;
+  font-weight: 700;
 }
 
 button.copy-btn:hover {

From 94db86e868d25f53f0feee38e023329239d89150 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:54:01 +0000
Subject: [PATCH 3/4] style: format code with Prettier and StandardJS

This commit fixes the style issues introduced in 3e8c457 according to the output
from Prettier and StandardJS.

Details: https://github.com/SillyLittleTech/lander/pull/22
---
 apply.html | 405 +++++++++++++++++++++++++++++------------------------
 brand.css  | 118 +++++++++++++---
 brand.html |   4 +-
 3 files changed, 329 insertions(+), 198 deletions(-)

diff --git a/apply.html b/apply.html
index a97d33d..676923a 100644
--- a/apply.html
+++ b/apply.html
@@ -1,197 +1,240 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Apply for a Website - SillyLittleTech</title>
-    <link rel="stylesheet" href="base.css">
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://s.pageclip.co/v1/pageclip.css" media="screen">
+    <link rel="stylesheet" href="base.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://s.pageclip.co/v1/pageclip.css"
+      media="screen"
+    />
     <style>
-        .apply-container {
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 40px 20px;
-        }
-
-        .apply-header {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-
-        .apply-header h1 {
-            font-size: 32px;
-            margin-bottom: 16px;
-        }
-
-        .apply-header p {
-            font-size: 25px;
-            opacity: 0.8;
-        }
-
-        .back-link {
-            display: inline-block;
-            margin-bottom: 30px;
-            color: var(--accent-color);
-            text-decoration: none;
-            font-weight: 500;
-        }
-
-        .back-link:hover {
-            text-decoration: underline;
-        }
-
-        .apply-form {
-            background: var(--card-bg);
-            border: 2px solid var(--border-color);
-            border-radius: 12px;
-            padding: 30px;
-            box-shadow: 0 2px 8px var(--shadow);
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 500;
-            font-size: 25px;
-        }
-
-        .form-group input,
-        .form-group textarea,
-        .form-group select {
-            width: 100%;
-            padding: 12px 16px;
-            background: var(--bg-color);
-            border: 2px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-color);
-            font-family: inherit;
-            font-size: 25px;
-            transition: border-color 0.3s ease;
-        }
-
-        .form-group input:focus,
-        .form-group textarea:focus,
-        .form-group select:focus {
-            outline: none;
-            border-color: var(--accent-color);
-        }
-
-        .form-group textarea {
-            min-height: 120px;
-            resize: vertical;
-        }
-
-        .turnstile-container {
-            margin: 20px 0;
-            display: flex;
-            justify-content: center;
-        }
-
-        .submit-button {
-            width: 100%;
-            padding: 14px 28px;
-            background: var(--accent-color);
-            border: none;
-            border-radius: 8px;
-            color: #ffffff;
-            font-weight: 700;
-            font-size: 25px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 2px 8px var(--shadow);
-        }
-
-        .submit-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px var(--shadow);
-            opacity: 0.9;
-        }
-
-        .submit-button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
+      .apply-container {
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 40px 20px;
+      }
+
+      .apply-header {
+        text-align: center;
+        margin-bottom: 40px;
+      }
+
+      .apply-header h1 {
+        font-size: 32px;
+        margin-bottom: 16px;
+      }
+
+      .apply-header p {
+        font-size: 25px;
+        opacity: 0.8;
+      }
+
+      .back-link {
+        display: inline-block;
+        margin-bottom: 30px;
+        color: var(--accent-color);
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .back-link:hover {
+        text-decoration: underline;
+      }
+
+      .apply-form {
+        background: var(--card-bg);
+        border: 2px solid var(--border-color);
+        border-radius: 12px;
+        padding: 30px;
+        box-shadow: 0 2px 8px var(--shadow);
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        font-size: 25px;
+      }
+
+      .form-group input,
+      .form-group textarea,
+      .form-group select {
+        width: 100%;
+        padding: 12px 16px;
+        background: var(--bg-color);
+        border: 2px solid var(--border-color);
+        border-radius: 8px;
+        color: var(--text-color);
+        font-family: inherit;
+        font-size: 25px;
+        transition: border-color 0.3s ease;
+      }
+
+      .form-group input:focus,
+      .form-group textarea:focus,
+      .form-group select:focus {
+        outline: none;
+        border-color: var(--accent-color);
+      }
+
+      .form-group textarea {
+        min-height: 120px;
+        resize: vertical;
+      }
+
+      .turnstile-container {
+        margin: 20px 0;
+        display: flex;
+        justify-content: center;
+      }
+
+      .submit-button {
+        width: 100%;
+        padding: 14px 28px;
+        background: var(--accent-color);
+        border: none;
+        border-radius: 8px;
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 25px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 8px var(--shadow);
+      }
+
+      .submit-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px var(--shadow);
+        opacity: 0.9;
+      }
+
+      .submit-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        transform: none;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
-        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="5"></circle>
-            <line x1="12" y1="1" x2="12" y2="3"></line>
-            <line x1="12" y1="21" x2="12" y2="23"></line>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-            <line x1="1" y1="12" x2="3" y2="12"></line>
-            <line x1="21" y1="12" x2="23" y2="12"></line>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-        </svg>
-        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-        </svg>
+      <svg
+        class="sun-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+      <svg
+        class="moon-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
     </button>
 
     <div class="apply-container">
-        <a href="index.html" class="back-link">← Back to Home</a>
-        
-        <div class="apply-header">
-            <h1>Apply for a Website</h1>
-            <p>Tell us about your project and we'll get back to you soon.</p>
+      <a href="index.html" class="back-link">← Back to Home</a>
+
+      <div class="apply-header">
+        <h1>Apply for a Website</h1>
+        <p>Tell us about your project and we'll get back to you soon.</p>
+      </div>
+
+      <form
+        action="https://send.pageclip.co/YLDHAohhRJSQJX3izF30KRLNxy5NYhiz"
+        class="apply-form pageclip-form"
+        method="post"
+      >
+        <div class="form-group">
+          <label for="name">Name *</label>
+          <input type="text" id="name" name="name" required />
         </div>
 
-        <form action="https://send.pageclip.co/YLDHAohhRJSQJX3izF30KRLNxy5NYhiz" class="apply-form pageclip-form" method="post">
-            <div class="form-group">
-                <label for="name">Name *</label>
-                <input type="text" id="name" name="name" required>
-            </div>
-
-            <div class="form-group">
-                <label for="email">Email *</label>
-                <input type="email" id="email" name="email" required>
-            </div>
-
-            <div class="form-group">
-                <label for="project-name">Project Name *</label>
-                <input type="text" id="project-name" name="project-name" required>
-            </div>
-
-            <div class="form-group">
-                <label for="project-type">Project Type *</label>
-                <select id="project-type" name="project-type" required>
-                    <option value="">Select a type...</option>
-                    <option value="personal">Personal Website</option>
-                    <option value="portfolio">Portfolio</option>
-                    <option value="blog">Blog</option>
-                    <option value="creative">Creative Project</option>
-                    <option value="educational">Educational Project</option>
-                    <option value="other">Other</option>
-                </select>
-            </div>
-
-            <div class="form-group">
-                <label for="description">Project Description *</label>
-                <textarea id="description" name="description" placeholder="Tell us about your project, what you want to build, and any specific requirements..." required></textarea>
-            </div>
-
-            <div class="turnstile-container">
-                <div class="cf-turnstile" data-sitekey="0x4AAAAAAB7RSihDlonez-YV" data-theme="auto"></div>
-            </div>
-
-            <button type="submit" class="submit-button pageclip-form__submit">
-                <span>Submit Application</span>
-            </button>
-        </form>
+        <div class="form-group">
+          <label for="email">Email *</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+
+        <div class="form-group">
+          <label for="project-name">Project Name *</label>
+          <input type="text" id="project-name" name="project-name" required />
+        </div>
+
+        <div class="form-group">
+          <label for="project-type">Project Type *</label>
+          <select id="project-type" name="project-type" required>
+            <option value="">Select a type...</option>
+            <option value="personal">Personal Website</option>
+            <option value="portfolio">Portfolio</option>
+            <option value="blog">Blog</option>
+            <option value="creative">Creative Project</option>
+            <option value="educational">Educational Project</option>
+            <option value="other">Other</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="description">Project Description *</label>
+          <textarea
+            id="description"
+            name="description"
+            placeholder="Tell us about your project, what you want to build, and any specific requirements..."
+            required
+          ></textarea>
+        </div>
+
+        <div class="turnstile-container">
+          <div
+            class="cf-turnstile"
+            data-sitekey="0x4AAAAAAB7RSihDlonez-YV"
+            data-theme="auto"
+          ></div>
+        </div>
+
+        <button type="submit" class="submit-button pageclip-form__submit">
+          <span>Submit Application</span>
+        </button>
+      </form>
     </div>
 
     <script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    <script
+      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+      async
+      defer
+    ></script>
     <script src="theme.js"></script>
     <script src="script.js"></script>
-</body>
+  </body>
 </html>
diff --git a/brand.css b/brand.css
index 38e607f..be941c7 100644
--- a/brand.css
+++ b/brand.css
@@ -1,27 +1,113 @@
 /* brand.css - overrides and layout specific to brand guidelines page */
-.container.single-column { grid-template-columns: 1fr; max-width:900px; gap:28px; padding:24px; margin: 0 auto; text-align: center }
-.brand-hero { display:flex; gap:20px; align-items:center; margin:40px 0; flex-direction:column }
-.brand-logo { width:140px; height:140px; object-fit:contain; margin:0 auto }
-.brand-section { margin:28px 0 }
-.badge-sample { width:160px; margin:8px; display:inline-block }
+.container.single-column {
+  grid-template-columns: 1fr;
+  max-width: 900px;
+  gap: 28px;
+  padding: 24px;
+  margin: 0 auto;
+  text-align: center;
+}
+.brand-hero {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin: 40px 0;
+  flex-direction: column;
+}
+.brand-logo {
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
+  margin: 0 auto;
+}
+.brand-section {
+  margin: 28px 0;
+}
+.badge-sample {
+  width: 160px;
+  margin: 8px;
+  display: inline-block;
+}
 
-.back-link { display: inline-block; margin-bottom: 30px; color: var(--accent-color); text-decoration: none; font-weight: 500 }
-.back-link:hover { text-decoration: underline }
+.back-link {
+  display: inline-block;
+  margin-bottom: 30px;
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 500;
+}
+.back-link:hover {
+  text-decoration: underline;
+}
 
 /* center headings and sections */
-.brand-section h3 { text-align:center }
-.brand-section p, .brand-section ul { display:inline-block; text-align:left; max-width:720px }
+.brand-section h3 {
+  text-align: center;
+}
+.brand-section p,
+.brand-section ul {
+  display: inline-block;
+  text-align: left;
+  max-width: 720px;
+}
 
 /* center codebox */
-pre.codebox { max-width: 820px; margin: 12px auto; text-align: left }
+pre.codebox {
+  max-width: 820px;
+  margin: 12px auto;
+  text-align: left;
+}
 
 /* tabs */
-.tab { padding:6px 10px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-color); cursor:pointer; font-weight:700 }
-.tab.active { background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, black 8%)); color:white; border-color:transparent }
+.tab {
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  font-weight: 700;
+}
+.tab.active {
+  background: linear-gradient(
+    180deg,
+    var(--accent-color),
+    color-mix(in srgb, var(--accent-color) 82%, black 8%)
+  );
+  color: white;
+  border-color: transparent;
+}
 
 /* codebox */
-pre.codebox { background: var(--card-bg); color: var(--text-color); padding:14px; border-radius:10px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,0.06); position:relative; overflow:auto }
-button.copy-btn { position:absolute; right:10px; top:10px; background:transparent; color:var(--text-color); border:1px solid var(--border-color); padding:6px 8px; border-radius:6px; font-weight:700 }
+pre.codebox {
+  background: var(--card-bg);
+  color: var(--text-color);
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: auto;
+}
+button.copy-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background: transparent;
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-weight: 700;
+}
 /* keep Tech lighter in the brand wordmark */
-.brand-wordmark .tech-thin { font-weight: 300 }
-pre.codebox, pre.codebox code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:14px }
+.brand-wordmark .tech-thin {
+  font-weight: 300;
+}
+pre.codebox,
+pre.codebox code {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New",
+    monospace;
+  font-size: 14px;
+}
diff --git a/brand.html b/brand.html
index d7862a2..e50ad63 100644
--- a/brand.html
+++ b/brand.html
@@ -125,7 +125,9 @@ <h1 style="margin: 0">Brand guidelines</h1>
           "
         />
         <div>
-          <h2 class="brand-wordmark">SillyLittle<span class="tech-thin">Tech</span></h2>
+          <h2 class="brand-wordmark">
+            SillyLittle<span class="tech-thin">Tech</span>
+          </h2>
           <p class="muted">
             Non-profit open-source project. We kindly ask you to get our
             permission before using our logo — see the policy below.

From 954fbdc52eec594ae0dbc9c63e2959d5767f2f77 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 10:06:36 -0400
Subject: [PATCH 4/4] Move Google Fonts to `<link>` preconnect and fix "Tech"
 wordmark font (#24)

* Initial plan

* perf: move Google Fonts to link preconnect and fix Tech wordmark font

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

* docs: add comment to base.css noting Lexend must be loaded via link in HTML head

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 apply.html  |  6 ++++++
 base.css    | 10 +++++++++-
 brand.html  |  6 ++++++
 donate.html |  6 ++++++
 index.html  |  6 ++++++
 site.css    | 11 +----------
 6 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/apply.html b/apply.html
index 676923a..3f11d06 100644
--- a/apply.html
+++ b/apply.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Apply for a Website - SillyLittleTech</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
+    />
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="style.css" />
     <link
diff --git a/base.css b/base.css
index 29e54aa..383c9cd 100644
--- a/base.css
+++ b/base.css
@@ -1,5 +1,13 @@
 /* base.css - shared variables and minimal resets used by all pages */
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
+/*
+ * NOTE: The Lexend font used as the primary body font is NOT loaded here.
+ * Every page that includes base.css MUST load Lexend via <link> tags in its
+ * <head> (before base.css) to avoid falling back to system fonts:
+ *
+ *   <link rel="preconnect" href="https://fonts.googleapis.com" />
+ *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" />
+ */
 :root {
   --bg-color: #ffffff;
   --text-color: #1a1a1a;
diff --git a/brand.html b/brand.html
index e50ad63..f60fcc6 100644
--- a/brand.html
+++ b/brand.html
@@ -12,6 +12,12 @@
         } catch (e) {}
       })();
     </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
+    />
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="brand.css" />
     <style>
diff --git a/donate.html b/donate.html
index 83b4c9b..c5a7125 100644
--- a/donate.html
+++ b/donate.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Make a Donation - SillyLittleTech</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
+    />
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="site.css" />
diff --git a/index.html b/index.html
index 75c8349..b7d2ed9 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,12 @@
         } catch (e) {}
       })();
     </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
+    />
     <link rel="stylesheet" href="base.css" />
     <link rel="stylesheet" href="site.css" />
   </head>
diff --git a/site.css b/site.css
index 4848089..510ec3d 100644
--- a/site.css
+++ b/site.css
@@ -40,16 +40,7 @@
     sans-serif;
 }
 .name .tech-thin {
-  font-family:
-    "Lexend",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    sans-serif;
-  font-weight: 300;
+  font-weight: 400;
 }
 .description {
   font-size: 1.125rem; /* ~20px at 18px base */