style-guide

Summary

The site's own brand page: logo, colour ramps, type scale, component samples.

Raw wireframe

• .context/designs/web/patterns/style-guide.html

Why it is drawn this way

It is a route, /style-guide, and it is the only written statement of the brand: orange primary, fuchsia secondary, a logo gradient from #FF8C00 to #FF0080.

The palette in shared.css takes brand and accent from this page. The swatches are drawn with their literal hexes because the swatch is the datum.

Its sample buttons do not match the site's. The page shows an orange primary button; the site's primary is the gradient.

Related

• home
• 2026-10-04-the-set-draws-what-the-website-markup-asks-for

Sources

• .context/designs/web/patterns/style-guide.html
• apps/website/src/app/style-guide/page.tsx