Every component, on one page

The projectious.work brand, 
rendered by Hextra

One of two reference implementations; the other uses Docsy. 
They share the same tokens, the same specimens and the same kitchen-sink page, so anything that differs between them is a difference between the themes — not the brand.

Open the kitchen sink

One component set

Buttons, inputs, cards, tables, navigation, feedback, overlays, data display and code — the complete set, mounted from the documentation site rather than copied into this example.

Measured, not estimated

Every colour pairing is checked against WCAG AA in both modes, and the audit covers these example pages too — not only the documentation.

Inside the documented seams

The brand reaches this theme through assets/css/custom.css and two documented hooks. No Hextra template is overridden, so a theme upgrade stays a dependency change.

Dark mode designed, not inverted

Both modes climb the midnight ramp in step order. Use the control beside the search field to compare them.

Code stays dark

Code surfaces do not follow the colour mode, so the syntax palette is designed and measured once. Every token carries a recorded contrast ratio.

One accent, spent deliberately

Orange marks the primary action, the current item and focus. It is never a large fill, and never the colour of an ordinary link.

How this example is put together

The colour scales, the token layer, the syntax theme, the component specimens and the kitchen-sink page are mounted from the documentation site by hugo.yaml rather than copied here. A change to a brand token reaches this page on the next build, so the example cannot quietly drift from the system it is meant to demonstrate.

ℹ️
The same kitchen-sink page renders under Docsy in examples/hugo-docsy/. Comparing the two is the quickest way to see what the theme contributes and what the brand fixes.

Full guidance for both themes — the shared semantic layer, each adapter, and the review fixtures — is on the Hugo theming page.