Brand restyle: align docs with retask.work - #1
Conversation
Design for aligning docs.retask.work with the retask.work brand: blue palette (#2442AF), Plus Jakarta Sans, icon+wordmark+"Docs" logo, rebalanced heading scale, light visual polish. CSS/config/asset only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Six tasks: Plus Jakarta Sans, brand-blue palette, rebalanced heading scale, logo/favicon/theme-color, light polish + hero icon, and a light+dark verification pass. Gated by build + visual checks (repo has no content tests). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Rework landing page into a hero + LinkCard product grid - Top nav (Home, Pricing, Open app) via SocialIcons override; open in new tabs, no social icons - Outline the Retask Docs wordmark from Plus Jakarta Sans (no system-ui fallback) - Round, compact hero CTAs (solid primary + brand-outlined secondary), CF-docs sized - Denser sidebar with group separation; compact, balanced pagination - Brand-styled callouts, Expressive Code frames, and cards - Showcase asides/tabs/steps in getting-started (md -> mdx)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| @@ -0,0 +1,33 @@ | |||
| --- | |||
| /** | |||
| * Override of Starlight's SocialIcons to provide a Cloudflare-docs-style top nav. | |||
There was a problem hiding this comment.
Remove comments, we should not mention about other website or Starlight here.
There was a problem hiding this comment.
Removed. The comment no longer references Starlight or any other site — it now just describes the nav and the "Open app" CTA.
| } | ||
|
|
||
| /* ========================================================================= | ||
| Cloudflare-docs-inspired layer (Retask-branded) |
There was a problem hiding this comment.
Check and no mention about Cloudflare docs
There was a problem hiding this comment.
Done — swept the whole file. All "Cloudflare" mentions in comments are gone (this section header is now "Layout & component polish"). The only remaining "Starlight" strings are the .starlight-aside* selectors (the framework's actual rendered class names, kept because renaming them would break the callout styling) and the required @astrojs/starlight import.
Summary
Restyles the docs (
docs.retask.work) to match the retask.work brand and adds a Cloudflare-docs-inspired layout layer. All changes are presentation only — no CLI reference pages or generation scripts are touched (cli-reference-freshCI stays green;scripts/tests unaffected).Brand alignment
#035A4B→ brand blue#2442AF, mapped to Starlight's accent vars for light and dark.theme-color.5xl/42px → 2rem) and gave the hero its own clamp.Layout polish (Cloudflare-docs-inspired, Retask-branded)
SocialIconscomponent override; denser sidebar with uppercase group labels and a brand-tinted active pill.Verification
yarn build✓ andyarn test(7/7) ✓ at each step.git diffconfirms zero changes undersrc/content/docs/cli/reference/orscripts/.Design docs
docs/superpowers/specs/2026-06-22-retask-docs-restyle-design.mddocs/superpowers/plans/2026-06-22-retask-docs-restyle.md🤖 Generated with Claude Code