# BRIEF: RJ DTC Admin redesign

The RJ DTC admin is redesigned as one calm, light, modern system: an RJ midnight-navy sidebar and primary action, soft 6px corners, Archivo for titles and buttons at its normal width, IBM Plex Sans for reading and IBM Plex Mono for codes, and small, crisp motion. Every admin page in the brief is designed as a dedicated desktop (1440) and phone (390) composition, built from one approved component kit whose colour tokens map one to one onto shadcn/ui.

## What was asked

- A design system and full page designs for the RJ DTC admin (`rj-dtc` `apps/admin`: Next.js 15, React, Tailwind 3.4, shadcn/ui new-york), so the front-end team can rebuild it.
- Every admin URL designed with real fields only: today's columns, fields and buttons. Additions are listed separately as proposals.
- Desktop and phone as separate layouts, never a squeezed desktop.
- Full documentation: type, colour, spacing, shadows, gradients, motion and every component spec, so no detail is lost in the build.

## Named values

- **Direction:** Fine Worsted · Satin Lapel.
- **Hero colour:** RJ ink `#0E1729` (midnight navy) for the sidebar and the one primary action per screen.
- **Canvas:** white `#FFFFFF`, hairlines `#E4E7ED`, quiet text `#505A70`.
- **Type:** Archivo (titles, buttons, menu, labels) at normal width; IBM Plex Sans (reading, tables, prices); IBM Plex Mono (cloth codes, handles, versions, ids).
- **Shape:** 6px controls, 8px cards, 15px frames.
- **Motion:** crisp: 120ms hover, 160ms menus, 260ms sheets, reduced motion honoured.

## Never

- A dark canvas.
- Gold or brass accents.
- Plum or purple.
- Serif titles.
- Archivo set wide or tracked out.
- A glow or gradient on any button.