design: adopt outshift-style design tokens, fonts, and key page restyle#4
Open
dhve wants to merge 4 commits into
Open
design: adopt outshift-style design tokens, fonts, and key page restyle#4dhve wants to merge 4 commits into
dhve wants to merge 4 commits into
Conversation
added 3 commits
June 20, 2026 18:39
…ge restyle Restyles host39's frontend toward the ai-catalog.outshift.io visual language - cool blue Cisco-inspired palette, Inter sans throughout, soft blue-tinted card shadows on an 8px radius. * globals.css: replace warm-cream tokens with full Outshift token set (colors / fonts / radii / shadows), expose them to Tailwind v4 via @theme inline {}, keep legacy --page-bg/--panel/--border/--text /--muted/--soft as aliases so unswept components don't break. * layout.tsx: load Inter via next/font/google. * Header / PageShell / Footer: brand-tile + Inter wordmark + ink-weak subtitle, drop serif italic display, drop uppercase tracked nav. * Landing / list pages: shared Card pattern, new pill / button / input shapes, semantic accent mapping for status pills. No route, data, or behavior changes.
Pixel-faithful pass: replaces my custom --color-bg/--color-fg-*/
--color-border/--color-primary* with outshift's actual names from
their CSS bundle (--color-surface/--color-ink-{strong,medium,weak}/
--color-line/--color-brand-{200,300,500,600,700,800}/
--color-accent-teal/--color-surface-tag). Old names kept as aliases
so unswept code still resolves.
Header swapped to outshift's bg-surface-light / 60px / "powered by"
subtitle pattern. Page headings use font-display text-2xl
font-bold text-ink-strong leading-tight (24px/700) to match
outshift's "Explore" treatment. Cards refactored to <article>
with the exact outshift class string. Inputs and secondary buttons
use border-2 border-line bg-surface-light. Tag pills use
bg-surface-tag rounded-full px-2.5 py-0.5 text-xs font-semibold.
…d + pagination Replaces the home page with a pixel-faithful clone of ai-catalog.outshift.io's Explore browse: "Explore" h2 heading, lg:w-64 left filter sidebar (SEARCH + checkbox sections + tags) on bg-surface-strong, grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 of <article> cards using outshift's exact class string, and the pagination nav (rounded-full pills for page numbers, border-2 secondary buttons for Previous/Next). Cards populated with 12 seed cards so the page renders end-to-end without a backend. SEARCH + checkbox filters work client-side. Header gets a "12 + cards hosted" counter on the right matching outshift's "X AI cards indexed" chip. Prior marketing content moved to /about so it remains reachable.
dhve
force-pushed
the
design/outshift-style
branch
from
7c5ada8 to
5d7fece
Compare
Drops the local SEED array. Home page now fetches via the new listPublicCards helper in web/src/lib/api.ts against NEXT_PUBLIC_HOST39_CARDS_URL (defaults to the production https://agentcards.host39.org for dev). Maps each real catalog entry to the outshift card shape; sidebar IDENTITY, STATUS and TAGS sections derive their options from the live data. Loading state shows 6 skeleton cards; empty and error states render a single centered status card with no fake fallback content.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pixel-faithful clone of ai-catalog.outshift.io applied to the host39 frontend, populated with the real public agent cards served by this repo's own API.
Four commits:
design(host39)- swap warm-cream tokens for outshift's palette inglobals.css, load Inter vianext/font/google, drop serif-italic display. Sweep Header / Footer / PageShell, marketing/,/login,/dashboard, and both card-wizard pages. The load-bearing Business vs Personal semantic split (originally indigo/violet) is remapped to primary blue vs accent teal, plus a microcaps text label on the IdentityBadge for colorblind safety.refactor- rename tokens to outshift's exact names. Update component class strings to outshift's idiom. Old names kept as aliases.feat(home): clone- rewrite/as a clone of outshift's Explore page: heading + filter sidebar (SEARCH, IDENTITY Business/Personal, STATUS, TAGS) + 3-column grid of<article>cards + pagination. Previous marketing content moved to/about; header nav updated to Explore / About / Dashboard.feat(home): wire- drop the local seed array. Home page now fetches real public cards via a newlistPublicCardshelper inweb/src/lib/api.tsagainstNEXT_PUBLIC_HOST39_CARDS_URL(defaults to the productionhttps://agentcards.host39.orgfor dev). Maps each public card to the outshift card shape (name ={domain}/{slug}or{handle}/{name}, identity =business/personal-> primary or accent badge, tags from card data). Sidebar IDENTITY / STATUS / TAGS derive options from live data. Loading state shows 6 skeleton cards; empty and error states render a single centered status card with no fake fallback.Design tokens (outshift-exact)
--color-surface#f5f8fd,--color-surface-light#fbfcfe,--color-surface-strong#eff3fc,--color-surface-tag#e3eafa--color-ink#3c4551,--color-ink-strong#00142b,--color-ink-medium#59616b,--color-ink-weak#777d85--color-line#d5dff7,--color-line-strong#c8d5f5--color-brand-500#187adc (primary / Business),--color-brand-800#0d274d (brand tile)--color-accent-teal#dff1f5,--color-accent-teal-ink#0f6e85 (Personal)--radius-card8px,--radius-control4px--font-sansInter vianext/font/googleTest plan
cd web && npm install && npm run buildpasses locally.npm run dev, open/, confirm real public cards fromhttps://agentcards.host39.orgrender (moonbakery.com/orders, personal/sara/card, personal/ankit-dev/agent, ...)./login(Business / Personal),/dashboard,/dashboard/cards/new,/dashboard/cards/[id]./aboutstill loads the previous marketing content.Out of scope
application/a2a-agent-card+jsonby the Fastify backend; not Next.js pages).