← Dev Skills
SphereIQ → Sphere Blog
Convert a SphereIQ "Sphere Quarterly" mockup into a site-styled /blogs article — a Payload record plus a code-owned bespoke layout, restyled to our brand (DM Sans / Lora, neutral gray, brand blue #1677ff, brand green #3bac52).
v1.0.0schema v1betagenerated: 2026-06-04from sha:
cd8f012manifest.jsonfull design system (cached 1h)version.jsontiny version blob (cached 5m)changelog.mdraw markdown changelogOnline sync
Changelog
# sphereiq-to-sphere-blog — changelog ## 1.0.0 — 2026-06-04 Initial release. Converts SphereIQ "Sphere Quarterly" mockups into site-styled `/blogs` articles — a Payload `posts` record (listing/SEO) plus a code-owned bespoke layout, restyled from the mockups' warm/per-issue palette to our brand. - **Pipeline** — a node generator scopes `sphere.css` under `.quarterly-scope`, strips the mockup's own topbar/footer, extracts BODY/STYLE/SCRIPT, and recolors the hero-particle RGB to brand blue + neutral ink. Per-article content module + one registry line; `/blogs/[slug]` renders any registered slug via `<QuarterlyArticle>`. - **Brand conversion** (`overrides.css`, shared across the batch) — DM Sans body / Lora serif / Geist Mono code; neutral gray paper/ink/line scale; brand-blue `#1677ff` accent (+ particles); brand-green `#3bac52` state colors; `--ink-4` darkened to `#74777f` so 10px meta labels read; bordered `*-sidebar` cards get a soft surface + defined outline. Brand purple `#7F71FB` documented as the reserved third brand color. - **Payload record** — `seed-quarterly-articles.ts` creates the posts records; the bespoke layout renders from code, so direct URLs work even before the record exists (the record is for the `/blogs` listing + sitemap). - **Validated** by porting the first batch: agent-ready-sites, self-rewriting-site, compliance-as-runtime.