diff --git a/docs/superpowers/specs/2026-06-15-terminal-native-redesign-design.md b/docs/superpowers/specs/2026-06-15-terminal-native-redesign-design.md new file mode 100644 index 0000000..2aef898 --- /dev/null +++ b/docs/superpowers/specs/2026-06-15-terminal-native-redesign-design.md @@ -0,0 +1,157 @@ +# Terminal-native redesign — design spec + +**Date:** 2026-06-15 +**Status:** Approved (vibe confirmed via `design-demo/` prototype) +**Scope:** Whole-site visual redesign (home, explore, config cards, docs, header, footer, shared shell) + +## 1. Direction + +Refined, terminal-native identity executed with **restraint** — the register is "high-end, +textured, not flashy, no AI-smell," in the spirit of Vercel / pi.dev. Fully monospace, dark-first +with a deliberate light mode. The terminal is the brand's visual *language* (prompts, carets, mono, +command-style labels), not literal cosplay — sections are clean web layouts with **one** real +terminal window as the signature moment. + +**Anti-goals (the "AI-smell" to avoid):** purple/blue gradients, gradient blobs, heavy neon glows, +over-rounded everything, evenly-distributed timid color, flat digital surfaces, emoji UI. + +**Reference prototype:** `design-demo/index.html` (throwaway). The production build reproduces this +look using the project's CSS-variable system and Svelte components. The demo is the source of truth +for the visual target. + +## 2. Design tokens + +Re-map values onto the **existing** token names in `src/lib/styles/variables.css` (so components +don't all need editing), and add the new tokens listed. Pure white text is intentionally retired in +favor of a soft off-white for a premium feel. + +### Dark (default) +``` +--bg-primary: #0a0a0b (was #0a0a0a) +--bg-secondary: #100f12 surface (cards, terminal, command box) +--bg-tertiary: #161519 surface-2 (code blocks, raised) +--bg-hover: #1b1a1f +--text-primary: #ededf0 soft white, not #ffffff +--text-secondary:#9a99a2 +--text-muted: #5b5a63 +--accent: #4ec98a refined mint (was neon #22c55e) +--accent-hover: #6ad9a0 +--accent-glow: rgba(78,201,138,0.10) (lower than before) +--border: #1f1e22 +--border-hover: #2c2b30 +--code-bg: #161519 +--header-bg: rgba(10,10,11,0.78) +--danger: #d4655c refined red +--danger-hover: #c0473d +/* new */ +--accent-deep: #2f6b4d muted prompt / subtle ring +--amber: #c9a14e secondary terminal color (warnings/steps) +--shadow: rgba(0,0,0,0.5) +--vignette: color-mix(in srgb, var(--bg-primary) 55%, #000) +--grain-blend: soft-light +--grain-opacity:0.05 +``` + +### Light ("paper terminal") +``` +--bg-primary: #fafaf8 warm off-white (was stark #ffffff) +--bg-secondary: #ffffff +--bg-tertiary: #f3f3f0 +--bg-hover: #ecece7 +--text-primary: #18181b +--text-secondary:#5b5b60 +--text-muted: #909095 +--accent: #1c7d52 deep green, AA on light +--accent-hover: #176343 +--accent-glow: rgba(28,125,82,0.08) +--border: #e7e7e2 +--border-hover: #d6d6cf +--code-bg: #f3f3f0 +--header-bg: rgba(250,250,248,0.78) +--danger: #c0473d +--danger-hover: #a83a31 +/* new */ +--accent-deep: #cde7d9 +--amber: #946a1a +--shadow: rgba(20,20,30,0.10) +--vignette: transparent +--grain-blend: multiply +--grain-opacity:0.035 +``` + +## 3. Typography — fully monospace + +- **Family:** Geist Mono (primary) → JetBrains Mono (fallback, already loaded) → system mono. + Add a `--font-mono` token; set it as the global body font. +- **Loading:** In `src/app.html`, replace the `Outfit` Google Fonts request with `Geist Mono` + (weights 400/500/600). Keep `JetBrains Mono`. Outfit is removed entirely. +- **Hierarchy comes from size / weight / color / case** (one family, no font-switching): + +| Role | Size | Weight | Tracking | Notes | +|------|------|--------|----------|-------| +| Display (h1) | clamp(2.3rem, 4.6vw, 3.7rem) | 500 | -0.04em | line-height 1.04 | +| h2 | 1.7rem | 500 | -0.025em | | +| h3 | ~1rem | 500 | -0.01em | | +| Body | 0.94rem | 400 | — | line-height 1.7, max-width ≤ 54–62ch | +| Label / eyebrow | 0.72–0.8rem | 400/500 | 0.02–0.1em | often lowercase or `#`/`>`-prefixed, uppercase for footer col heads | + +**Fully-mono readability guardrails (hard rules):** body line-height ≥ 1.7; text measure ≤ 62ch; +body size ≥ 15px (0.94rem). These keep mono prose comfortable. + +## 4. Texture, depth & motion + +- **Film grain:** fixed full-viewport SVG fractal-noise overlay (`body::after`), `mix-blend-mode` + and opacity per `--grain-blend` / `--grain-opacity`. This is the primary "texture." Add to the + layout shell. +- **Vignette:** subtle radial darkening at page edges in dark mode only (`--vignette`); transparent + in light. +- **Grid:** faint graph-paper grid behind the hero only, radial-masked, ~0.4 opacity. Not site-wide. +- **Depth:** hairline 1px borders + soft low shadows (`--shadow`). No large lifts, no neon. +- **Motion:** 150–250ms ease-out. Hover = border brightens + faint `--accent-glow` ring + ≤1px + nudge. One on-scroll reveal (fade + 8px rise, once). Hero terminal auto-types. **All motion + (typing, reveals, caret) disabled under `prefers-reduced-motion`** — terminal renders final state. + +## 5. Component / file changes + +Project uses **pure CSS + scoped ` diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index eae3694..d7a26df 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -42,67 +42,46 @@
-
-
-
-
-
-
+
-

