From 881789a9237dc12012da0edc391ca5d6aaa74b8b Mon Sep 17 00:00:00 2001 From: Terrence Kevin Oleary Date: Mon, 30 Nov 2020 09:56:05 -0600 Subject: [PATCH] Core/dp 20569 design principles (#1281) * Updated content and layout * clean up and fix styles Co-authored-by: Minghua Sun --- .../stories/about/Introduction.stories.mdx | 2 - .../principles/BrandPillars.stories.mdx | 86 ++++++++++++------- packages/core/stories/styles/index.scss | 14 ++- 3 files changed, 69 insertions(+), 33 deletions(-) diff --git a/packages/core/stories/about/Introduction.stories.mdx b/packages/core/stories/about/Introduction.stories.mdx index 06d6964e46..6741cda409 100644 --- a/packages/core/stories/about/Introduction.stories.mdx +++ b/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'; diff --git a/packages/core/stories/principles/BrandPillars.stories.mdx b/packages/core/stories/principles/BrandPillars.stories.mdx index 8ebcb1ca1e..6c1dd3558d 100644 --- a/packages/core/stories/principles/BrandPillars.stories.mdx +++ b/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'; -# 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. + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss index a7778b419e..90e360fa07 100644 --- a/packages/core/stories/styles/index.scss +++ b/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%;