Skip to content

Brand restyle: align docs with retask.work - #1

Merged
hoaitan merged 14 commits into
mainfrom
restyle-docs-brand
Jun 22, 2026
Merged

Brand restyle: align docs with retask.work#1
hoaitan merged 14 commits into
mainfrom
restyle-docs-brand

Conversation

@hoaitan

@hoaitan hoaitan commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

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-fresh CI stays green; scripts/ tests unaffected).

Brand alignment

  • Typeface: Inter → Plus Jakarta Sans (matches the marketing site).
  • Palette: stale green #035A4Bbrand blue #2442AF, mapped to Starlight's accent vars for light and dark.
  • Logo: old green text wordmark → shuffle icon + "Retask" + muted "Docs" lockup, with light/dark variants (wordmark as outlined Jakarta paths; dark variant recolors the icon so it reads on dark). New brand favicon + theme-color.
  • Type scale: rebalanced oversized headings (5xl/42px → 2rem) and gave the hero its own clamp.

Layout polish (Cloudflare-docs-inspired, Retask-branded)

  • Top nav via a SocialIcons component override; denser sidebar with uppercase group labels and a brand-tinted active pill.
  • Branded buttons (pill CTAs), cards/LinkCards with hover lift, callouts/asides, and framed Expressive Code blocks (brand light/dark themes).
  • Expanded homepage with a hero icon, "Explore the product" LinkCard grid, and tightened section rhythm.

Verification

  • yarn build ✓ and yarn test (7/7) ✓ at each step.
  • Light + dark reviewed via headless-Chrome screenshots (home + guide).
  • git diff confirms zero changes under src/content/docs/cli/reference/ or scripts/.

Design docs

  • Spec: docs/superpowers/specs/2026-06-22-retask-docs-restyle-design.md
  • Plan: docs/superpowers/plans/2026-06-22-retask-docs-restyle.md

🤖 Generated with Claude Code

hoaitan and others added 12 commits June 22, 2026 15:09
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>
Comment thread src/components/SocialIcons.astro Outdated
@@ -0,0 +1,33 @@
---
/**
* Override of Starlight's SocialIcons to provide a Cloudflare-docs-style top nav.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove comments, we should not mention about other website or Starlight here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed. The comment no longer references Starlight or any other site — it now just describes the nav and the "Open app" CTA.

Comment thread src/styles/brand.css Outdated
}

/* =========================================================================
Cloudflare-docs-inspired layer (Retask-branded)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check and no mention about Cloudflare docs

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@hoaitan
hoaitan merged commit cc743e4 into main Jun 22, 2026
@hoaitan
hoaitan deleted the restyle-docs-brand branch June 22, 2026 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant