From 8f94f8d187a6c2f0b2026f0c8232bfa6f6c91525 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Wed, 1 Apr 2026 02:58:57 +0700
Subject: [PATCH] Switch to Source Sans 3 + Source Code Pro font pairing

---
 packages/showcase/index.html | 18 +++++++-
 packages/showcase/style.css  | 87 ++++++++++++++++++++++++++++++------
 2 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/packages/showcase/index.html b/packages/showcase/index.html
index 5f4b78a..7362801 100644
--- a/packages/showcase/index.html
+++ b/packages/showcase/index.html
@@ -7,7 +7,7 @@
   <title>PettyUI — Component Showcase</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet" />
   <script type="module">
     import "pettyui/button"; import "pettyui/link"; import "pettyui/separator";
     import "pettyui/badge"; import "pettyui/skeleton"; import "pettyui/avatar";
@@ -48,6 +48,22 @@
       </div>
     </section>
 
+    <section class="manifesto">
+      <div class="manifesto-inner">
+        <p class="manifesto-kicker">// src/philosophy.txt</p>
+        <h2 class="manifesto-heading">Your browser already has a UI framework.<br>You just forgot.</h2>
+        <div class="manifesto-body">
+          <p>Somewhere around 2015 we collectively decided that browsers were too stupid to build interfaces. So we invented virtual DOMs, reconcilers, hydration strategies, and server components to work around a platform that wasn't ready. Fair enough. It wasn't.</p>
+          <p>It is now.</p>
+          <p>Native <code>&lt;dialog&gt;</code> with focus trapping. Popover API with light-dismiss. Anchor positioning. CSS <code>:has()</code>. Custom Elements that just work in every framework, or in none at all. The browser shipped the abstractions we spent a decade rebuilding in userland &mdash; and most of us didn't notice because we were busy migrating to the next meta-framework.</p>
+          <p>PettyUI is what happens when you stop fighting the platform and start reading the spec. 45 components, zero dependencies, ~500 bytes of runtime. Not because minimalism is trendy, but because there's genuinely nothing left to add. The browser does the hard parts. We just wire up the keyboard shortcuts and ARIA.</p>
+          <p>Now that AI writes most of the glue code anyway, do you really need 140KB of framework opinions between your intent and the DOM? For a dashboard? For a form? Really?</p>
+          <p>We're not saying frameworks are dead. We're saying the default answer to "how do I build a UI" shouldn't be "install 900 packages and pray." For most things most people ship, Custom Elements + the platform APIs are not just <em>enough</em> &mdash; they're <em>better</em>. Faster, smaller, no build step required, and they'll still work when whatever you're using today is in maintenance mode.</p>
+          <p>This library exists because building things that are simply better is more fun than arguing about it online.</p>
+        </div>
+      </div>
+    </section>
+
     <section class="value-props">
       <h2 class="sr-only">Why PettyUI</h2>
       <dl class="value-list">
diff --git a/packages/showcase/style.css b/packages/showcase/style.css
index 00d1a59..cd216b7 100644
--- a/packages/showcase/style.css
+++ b/packages/showcase/style.css
@@ -49,8 +49,8 @@
   --color-success-subtle: #f0fdf4;
 
   /* ── Typography ── */
-  --font-sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --font-sans: "Source Sans 3", system-ui, sans-serif;
+  --font-mono: "Source Code Pro", ui-monospace, monospace;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
@@ -217,7 +217,9 @@ button, a, input, select, textarea, [tabindex] {
   align-items: center;
   text-align: center;
   position: relative;
-  padding: 8rem 0 6rem;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 0;
 }
 
 .hero::before {
@@ -312,6 +314,63 @@ petty-counter {
   font-variant-numeric: tabular-nums;
 }
 
+/* ============================================================
+   MANIFESTO
+   ============================================================ */
+.manifesto {
+  padding: var(--space-16) 0 var(--space-20);
+  border-top: 1px solid var(--color-border);
+}
+
+.manifesto-inner {
+  max-width: 60ch;
+}
+
+.manifesto-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-6);
+  letter-spacing: 0.04em;
+}
+
+.manifesto-heading {
+  font-family: var(--font-sans);
+  font-size: clamp(1.5rem, 3.5vw, 2rem);
+  font-weight: var(--weight-bold);
+  letter-spacing: -0.03em;
+  line-height: var(--leading-tight);
+  color: var(--color-text);
+  margin-bottom: var(--space-10);
+}
+
+.manifesto-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.manifesto-body p {
+  font-size: var(--text-base);
+  line-height: 1.75;
+  color: var(--color-text-secondary);
+  max-width: 60ch;
+}
+
+.manifesto-body code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface-raised);
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  color: var(--color-text);
+}
+
+.manifesto-body em {
+  font-style: italic;
+  color: var(--color-text);
+}
+
 /* ============================================================
    VALUE PROPS
    ============================================================ */
@@ -861,8 +920,7 @@ petty-switch button[data-part="control"] {
   background: var(--c-surface-3);
   cursor: pointer;
   transition: background var(--duration-normal) var(--ease-effects);
-  padding: 6px 0;
-  box-sizing: content-box;
+  padding: 0;
 }
 
 petty-switch button[data-part="control"]:focus-visible {
@@ -876,22 +934,23 @@ petty-switch[data-state="on"] button[data-part="control"] {
 
 petty-switch [data-part="thumb"] {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   background: white;
   color: var(--color-text);
   position: absolute;
-  top: 4px;
+  top: 8px;
   left: 6px;
-  transform: scale(0.667);
-  transform-origin: center;
-  transition: transform var(--duration-normal) var(--ease-expressive);
+  transition: transform var(--duration-normal) var(--ease-expressive), width var(--duration-normal) var(--ease-expressive), height var(--duration-normal) var(--ease-expressive), top var(--duration-normal) var(--ease-expressive);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 petty-switch[data-state="on"] [data-part="thumb"] {
-  transform: translateX(22px) scale(1);
+  width: 24px;
+  height: 24px;
+  top: 4px;
+  transform: translateX(22px);
 }
 
 petty-switch [data-part="label"] {
@@ -1874,6 +1933,8 @@ petty-collapsible [data-part="content"] {
   }
 
   .hero {
-    padding: 6rem 0 4rem;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 0;
   }
 }