From 73de7687898be1b419422a1568296ebacb17a5bf Mon Sep 17 00:00:00 2001
From: Ian MacFarland <ian@recidiviz.org>
Date: Fri, 1 Jul 2022 16:29:28 -0700
Subject: [PATCH] lighter color for longform copy

---
 spotlight-client/src/PageTenant/PageTenant.tsx | 3 ++-
 spotlight-client/src/UiLibrary/narrative.ts    | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/spotlight-client/src/PageTenant/PageTenant.tsx b/spotlight-client/src/PageTenant/PageTenant.tsx
index 5f1d540b..2f35978c 100644
--- a/spotlight-client/src/PageTenant/PageTenant.tsx
+++ b/spotlight-client/src/PageTenant/PageTenant.tsx
@@ -16,7 +16,7 @@
 // =============================================================================
 
 import { RouteComponentProps } from "@reach/router";
-import { typography } from "@recidiviz/design-system";
+import { palette, typography } from "@recidiviz/design-system";
 import HTMLReactParser from "html-react-parser";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
@@ -92,6 +92,7 @@ const Title = styled.h1`
 
 const Subtitle = styled.h2`
   ${typography.Body19}
+  color: ${palette.slate85};
 `;
 
 const PageTenant: React.FC<RouteComponentProps> = () => {
diff --git a/spotlight-client/src/UiLibrary/narrative.ts b/spotlight-client/src/UiLibrary/narrative.ts
index 831d652e..1029b3e5 100644
--- a/spotlight-client/src/UiLibrary/narrative.ts
+++ b/spotlight-client/src/UiLibrary/narrative.ts
@@ -15,10 +15,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { typography } from "@recidiviz/design-system";
+import { palette, typography } from "@recidiviz/design-system";
 import { rem } from "polished";
 import styled from "styled-components/macro";
 import breakpoints from "./breakpoints";
+import colors from "./colors";
 import CopyBlock from "./CopyBlock";
 import { FullScreenSection } from "./PageSection";
 import PageTitle from "./PageTitle";
@@ -41,6 +42,7 @@ export const NarrativeTitle = styled(PageTitle)`
 
 export const NarrativeIntroCopy = styled(CopyBlock)`
   ${typography.Body19}
+  color: ${palette.slate85};
 
   @media screen and (min-width: ${breakpoints.tablet[0]}px) {
     ${typography.Body48}
@@ -49,6 +51,9 @@ export const NarrativeIntroCopy = styled(CopyBlock)`
 
 export const NarrativeSectionTitle = styled.h2`
   ${typography.Header24}
+  color: ${colors.text};
 `;
 
-export const NarrativeSectionBody = styled(CopyBlock)``;
+export const NarrativeSectionBody = styled(CopyBlock)`
+  color: ${palette.slate85};
+`;