Components

Core

Button Icons Image Logo Text Timestamp Title

Components

Accordion ArticleSummary Byline Correction FactBox Gallery Grade Lead Poll Pym Enrichment Quote Read More Article SectionHeader Subheading Tags Teaser TTSPlayer Tweet Who-is-Who

DNA/DESIGN

Border Radius Colors Layout Spacing Typography

TX-Book

AB AP BT E24 SA SVD VG

DNA Colors - VG

Visual showcase of all DNA color variables for the vg brand. These colors are loaded dynamically based on the selected brand.

Brand Colors

Accent
--color-accent
Breaking
data-skin="breaking" + --color-accent

Background Colors

Background Primary
--color-background-primary
Background Secondary
--color-background-secondary
Background Tertiary
--color-background-tertiary
Background Inverted
--color-background-inverted

Button Colors

Button Primary BG
--button-primary-background-color
Button Primary Color
--button-primary-color
Button Secondary BG
--button-secondary-background-color
Button Secondary Color
--button-secondary-color
Button Tertiary BG
--button-tertiary-background-color
Button Tertiary Color
--button-tertiary-color

Text Colors (on Background Primary)

Text Primary
--color-text-primary
Sample Text
Text Secondary
--color-text-secondary
Sample Text

Text Colors (Special Contexts)

Text Inverted (on Background Inverted)
--color-text-inverted
Sample Text
Text on Accent
--color-text-on-accent
Sample Text

Border Colors

Border Primary
--color-border-primary
Border Secondary
--color-border-secondary

Base Colors

Black
--color-black
White
--color-white

Color Palette - Blue

Blue 100
--color-blue-100
Blue 200
--color-blue-200
Blue 300
--color-blue-300
Blue 400
--color-blue-400
Blue 500
--color-blue-500
Blue 600
--color-blue-600
Blue 700
--color-blue-700
Blue 800
--color-blue-800

Color Palette - Gray

Gray 100
--color-gray-100
Gray 200
--color-gray-200
Gray 300
--color-gray-300
Gray 400
--color-gray-400
Gray 500
--color-gray-500
Gray 600
--color-gray-600
Gray 700
--color-gray-700
Gray 800
--color-gray-800

Color Palette - Red

Red 100
--color-red-100
Red 200
--color-red-200
Red 300
--color-red-300
Red 400
--color-red-400
Red 500
--color-red-500
Red 600
--color-red-600
Red 700
--color-red-700
Red 800
--color-red-800

Color Palette - Green

Green 100
--color-green-100
Green 200
--color-green-200
Green 300
--color-green-300
Green 400
--color-green-400
Green 500
--color-green-500
Green 600
--color-green-600
Green 700
--color-green-700
Green 800
--color-green-800

Color Palette - Yellow

Yellow 100
--color-yellow-100
Yellow 200
--color-yellow-200
Yellow 300
--color-yellow-300
Yellow 400
--color-yellow-400
Yellow 500
--color-yellow-500
Yellow 600
--color-yellow-600
Yellow 700
--color-yellow-700
Yellow 800
--color-yellow-800

Color Palette - Pink

Pink 100
--color-pink-100
Pink 200
--color-pink-200
Pink 300
--color-pink-300
Pink 400
--color-pink-400
Pink 500
--color-pink-500
Pink 600
--color-pink-600
Pink 700
--color-pink-700
Pink 800
--color-pink-800

How to Use

These CSS custom properties can be used in your components like this:

/* In CSS */
.my-component {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.my-text {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

/* In React styles */
const styles = {
  backgroundColor: "var(--color-accent)",
  color: "var(--color-text-on-accent)",
};