diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index ab70c98..ea333f6 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -6,7 +6,7 @@
Styleguide – Pattern Text Layouts
-
+
Pattern – Text Layouts
diff --git a/styles/31-patterns-text-layouts.css b/styles/31-patterns-text-layouts.css
index a081732..24b30f8 100644
--- a/styles/31-patterns-text-layouts.css
+++ b/styles/31-patterns-text-layouts.css
@@ -2,6 +2,16 @@
/* Patterns: Text Layouts */
/* ========================================================= */
+.sg-page-text-layouts {
+ background: var(--surface-form-preview);
+ color: var(--color-font-dark);
+}
+
+.sg-page-text-layouts .sg-main-heading,
+.sg-page-text-layouts .sg-preview-label {
+ color: var(--color-font-dark);
+}
+
.sg-text-layout-pattern {
display: flex;
flex-direction: column;