- Fresh Mac? Don't spend 3 hours setting it up -

-

- One command installs Git, Node, Docker, VS Code, shell config, dotfiles—everything you'd normally spend your first day installing. Then snapshot your setup and share it with your team so they get the same thing. -

- -
-
- - - - Installs Homebrew packages, apps, configures shell + macOS preferences -
-
- - - - Snapshot your current Mac and recreate it on another machine -
-
- - - - Share your exact setup with teammates via a one-line install URL -
-
+

# macOS bootstrap, automated

+

+ Fresh Mac?
Set it up in
one command. +

+

+ One command installs Git, Node, Docker, VS Code, shell config, dotfiles—everything you'd normally spend your first day installing. Then snapshot your setup and share it with your team so they get the same thing. +

+ +
    +
  • Installs Homebrew packages, apps, configures shell + macOS preferences
  • +
  • Snapshot your current Mac and recreate it on another machine
  • +
  • Share your exact setup with teammates via a one-line install URL
  • +
-
-
-
$
- curl -fsSL openboot.dev/install.sh | bash - -
+
+ $ + curl -fsSL openboot.dev/install.sh | bash +

Have Homebrew? brew install openbootdotdev/tap/openboot

+
-
@@ -112,7 +91,7 @@
- openboot + openboot — install
@@ -124,41 +103,30 @@
-

How It Works

-

One command, a few picks, done in under 30 minutes.

+

> how it works

+

One command, a few picks, done in under 30 minutes.

-
-
-
-
-
- 1 -
-

Run one command

-

Paste the curl command into your terminal. If Homebrew isn't installed, it sets that up too — Xcode tools and all. Then the package picker opens.

-
-
-
- 2 -
-

Pick your tools

-

A terminal menu opens. Start from a preset or go package by package — toggle what you want, confirm, and you're done choosing.

-
-
-
- 3 -
-

Everything installs itself

-

Packages download, shell gets configured, dotfiles get linked, macOS preferences get applied. It runs unattended — no babysitting needed.

-
-
-
- 4 -
-

Open a new terminal

-

Your tools are there, aliases work, shell config is live. Everything that used to take a full day is already done.

-
+
+
+
01
+

Run one command

+

Paste the curl command into your terminal. If Homebrew isn't installed, it sets that up too — Xcode tools and all. Then the package picker opens.

+
+
+
02
+

Pick your tools

+

A terminal menu opens. Start from a preset or go package by package — toggle what you want, confirm, and you're done choosing.

+
+
+
03
+

Everything installs itself

+

Packages download, shell gets configured, dotfiles get linked, macOS preferences get applied. It runs unattended — no babysitting needed.

+
+
+
04
+

Open a new terminal

+

Your tools are there, aliases work, shell config is live. Everything that used to take a full day is already done.

