Genentech Theme

Install the Genentech design system theme in your existing projects.

Download

Or copy directly from the components/public/ directory.

Installation

Copy the fonts

Copy the font files to your project's public directory:

cp -r components/public/fonts your-project/public/

Add the theme CSS

Copy the theme file and import it in your global styles:

cp components/public/genentech-theme.css your-project/src/styles/

Import in your CSS

For Tailwind CSS v4:

/* global.css */
@import "tailwindcss";
@import "tw-animate-css"; /* optional */
@import "./genentech-theme.css";

For Tailwind CSS v3 or vanilla CSS:

/* global.css */
@import "./genentech-theme.css";

/* Then add to tailwind.config.js if using v3 */

Color Reference

Primary (Genentech Blue)

#005596

hsl(206 100% 29.4%)

Accent (Roche Light Blue)

#5cb3cc

hsl(193 53% 58%)

Secondary

#e8f4f7

hsl(193 53% 92%)

Destructive

#dc2626

hsl(0 72% 51%)

Muted

#f4f6f8

hsl(210 20% 96%)

Border

#dce4ed

hsl(214 25% 88%)

Chart Colors

chart-1

chart-2

chart-3

chart-4

chart-5

Typography

Gene Sans (Default)

The quick brown fox jumps over the lazy dog

Light 300Regular 400Bold 700

Gene Serif

The quick brown fox jumps over the lazy dog

Light 300Regular 400Bold 700

Gene Condensed

The quick brown fox jumps over the lazy dog

Light 300Regular 400Bold 700Heavy 900

CSS Variables

All design tokens are available as CSS custom properties. Use them in your styles:

.my-component {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  font-family: var(--font-sans);
}

Tailwind Classes

With Tailwind CSS v4, these semantic classes are available:

Class	Description
bg-primary	Genentech Blue background
text-primary	Genentech Blue text
bg-accent	Roche Light Blue background
bg-secondary	Light blue tint background
bg-muted	Subtle gray background
text-muted-foreground	Secondary text color
border-border	Default border color
bg-destructive	Error/danger background
font-sans	Gene Sans font
font-serif	Gene Serif font