From 05efe82d85ab81bbc993d99f7f97844f02d503b4 Mon Sep 17 00:00:00 2001
From: Drew Stone <drewstone329@gmail.com>
Date: Wed, 24 Jun 2026 03:04:14 -0600
Subject: [PATCH] fix(tangle-cloud): solid card surfaces, bigger type, tighter
 navbar gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vision-grounded fixes from a claude-code screenshot audit of staging:
1. Card sheen — the shared frosted-glass Card (bg-mono-200/40 + gradient +
   backdrop-blur) sat over cloud's radial-gradient body bg, reading as an
   inconsistent diagonal sheen. Make --bg-root solid (#07080c) so translucent
   cards no longer show a gradient through; make InstructionCard's /40 surface
   solid. Cards now read as one flat-consistent surface.
2. Type — claude flagged body/subtitle/table still tiny after the prior bump.
   Push the scale again: xs 13->14, sm 15->16, base 17->18, lg 19->20,
   xl 22->24, 2xl 25->28, 3xl 30->34.
3. Navbar gap — claude flagged the title still floating with excessive top
   padding. Tighten Layout space-y-4->2 + header py-4->3.
---
 apps/tangle-cloud/src/components/Layout.tsx        |  4 ++--
 .../src/pages/instances/InstructionCard.tsx        |  2 +-
 apps/tangle-cloud/src/styles.css                   |  2 +-
 apps/tangle-cloud/tailwind.config.ts               | 14 +++++++-------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/tangle-cloud/src/components/Layout.tsx b/apps/tangle-cloud/src/components/Layout.tsx
index a21901f88..7b3eed7ef 100644
--- a/apps/tangle-cloud/src/components/Layout.tsx
+++ b/apps/tangle-cloud/src/components/Layout.tsx
@@ -107,8 +107,8 @@ const Layout: FC<PropsWithChildren<Props>> = ({
           <ShortcutsHelp open={isHelpOpen} onOpenChange={setIsHelpOpen} />
 
           <div className="m-auto flex h-full max-w-[1448px] flex-col justify-between px-4 md:px-8 lg:px-10">
-            <div className="flex grow flex-col space-y-4">
-              <div className="flex items-center justify-between py-4">
+            <div className="flex grow flex-col space-y-2">
+              <div className="flex items-center justify-between py-3">
                 <div className="flex items-center space-x-4 lg:space-x-0">
                   <MobileSidebar />
                 </div>
diff --git a/apps/tangle-cloud/src/pages/instances/InstructionCard.tsx b/apps/tangle-cloud/src/pages/instances/InstructionCard.tsx
index 920d9a48a..d6f8dbfcd 100644
--- a/apps/tangle-cloud/src/pages/instances/InstructionCard.tsx
+++ b/apps/tangle-cloud/src/pages/instances/InstructionCard.tsx
@@ -185,7 +185,7 @@ export const InstructionCard: FC<InstructionCardProps> = ({
           {steps.map((step) => {
             const tone = TONE_STYLES[step.tone];
             const content = (
-              <div className="group flex cursor-pointer items-center gap-4 rounded-lg border border-border bg-[var(--bg-elevated)]/40 p-4 transition-colors duration-200 hover:border-primary/40 hover:bg-[var(--bg-hover)]">
+              <div className="group flex cursor-pointer items-center gap-4 rounded-lg border border-border bg-[var(--bg-elevated)] p-4 transition-colors duration-200 hover:border-primary/40 hover:bg-[var(--bg-hover)]">
                 <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-border bg-[var(--bg-card)] transition-colors duration-200 group-hover:border-primary/40">
                   {createElement(step.icon, {
                     className: `h-5 w-5 ${tone.icon}`,
diff --git a/apps/tangle-cloud/src/styles.css b/apps/tangle-cloud/src/styles.css
index 61f9d596e..291631809 100644
--- a/apps/tangle-cloud/src/styles.css
+++ b/apps/tangle-cloud/src/styles.css
@@ -39,7 +39,7 @@ body {
 .tangle-cloud-shell[data-sandbox-theme='tangle'] {
   color-scheme: dark;
   /* prettier-ignore */
-  --bg-root: radial-gradient(ellipse 60% 36% at 16% 0%, rgba(79, 70, 229, 0.1), transparent), radial-gradient(ellipse 44% 30% at 84% 4%, rgba(20, 184, 166, 0.08), transparent), linear-gradient(180deg, #090b10 0%, #07080c 100%);
+  --bg-root: #07080c;
   --bg-card: #151922;
   --bg-elevated: #202737;
   --bg-hover: rgba(116, 126, 194, 0.18);
diff --git a/apps/tangle-cloud/tailwind.config.ts b/apps/tangle-cloud/tailwind.config.ts
index 32bae1575..20a34ad43 100644
--- a/apps/tangle-cloud/tailwind.config.ts
+++ b/apps/tangle-cloud/tailwind.config.ts
@@ -25,13 +25,13 @@ export default {
       // base 16 / lg 18 / xl 20) so cloud's body, subtext, tables, and buttons
       // read larger and consistent. Line-heights loosened to match.
       fontSize: {
-        xs: ['13px', { lineHeight: '1.35rem' }],
-        sm: ['15px', { lineHeight: '1.5rem' }],
-        base: ['17px', { lineHeight: '1.65rem' }],
-        lg: ['19px', { lineHeight: '1.7rem' }],
-        xl: ['22px', { lineHeight: '1.85rem' }],
-        '2xl': ['25px', { lineHeight: '2rem' }],
-        '3xl': ['30px', { lineHeight: '2.25rem' }],
+        xs: ['14px', { lineHeight: '1.4rem' }],
+        sm: ['16px', { lineHeight: '1.55rem' }],
+        base: ['18px', { lineHeight: '1.7rem' }],
+        lg: ['20px', { lineHeight: '1.75rem' }],
+        xl: ['24px', { lineHeight: '1.9rem' }],
+        '2xl': ['28px', { lineHeight: '2.1rem' }],
+        '3xl': ['34px', { lineHeight: '2.4rem' }],
       },
       backgroundImage: {
         glass: