Build LOCUS-T interfaces in Titan Red

LOCUS-T's own component library — the buttons, cards, forms and layout patterns behind our site and internal tools, documented in one place.

Get startedBrowse components

Not a dependency

Components are copied into your codebase rather than installed from a package. You can read every line, change any of it, and nothing breaks when an upstream version ships.

You own the codeEvery component lives in your repository as an editable file, not inside node_modules.
Accessible by defaultFocus management, keyboard navigation and ARIA states are built into every interactive component.
Themed by tokensColour, radius and type come from CSS variables. Change one value and it propagates everywhere.
Light and darkBoth modes ship together. Titan Red lifts slightly in dark mode so it stays readable.

The palette

Three brand colours and one dedicated error red. Titan Red carries brand and action. Jet Black is held back for rare emphasis. Light Grey does the structural work.

Titan red#EE2028
Jet black#000000
Light grey#E2E2E2
Brand gradient135° red to black

A sample of the library

Twenty-four documented components, each with a live preview and copyable source.

Button
AI SEOPaid mediaActive
Badge
Progress
DBLS+9
Avatar
The LOCUS-T design system. Colour and type from the brand guide.