1 files changed, 45 insertions, 0 deletions
diff --git a/toolkit/themes/shared/design-system/text-and-typography.css b/toolkit/themes/shared/design-system/text-and-typography.css
new file mode 100644
index 0000000000..123847fe8b
--- /dev/null
+++ b/toolkit/themes/shared/design-system/text-and-typography.css
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Typography scale */
+:root {
+  font: message-box;
+}
+
+h1,
+.heading-xlarge {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xxlarge);
+}
+
+h2,
+.heading-large {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xlarge);
+}
+
+h3,
+.heading-medium {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-large);
+}
+
+/* Text helpers */
+.text-deemphasized {
+  font-size: var(--font-size-small);
+  color: var(--text-color-deemphasized);
+}
+
+.text-error {
+  color: var(--text-color-error);
+  font-weight: var(--font-weight-bold);
+}
+
+.text-truncated-ellipsis {
+  /* Will not work on `display: flex` items
+    unless you wrap its contents with another element that has this class. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}