From a867e6835145af35dd97249758b5326a5a2a1197 Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Sat, 21 Mar 2026 15:09:46 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20sync=20extension=20to=20DESIGN.md=20?= =?UTF-8?q?=E2=80=94=20amber=20accent,=20zinc=20neutrals,=20grain=20textur?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Import design system from gstack-website. Update all extension colors: green (#4ade80) → amber (#F59E0B/#FBBF24), zinc gray neutrals, grain texture overlay. Regenerate icons as amber "G" monogram on dark background. Co-Authored-By: Claude Opus 4.6 (1M context) --- DESIGN.md | 86 +++++++++++++++++++++++++++++++++++ extension/content.css | 40 ++++++++-------- extension/icons/icon-128.png | Bin 701 -> 2839 bytes extension/icons/icon-16.png | Bin 129 -> 400 bytes extension/icons/icon-48.png | Bin 267 -> 1106 bytes extension/popup.html | 48 +++++++++---------- 6 files changed, 131 insertions(+), 43 deletions(-) create mode 100644 DESIGN.md diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 00000000..d1f3ce3d --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,86 @@ +# Design System — gstack + +## Product Context +- **What this is:** Community website for gstack — a CLI tool that turns Claude Code into a virtual engineering team +- **Who it's for:** Developers discovering gstack, existing community members +- **Space/industry:** Developer tools (peers: Linear, Raycast, Warp, Zed) +- **Project type:** Community dashboard + marketing site + +## Aesthetic Direction +- **Direction:** Industrial/Utilitarian — function-first, data-dense, monospace as personality font +- **Decoration level:** Intentional — subtle noise/grain texture on surfaces for materiality +- **Mood:** Serious tool built by someone who cares about craft. Warm, not cold. The CLI heritage IS the brand. +- **Reference sites:** formulae.brew.sh (competitor, but ours is live and interactive), Linear (dark + restrained), Warp (warm accents) + +## Typography +- **Display/Hero:** Satoshi (Black 900 / Bold 700) — geometric with warmth, distinctive letterforms (the lowercase 'a' and 'g'). Not Inter, not Geist. Loaded from Fontshare CDN. +- **Body:** DM Sans (Regular 400 / Medium 500 / Semibold 600) — clean, readable, slightly friendlier than geometric display. Loaded from Google Fonts. +- **UI/Labels:** DM Sans (same as body) +- **Data/Tables:** JetBrains Mono (Regular 400 / Medium 500) — the personality font. Supports tabular-nums. Monospace should be prominent, not hidden in code blocks. Loaded from Google Fonts. +- **Code:** JetBrains Mono +- **Loading:** Google Fonts for DM Sans + JetBrains Mono, Fontshare for Satoshi. Use `display=swap`. +- **Scale:** + - Hero: 72px / clamp(40px, 6vw, 72px) + - H1: 48px + - H2: 32px + - H3: 24px + - H4: 18px + - Body: 16px + - Small: 14px + - Caption: 13px + - Micro: 12px + - Nano: 11px (JetBrains Mono labels) + +## Color +- **Approach:** Restrained — amber accent is rare and meaningful. Dashboard data gets the color; chrome stays neutral. +- **Primary (dark mode):** amber-500 #F59E0B — warm, energetic, reads as "terminal cursor" +- **Primary (light mode):** amber-600 #D97706 — darker for contrast against white backgrounds +- **Primary text accent (dark mode):** amber-400 #FBBF24 +- **Primary text accent (light mode):** amber-700 #B45309 +- **Neutrals:** Cool zinc grays + - zinc-50: #FAFAFA (lightest) + - zinc-400: #A1A1AA + - zinc-600: #52525B + - zinc-800: #27272A + - Surface (dark): #141414 + - Base (dark): #0C0C0C + - Surface (light): #FFFFFF + - Base (light): #FAFAF9 +- **Semantic:** success #22C55E, warning #F59E0B, error #EF4444, info #3B82F6 +- **Dark mode:** Default. Near-black base (#0C0C0C), surface cards at #141414, borders at #262626. +- **Light mode:** Warm stone base (#FAFAF9), white surface cards, stone borders (#E7E5E4). Amber accent shifts to amber-600 for contrast. + +## Spacing +- **Base unit:** 4px +- **Density:** Comfortable — not cramped (not Bloomberg Terminal), not spacious (not a marketing site) +- **Scale:** 2xs(2px) xs(4px) sm(8px) md(16px) lg(24px) xl(32px) 2xl(48px) 3xl(64px) + +## Layout +- **Approach:** Grid-disciplined for dashboard, editorial hero for landing page +- **Grid:** 12 columns at lg+, 1 column at mobile +- **Max content width:** 1200px (6xl) +- **Border radius:** sm:4px, md:8px, lg:12px, full:9999px + - Cards/panels: lg (12px) + - Buttons/inputs: md (8px) + - Badges/pills: full (9999px) + - Skill bars: sm (4px) + +## Motion +- **Approach:** Minimal-functional — only transitions that aid comprehension. The dashboard's live feed IS the motion. +- **Easing:** enter(ease-out / cubic-bezier(0.16,1,0.3,1)) exit(ease-in) move(ease-in-out) +- **Duration:** micro(50-100ms) short(150ms) medium(250ms) long(400ms) +- **Animated elements:** live feed dot pulse (2s infinite), skill bar fill (600ms ease-out), hover states (150ms) + +## Grain Texture +Apply a subtle noise overlay to the entire page for materiality: +- Dark mode: opacity 0.03 +- Light mode: opacity 0.02 +- Use SVG feTurbulence filter as a CSS background-image on body::after +- pointer-events: none, position: fixed, z-index: 9999 + +## Decisions Log +| Date | Decision | Rationale | +|------|----------|-----------| +| 2026-03-21 | Initial design system | Created by /design-consultation. Industrial aesthetic, warm amber accent, Satoshi + DM Sans + JetBrains Mono. | +| 2026-03-21 | Light mode amber-600 | amber-500 too bright/washed against white; amber-700 too brown/umber. amber-600 is the sweet spot. | +| 2026-03-21 | Grain texture | Adds materiality to flat dark surfaces. Prevents the "generic SaaS template" sameness. | diff --git a/extension/content.css b/extension/content.css index a5d3dd22..408b2c1b 100644 --- a/extension/content.css +++ b/extension/content.css @@ -1,7 +1,9 @@ -/* gstack browse — ref overlay + status pill styles */ +/* gstack browse — ref overlay + status pill styles + * Design system: DESIGN.md (amber accent, zinc neutrals) + */ #gstack-ref-overlays { - font-family: 'SF Mono', 'Fira Code', monospace !important; + font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important; } /* Connection status pill — bottom-right corner */ @@ -14,13 +16,13 @@ align-items: center; gap: 6px; padding: 6px 12px; - background: rgba(10, 10, 10, 0.85); + background: rgba(12, 12, 12, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(74, 222, 128, 0.3); - border-radius: 20px; + border: 1px solid rgba(245, 158, 11, 0.25); + border-radius: 9999px; color: #e0e0e0; - font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; + font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; @@ -38,8 +40,8 @@ width: 6px; height: 6px; border-radius: 50%; - background: #4ade80; - box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); + background: #F59E0B; + box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); flex-shrink: 0; } @@ -56,7 +58,7 @@ font-size: 10px; font-weight: 700; padding: 1px 4px; - border-radius: 3px; + border-radius: 4px; line-height: 14px; pointer-events: none; z-index: 2147483647; @@ -69,9 +71,9 @@ right: 12px; width: 220px; max-height: 300px; - background: rgba(10, 10, 10, 0.95); - border: 1px solid #333; - border-radius: 6px; + background: rgba(12, 12, 12, 0.95); + border: 1px solid #262626; + border-radius: 8px; overflow: hidden; pointer-events: auto; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); @@ -80,9 +82,9 @@ .gstack-ref-panel-header { padding: 6px 10px; - background: #0f0f0f; - border-bottom: 1px solid #222; - color: #fff; + background: #141414; + border-bottom: 1px solid #262626; + color: #FAFAFA; font-weight: 600; font-size: 11px; } @@ -94,20 +96,20 @@ .gstack-ref-panel-row { padding: 3px 10px; - border-bottom: 1px solid #1a1a1a; + border-bottom: 1px solid #1f1f1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gstack-ref-panel-id { - color: #4ade80; + color: #FBBF24; font-weight: 600; margin-right: 4px; } .gstack-ref-panel-role { - color: #888; + color: #A1A1AA; margin-right: 4px; } @@ -117,6 +119,6 @@ .gstack-ref-panel-more { padding: 4px 10px; - color: #666; + color: #52525B; font-style: italic; } diff --git a/extension/icons/icon-128.png b/extension/icons/icon-128.png index 7deb432ea74178273fa6f09e5e1e2ff1857093a0..bad5e886df0830964948362882ea3df2d4565efe 100644 GIT binary patch literal 2839 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 HXY79f!Omwz literal 701 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRh7^U~2JnaSW-L^Y)H)(Om-p*1)5i zP1c{%{u(7?Fk!XNMmfiXsYc7i7NgFsy_;M(8@Al#_Bz1u;ESt-0Yl9fB_0L_ zyAsW|9EO_vS!|UIKh~H^PGb0AdRi)l;emCSSp;{(`SAIPiVXXrxSK;6e#FJ{Ok;T9 zZE7@wzajt1=>#K&eSX%>GZ}v9$?~#Pa5L=l2yV7yxOy+SnK~E31cXS7;@r|G{f}GbsPmzx3<@F6wG2snfbb% z;lDb=&Cg$1CG_k63Ou;aqA+{YK8EH%pv1*5^{#u=%KqMvNqF>&=}z{$FNa?rpT}_d zy7+_3VLty;{@!3uxcG(tdcQ2gHDCP${cGiFul>3xsE~W7<*PG8*`^VU` zBwXibya5qwh=p(uyzFODfC?Alm^ioUiO!6A?DP!%ew^2-cG_j`|VTO15>?gy$xcbgs047TYPgg&ebxsLQ07PRb?f?J) diff --git a/extension/icons/icon-16.png b/extension/icons/icon-16.png index 273c0afcd2ff87789ab85e2e184c5e2ae12025f7..e0f7b060bea7523f37d78194dc6ff76a5b22f4db 100644 GIT binary patch delta 384 zcmV-`0e}910gwZb8Gi-<001BJ|6u?C00v@9M??Vs0RI60puMM)0003+Nkl2Ls^GMKvdMhMF2#OY492#nAaEKxzf}klHq}9LB95ggFHTWlLXtk-PC;|~g z!~BNSL_z%y4R*jjOVnq)-}}C}pXU{&)FyBN%+cTEMI@)l|IcUIJ)#vu6KI1-{JXb`#XH|2^wKoo>cP$8tVO9Vy#X_$762JtXd18=H8@-~0eGtk zskHb16^id|DS0qqBLdZi&@>?uvBfbDZXX}$9fT>&DnwQRD!WHRD|jINQqby27|kJuH^&p4MF0FWOdpVLGn eJ|H9~BJmH8t6|_GbifMfIZy=*Bi4$QN%d~A7GLKnYG zJP^`*+E0XcM@aIiNvj#f4}9Sa{OFL(d&9X?;`-zTjFEFTu$dH23f5+*eA~pW?2@_; PXeNWFtDnm{r-UW|I3On? diff --git a/extension/icons/icon-48.png b/extension/icons/icon-48.png index 1678c43f0b34f321841b968859798f69eff385ca..ee223d32685da03902ee6d99f0b098a068ab04c5 100644 GIT binary patch delta 1096 zcmV-O1h@N(0@4VO8Gi-<00374`G)`i00v@9M??Vs0RI60puMM)000CBNkl7>1v7?)*R*I@Cd+X${&A#V7%knxYBDjZGQ}CR&CFXu#%FDw9%>*7-7o)F!vl6l%&AiDS!9e!AlL#a_)TRzVA8b z`_9i5Tqhonhf}H4VXgH6pav*nZ7~U45JH@YMxz~xL}C^|0K{UkEkcM>K%JioUC^Vo zZcZkXe~NfK9v&MT>*m%Gzd%n(NlBw+S=MvF(|)TlpkjJ@`l{4gxB0Ea6e(q!1n%)$ zh$&j@8VN-F7JuS_i1b^5SJn;qO<*+|Eeb<*g<^A56A5cl(}Lk~xH2ladQIf@U3oJQ zwBYgkY+4&KJaCu7av0lR|B`&sE9vYG@Xw@oGorM#RC{ftp;B?QHO=<2l{b}|g4e$a zar~Tx@}R)8ftGrkH}<6o8II*==Ph3TG=#0p;yoqtLw|9_oBPeh13b}Sb7b$FalEmC zqAPrN zJeuM31p|XV0$z*>S(H85t8DhWVpX1Rf#cWPeQbMspNb)V(hfKd`>OMlP>0@Cx%#cMyH(TYFV+l0h350 z1IZj!rgp30riNU}?TnFupMQ5Y&|IewOCEQAC#h{Oq_(|~y7odQX0pfT8d)cd40I1T zCt7udqNRTEI+3;osj2xMt}0VR3bMyu9CR zj(>4o3HNf0&jXLu+8jIREJo{jLEm4N%-Mn+<%-?+DmH|&zpg7Gd8#AqT8FU#OG4+f zvovluPud&V_jZ`>OaIXn0W z&c3-@33)lx7Z<>byXR=zWm6DbS#v|zp42X~|E z2K;8-fZs@9!fz2CxF&%F-0kLLPn#}4xqnbQ+ZO);@04! zGt*K;X;_j!UkI{rnqM|kYd|>zWX%^r%eEd@8&H9`TNxmbBC`mPKoM9d$f?0iHYkLG zvkXwU#x!*WlG7g3Ey#aEwSodNDW1+XC`u#LIFO)WgBPIK<8xt~1W49U*=|8j4PGum zIUmVl}}r!I(n4C6ugqx`HH zAWM@CLQ;7kFqHwKQguN>Djwuaeepka>Hq)$07*qoM6N<$g7d0r A$p8QV diff --git a/extension/popup.html b/extension/popup.html index f6a95583..e9959915 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -6,7 +6,7 @@ * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 240px; - background: #0a0a0a; + background: #0C0C0C; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; @@ -15,29 +15,29 @@ h1 { font-size: 16px; font-weight: 700; - color: #fff; + color: #FAFAFA; margin-bottom: 16px; letter-spacing: -0.3px; } label { display: block; font-size: 12px; - color: #888; + color: #A1A1AA; margin-bottom: 4px; } input { width: 100%; padding: 8px; - background: #1a1a1a; - border: 1px solid #333; - border-radius: 4px; - color: #fff; - font-family: 'SF Mono', 'Fira Code', monospace; + background: #141414; + border: 1px solid #262626; + border-radius: 8px; + color: #FAFAFA; + font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-size: 13px; outline: none; - transition: border-color 0.15s; + transition: border-color 150ms; } - input:focus { border-color: #4ade80; } + input:focus { border-color: #F59E0B; } .status { margin: 12px 0; display: flex; @@ -48,35 +48,35 @@ width: 8px; height: 8px; border-radius: 50%; - background: #555; + background: #3f3f46; flex-shrink: 0; } - .dot.connected { background: #4ade80; } - .dot.error { background: #f87171; } + .dot.connected { background: #22C55E; } + .dot.error { background: #EF4444; } .dot.reconnecting { - background: #fbbf24; - animation: pulse 1.5s ease-in-out infinite; + background: #F59E0B; + animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } - .status-text { color: #888; font-size: 12px; } - .status-text.connected { color: #4ade80; } - .details { color: #666; font-size: 11px; margin-top: 2px; } + .status-text { color: #A1A1AA; font-size: 12px; } + .status-text.connected { color: #22C55E; } + .details { color: #52525B; font-size: 11px; margin-top: 2px; } button { width: 100%; margin-top: 12px; padding: 8px; - background: #0a2a14; - border: 1px solid #4ade80; - border-radius: 4px; - color: #4ade80; + background: rgba(245, 158, 11, 0.1); + border: 1px solid #F59E0B; + border-radius: 8px; + color: #FBBF24; font-size: 13px; cursor: pointer; - transition: all 0.15s; + transition: all 150ms; } - button:hover { background: #0f3a1c; } + button:hover { background: rgba(245, 158, 11, 0.2); }