diff --git a/frontend/packages/app/public/index.html b/frontend/packages/app/public/index.html
index 49fd768c53..e6430f63d5 100644
--- a/frontend/packages/app/public/index.html
+++ b/frontend/packages/app/public/index.html
@@ -51,6 +51,10 @@
href="%PUBLIC_URL%/safari-pinned-tab.svg"
color="#5bbad5"
/>
+
Backstage
diff --git a/frontend/packages/core/src/theme/BackstageTheme.js b/frontend/packages/core/src/theme/BackstageTheme.js
index 1c0f4cd2b7..54571b8102 100644
--- a/frontend/packages/core/src/theme/BackstageTheme.js
+++ b/frontend/packages/core/src/theme/BackstageTheme.js
@@ -27,6 +27,9 @@ export const COLORS = {
},
};
+const displayFace = "Red Hat Display";
+const textFace = "Red Hat Text";
+
const extendedThemeConfig = {
props: {
MuiGrid: {
@@ -81,58 +84,70 @@ const extendedThemeConfig = {
background: '#333333',
},
typography: {
+ // This feels bad, but is effective
+ fontFamily: textFace,
h4: {
// Page name/heading | Dialog titles
+ fontFamily: displayFace,
fontSize: 48,
color: '#2D2D2D',
- fontWeight: 'bold',
+ fontWeight: 700,
},
h3: {
// Page titles
+ fontFamily: displayFace,
fontSize: 32,
color: '#2D2D2D',
- fontWeight: 'bold',
+ fontWeight: 700,
},
h2: {
// Card titles | Sub headings in dialogs
+ fontFamily: displayFace,
fontSize: 24,
color: '#2D2D2D',
- fontWeight: 'bold',
+ fontWeight: 700,
lineHeight: 1.2,
marginBottom: 6,
},
header3: {
// Table headers (ALL CAPS!)
+ fontFamily: textFace,
fontSize: 12,
color: '#9E9E9E',
},
menuItem1: {
// Sidebar menu item
+ fontFamily: displayFace,
fontSize: 16,
color: '#828282',
- fontWeight: 'bold',
+ fontWeight: 700,
},
menuItem2: {
// Dropdown menu items | Form labels | Deep links from cards (Go to...)
+ fontFamily: textFace,
fontSize: 16,
color: '#2D2D2D',
},
text: {
// Table entries | Information/error text/messages | General copy/paragraphs
+ fontFamily: textFace,
fontSize: 13,
color: '#2D2D2D',
},
links: {
// Table entries | Information/error text/messages | General copy/paragraphs
+ fontFamily: textFace,
color: '#509BF5',
},
tabSelected: {
// Selected tab
+ fontFamily: textFace,
fontSize: 18,
color: '#2D2D2D',
},
tabUnselected: {
// Unselected tab
+ fontFamily: textFace,
fontSize: 18,
color: '#9E9E9E',
},