Core/dp 20569 design principles (#1281)

* Updated content and layout

* clean up and fix styles

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>

packages/core/stories/about/Introduction.stories.mdx

@@ -3,8 +3,6 @@ import {
   SectionLinks, DecorativeLink, CalloutLink
 } from '@massds/mayflower-react';
 
-import '@massds/mayflower-react/dist/SectionLinks/_index.scss';
-
 import '../styles/index.scss';
 
 

packages/core/stories/principles/BrandPillars.stories.mdx

@@ -1,34 +1,62 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import {
+  SectionLinks, DecorativeLink, CalloutLink
+} from '@massds/mayflower-react';
+
 import generateTitle from '../util/generateTitle';
 
 <Meta title={generateTitle('BrandPillars')} />
 
-# Brand Pillars
-
-Anytime you make a decision about Mass.gov - about what information should go on a page, how to write something, whether to use an image or not, etc. - run it past these 4 pillars. If your decision satisfies all of them, it’s a good decision.
-
-A brand is a conceptual thing, but it shares some similarities with real-world objects like buildings. They both rely upon a strong framework to hold their shape. In the same way that buildings are held up by load-bearing pillars, brands are held up by brand pillars.
-
-So what defines the Mass.gov brand?
-
-Almost 7 million people live in Massachusetts, in large cities and small towns, on the coast and in the mountains. And this website is for all of them - as well as all the people who come to Massachusetts from all over the world to vacation, learn at our schools, or catch a Sox game.
-
-Using brand pillars helps us identify a few central, critical principles which are easy to remember and refer to, and which truly define the brand in all scenarios. This brand doesn’t need to encompass all of Massachusetts - because while it’s true that Mass.gov represents all of Massachusetts, the Mass.gov brand needs to be more specifically focused on helping constituents get things done on this website.
-
-These are the 4 brand pillars that guide us towards achieving Mass.gov’s goal of being the Commonwealth’s customer service desk.
-
-### Helpful
-
-Mass.gov gives our site visitors the information they need, and we make sure that that information is usable. We make complicated application forms and processes more understandable. We think about what’s most important to our users, and we modify the website in response to those needs.
-
-### Human
-
-Mass.gov uses conversational language and a warm tone to break the perception of government as impersonal and bureaucratic. When constituents read content on Mass.gov, it should feel like the voice of a real person. We want our site visitors to feel comfortable, confident, and supported.
-
-### Dignified
-
-Mass.gov represents the Massachusetts state government with authority and trustworthiness. Our effort to be human should never detract from the importance of the information we convey, or from the credibility of that information. We should be warm without being overly informal, friendly without.
-
-### Modern
-
-Mass.gov is a living tool - a platform for continual improvement, which will evolve over time to keep up with changes in technology. Many digital communication tools and techniques that power websites in 2016 \\(e.g. social media, certain software packages behind the scenes, visual and design trends, etc.\\) either didn’t exist or weren’t widely used 10 years ago - and many tools and techniques that people will take for granted in 10 years don’t exist now. Mass.gov, therefore, must keep pace with the evolution of digital communication both technically and visually in order to remain a relevant tool for our users.
+# Mayflower brand pillars
+
+Our digital brand serves the 7 million people live in Massachusetts, and the millions more who visit or study here. Speaking to those people with a single voice that conveys our shared values requires more than just a logo and some colors, It requires defining some core ideas.
+
+Brand pillars are how we define those critical principles. They are easy to remember and refer to, they outline a few different dimensions of how we want users to think about us. They don't cover every possible sceneario, but they provide a good starting point when we think of new ways to help constituents interact with the Commonwealth online.
+
+Any time you launch a service or make a decision about content, tone, or imagery in an experience, start here.
+
+<div className="row ma__row--two-up">
+  <div className="col-md">
+    <SectionLinks
+      title={{
+        text: 'Helpful'
+      }}
+      description="We provide our users with the information they need written in plain language and presented in usable interfaces. We make complicated processes simple and understandable. We study what’s most important to our users and respond to their needs."
+      index={0}
+    >
+    </SectionLinks>
+  </div>
+  <div className="col-md">
+    <SectionLinks
+      title={{
+        text: 'Human'
+      }}
+      description="Our tone is conversational and a warm, not impersonal and bureaucratic. When constituents read our content it should feel like the voice of a real person. We want users to feel comfortable, confident, and supported."
+      index={1}
+      >
+    </SectionLinks>
+  </div>
+</div>
+
+<div className="row ma__row--two-up">
+  <div className="col-md">
+    <SectionLinks
+      title={{
+        text: 'Dignified'
+      }}
+      description="We represent our state government with authority and trustworthiness. Our effort to be human never undercuts the importance, or credibility of the information we convey. We are friendly but not flippant; natural but not offhand."
+      index={0}
+      >
+    </SectionLinks>
+  </div>
+	<div className="col-md">
+    <SectionLinks
+      title={{
+        text: 'Modern'
+      }}
+      description="We build living systems under constant review and improvement. We recognize that many tools powering experiences today didn’t exist just a few years ago, and many will soon be eclipsed. To stay relevant to users we work hard to keep pace with technical, stylistic, and social trends."
+      index={1}
+      >
+    </SectionLinks>
+  </div>
+</div>

packages/core/stories/styles/index.scss

@@ -9,6 +9,9 @@
 @use './bootstrap-grid';
 
 @use '~@massds/mayflower-assets/scss/00-base/elements';
+
+@use '@massds/mayflower-react/dist/SectionLinks';
+
 @use '@massds/mayflower-assets/scss/01-atoms/button-copy';
 @use '@massds/mayflower-react/dist/Typography';
 
@@ -52,11 +55,18 @@
 	border: 0 !important;
 }
 
-// Intro story
-.row.ma__row--three-up {
+// Correct margins
+.row.ma__row--three-up,
+.row.ma__row--two-up {
   margin-left: -15px;
   margin-right: -15px;
+
+  & > * {
+	  margin-bottom: 2rem;
+  }
+
 }
+
 // Match row height
 .ma__section-links {
   height: 100%;