Design Tokens
Visual design atoms that make up the HELIX design language. These tokens ensure consistency across all components and experiences.
Genentech
Genentech A 1
--genentech-a-1#13294b
Genentech
Genentech A 2
--genentech-a-2#003087
Genentech
Genentech A 3
--genentech-a-3#485cc7
Genentech
Genentech A 4
--genentech-a-4#9baee4
Genentech
Genentech A 5
--genentech-a-5#e1e7f7
Genentech
Genentech B 1
--genentech-b-1#004677
Genentech
Genentech B 2
--genentech-b-2#0b41cd
Genentech
Genentech B 3
--genentech-b-3#00a3e0
Genentech
Genentech B 4
--genentech-b-4#8dc8e0
Genentech
Genentech B 5
--genentech-b-5#ddeef8
Genentech
Genentech C 1
--genentech-c-1#470a68
Genentech
Genentech C 2
--genentech-c-2#671e75
Genentech
Genentech C 3
--genentech-c-3#8c4799
Genentech
Genentech C 4
--genentech-c-4#ba9cc5
Genentech
Genentech C 5
--genentech-c-5#eae1ee
Genentech
Genentech D 1
--genentech-d-1#51284f
Genentech
Genentech D 2
--genentech-d-2#722257
Genentech
Genentech D 3
--genentech-d-3#af1685
Genentech
Genentech D 4
--genentech-d-4#dea8dd
Genentech
Genentech D 5
--genentech-d-5#f3e1f3
Genentech
Genentech E 1
--genentech-e-1#6a2c3e
Genentech
Genentech E 2
--genentech-e-2#862633
Genentech
Genentech E 3
--genentech-e-3#c8102e
Genentech
Genentech E 4
--genentech-e-4#ecc7cd
Genentech
Genentech E 5
--genentech-e-5#f8ebed
Genentech
Genentech F 1
--genentech-f-1#dc4405
Genentech
Genentech F 2
--genentech-f-2#dc4405
Genentech
Genentech F 3
--genentech-f-3#ff8200
Genentech
Genentech F 4
--genentech-f-4#fcd757
Genentech
Genentech F 5
--genentech-f-5#fef4d1
Genentech
Genentech G 1
--genentech-g-1#005844
Genentech
Genentech G 2
--genentech-g-2#008c15
Genentech
Genentech G 3
--genentech-g-3#74aa50
Genentech
Genentech G 4
--genentech-g-4#c3dc93
Genentech
Genentech G 5
--genentech-g-5#eaf3d9
Genentech
Genentech H 1
--genentech-h-1#25282a
Genentech
Genentech H 2
--genentech-h-2#545859
Genentech
Genentech H 3
--genentech-h-3#9ea2a2
Genentech
Genentech H 4
--genentech-h-4#d0d3d4
Genentech
Genentech H 5
--genentech-h-5#eff0f0
Genentech
Genentech H 6
--genentech-h-6#fbfbfa
Genentech
Genentech White
--genentech-white#ffffff
Genentech
Genentech Black
--genentech-black#000000
Genentech
Semantic / Primary
Color Primary 50
--color-primary-50var(--genentech-a-5)
Semantic / Primary
Color Primary 100
--color-primary-100var(--genentech-a-5)
Semantic / Primary
Color Primary 200
--color-primary-200var(--genentech-a-4)
Semantic / Primary
Color Primary 300
--color-primary-300var(--genentech-a-3)
Semantic / Primary
Color Primary 500
--color-primary-500var(--genentech-a-2)
Semantic / Primary
Color Primary 600
--color-primary-600var(--genentech-a-2)
Semantic / Primary
Color Primary 700
--color-primary-700var(--genentech-a-1)
Semantic / Primary
Color Primary 800
--color-primary-800var(--genentech-a-1)
Semantic / Primary
Semantic / Secondary
Color Secondary 300
--color-secondary-300var(--genentech-c-3)
Semantic / Secondary
Color Secondary 600
--color-secondary-600var(--genentech-c-2)
Semantic / Secondary
Color Secondary 700
--color-secondary-700var(--genentech-c-1)
Semantic / Secondary
Color Secondary 800
--color-secondary-800var(--genentech-c-1)
Semantic / Secondary
Semantic / Success
Color Success 100
--color-success-100var(--genentech-g-5)
Semantic / Success
Color Success 200
--color-success-200var(--genentech-g-4)
Semantic / Success
Color Success 500
--color-success-500var(--genentech-g-2)
Semantic / Success
Color Success 600
--color-success-600var(--genentech-g-1)
Semantic / Success
Semantic / Error
Color Error 100
--color-error-100var(--genentech-e-5)
Semantic / Error
Color Error 200
--color-error-200var(--genentech-e-4)
Semantic / Error
Color Error 500
--color-error-500var(--genentech-e-3)
Semantic / Error
Color Error 600
--color-error-600var(--genentech-e-2)
Semantic / Error
Semantic / Warning
Color Warning 100
--color-warning-100var(--genentech-f-5)
Semantic / Warning
Color Warning 200
--color-warning-200var(--genentech-f-4)
Semantic / Warning
Color Warning 500
--color-warning-500var(--genentech-f-3)
Semantic / Warning
Color Warning 600
--color-warning-600var(--genentech-f-2)
Semantic / Warning
Semantic / Info
Color Info 100
--color-info-100var(--genentech-b-5)
Semantic / Info
Color Info 200
--color-info-200var(--genentech-b-4)
Semantic / Info
Color Info 500
--color-info-500var(--genentech-b-3)
Semantic / Info
Color Info 600
--color-info-600var(--genentech-b-2)
Semantic / Info
White
Color White
--color-whitevar(--genentech-white)
White
Black
Color Black
--color-blackvar(--genentech-black)
Black
Semantic / Gray
Color Gray 100
--color-gray-100var(--genentech-h-5)
Semantic / Gray
Color Gray 200
--color-gray-200var(--genentech-h-4)
Semantic / Gray
Color Gray 300
--color-gray-300var(--genentech-h-3)
Semantic / Gray
Color Gray 600
--color-gray-600var(--genentech-h-2)
Semantic / Gray
Color Gray 900
--color-gray-900var(--genentech-h-1)
Semantic / Gray