@@ -167,291 +135,180 @@
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 9f0bac8..ffbfd7b 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -386,7 +386,7 @@ .reading-progress { position: fixed; - top: 49px; + top: 56px; left: 0; height: 2px; background: var(--accent); @@ -435,8 +435,8 @@ .docs-layout { display: flex; - margin-top: 49px; - min-height: calc(100vh - 49px); + margin-top: 56px; + min-height: calc(100vh - 56px); } /* ── Left Sidebar ─────────────────────────────────── */ @@ -448,8 +448,8 @@ border-right: 1px solid var(--border); padding: 28px 0; position: sticky; - top: 49px; - height: calc(100vh - 49px); + top: 56px; + height: calc(100vh - 56px); overflow-y: auto; display: flex; flex-direction: column; @@ -557,8 +557,8 @@ width: 220px; flex-shrink: 0; position: sticky; - top: 49px; - height: calc(100vh - 49px); + top: 56px; + height: calc(100vh - 56px); overflow-y: auto; padding: 32px 16px 32px 0; border-left: 1px solid var(--border); @@ -644,21 +644,21 @@ right: 20px; z-index: 90; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; - border-radius: 12px; + border-radius: 10px; padding: 12px 18px; font-size: 0.85rem; - font-weight: 600; + font-weight: 500; font-family: inherit; cursor: pointer; align-items: center; gap: 8px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 197, 94, 0.2); - transition: transform 0.2s; + box-shadow: 0 4px 20px var(--shadow); + transition: box-shadow 0.2s; } - .mobile-menu-btn:hover { transform: scale(1.05); } + .mobile-menu-btn:hover { box-shadow: 0 0 0 3px var(--accent-glow); } /* ── Mobile TOC Button ────────────────────────────── */ @@ -815,12 +815,12 @@ /* ── Prose ─────────────────────────────────────────── */ .prose :global(h1) { - font-size: 2rem; - font-weight: 800; - letter-spacing: -0.03em; + font-size: 1.9rem; + font-weight: 600; + letter-spacing: -0.035em; margin-bottom: 12px; color: var(--text-primary); - line-height: 1.2; + line-height: 1.15; } .prose :global(h1 + p) { @@ -831,9 +831,9 @@ } .prose :global(h2) { - font-size: 1.35rem; - font-weight: 700; - letter-spacing: -0.02em; + font-size: 1.3rem; + font-weight: 600; + letter-spacing: -0.025em; margin-top: 48px; margin-bottom: 16px; color: var(--text-primary); @@ -992,7 +992,7 @@ @media (max-width: 860px) { .sidebar { position: fixed; - top: 49px; + top: 56px; left: 0; bottom: 0; z-index: 80; diff --git a/src/routes/explore/+page.svelte b/src/routes/explore/+page.svelte index a8e3f35..73149f5 100644 --- a/src/routes/explore/+page.svelte +++ b/src/routes/explore/+page.svelte @@ -111,40 +111,30 @@
-
- - - - - - - -
-
-

Explore

-

Discover developer configurations shared by the community

- {#if total > 0} -

{total} public configurations shared by developers like you

- {/if} -
-
- - -
+

> explore

+

Community configurations

+

+ Developer setups shared by the community{#if total > 0} — {total} public {total === 1 ? 'config' : 'configs'} and counting{/if}. +

+
+
+ + +
{#if loading && configs.length === 0} @@ -198,17 +188,11 @@ /> @{config.username} {#if config.username === 'openboot'} - - - Official - + [official] {/if}
{#if config.featured === 1} - - - Featured - + [featured] {/if}

{config.name}

@@ -268,122 +252,74 @@ .page { min-height: 100vh; position: relative; - overflow: hidden; - } - - .page-bg { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--bg-primary); - z-index: -2; - } - - .noise { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: -1; } .container { - max-width: 1400px; + max-width: 1160px; margin: 0 auto; - padding: 0 24px; + padding: 0 36px; position: relative; } .hero { - padding: 80px 0 60px; - position: relative; + padding: 104px 0 56px; display: flex; - flex-direction: column; - align-items: center; - text-align: center; + justify-content: space-between; + align-items: flex-end; + gap: 32px; + flex-wrap: wrap; } - .hero-bg { - position: absolute; - top: -100px; - left: 50%; - transform: translateX(-50%); - width: 1200px; - height: 600px; - background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); - pointer-events: none; - z-index: -1; - } - - .hero::before { - content: ''; - position: absolute; - inset: -60px -200px; - background-image: - repeating-linear-gradient(0deg, transparent 0px, transparent 39px, color-mix(in srgb, var(--text-primary) 8%, transparent) 39px, transparent 40px), - repeating-linear-gradient(90deg, transparent 0px, transparent 39px, color-mix(in srgb, var(--text-primary) 8%, transparent) 39px, transparent 40px); - mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); - -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); - pointer-events: none; - z-index: -1; + .hero-prompt { + color: var(--text-muted); + font-size: 0.85rem; + letter-spacing: 0.01em; + margin: 0 0 16px; } - .hero-content { - margin-bottom: 32px; + .hero-prompt .accent { + color: var(--accent); } .hero-title { - font-size: 3.5rem; - font-weight: 800; - letter-spacing: -0.04em; - background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - text-fill-color: transparent; - margin-bottom: 12px; + font-size: 1.9rem; + font-weight: 500; + letter-spacing: -0.025em; + color: var(--text-primary); + margin: 0 0 12px; } .hero-subtitle { - font-size: 1.1rem; - color: var(--text-secondary); - margin-bottom: 8px; - } - - .hero-count { - font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; - color: var(--text-muted); + color: var(--text-secondary); + margin: 0; + max-width: 60ch; + line-height: 1.6; } .sort-controls { display: flex; align-items: center; - gap: 12px; + gap: 10px; } .sort-label { - font-size: 0.9rem; - color: var(--text-secondary); - font-weight: 500; + font-size: 0.8rem; + color: var(--text-muted); } .sort-select { - padding: 10px 16px; - padding-right: 36px; + padding: 9px 34px 9px 13px; background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 10px; + border: 1px solid var(--border-hover); + border-radius: 8px; color: var(--text-primary); - font-size: 0.9rem; - font-weight: 500; + font-size: 0.82rem; font-family: inherit; cursor: pointer; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition: + border-color 0.18s ease, + box-shadow 0.18s ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; @@ -393,8 +329,7 @@ } .sort-select:hover { - border-color: var(--accent); - background-color: var(--bg-tertiary); + border-color: var(--accent-deep); } .sort-select:focus { @@ -411,7 +346,7 @@ .configs-grid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 20px; + gap: 16px; margin-bottom: 60px; } @@ -509,53 +444,58 @@ } .empty-title { - font-size: 1.75rem; - font-weight: 700; + font-size: 1.4rem; + font-weight: 500; margin-bottom: 12px; color: var(--text-primary); + letter-spacing: -0.02em; } .empty-desc { - font-size: 1.05rem; + font-size: 0.9rem; color: var(--text-secondary); - margin-bottom: 32px; + margin-bottom: 28px; } .empty-desc code { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-mono); background: var(--bg-tertiary); + border: 1px solid var(--border); padding: 3px 10px; border-radius: 6px; color: var(--accent); - font-size: 0.95rem; + font-size: 0.85rem; } .empty-cta { display: inline-block; - padding: 14px 32px; + padding: 13px 28px; background: var(--accent); - color: #000; + color: var(--bg-primary); text-decoration: none; - border-radius: 10px; - font-weight: 600; - font-size: 0.95rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 9px; + font-weight: 500; + font-size: 0.88rem; + transition: + background 0.18s ease, + box-shadow 0.18s ease; } .empty-cta:hover { background: var(--accent-hover); - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3); + box-shadow: 0 0 0 3px var(--accent-glow); } .config-card { background: var(--bg-secondary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 12px; padding: 20px; text-decoration: none; color: inherit; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: + border-color 0.18s ease, + box-shadow 0.18s ease; display: flex; flex-direction: column; gap: 12px; @@ -568,23 +508,18 @@ top: 0; left: 0; right: 0; - height: 3px; + height: 2px; background: var(--card-color); - transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0.8; } .config-card:hover { - transform: translateY(-6px); - box-shadow: 0 0 30px color-mix(in srgb, var(--card-color) 20%, transparent); - background: color-mix(in srgb, var(--bg-secondary) 95%, var(--card-color) 5%); - } - - .config-card:hover .card-accent { - height: 4px; + border-color: var(--border-hover); + box-shadow: 0 0 0 1px var(--accent-glow), 0 14px 40px -22px var(--shadow); } .config-card:hover .config-name { - color: var(--card-color); + color: var(--accent); } .config-card:hover .install-preview { @@ -606,59 +541,45 @@ } .avatar { - width: 28px; - height: 28px; + width: 26px; + height: 26px; border-radius: 50%; - border: 2px solid var(--card-color); + border: 1px solid var(--border-hover); } .username { - font-size: 0.85rem; + font-size: 0.82rem; color: var(--text-muted); - font-weight: 500; + } + + .official-badge, + .featured-badge { + font-size: 0.72rem; + letter-spacing: 0.01em; } .official-badge { - display: inline-flex; - align-items: center; - gap: 3px; - padding: 2px 6px; - background: color-mix(in srgb, #3b82f6 15%, transparent); - color: #3b82f6; - border-radius: 4px; - font-size: 0.65rem; - font-weight: 600; - letter-spacing: 0.02em; - text-transform: uppercase; + color: var(--text-secondary); margin-left: 4px; } .featured-badge { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 8px; - background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); - border-radius: 6px; - font-size: 0.7rem; - font-weight: 600; - letter-spacing: 0.02em; - text-transform: uppercase; } .config-name { - font-size: 1.1rem; - font-weight: 600; + font-size: 1rem; + font-weight: 500; color: var(--text-primary); margin: 0; - transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + letter-spacing: -0.01em; + transition: color 0.18s ease; } .config-description { - font-size: 0.85rem; + font-size: 0.82rem; color: var(--text-secondary); - line-height: 1.5; + line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; @@ -668,10 +589,10 @@ .card-footer { display: flex; - gap: 12px; + gap: 14px; align-items: center; margin-top: auto; - padding-top: 12px; + padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } @@ -680,12 +601,12 @@ display: flex; align-items: center; gap: 6px; - font-size: 0.8rem; + font-size: 0.78rem; color: var(--text-secondary); } .stat.packages { - font-family: 'JetBrains Mono', monospace; + color: var(--accent); font-size: 0.75rem; } @@ -698,15 +619,19 @@ max-height: 0; opacity: 0; overflow: hidden; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: + max-height 0.25s ease, + opacity 0.25s ease, + margin-top 0.25s ease; padding: 0 12px; - background: var(--code-bg); + background: var(--bg-tertiary); + border: 1px solid var(--border); border-radius: 8px; } .install-preview code { - font-family: 'JetBrains Mono', monospace; - font-size: 0.75rem; + font-family: var(--font-mono); + font-size: 0.74rem; color: var(--text-secondary); display: block; white-space: nowrap; @@ -716,8 +641,7 @@ } .install-preview .prompt { - color: var(--card-color); - font-weight: 700; + color: var(--accent); } .load-more-section { @@ -729,30 +653,27 @@ } .load-more-count { - font-size: 0.9rem; + font-size: 0.82rem; color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; } .load-more-btn { - padding: 14px 40px; - background: transparent; - border: 1px solid var(--border); - border-radius: 10px; + padding: 12px 32px; + background: var(--bg-secondary); + border: 1px solid var(--border-hover); + border-radius: 9px; color: var(--text-primary); - font-size: 0.95rem; - font-weight: 500; + font-size: 0.85rem; cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: + border-color 0.18s ease, + box-shadow 0.18s ease; font-family: inherit; } .load-more-btn:hover:not(:disabled) { - border-color: var(--accent); - background: var(--accent); - color: #000; - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2); + border-color: var(--accent-deep); + box-shadow: 0 0 0 3px var(--accent-glow); } .load-more-btn:disabled { @@ -762,20 +683,9 @@ .cta-banner { position: relative; - padding: 100px 0; - margin-top: 60px; - overflow: hidden; - } - - .cta-glow { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 800px; - height: 400px; - background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); - pointer-events: none; + padding: 80px 0; + margin-top: 40px; + border-top: 1px solid var(--border); } .cta-content { @@ -786,17 +696,17 @@ } .cta-title { - font-size: 2rem; - font-weight: 700; - margin-bottom: 16px; + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 14px; color: var(--text-primary); letter-spacing: -0.02em; } .cta-desc { - font-size: 1.05rem; + font-size: 0.9rem; color: var(--text-secondary); - margin-bottom: 32px; + margin-bottom: 28px; line-height: 1.6; } @@ -804,22 +714,23 @@ display: inline-flex; align-items: center; gap: 10px; - padding: 16px 36px; + padding: 13px 28px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; - border-radius: 10px; - font-size: 1rem; - font-weight: 600; + border-radius: 9px; + font-size: 0.88rem; + font-weight: 500; text-decoration: none; cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: + background 0.18s ease, + box-shadow 0.18s ease; } .cta-button:hover { background: var(--accent-hover); - transform: translateY(-3px); - box-shadow: 0 12px 32px rgba(34, 197, 94, 0.4); + box-shadow: 0 0 0 3px var(--accent-glow); } @media (max-width: 1200px) {