diff --git a/build.washingtonpost.com/docs/foundations/principles.mdx b/build.washingtonpost.com/docs/foundations/principles.mdx index ed8277f9f..4ac7cd7bd 100644 --- a/build.washingtonpost.com/docs/foundations/principles.mdx +++ b/build.washingtonpost.com/docs/foundations/principles.mdx @@ -1,471 +1,146 @@ --- order: 0 title: Principles -description: These are our design and engineering principles as it relates to our design system. +description: In our pursuit to create a seamless, user-friendly, and visually coherent digital environment, The Washington Post is committed to establishing a robust design system. This system will serve as the foundation upon which all our digital products are built, ensuring consistency, efficiency, and accessibility across all user interfaces. Below are the principal guidelines that will steer our design system toward achieving reusable, functional, adaptable, predictable, and accessible designs. ---
+## Table of contents + +- [Reusable](/foundations/principles#1.%20Reusable) +- [Functional](/foundations/principles#2.%20Functional) +- [Adaptable](/foundations/principles#3.%20Adaptable) +- [Predictable](/foundations/principles#4.%20Predictable) +- [Accessbile](/foundations/principles#5.%20Accessible) + --- -## The role of Color +## 1. Reusable -When we refer to color we exclude the entire grayscale. The use of color in our -system is limited and it is deliberate. Our products focus on the content -and the reader experience. Color should always be a minimal distraction and used with intention. + + -import Tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json"; +### Component Reusability -- [Guidance](/foundations/principles#Guidance) -- [Themes](/foundations/principles#Themes) -- [Semantic Colors](/foundations/principles#Semantic) -- [Static Colors](/foundations/principles#Static) -- [Accessibility](/foundations/principles#Accessibility) -- [Tokens](/foundations/color) +- **Modularity:** Design components should be modular, meaning they can be reused in various parts of the application without being modified. +- **Consistency:** Ensure visual and functional consistency across all platforms and products to foster a unified brand image and enhance user familiarity. +- **Documentation:** Maintain comprehensive documentation for each component, detailing its purpose, usage guidelines, and implementation code to facilitate easy adoption by other teams and projects. ---- + -## Guidance + + + + -### Hierarchy and layout structure +--- -Utilize color to separate sections of information and highlight elements of importance. +## 2. Functional - - - + + -
+### User-Centered Functionality -### Affordance +- **User Needs:** Prioritize user needs and ensure that every design component serves a clear, user-oriented function. +- **Performance:** Ensure components are optimized for performance, minimizing load times and ensuring smooth interactions. +- **Reliability:** Design components should consistently perform their intended function across all use cases and user flows. -Use color to create an [affordance](https://www.merriam-webster.com/dictionary/affordance#:~:text=Definition%20of%20affordance,those%20affordances%20are%20fairly%20obvious) to signal interaction, call to action, or a link. + - - - + - - - -
+ + -### System status +--- -`Semantic colors` represent system status of default, success, or failed states when completing an action or goal. +## 3. Adaptable - - - - - + + -
+### Responsive and Scalable Design -### Editorial tone +- **Responsiveness:** Ensure components are designed to provide an optimal user experience across all screen sizes and orientations. +- **Scalability:** Design components should be able to handle variations in content and functionality without compromising user experience or aesthetic appeal. +- **Globalization:** Consider localization and internationalization to ensure the design system is adaptable to different languages and cultures. -Color used within the editorial palette to differentiate content with various lines of coverage. + - - - + - - - -
+ + -### Illustration +--- -Apply color to illustrations and icons to achieve a visual style that varies across editorial tones, product functions, and sub-brand art direction. +## 4. Predictable - - - - - + + -
+### Intuitive and Predictable Interactions -### Brand recognition +- **Consistency:** Maintain consistent design patterns and interactions across all components and layouts to reduce the user's cognitive load. +- **Feedback:** Provide clear and immediate feedback in response to user actions to confirm outcomes and guide next steps. +- **Guidance:** Implement clear, intuitive wayfinding and familiar ui so users understand and can predict how a component behaves/functions when they see it on our product. -Sub-brands have a unique palette, art direction, visual look, and distinction from The Washington Post brand. + - - - + - - + + -
+--- -### Visual information +## 5. Accessible -Continuous and categorical datasets projected in a chart or map often require color to distinguish types of information and values. + + - - - - - - -
- -
- -## Themes - -The theme palette is a level of abstraction that allows the system to assign color across the product with intention. It creates an alias and -assigns a color intention. - - -
- - - Primary - - - Secondary - - - Cta - - - Disabled - - - onPrimary - - - onSecondary - - - Cta - - - onDisabled - - - Accessible - - - Subtle - - - -
- - -
- -### How to use theme - -Theme tokens with `on`(`onPrimary` or `onMessage`) in the name are paired with the base alias. One example is `onPrimary` -is used when an element or content is on the `primary` color token. - - - - - - - -
- -
- -## Semantic - -Semantic colors have assigned meanings and are used consistently throughout our -product to convey a system status. These colors help signal to our users a consistent -message around system status and actions taken by the user. - - - - - - Error - - - - - Warning - - - - - Success - - - - - Signal - - - - - onMessage - - - - - -
- -
- -## Static - -Static colors tokens that do not change value regardless of what theme context -they are in (dark or light). These colors remain static to ensure they are accessible -when applied on a color where minimum contrast is required or branding requirements are applied. To use -a static color add `-static` at the end of a color token name and it will lock the color in the light value of that token. +### Inclusive and Accessible Design -
+- **Universal Design:** Ensure that all components are designed to be usable by as many people as possible, including those with disabilities. +- **Compliance:** Adhere to WCAG (Web Content Accessibility Guidelines) to ensure that digital content is accessible to all users, including those with disabilities. +- **Inclusive Imagery and Language:** Utilize imagery and language that reflect diversity and inclusivity, ensuring that all users feel represented and welcomed. -### Example - -Our theme token `onCta` and semantic color token `onMessage` both are tied to `gray-600-static` -to ensure they remain with the correct minimal color contrast needed for the element to be accessible. - - - - - onMessage on Error - - - onCta on Error - - - - -
- -
- -## Accessibility - -At The Washington Post, access to information is core to our mission. We are committed -to this ideal through not only our journalism but also our engineering and design practices. -When it comes to color we want to ensure that visual information required to identify components -and states (except inactive components), any text, and or any important signal/message meets a -contrast ratio outlined by WCAG 2.0 level AA. + -
+ + + + -### Accessible - -One of our theme tokens named `accessible` is accessible on the target background (`gray600` or `gray0`). - - - - - Accessible color on target background - - - +--- -
+## Conclusion -### [Color tokens >](/foundations/color) +The Washington Post is dedicated to providing a superior user experience through a design system that embodies these principles. By adhering to these guidelines, we ensure that our digital products are not only aesthetically pleasing but also user-friendly, accessible, and efficient across all platforms and user demographics. This documentation serves as a guide and should be referred to during the design and development processes to ensure alignment with our overarching design philosophy diff --git a/build.washingtonpost.com/public/img/foundations/principles/principles-adaptable.svg b/build.washingtonpost.com/public/img/foundations/principles/principles-adaptable.svg new file mode 100644 index 000000000..3fa9d2a2a --- /dev/null +++ b/build.washingtonpost.com/public/img/foundations/principles/principles-adaptable.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build.washingtonpost.com/public/img/foundations/principles/principles-functional.svg b/build.washingtonpost.com/public/img/foundations/principles/principles-functional.svg new file mode 100644 index 000000000..325354a8e --- /dev/null +++ b/build.washingtonpost.com/public/img/foundations/principles/principles-functional.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build.washingtonpost.com/public/img/foundations/principles/principles-inclusive.svg b/build.washingtonpost.com/public/img/foundations/principles/principles-inclusive.svg new file mode 100644 index 000000000..b375cb67e --- /dev/null +++ b/build.washingtonpost.com/public/img/foundations/principles/principles-inclusive.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build.washingtonpost.com/public/img/foundations/principles/principles-intuitive.svg b/build.washingtonpost.com/public/img/foundations/principles/principles-intuitive.svg new file mode 100644 index 000000000..4219db80e --- /dev/null +++ b/build.washingtonpost.com/public/img/foundations/principles/principles-intuitive.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build.washingtonpost.com/public/img/foundations/principles/principles-reusable.svg b/build.washingtonpost.com/public/img/foundations/principles/principles-reusable.svg new file mode 100644 index 000000000..a10750fd9 --- /dev/null +++ b/build.washingtonpost.com/public/img/foundations/principles/principles-reusable.svg @@ -0,0 +1,199 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +