---
name: roche-rds-frontend
description: Build a React/Vite frontend on the Roche Design System (RDS) with a single-barrel wrapper pattern and the canonical DTA (therapeutic-area) colour palette. Use when starting a Roche dashboard/UI, wiring @rds/react-components, or colouring DTA/molecule badges.
---

# Roche frontend: RDS + DTA colours

Conventions for a React + Vite + TypeScript UI at Roche.

## RDS via a single barrel (`src/rds.tsx`)
Import **every** design-system primitive through one file that re-wraps
`@rds/react-components`, keeping app-facing signatures stable. Nothing else in the app
imports RDS directly — so you can start on local fallback primitives and swap in real RDS
later by editing only this one file.
```tsx
// src/rds.tsx — wrap, don't leak RDS types into the app
export function Button({ children, onClick, variant = "primary", disabled }) { ... }
export function Drawer({ open, title, onClose, children, size = "m" }) { ... } // size: s|m|l
export function MultiSelect({ label, options, selected, onChange }) { ... }     // string[] in/out
// Chip, Tooltip, Tabs, Spinner, Select, RocheLogo …
```
- Keep app contracts primitive (`string[]`, not `RdsSelectOption[]`); convert at the boundary.
- `RdsDrawer` sizes are `s | m | l` only (no `xl`).

## Installing real RDS (Artifactory, on VPN)
Put the token in your **user-level** `~/.npmrc` (not the project `.npmrc`):
```
//eu.repository.roche.com/artifactory/api/npm/rds-general-npm-all-v/:_authToken=<TOKEN>
```
Then `npm install @rds/core @rds/react-components`, and import
`@rds/react-components/style.css` once in `main.tsx`. Fallback registry: GitLab Package
Registry (`code.roche.com`).

## DTA (therapeutic-area) colour palette
`DTA_CODE` from the portfolio (see [[roche-portfolio-data]]) drives colour. **Molecule/
modality badges take the project's DTA colour** (tint background + solid text) — they do
NOT get an independent palette. Canonical values:

| DTA | Solid | Tint (bg) | Text on solid |
| --- | --- | --- | --- |
| ONC | `#FF7D29` | lighter | black |
| NS | `#FFCC01` | lighter | black |
| IMM | `#7D0096` | lighter | **white** |
| CVM | `#A8CAAF` | lighter | black |
| OPH | `#8FADF9` | lighter | black |
| ID | `#969696` | lighter | black |
| OTH / MAT / Other | `#FFD4FF` | lighter | black |

Helpers to mirror: `dtaSolid(code)`, `dtaTint(code)`, `dtaIcon(code)` (icon/text colour —
white only for IMM), `dtaName(code)`; all normalise with trim+uppercase and fall back to
the `Other` entry. Source of truth: `pat-e2e-report-automation/backend/app/reports/colors.py`
and `frontend/src/lib/chartTheme.ts`.

## Vite deploy note
For Posit Connect, set `base: "./"` and a relative API base — see [[deploy-posit-connect]].

## Reference implementation
`bar-dashboard/frontend/src/rds.tsx` (barrel) and `frontend/src/theme/dta.ts` (palette).