Color overview

This page shows the project’s named colors and how the semantic color system looks in practice — as real text, links, buttons, and borders across different backgrounds.

Using this component in your project

Drop ColorOverview into any documentation page to get a live overview of your project’s color system. Pass the names of your project colors (the keys you declared in CustomProjectColors).

import {ColorOverview} from "@dynamic-type/ddi/server";

<ColorOverview projectColors={["yourColor1", "yourColor2"]} />

The semantic color panels always reflect the current CSS variable values, so the overview stays accurate as your theme evolves. The built-in contrast checker annotates each element with its WCAG compliance level.