Skip to main content

Theme Colors

Theme colors are semantic tokens that define the color language of UI elements. They reference global colors and adapt to different themes (light/dark). Yle services use both light and dark themes. Yle Areena uses only the dark theme. Tietäjä is built for Yle’s event betting games and is based on the YDS dark theme.

Background​

Background tokens define the main surfaces of the UI: page backgrounds, surface variants, and overlay surfaces such as dialogs and backdrops. Use these tokens to structure layouts, separate sections, and create elevation through subtle surface changes.

PreviewTokenValueDescription
background#ffffff / whitePrimary page background.
background-variant#f8f9fa / gray-5Alternate background color for cards and sections. Elevates content blocks.
negative-background#131415 / gray-95Inverted background for high-priority contrasting elements.
navigation-background#ffffff / whiteNavigation bar and header backgrounds (in Yle Areena).
control-backgroundrgba(0, 0, 0, 0.47) / black-opacity-50Unselected form control background (eg. Switch).
control-background-disabledrgba(0, 0, 0, 0.15) / black-opacity-30Disabled form control background (eg. Switch).
input-background#ffffff / whiteTextual form field backgrounds (eg. TextInput, Textarea, Select).
highlight-background#e8e9eb / gray-20Subtle highlighted or selected content background (in Yle Areena).
background-interactive#f1f2f4 / gray-10Selectable list item background (eg. ChoiceBox and ChoiceButton).
dialog-background#ffffff / whiteOverlay content backgrounds (eg. Modal and BottomSheet).
dialog-overlayrgba(0, 0, 0, 0.47) / black-opacity-50Backdrop of overlays, dimming rest of the page (eg. Modal and BottomSheet).
info-primary-background#9fc8ee / blue-20Notification information, primary variant.
info-secondary-background#f1f2f4 / gray-10Notification information, secondary variant.
success-background#62f9c2 / green-20Notification of success background.
warning-background#ffd199 / info-orange-20Notification of warning background.
error-background#f99fb5 / red-20Notification of error background.
opinion-article-background#3d5483 / info-deep-blue-60Opinion content background (eg. opinion articles).
background-list#f8f9fa / gray-5Used as the background for lists, link lists, and tables.
background-dropdown#f8f9fa / gray-5Overlaying menu and dropdown background.

Text​

Text tokens define readable and consistent text colors across themes and surfaces. They cover default and inverted text, placeholder text, emphasis levels, and disabled states.

PreviewTokenValueDescription
default-text#131415 / gray-95Primary text color; Link text; form field descriptions.
negative-text#f8f9fa / gray-5Text on inverted backgrounds (eg. Primary Button text).
input-placeholder-text#4a4f54 / gray-60Textual form field placeholder text color.
high-emphasis-textrgba(0, 0, 0, 0.79) / black-opacity-70Text color for important metadata.
medium-emphasis-textrgba(0, 0, 0, 0.70) / black-opacity-60Text color for secondary metadata.
disabled-textrgba(0, 0, 0, 0.29) / black-opacity-40Disabled control text color (eg. Button, Input, Checkbox, Radio).
light-text#f8f9fa / gray-5Theme-independent light text for dark backgrounds.
dark-text#131415 / gray-95Theme-independent dark text for light backgrounds.
light-high-contrast-text#ffffff / whiteTheme-independent light text for colored backgrounds (eg. Opinion and Yle Corporate Tag variants).
feedback-live-text#ffffff / light-high-contrast-textText color for feedback-live background (eg. Live Tag text).

Action​

Action tokens are used for interactive elements and their states, such as buttons, checkboxes, radios, and selectable components. They define primary and secondary actions, hover/active variants, disabled states, and destructive actions.

PreviewTokenValueDescription
primary-action#131415 / gray-95Primary action background color (eg. Primary Button background; Checkbox/Radio).
primary-action-variantrgba(0, 0, 0, 0.70) / black-opacity-60Primary action hover/active states background.
secondary-actionrgba(0, 0, 0, 0.05) / black-opacity-10Secondary action alternative state (eg. Secondary Button hover background).
secondary-action-variantrgba(0, 0, 0, 0.09) / black-opacity-20Secondary hover/active states background (eg. MenuItem hover; Link hover; ButtonGroup hover).
disabled-actionrgba(0, 0, 0, 0.15) / black-opacity-30Disabled action color (eg. Primary Button).
danger-primary-action#d10b3d / red-60Destructive action (eg. delete button background).
danger-primary-action-variant#e90e43 / red-50Destructive action (eg. delete button hover/active states).
selected#131415 / gray-95Togglable action selected state background (eg. ButtonGroup / SectionTab).
unselected#e8e9eb / gray-20Togglable action unselected state background (eg. ButtonGroup / SectionTabs / TagFilter).

Border​

Border tokens define outlines and separators used to structure UI components. They cover default and disabled borders, focus rings, separators, and borders for inverted surfaces.

PreviewTokenValueDescription
border#131415 / gray-95Default Input, Textarea, Select border
disabled-borderrgba(0, 0, 0, 0.29) / black-opacity-40Disabled Input, Checkbox border
primary-focus-border#009cb5 / turquoise-60Focus ring for interactive elements
secondary-focus-border#131415 / gray-95Alternative focus ring color
separatorrgba(0, 0, 0, 0.09) / black-opacity-20Menu separator lines; Dialog content borders
negative-border#ffffff / backgroundBorder for elements on inverted backgrounds

Illustrative icons​

Illustrative icon tokens define the primary and secondary colors used in illustrative iconography and illustrations. Use them to keep illustration accents consistent with the theme.

PreviewTokenValueDescription
illustrative-icon-primary#131415 / gray-95Primary color for illustrative icons. Used as the background for illustrative icons.
illustrative-icon-secondary#5ddbe9 / turquoise-30Secondary/accent color for illustrations. Used for the lines and other elements of illustrative icons, not for the background.

