Create emoji guide (#672)

* Create emoji guide

* Add files via upload

* Add files via upload

* Update emoji guide

* Rename emoji guide to emoji_guide.mdx

* Update emoji_guide.mdx

* fixed build error

* fixed document and conflicts

* fixes

build.washingtonpost.com/docs/resources/guides/emoji-guide.mdx

@@ -0,0 +1,144 @@
+---
+title: Emoji Guide
+description: Use these guidelines to help make decisions about emojis in product and marketing contexts. (Newsroom follows its own style guide.)
+kicker: Guides
+publishDate: November 5, 2024
+thumbnail: /img/resouces/thumbnails/emoji_small.png
+imageTag: /img/resources/thumbnails/emoji_cover.png
+rank: 2
+---
+
+## When to use
+
+**If you're using emojis, they should ideally meet all the following criteria:**
+
+- Used as an enhancement (but not in place of words)
+- Used sparingly
+- Used when the overall tone of the experience is light
+
+<Box css={{ position: "relative", paddingLeft: "$200" }}>
+  <Box
+    role="list"
+    css={{
+      "&::before": {
+        content: '"○"',
+        position: "absolute",
+        left: "$100",
+        fontSize: "$100",
+        color: "$gray20",
+      },
+    }}
+  >
+    <Box role="listItem">
+      Emojis chosen should also be light in tone (i.e. confetti is OK;
+      tombstones for a Halloween email, not so much)
+    </Box>
+  </Box>
+</Box>
+
+- Used when there's no chance of the emojis appearing juxtaposed with grim, serious articles
+
+<Box css={{ position: "relative", paddingLeft: "$200" }}>
+  <Box
+    role="list"
+    css={{
+
+      "&::before": {
+        content: '"○"',
+        position: "absolute",
+        left: "$100",
+        fontSize: "$100",
+        color: "$gray20",
+      },
+    }}
+
+>
+
+    <Box role="listItem">
+      For example, Microsoft doesn't have flag emojis. Check to make sure your
+      emojis convey what you're intending.
+    </Box>
+
+  </Box>
+</Box>
+
+<BR/ >
+
+## How to use
+
+**If you use emojis:**
+
+- Use widely recognized emojis that translate well across devices.
+
+<Box css={{ position: "relative", paddingLeft: "$200" }}>
+  <Box
+    role="list"
+    css={{
+      "&::before": {
+        content: '"○"',
+        position: "absolute",
+        left: "$100",
+        fontSize: "$100",
+        color: "$gray20",
+      },
+    }}
+  >
+    <Box role="listItem">
+      For example, Microsoft doesn't have flag emojis. Check to make sure your
+      emojis convey what you're intending.
+    </Box>
+  </Box>
+</Box>
+
+- Make sure the emoji has enough contrast for both light and dark modes.
+- Place them at the beginning or end of sentences, not in the middle.
+- Use within text (as opposed to an image or any other format).
+
+<Box css={{ position: "relative", paddingLeft: "$200" }}>
+  <Box
+    role="list"
+    css={{
+      "&::before": {
+        content: '"○"',
+        position: "absolute",
+        left: "$100",
+        fontSize: "$100",
+        color: "$gray20",
+      },
+    }}
+  >
+    <Box role="listItem">This is required by Apple's guidelines.</Box>
+  </Box>
+</Box>
+
+- Make sure related copy stands on its own — emojis should be able to be deleted without affecting the meaning.
+
+<BR/ >
+
+## When to avoid
+
+**Avoid using emojis:**
+
+- To represent our core product offerings.
+
+<Box css={{ position: "relative", paddingLeft: "$200" }}>
+  <Box
+    role="list"
+    css={{
+      "&::before": {
+        content: '"○"',
+        position: "absolute",
+        left: "$100",
+        fontSize: "$100",
+        color: "$gray20",
+      },
+    }}
+  >
+    <Box role="listItem">
+      If we need art to represent core product offerings, we should evaluate if
+      the use case warrants creating custom art.
+    </Box>
+  </Box>
+</Box>
+
+- If there's any chance of the emojis appearing juxtaposed with grim, serious stories.

build.washingtonpost.com/public/sitemap.xml

@@ -284,6 +284,10 @@
     >
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/resources/guides/emoji-guide</loc>
+  </url>
+
   <url>
     <loc>https://build.washingtonpost.com/resources/guides/figma-guide</loc>
   </url>