refactor(website): cut the stock patterns out of the design

Audited against the AI-design catalog. The world stays — the terminal
aesthetic, the oxide accent, IBM Plex Mono are all chosen, and the audit
cleared them. What went is the handful of defaults that had crept in
underneath it.

Eight feature cards at identical weight said every feature mattered equally.
Search is what the client is for, so it takes a double-width cell and the
grid drops to three up; eight cards plus that one double still comes out
square.

Each glyph sat in a 34px bordered square — the stock icon-in-a-chip
treatment that ships with every component library. The glyphs are the real
TUI's, so they now sit inline like the prompt markers they are.

Callouts lose the coloured left rule. The catalog puts it plainly: a
coloured left border is about as reliable a sign of generated design as an
em-dash is in prose. The tone already lives in the label, which was saying
the same thing twice.

Thirteen arrow glyphs were typed into labels and link text. The
leaving-the-site mark belongs to the control, not the copy, so Button draws
it once, aria-hidden, and only when the link actually leaves. The "read
more" arrows on internal links were pure flourish and are gone.

The hero also drops "blazingly fast Rust", which TONE-OF-VOICE.md lists
under banned, no exceptions.
This commit is contained in:
Michel de Graaf
2026-07-25 00:54:49 +02:00
parent 310149c718
commit 1eef464677
8 changed files with 48 additions and 24 deletions
+13 -7
View File
@@ -117,8 +117,7 @@ export const Home = () => {
</div>
<p className="text-lg leading-[29px] text-pretty text-secondary max-md:hidden">
Search the network, share your files, browse someone&rsquo;s collection, join
a room. It runs over ssh on the machine where your music already lives, and
it&rsquo;s blazingly fast Rust 🦀.
a room. It runs over ssh on the machine where your music already lives.
</p>
<div className="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 sm:gap-y-4">
<div className="flex flex-wrap items-center gap-2 max-md:w-full max-md:justify-center sm:gap-3">
@@ -126,7 +125,7 @@ export const Home = () => {
Install
</Button>
<Button href="/docs">Read the docs</Button>
<Button href={LINKS.gh}>GitHub ↗</Button>
<Button href={LINKS.gh}>GitHub</Button>
</div>
<CommandPill text="cargo install soulseek-rs" />
</div>
@@ -206,7 +205,7 @@ export const Home = () => {
Reach for <Code>soulseek-rs-lib</Code> to build a custom client or an agent
on the protocol directly.{' '}
<Link to="/install" className="text-link hover:text-link-hover">
Use the library →
Use the library
</Link>
</p>
</Callout>
@@ -217,7 +216,7 @@ export const Home = () => {
<Code>message</Code>, <Code>portmap</Code>. Point cron, a script, or an
agent at them and read the output back. No daemon, no API to stand up.{' '}
<Link to="/docs" className="text-link hover:text-link-hover">
See the commands →
See the commands
</Link>
</p>
</Callout>
@@ -231,14 +230,21 @@ export const Home = () => {
shell, so the same client works for scripting, cron jobs, and agents driving it
programmatically.
</SectionHead>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{FEATURES.map((feature) => (
{/*
Three up, not four, with search spanning two of them: it's the thing
the client is for, and eight cards at identical weight said the
opposite. Eight items plus that one double = nine cells, so the grid
still comes out square.
*/}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{FEATURES.map((feature, i) => (
<FeatureCard
key={feature.title}
glyph={feature.glyph}
color={feature.color}
title={feature.title}
cmd={feature.cmd}
className={i === 0 ? 'lg:col-span-2' : ''}
>
{feature.body}
</FeatureCard>