Player​

Player tokens define colors used in media player UI elements, such as the progress track and the progress indicator.

PreviewTokenValueDescription
player-progress-barrgba(255, 255, 255, 0.30) / white-opacity-40Media player progress bar track background
player-progress-indicator#29ccde / turquoise-40Media player progress indicator/filled track

Spinner​

Spinner tokens define spinner foreground and track colors across variants, including default, negative, and highlight variants. Use these tokens for loading indicators in different surface contexts.

PreviewTokenValueDescription
default#131415 / gray-95Spinner default variant foreground
negative#ffffff / whiteSpinner negative variant foreground
highlight-default#009cb5 / turquoise-60Spinner highlight variant foreground
highlight-negative#29ccde / turquoise-40Spinner highlight-negative variant foreground
background-default#d8d9db / gray-30Spinner default variant track background
background-negative#292b2d / gray-80Spinner negative variant track background

Feedback​

Feedback tokens are used to communicate status and validation states in the UI. They cover highlight, error, warning, success, and live indicators for components and messages.

PreviewTokenValueDescription
highlight#009cb5 / turquoise-60Accent color; NavigationTab indicator; Switch checked. Guides the user forward in the user interface.
error#d10b3d / red-60Error state for form controls and messages
warning#f1722a / orange-60Warning state indicator
success#058657 / green-70Success state for form controls
live#e90e43 / red-50Live broadcast indicator

Logo tokens define colors used for Yle and channel logos, including background and text variants. Use these tokens for logo components and brand marks across themes.

PreviewTokenValueDescription
yle-logo-background-brand#00b4c8 / turquoise-50Yle logo background (brand variant)
tv1-logo#3311aa / yle-tv-1Yle TV1 brand color
tv-2-logo#cb0fd0 / yle-tv-2Yle TV2 brand color
yle-teema-logo#fe8300 / yle-teemaYle Teema brand color
yle-fem-logo#a3bd2f / yle-femYle Fem brand color
lastenareena-logo#feb500 / lastenareenaLasten Areena brand color
yle-radio-1-logo#dc006a / yle-radio-1Yle Radio 1 brand color
yle-radio-suomi-logo#0000e6 / yle-radio-suomiYle Radio Suomi brand color
yle-x-logo#fd2b77 / yle-xYle X brand color
yle-x3m-logo#ff4c20 / yle-x3mYle X3M brand color
yle-vega-logo#169bd4 / yle-vegaYle Vega brand color
yle-klassinen-logo#0f7b87 / yle-klassinenYle Klassinen brand color
yle-sami-radio-logo#0049bf / yle-sami-radioYle Sámi Radio brand color
areena-logo#29ccde / turquoise-40Yle Areena brand color
yle-logo-background-default#131415 / default-textYle logo background (default variant)
yle-logo-text#f8f9fa / negative-textYle logo text color
logo-background#000000 / blackGeneric logo background color
logo-nega#ffffff / whiteLogo negative/inverted variant
logo-text#ffffff / whiteLogo text color

Brand​

Yle’s brand color is used only in the logo and not in UI components. Turquoise is used in the user interface.

PreviewTokenValueDescription
yle-brand#00b4c8 / turquoise-50Used in the Yle logo and not as a user interface color. Primary Yle brand color.

Tag​

Tag tokens define background colors for different tag types and tag interaction variants. Use these tokens for tags such as live, default, opinion, corporate, neutral, and action-based tag styles.

PreviewTokenValueDescription
live-tag#e90e43 / red-50Live Tag Tag background.Used for live, right now, online, and chat content. Highlights time-sensitive or currently active events and updates.
default-tag#131415 / gray-95Default Tag background. Used as the primary tag for content categorization, especially in editorial and Areena content such as new episodes, seasons, and curated highlights.
opinion-tag#3d5483 / info-deep-blue-60Opinion Tag background. Used to mark opinion-based conten
yle-corporate-tag#00809c / turquoise-70Yle Corporate Tag background. Used in Yle corporate and official communication content.
primary-action-tag#131415 / gray-95TagLink primary variant background. Background for interactive TagLink primary variants used for navigation and filtering.
primary-action-variant-tagrgba(0, 0, 0, 0.70) / black-opacity-60TagLink primary variant hover state. Hover and active state background for primary TagLink variants.
secondary-action-tagrgba(0, 0, 0, 0.05) / black-opacity-10TagLink secondary variant background. Background for secondary or text-based TagLink variants used in less prominent interactions.
secondary-action-variant-tagrgba(0, 0, 0, 0.02) / black-opacity-5TagLink secondary/text variant hover state. Hover and active state background for secondary or text-based TagLink variants.
neutral-tag#e8e9eb / gray-20Neutral Tag background. Used when the tag should not visually dominate, such as user-selected filters, preferences, or contextual metadata.

Shadow​

Shadow tokens define elevation through shadow color values. Use these tokens for layered surfaces and components that require visual separation from the background.

PreviewTokenValueDescription
srgba(0, 0, 0, 0.15)Small shadow color, subtle elevation
mrgba(0, 0, 0, 0.15)Medium shadow color, medium elevation
lrgba(0, 0, 0, 0.41)Large shadow color, high elevation

Tietaja​

Tietäjä tokens define theme colors specific to the Tietäjä game UI, built on top of the YDS dark theme. Use these tokens for Tietäjä-specific components such as player cards and score-related highlights.

PreviewTokenValueDescription
background-player-cardrgba(0, 0, 0, 0.15) / black-opacity-30Tietäjä game player card background.
text-score#009cb5 / highlightTietäjä game score text color.
border-highlight#009cb5 / highlightTietäjä game highlighted border color.