docs: restyle the five-frameworks image in the devsuit palette

[FabianClemenz]

Summary

Restyles the five-frameworks image in the devsuit palette, and simplifies the composition.

The palette is the real one

Not invented — pulled from the Tailwind theme on devsuit.de:

token		used for
dsbackgrounddark	#10172e	ground
dsbluedark	#192346	panels
dsblue	#4150aa	convergence lines
dsbluelight	#18b4e0	accent, wordmark, primary keys
dspurple	#a064d2	foreign keys
dsgrey 10/20/60/80	#eceff1 #cfd8dc #607d8b #455a64	text hierarchy

Cleaner, not just recoloured

• Dark ground. Reads as a deliberate brand asset and stands out in a feed of white cards, where the previous near-white image blended in.
• No card borders or top accent bars. Panels are a flat fill on the dark ground — fewer lines, more contrast doing the work.
• A hairline rule under the header instead of floating text.
• A left accent edge on the entity boxes rather than a filled header cap. The first attempt used a rounded-top cap and the corner-radius geometry rendered as a detached bar floating above each box — the edge has no such failure mode and reads cleaner.
• PK / FK badges on the right of each row, the way real ERD tools label them, replacing the small key glyphs.
• Tighter tracking on the headline, more generous gaps.

One thing traded away, deliberately

The previous version used the exact colours generator.py emits for keys — #b8861b gold for primary, grey for foreign — so the illustration matched PlantUML output literally. That gold clashes with a navy/cyan brand, so primary keys are now dsbluelight and foreign keys dspurple.

The picture is now illustrative of the structure erdify produces, not of its exact styling. I think brand consistency wins for an image whose job is being shared, but it is a real loss and worth naming rather than quietly dropping.

Type of change

• Documentation

Verification

mkdocs build --strict passes, full pre-commit run --all-files clean. Rendered and inspected; the one defect that pass showed (the floating header cap) is fixed. 1600×840, 70 KB — slightly smaller than before.

frameworks.svg remains the editable source and its header comment now documents the brand tokens and the PNG re-export one-liner.

Not done here

Worth pointing Settings → General → Social preview at the new PNG, so the repo's own link card matches.

Checklist

• Tests added or updated for the change — n/a, docs asset
• uv run pytest passes locally
• uv run ruff check src/ tests/ and uv run mypy src/ pass
• Docs/README updated if behavior changed
• CHANGELOG.md updated under [Unreleased]

[datadog-devsuit]

🎯 Code Coverage (details)
• Patch Coverage: 100.00%
• Overall Coverage: 93.29% (+0.00%)

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: cae84d4 | Docs | View more details | Give us feedback!}