mirror of
https://github.com/docker/docker-agent.git
synced 2026-11-04 10:02:15 +00:00
David Gageot
7aae80c1ed
Bring the docs site in line with Docker's official design system and
rewrite the homepage so first-time visitors can answer "what is this
and why should I care?" in under 30 seconds.
No application/runtime code is touched — every change is in `docs/`.
## Branding
* **Fonts** — switch from Inter / JetBrains Mono to **Roboto Flex**
(the variable-axis sans docs.docker.com self-hosts) and **Roboto
Mono**. Both pulled from Google Fonts.
* **Color tokens** — introduce a structured palette of named tokens
derived from the official brand kit (Docker-Logos-1.zip):
--blue-100..700 anchored on Ocean Blue `#2560FF`
--navy-900..600 anchored on Deep Blue `#00153C`
--gray-100..900 lifted verbatim from docs.docker.com (#E7EAEF,
#C8CFDA, …, #1E2129) so chrome feels like the same family.
* **Dark theme** matches docs.docker.com: neutral charcoal page bg
`#10151B`, sidebar/cards `#1E2129`, body text `#C8CFDA`, headings
white, links `#4B83F1`. Brand navy is reserved for the hero, the
primary button and the info-callout dark backgrounds.
* **Light theme** also calibrated to docs.docker.com: page+sidebar+
main on the same `#E7EAEF` (gray-100) surface (matches their
footer / navbar-active), cards on white, headings `#1F242D`,
body copy `#3F4750` (their `oklch(37.3% .034 259.733)`).
* **Moby mark** — the hand-authored whale SVG didn't match Docker's
official asset (it was missing the eight containers stacked on the
whale's back). Ship the actual `docker-mark-ocean-blue.svg` from
the brand kit instead, plus a white variant for dark backgrounds.
* **Callouts** — redesigned in docs.docker.com style: rounded panel
with a filled circular icon badge in the top-left and a strong
title row. `info`, `tip` and `warning` now match the same exact
background colors docs.docker.com uses in dark mode (`#00153C`,
`#11371A`, `#643700`).
* **Header** — Docker Agent wordmark + Moby mark, left-aligned at the
page padding edge so it doesn't drift on wide monitors.
* **Sidebar** — value tagline at the top ("Run AI agents like
containers."), nav links at 16px / weight 400 (was 13.2px), pure
white sidebar text on dark mode for higher contrast.
* **Right-column TOC** — restyled like docs.docker.com:
"Edit this page" link with pencil icon at the top, pointing at
GitHub's web editor (resolved at build time via `<meta
name="docs-edit-url">` and `{{ page.path }}`).
"Table of contents" heading at `1.05rem` weight 500 (was a tiny
uppercase eyebrow).
Links at `.875rem`, gray-600 / gray-100, with a 2px gray-300
left-border + weight 500 on the active entry.
* **Ecosystem footer** — three-column footer with links to Docker
Desktop, Hub, Scout, Build Cloud, docs.docker.com, the agent
catalog on Hub, the Docker blog, status, terms and privacy.
* **Page chrome** — light-theme code blocks honor the theme (warm
`#F6F8FA` + matching syntax palette); footer is moved out of
`<main>` so it isn't part of the ARIA `main` landmark; skip-link
target gets `scroll-margin-top` so keyboard users land below the
header.
## Messaging
* **Hero** leads with the docker-run analogy:
> **Docker Agent is to AI agents what `docker run` is to containers.**
> Define an agent in a YAML file, run it with one command, share it
> through any OCI registry — the same workflow you already use for
> images.
* **Demo GIF** moved above the fold so the TUI is visible without
scrolling.
* **30-second elevator panel** — four cards under the hero:
what it is / what it isn't / who it's for / what you get.
* **Without / With Docker Agent** code comparison: ~30 lines of
Python+Anthropic glue versus 8 lines of YAML + `docker agent run`.
* **"Why" rows** — abstract copy replaced with concrete pain → fix
pairs ("I rebuilt the same agent loop in three projects" →
"Reusable YAML, declare once, run everywhere").
* **Use cases** — a 4-card row showing the typical shapes (coding /
ops / data / custom workflows), each linking to the most relevant
follow-up page.
* **How it works** — adds an SVG flow diagram
(`agent.yaml → docker agent run → [Model ↔ Tools ↔ Sub-agents] →
stream`) using `currentColor` so it reads in both themes.
* **Glossary box** explaining Agent / Tool / MCP / A2A / TUI / OCI
inline so first-time readers don't bounce on the jargon.
* **Ecosystem tiles** — cross-links to Docker Hub (agent catalog),
Docker Desktop, Docker Model Runner and Docker Scout, anchoring
Docker Agent in the broader product family.
* **Icon set** — emoji feature/usecase/card icons replaced with
Lucide-style line icons in tinted Docker-Blue squares.
* **STYLE.md** — added to codify "Docker Agent" (prose) vs
`docker agent` (CLI) naming, voice, code samples and a small
glossary so subsequent contributors don't have to guess. The
introduction and quickstart pages are reconciled to the new
convention.
* **Bulk callout edit** — every `<div class="callout-title">` across
56 content pages had its leading `ℹ️ / 💡 / ⚠️` emoji stripped,
because the new icon-badge callout already provides one.
## Meta
* `<title>` and meta description tightened for SEO: home page now
reads "Docker Agent — Run AI agents from YAML, like containers"
and the description fits Google's ~155-char snippet budget.
`og:site_name` and Twitter card metadata added for nicer link
previews.