Skip to content

Apply the Stellar Design System to /launch/usdt0 - #2919

Open
mmazco wants to merge 1 commit into
stellar:mainfrom
mmazco:usdt0-sds
Open

mmazco wants to merge 1 commit into
stellar:mainfrom
mmazco:usdt0-sds

Conversation

@mmazco

@mmazco mmazco commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Applies the Stellar Design System to /launch/usdt0, and swaps the social card to match. No content changes — the page renders the same 263 lines of text as main, apart from one emoji the design system does not allow as an icon.

What changes

  • Consumes @stellar/design-system v4 instead of the page's own hand-picked palette. Every colour in the page CSS resolves to an --sds-* token: no hex, no rgb(), no colour keywords
  • Lilac becomes the interactive colour — links, hovers, focus rings, nav state. Gold is retired
  • Inter and Inconsolata, the two faces SDS specifies. Both self-hosted, so the page still makes no third-party font request. The IBM Plex Mono files are removed as they are now unused
  • The hand-built dark palette is gone; SDS owns both themes via .sds-theme-light / .sds-theme-dark, bridged to the page's existing toggle
  • usdt0-og.png replaced with a lilac card at the same filename and dimensions, so existing shares pick it up as caches expire

On the colour

--sds-clr-gold-09 is #fdda24 — the exact yellow this page already used, so the accent was always on-system. What changed is its role. The skill reserves gold as an accent, makes lilac primary interactive, and warns against carrying stellar.org's marketing style onto product surfaces. Beside the docs, the Lab and skills, lilac is what makes this page look like it belongs.

Two things to flag rather than have found

SDS components are not adopted. Step 1 of the skill asks for SDS components before custom ones. This is a token-level restyle: the page keeps its own components and only resolves their colours and fonts to SDS variables. There is no SDS Button, Card or Badge here. For a bespoke landing page that seems a reasonable exception, but it is a deviation and worth naming.

The structured data is still generated outside this repo, which is the same objection raised on #2856. Nothing here improves it — the page is produced by a script that does not live in this repository, so the FAQPage and TechArticle blocks remain a second copy with no in-repo generator. It stays the strongest argument for porting the page to src/pages/launch/usdt0/index.tsx, where SDS tokens would also be considerably easier to apply.

Worth knowing for other surfaces

The skill's dark-mode instruction is wrong for v4. It says to set data-theme="dark" on <html>; the shipped stylesheet uses .sds-theme-light / .sds-theme-dark classes and contains zero data-theme selectors. Following it gives a theme toggle that silently does nothing.

Checked

  • Zero colour values outside tokens
  • Inter + Inconsolata verified loading via document.fonts.check, not merely declared
  • Both themes readable; toggle verified switching
  • Contrast: 0 failures across 118 visible elements in both themes
  • One h1, no heading skips; addresses in monospace with copy affordances
  • No horizontal overflow at 375px

After merge

The card needs a re-scrape so existing shares refresh: X Card Validator and LinkedIn Post Inspector.

🤖 Generated with Claude Code

Consumes @stellar/design-system v4 rather than the page's own hand-picked
palette. Every colour in the page CSS now resolves to an --sds-* token:
no hex, no rgb(), no colour keywords.

Lilac becomes the interactive colour - links, hovers, focus rings, nav
state - and gold is retired from the page. The skill reserves gold as an
accent and makes lilac primary, and warns against carrying stellar.org's
marketing style onto product surfaces. On a page sitting beside the docs,
the Lab and skills, lilac is what makes it look like it belongs.

Typography moves to Inter and Inconsolata, the two faces SDS specifies.
Both are self-hosted, so the page still makes no third-party font request;
the IBM Plex Mono files are removed as they are now unused.

The hand-built dark palette is gone. SDS owns both themes through
.sds-theme-light and .sds-theme-dark, bridged to the page's existing
toggle. Note the skill's instruction to set data-theme is wrong for v4,
which ships theme classes and no data-theme selectors at all.

The social card is replaced with a lilac version at the same filename and
dimensions, so existing shares pick it up as caches expire.

No content changes: the page renders the same 263 lines of text as main,
apart from an emoji the design system does not allow as an icon.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@github-actions github-actions Bot added the preview Preview builds for PRs by SDF employees. label Oct 15, 2026
@github-actions

Copy link
Copy Markdown
Contributor

@stellar-triage-bot

Copy link
Copy Markdown
Contributor

🤖 Automated message from the Stellar Triage Bot.

Hi @mmazco, thanks for this PR. I saw it, but nobody asked me to review it, so I will not touch it.

How to reach me:

  • Anyone with write permission can call me in with a /triage comment or the bot:take label.
  • You, as the PR author, can send me away with /triage stop. People with write permission can also add the bot:hands-off label.
  • A review request to a maintainer does not call me in. It asks for their judgment.

@kaankacar

Copy link
Copy Markdown
Contributor

/triage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview Preview builds for PRs by SDF employees.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants