CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-09-09 14:38:59 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
da6f0ff2f6340043e95942963cfe06ca58bd527f
gstack/DESIGN.md
T
Garry TanandClaude Fable 5.1 da6f0ff2f6 fix(design): run the DOM dump in the page on both engines; align doctrine with the catalog 
The DOM-dump script is an arrow function, not a self-calling IIFE: Aside's
`pg.evaluate($_DUMP)` receives the function and runs it in the page (the IIFE
form executed in the repl sandbox, where `document` does not exist), and the
fallback engine calls it with `$B js "($_DUMP)()" --out --raw`. Hygiene widens
to every URL-bearing attribute (src, srcset per candidate, poster, action,
formaction, data, ping, cite lose their query strings and fragments) and to
data: URLs inside existing <style> nodes. The persist and scan blocks restate
REPORT_DIR and RUN_ID literally instead of relying on a shell variable from an
earlier block; the baseline's targetSet is defined per mode (repo-relative
paths in source mode, page slugs in DOM mode) so DOM-mode deltas can match; the
PR-body Detector line lists the states the probe can actually print. The DOM
fixture is re-captured with the new script from outside the repo (the engine
walks up from cwd for DESIGN.md, which the metadata now records).

Doctrine contradictions the design specialist found: the landing-page motion
rule matches the one-authored-moment reflex; the background rule names the
catalog's halo/spotlight/stripe/grid slop instead of asking for gradients; the
universal font rule is scoped to the display voice with the body/UI exceptions;
"two typefaces max" allows the mono; the methodology's banned-font line renders
BANNED_FONTS; Courier New is banned outright; the Brutalist, Retro-Futuristic,
and Playful menu entries stop recommending system stacks, glow, and bounce; the
coherence nudge uses the decoration vocabulary; Path A's gate names the display
voice; font-loading prose points at the source the procedure verified;
centered-everything is MEDIUM (an aggregate heuristic); the mockup guard reads
"Never by default (unless the brief above asks for it)". The checklist's
AUTO-FIX list renders the catalog's auto-fix rules; category 9 and the Hard
Rules pointer count from the same partition helpers (detectorSlopEntries,
judgmentTellEntries); the handoff list renders from HANDOFF_COMMANDS; a missing
catalog id fails gen-skill-docs by name. gstack's own DESIGN.md gains border
tokens and Decisions Log rows for its live-feed pulse and 11px mono labels.
frontend-scope is case-sensitive like the bash arm. gen-skill-docs shares one
emitGenerated helper for sections and lib-derived assets; renderCatalog keeps
the one style with a caller. Tests: shared sliceBetween that fails on a missing
end marker, the slop-gate fixture's real end marker, an isolated browse daemon
for the DOM-mode E2E, the DOM hygiene test gated to CI or opt-in, docs notes
for the two superseded plan sentences.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-08 17:31:30 +00:00

6.0 KiB
Raw Blame History

name, typography, colors, spacing, rounded
name typography colors spacing rounded
gstack
display body label mono
fontFamily
Satoshi
fontFamily
DM Sans
fontFamily
DM Sans
fontFamily fontFeature
JetBrains Mono tnum
primary-dark-mode primary-light-mode primary-text-accent-dark-mode primary-text-accent-light-mode zinc-50 zinc-400 zinc-600 zinc-800 surface-dark base-dark surface-light base-light border-dark border-light success warning error info
#F59E0B #D97706 #FBBF24 #B45309 #FAFAFA #A1A1AA #52525B #27272A #141414 #0C0C0C #FFFFFF #FAFAF9 #262626 #E7E5E4 #22C55E #F59E0B #EF4444 #3B82F6
2xs xs sm md lg xl 2xl 3xl
2px 4px 8px 16px 24px 32px 48px 64px
sm md lg full
4px 8px 12px 9999px

Design System — gstack

Overview

  • 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

  • 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)

Colors

  • 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.

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)

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)

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)

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.
2026-09-08 Open DESIGN.md format Converted with gstack-design-md convert: tokens in front matter, canonical sections, Motion and Decisions Log kept as extras. DM Sans stays the body face: it sits on the overused-as-display list, and body/UI use on an Operate surface is the allowed exception under the role-scoped rule.
2026-09-08 Live-feed pulse is the one authored motion moment The dashboard's 2s pulse on the live-feed dot is the page's single authored motion, so it stands as an intentional exception to the pulsing-dot catalog rule; every other surface keeps state changes static.
2026-09-08 JetBrains Mono labels at 11px The mono personality font runs on labels at 11px (Nano), below the 12px UI-text floor; an intentional exception recorded here so the detector's undersized-ui-text and monospace-costume rows are read as decided, not open.
Reference in New Issue View Git Blame Copy Permalink