{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2026-09-15-newsela-brand-system/","result":{"data":{"markdownRemark":{"id":"e440a788-3f82-50fa-a3b6-dc40a4cf8e3e","html":"<p>As Lead Designer at Newsela, one of the biggest problems we inherited wasn't a visual one — it was a scale one. Newsela had grown from a single literacy tool into a platform spanning ELA, Social Studies, STEM, Formative assessment, and Schoolytics analytics, each shipping features across marketing, product, and content teams that all needed to look and feel like the same company. The identity we had wasn't built for that. It was built for one product, one team, one pace.</p>\n<p>Our job was to fix that: turn Newsela's visual identity into a system flexible enough to support fast go-to-market execution and consistent enough that five different teams could use it without a designer checking every asset.</p>\n<h4>The problem with \"just a style guide\"</h4>\n<p>A traditional brand guide tells you what the logo looks like. It doesn't tell a marketing manager building a webinar graphic at 4pm on a deadline what to do when their product doesn't have a color yet, or tell a product designer how far a sub-brand can bend before it stops looking like Newsela. That gap is where inconsistency creeps in — not from bad taste, but from missing decisions.</p>\n<p>So instead of designing a static guideline document, we approached this as a system: a set of rules with enough range to answer real production questions, not just show off a logo.</p>\n<h4>Logo architecture</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f874ec6960570bfe0b673887ce7704c3/9b29b/newsela-logo.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABCklEQVQoz41TyUrEQBCd/7969ubRq3oRQVBwEPUwAUHEDT05KEmwk3Qtz1T3JE62iQWP16nlUQtZYGOq2nKD+sscYBkixC1vq9ZsgS37EwU+U0ZeMDxJ7emDsc4YItqp6wg2TktiZqSOsXdGOL0XJB+C5bPg+kVw+WhglJ7jJHOCzAJXlvj+Yexf+FB8/sA4XjFOEsaR8YqQ1nFbyaygceEJ67weTXlk3IivfGbkfsBV1YY17Ms6tr26SqATNZMdNm9PHA5w9UQ4WBLu3ih0J9rN+8eVIxdlBWKP21fC4Q0heY+CqsPORgWHF2dkRYQJZc6uK6Oj7hTsikq7T0B3is122O5J+3/QtOgvwTdg4mkGPb0AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Logos\"\n        title=\"Newsela Logos\"\n        src=\"/static/f874ec6960570bfe0b673887ce7704c3/a878e/newsela-logo.png\"\n        srcset=\"/static/f874ec6960570bfe0b673887ce7704c3/01e7c/newsela-logo.png 512w,\n/static/f874ec6960570bfe0b673887ce7704c3/2bef9/newsela-logo.png 1024w,\n/static/f874ec6960570bfe0b673887ce7704c3/a878e/newsela-logo.png 2048w,\n/static/f874ec6960570bfe0b673887ce7704c3/f581c/newsela-logo.png 3072w,\n/static/f874ec6960570bfe0b673887ce7704c3/9b29b/newsela-logo.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Newsela's mark and wordmark are treated as two equally important, tightly calibrated components — never separated in proportion, never distorted. We defined the minimum clearspace using the logo's own \"N\" as the unit of measurement, so the rule scales with the logo instead of being an arbitrary pixel value, and documented nine specific misuses (stretching, recoloring, adding effects, etc.) so the rule was unambiguous rather than a matter of taste.</p>\n<h4>A color system built for one brand and six products</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/8e6338bfed91ddbb2f8a1f4c6c87396a/9b29b/newsela-colors-main.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABZklEQVQoz5WTz0rDQBCHexMfwOfx6MUH8eBBEO/iwacRBO/iUVAULCpULKKVYmqSNkmzSTa7+zlpWm1r658hyyazO7/5dnbSQMw5x2QuSoc2DmtrX5I77rqO2249pwWUsq5ln7F8xo0laCwTrIIqO2tZVrdzVmSs7SrO25b3BDohdEMtiS3TGg1gxjH/HSSa6w7c+9DsGDw/ZqgKtOjkhZmBWUiYaTc+Up252bxhc2OdvZ0tMIo4jkiSGGcNWaaWE87bZMOb1+Po+ISLqxt6QYTKcqI4oT+IJGm5WHCe0NjxELfNB3LuS/AviB9PsWkPlwUyewIcCuk/CfNUatZtgQiQ+0SBh4r7slJiCvV7DfOypiurtpGnnRr2nzMOXjWHLxlPqmRgIBSwvl5yKT8RBkPF5VtIKzM8DAu8/oAoTYUPKY/++6VUnTra4qoA++UXgUndFrXccsIp0ZGkvNupwPrvcN+O/AFGXlWE1nk9WgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Primary Palette\"\n        title=\"Newsela Primary Palette\"\n        src=\"/static/8e6338bfed91ddbb2f8a1f4c6c87396a/a878e/newsela-colors-main.png\"\n        srcset=\"/static/8e6338bfed91ddbb2f8a1f4c6c87396a/01e7c/newsela-colors-main.png 512w,\n/static/8e6338bfed91ddbb2f8a1f4c6c87396a/2bef9/newsela-colors-main.png 1024w,\n/static/8e6338bfed91ddbb2f8a1f4c6c87396a/a878e/newsela-colors-main.png 2048w,\n/static/8e6338bfed91ddbb2f8a1f4c6c87396a/f581c/newsela-colors-main.png 3072w,\n/static/8e6338bfed91ddbb2f8a1f4c6c87396a/9b29b/newsela-colors-main.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>The primary palette is four colors — Newsela Blue, Neutral, Bisque, and Aqua — with an explicit ratio (roughly 50% blue, 25% Bisque, 25% Aqua, with black and white used sparingly) so that any two people building a graphic land on something that reads as \"Newsela\" without a designer in the room. Each color also got a full tint/shade ramp so the system had room to breathe in illustrations, charts, and UI states instead of just flat brand blocks.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e127576dacf2433c8989a532ed463d10/9b29b/newsela-colors-product.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABr0lEQVQoz5WSTWsTURSG+zsF0Y17Ny5cdOHGVVE3utWFChJdCKKWYKottVXRtLGgabVNM5MmmWRmMh93vu99nK+oSJvigTPDgXMeznveu0QeSqkyi0gyRZqnzDJkXgcb69iXLuBfuYy4sUw0HqEsEzkZEzkz5vPzWPoXmElVQuNElrX3Q8NstBAvthDvOviGjfIilBMgw/j/gbPdAb2bbzFub2Pe/4A/cJBGDnJzNaKYUYuBBSxMFFkmS8lhr030fBm5fi/XP8I3T4jcKcbLu7idtWpDmZ0NLP6yqGW1YaAdIFoPke1VZnqPxHdQUYDWeoI4+loD5dnAOFVERSaVKYm1Sdq9CPp1QmuH2D3Im3SurTzgWXO7OlO2AJjmNyygad1kaQO6r1bRt75gDsd4tk0kBO+bHfr7o7JHynNMKYFpVesfJ7y5ukN75ZBh186hEc40Zu9xH6Pt1pLPMaWQHNQu702OuLXb4FFvjWPrBFs4eLHgdf8T31292nCRy3NTsvrQ38Y97mw+pbG/wfF0iGGbeKGg+fMzXVM7HTiPv98T1QsrPr9DptkfR+XpM78AKmxIHCdAkLUAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Full Newsela Palette\"\n        title=\"Full Newsela Palette\"\n        src=\"/static/e127576dacf2433c8989a532ed463d10/a878e/newsela-colors-product.png\"\n        srcset=\"/static/e127576dacf2433c8989a532ed463d10/01e7c/newsela-colors-product.png 512w,\n/static/e127576dacf2433c8989a532ed463d10/2bef9/newsela-colors-product.png 1024w,\n/static/e127576dacf2433c8989a532ed463d10/a878e/newsela-colors-product.png 2048w,\n/static/e127576dacf2433c8989a532ed463d10/f581c/newsela-colors-product.png 3072w,\n/static/e127576dacf2433c8989a532ed463d10/9b29b/newsela-colors-product.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>The harder problem was the product layer. Newsela ELA, Social Studies, STEM, Formative, and Schoolytics each needed their own identity — something a teacher or district admin could recognize at a glance — without any of them drifting away from the parent brand or bleeding into each other. We solved this by giving each product a single dedicated color (ELA Red, Social Studies Pink, STEM Orange, Formative Yellow, Writing Purple, Schoolytics Green), used exclusively for that product and never swapped or shared. It's a simple rule, but it's what makes it possible to glance at any piece of Newsela marketing and know immediately which product it's for.</p>\n<h4>Typography, iconography, and the smaller systems that hold it together</h4>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3bfb75fa13bea0b6b67097581772ee79/9b29b/newsela-typography.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABOUlEQVQoz41Ta2+CQBD0//+ffux3jY/UNoA1bVXQa+R4IyCvne4daTG0plyyueHYHWZ3jgluFhFhuPKSkBRAegUuJTROiu6sbb/r+vzJkKxuCW5CiLnoWjFOgY2TwTrE2B4vOMgGjk84BoS60ZXjCDNW1jD2c2BpCTw8znRsDhHcCyBCzm3of4UVJ4mIuMWOULJCcx9j9rzHentmHML48GHLmt+PUKh2RVrprxNCVqjana53mL/YWJonLIwj9m45jrDlPc6JDSB95meAsQsxfXrXyixu+U1kOP20PIJQza+oSBcETGjZKeaGwMIUmtTcBXC8kS0rks+4c7mslUFM6ORYvUqstpJnGGFjJ7C9hg0cOcP2JkO1L5nUZ2c9FWkfyrS7Lg8vtsL9M92J3z/DnwpvyTqMuzFU+AUvg1l2li3DBQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Typography\"\n        title=\"Newsela Typography\"\n        src=\"/static/3bfb75fa13bea0b6b67097581772ee79/a878e/newsela-typography.png\"\n        srcset=\"/static/3bfb75fa13bea0b6b67097581772ee79/01e7c/newsela-typography.png 512w,\n/static/3bfb75fa13bea0b6b67097581772ee79/2bef9/newsela-typography.png 1024w,\n/static/3bfb75fa13bea0b6b67097581772ee79/a878e/newsela-typography.png 2048w,\n/static/3bfb75fa13bea0b6b67097581772ee79/f581c/newsela-typography.png 3072w,\n/static/3bfb75fa13bea0b6b67097581772ee79/9b29b/newsela-typography.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>We built out a standard type hierarchy (eyebrow, headline, subhead, body copy, inline subhead, hyperlink, fine print) pairing a serif display headline with a clean sans body — expressive enough for high-level brand moments like ads and event materials, structured enough to hold up in dense product and marketing copy.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/1e26f252784dd7a40268746431672ca1/9b29b/newsela-icons.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB4klEQVQoz42STWsTURSG8xfc6U4EVxVR7ELdiT/AlX9EoiuVak1r/MAQlaYqFImbVNq0ShsTq65iIUqRJphFTVSotJNJYzJjMpmZO/N4p5naNAnUA4czcM/73ufcOQH8cF13u9rCxXZAbxnkV/N8yuVoNLTtM0VRUNWq3+fQkbj/tF4Edsz2GMrPuq6TzWZJJpMUi0VppBKNRpmYiFGt1TAFmF6jb7ijD3TTeYdek+UTJhIJMpkM5fJ38oUCwWCQkZEbfCuVaNlgmA69QIHekT3TDqlgq1qVZBV0SeuF1qhjGC26o3vcnpE7VWvDRs1i87dFpSFQ6tK4Carm0jBhXW3xY0OjWNqkqrt97+gb7mL/kaLYszizrzJEHk7yODbFy7kUU/FpsrkCM/NpVgplEjMLrFeadAMN/CmFXy73XiwzObfK7EeF5LLK8/QaT19/ZT63RepLk4UVjfjST7JrNs5gwt0bLj6xOXwNhkbheAhOjMExWYfvyLztcvauw+mwxYWYw9BNG73t7nnLPsJzD2wOXGpz8LLJqZDJ8LjFkasmZ8Imh66YHL1ucTJkcT5iyT4TzdjHcPqzw61FQTgtuL8k861gLNXJ8TeCkKyRd4Loe8GjD8LfRfrXZtAK/G906/4CklAh8hejEIIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Icon Grid\"\n        title=\"Newsela Icon Grid\"\n        src=\"/static/1e26f252784dd7a40268746431672ca1/a878e/newsela-icons.png\"\n        srcset=\"/static/1e26f252784dd7a40268746431672ca1/01e7c/newsela-icons.png 512w,\n/static/1e26f252784dd7a40268746431672ca1/2bef9/newsela-icons.png 1024w,\n/static/1e26f252784dd7a40268746431672ca1/a878e/newsela-icons.png 2048w,\n/static/1e26f252784dd7a40268746431672ca1/f581c/newsela-icons.png 3072w,\n/static/1e26f252784dd7a40268746431672ca1/9b29b/newsela-icons.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>The icon system follows a strict 600x600 artboard with a 50px margin and a consistent 30pt line weight, built to feel light, modern, and friendly rather than decorative. And to give the brand some texture beyond flat color and type, we developed a library of brush-stroke and plaid-style pattern fills plus a set of hand-drawn embellishments (arrows, sparkles, underlines) — with a simple rule that embellishments stay black or white next to photography, and can take on color only around text, so they never fight for attention with real content.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b34f717fa0109ca6138f7fa9c62d8bbc/9b29b/newsela-graphics-embellishments.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACY0lEQVQoz62SS09TURSFO9CpE0dOnfgbnDAxopFETSRRBzLAAYkz4wDFMFBHPhgYjUSiQRGTalQURGN8ICjlJeFdWmgLLaXQe9veR9/33p7Pc9tE+AGeZGXvfZKzzt5rbQ/yXHxhs/+KRV2HTXu/Q+9EhWxREEoUUbQSwTWF6dlFlHQWswiKCdsujBoSOmRyLpPA44b6+zaexjIXum1GQ4KxsKgSDk6p+EYDPL97j6ZjR4klTbIliKdtVuI5Itsl1lwoFqmscKlqhA+GHJp7bL76KyRNl6xCuQLegSkut73lWvszGlpe0z+p4ch3oc0s332LjEwu83N8Cd/sOqr5j1DwxQ+PhqFnHF5OCvrn5Mg2vOt+wvWWSxw+95hDzT66vBPIa2KqxXJUZyak8SeYYT5ikto9csc3QWOX4Op7wc1PolqbcrSBz8O86u2h7+MPOt8sMDaXIG/VdNsyajpKFap5Orerw6c+aP0Anb/h4Qh0y07zZVHVK5MHowBSAYoO5EryM6mvUajFWg6FstjpcGhJOvvLom/KxjtaZnDakjrC8rpOZKtIVLUJxExZa6wrNhvpityAvMwtaUyRsDQmvXvkM3dMPCdV9p1V2Xta4WCzSkqK7I+kmQkkq04GYwYBqVs4UWBlw5Qxz+pmrpovhNMkNWvH5YZbBp56lT2nFDzHkxxoSqHoFVbjWSm+Kbsp4Jfdug9ngknmQ6kqZmW+EE5JbaOsJYwdwvbeHHWtGidu6Bxpy3D+to6eFyiGw7bmyCjXSXfkHuaISrh1IlNmS7MlLOKpEhl3LVxCIWru/I/jcv0FhiMPhk9/eCYAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Graphics and Embellishments\"\n        title=\"Newsela Graphics and Embellishments\"\n        src=\"/static/b34f717fa0109ca6138f7fa9c62d8bbc/a878e/newsela-graphics-embellishments.png\"\n        srcset=\"/static/b34f717fa0109ca6138f7fa9c62d8bbc/01e7c/newsela-graphics-embellishments.png 512w,\n/static/b34f717fa0109ca6138f7fa9c62d8bbc/2bef9/newsela-graphics-embellishments.png 1024w,\n/static/b34f717fa0109ca6138f7fa9c62d8bbc/a878e/newsela-graphics-embellishments.png 2048w,\n/static/b34f717fa0109ca6138f7fa9c62d8bbc/f581c/newsela-graphics-embellishments.png 3072w,\n/static/b34f717fa0109ca6138f7fa9c62d8bbc/9b29b/newsela-graphics-embellishments.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h4>The real test case: relaunching Newsela Science as Newsela STEM</h4>\n<div class=\"stem-image-row\">\n<span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \">\n      <a class=\"gatsby-resp-image-link\" href=\"/static/3020ff1d2925366d6865240088367c9f/c2d13/newsela-stem-explore.png\" style=\"display: block\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 84.375%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABYlAAAWJQFJUiTwAAACLUlEQVQ4y5VUW4/SUBDmNy8JWQmEQJS4Tyb6JA9iXBVZAw9uFqGwrlARFHaRS7rdYCLYBNjQSgqES1v47DnJYVturpNM5syZ6XTmm5njWC6XIEyInQkvFgvKzEaI6cxmtTPpWL+4+/yOrD/dZrOSw3o5U7rAHwm3soLrawGNRgOapq2cRVHEYDBAu92mtlartRF4leFcN3B68ho/U29wepbAg8NDuN1uhMNhWlq/30cgEEAul0MoFILX64XL5aI6g8MW0DB0JLk0PvNfUC6XkclkkEgkqDQMgwaMxWKo1+vI5/PIZrOIRqNU34nhcKhCUWSoqmqeh+h0OrREQrquQ5Zl065gPB5T2e12MZlM7AG3Afsv4PfZHWwMCDWbTZQLPBS5j7RZaiqVoo2gGM9m4PMFKAMVX82Sk8kkisUi5vP5ZoYs4PmnC3DvXiB3zuHhoyCcBwcIBoPomaX9+i3h+OkRxOIFgo+P4Pf74fF4KJ62pliVSqWCD2cfUa3VKdiFQgGlUomOTq93i3j0LYTqFermyBDfdDoNSZJ2Y0gk6bamzWkpmqbTDltJM8eLNIjYZyYMLBlbwH3AL/+3KesZsvNopqHGxYGBhG+XP/D+JIpIJELnku3w+jtgy9D6ABASxBs8f/YEN5XvePnqGD6fjzbB6XSC4zib78Yub0ufDHQsHkf5qoJarQpBEMDzPN0QMtC7YNoZkAJvgj4ajVZM1o9sy3Q6vX/A+2zGPp+/2Iz8QqCo67YAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class=\"gatsby-resp-image-image\" alt=\"Newsela STEM in progress\" title=\"Newsela STEM in progress\" src=\"/static/3020ff1d2925366d6865240088367c9f/a878e/newsela-stem-explore.png\" srcset=\"/static/3020ff1d2925366d6865240088367c9f/01e7c/newsela-stem-explore.png 512w,\n/static/3020ff1d2925366d6865240088367c9f/2bef9/newsela-stem-explore.png 1024w,\n/static/3020ff1d2925366d6865240088367c9f/a878e/newsela-stem-explore.png 2048w,\n/static/3020ff1d2925366d6865240088367c9f/c2d13/newsela-stem-explore.png 2560w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\" loading=\"lazy\">\n  </a>\n    </span>\n<span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \">\n      <a class=\"gatsby-resp-image-link\" href=\"/static/d9accd06e670a8fc9a51a89f13ded11b/c2d13/newsela-stem-final.png\" style=\"display: block\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 84.375%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC20lEQVQ4y31TS08TURit/8EYYlwYH0Q37txiTNwSH3s3LNm5wAeJJBBIjRs3JgZDUlNUXq2Rh7iwUIyoaCIpKoIgAi1Q6PQ17bzn3jl+d6aF2la/5OTemblz7jn3O9eHinIc56+xel75rt5aUb56i0VlpBR0XXfnpmnCtm0XYv6/zXyVOwlwxtznyae9GLxzHXlFw+vJSQQCAQSDQYTDYRQKhRqldQk55566TBqvJibQ9/ABYrEYujo70d7ejtbWVhd+vx+stHG1fV896YyI5+Y+4eXYOCQpjejMDJaXlxGJRBCNRrGyurpPWG1/X2FRUSClM9BNy322idSwLPyrhBsBRr9zl0IoFYTc24mN34Nx+xzs7gvg3U3gPU1w/BfBOs7DetwCpyCBSRuwpU2wdAJOOg5HyWGtqxnJ4R5PJakmQu/c1IUI+HQv8PEZ8D5YQj/wLgB7fhyytAtOBDCKgF5wwQwVv0cfQV6c9QiJa9+yJKuQSawtYlIFYdwQ0SFvwiJznJJVx13vOXbc0SeyJerWzTY0HDmMs42n0XjyhIszjadw7GgDrl29QvmzIMsFD4UyipDzeaiqetDlclQiU1OUtScIhcIYGh7BsMBICM8HBjBNnc3mcjAMExYJsKwSRNCpcbphHBCWLeuaiv+VST9xZlNnWQ1KpsuEnkIr+QXq4iDUpRfQlsJQfxBoVL4PQV17Q4eYhVPcps7uVCDpvmN6rlZhTtqCmkuAqSmYxSRsGrnmQS+k6KyIkFGLuHUA8cwMWKZeS5jZS2J3fRXpnS1IiQ0U90gNLWSaAsfQYCoUE60IbhrEodFI3+gMBVB59RzmdXkn0Ib55kOI91wG7l8Cu3EcfJQC29cCO9wBvO0DD90Fnx8DPvSDfQ7DycQpbxR2Wao9w72fMaRjUWhbK8h+m4WzuYB8fAXq+le6HXFk1pfA6ZYUU9vIJ34BShZSchsWqWaW6bZFEP4Bg//nLojDR6sAAAAASUVORK5CYII='); background-size: cover; display: block;\"></span>\n  <img class=\"gatsby-resp-image-image\" alt=\"Newsela STEM logo\" title=\"Newsela STEM logo\" src=\"/static/d9accd06e670a8fc9a51a89f13ded11b/a878e/newsela-stem-final.png\" srcset=\"/static/d9accd06e670a8fc9a51a89f13ded11b/01e7c/newsela-stem-final.png 512w,\n/static/d9accd06e670a8fc9a51a89f13ded11b/2bef9/newsela-stem-final.png 1024w,\n/static/d9accd06e670a8fc9a51a89f13ded11b/a878e/newsela-stem-final.png 2048w,\n/static/d9accd06e670a8fc9a51a89f13ded11b/c2d13/newsela-stem-final.png 2560w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\" loading=\"lazy\">\n  </a>\n    </span>\n</div>\n<style>\n.stem-image-row { display: flex; flex-direction: column; gap: 16px; }\n.stem-image-row > * { width: 100%; }\n@media (min-width: 768px) { .stem-image-row { flex-direction: row; align-items: flex-start; } .stem-image-row > * { width: 50%; flex: 1 1 0; } }\n</style>\n<p>The clearest proof this system actually worked came from a real business event: Newsela's acquisition of Generation Genius. The existing Newsela Science product needed to become Newsela STEM, incorporating the acquired brand without looking like a bolt-on. We explored several lockup directions — different microscope mark treatments, different ways of crediting \"with Generation Genius\" — before landing on a mark that felt native to the Newsela system while still standing on its own as a product identity, complete with its own orange-driven palette extension.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/00ad3246a9a4e38c70c1254c38b95511/9b29b/newsela-stem-displayed.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACQklEQVQoz22STWsTURSG+yPduBNc+AdEQdSlKzfiQnDjRkRwJdLSYrWlIW2RmnZs2qTpZJJ0mul8ZCaZTDLfM48nE2uLeOCFy733POdzpSxLrq28rfKPuGVlgX3Rwx5opK5BNLYp9Sbuxju8909JTI2V6mORU+ZZ5VCJ4iaEUNMsJ4wzsjTl8nifQWOHWG8RGSpXZwpxu46/9pqgsbEE2loL9cc2+mGN3Bng9U5RD2q43WPIYnzPRVHOGZtDpnoHT+7DQZPQ7GNZNmP9HLOxxUxTlsCx3mWiKjjHu8z0NqPOEer+Ju7ZzwoY2jqj5m4Fy9whpSeyNcqZR7b/CfflHew3D0j00yWw8CVK7wSro5A4OqXVJekpMOpBKhlal1hqi7kzJAtnhJ78H4+50OW+18FVfzE3B6TyVgFnhoa695VOfZ1YGhtrDcz6Z+K+lBz6GF7EXtNmcOmQnnwj+PAQWxIIBBxGMYm0PExSEulxBZwPTnAOt/CPd0ivVCKRpdSYNnek5Ahb79NvtwkSaGyvc//uPV49f0wwMvEcC2MovfV9kiRZAkOji9M+wGw3qkaXgUsqbcBWZej5cgDaEcKjKxNeffuM1vZH4jjBG9kYhoEvwHSR4e09/NeuXybTGbph4noeRZYQBx4Tb8Rk4hNMp8zDkCzLbjJcQP+nxQ4WRUEuOzoPAiYyiIVjKo5RFHHUm+P4cRUkk139C/xvdgtYnlfn72tfePHkETNf1kSyKwOTeauG31XY3VxFbdSljCuSOOY38YE1dzM44ugAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela STEM developed\"\n        title=\"Newsela STEM developed\"\n        src=\"/static/00ad3246a9a4e38c70c1254c38b95511/a878e/newsela-stem-displayed.png\"\n        srcset=\"/static/00ad3246a9a4e38c70c1254c38b95511/01e7c/newsela-stem-displayed.png 512w,\n/static/00ad3246a9a4e38c70c1254c38b95511/2bef9/newsela-stem-displayed.png 1024w,\n/static/00ad3246a9a4e38c70c1254c38b95511/a878e/newsela-stem-displayed.png 2048w,\n/static/00ad3246a9a4e38c70c1254c38b95511/f581c/newsela-stem-displayed.png 3072w,\n/static/00ad3246a9a4e38c70c1254c38b95511/9b29b/newsela-stem-displayed.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>That system got put to work immediately: launch webinar graphics, social assets, and a full product page all shipped using the new STEM identity, built by people outside the core brand team, using only the system we'd documented.</p>\n<h4>What this unlocked</h4>\n<p>The result wasn't a prettier logo page — it was a modular brand framework that let marketing, product, and content teams move independently without drifting apart. Go-to-market materials could be produced faster because the color, type, and layout decisions were already made. Product teams had a clear boundary for how far a sub-brand identity could flex. And when Newsela needed to fold in an acquisition and launch a rebranded product under real time pressure, the system was flexible enough to absorb it without a redesign.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 2048px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/1eb02594a4fc667490fa7d4ea9f6fc97/9b29b/newsela-illustrated-hero.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACaklEQVQoz1WSS08TYRSGu/cX+Avc6S9QV/4AVyZGoi6MLLzEuDANMfES2BATQlhIGpXENoqRWoQEitWEYgtpw8Xp0Dttp+30bgEt1M5MefymtRQXZ77zne/Mey7va9nOG8g5ne28TkQ1CIszqupkqm121AbrsTqF+lEnLufbIq9NpATxgkGqbBAr9P43OmbpXeScwXJUI5iF4h4s+GtcGQ4wODjEZRu4ZYNMqYmcabAWjOCR9ni5rLMka8egpll63UlZjbCoPOORCDhtWCd8XB3P4fo4x5mhXSa9BjvpNFtSjBX3F2464NTDNo+cupjA4IfSbcxifqSsLtrX8adgYGSFJ+ML+F7cxjfvJJjRcDhmmfYWqFbqpHI13nj3sE7XeTCZYH6ziVJrdzCOAbcyOrXfcHeqhOXSJmef/mIxWEZVcqRrR8xLBl/jUJUDJJemGbV9JzZnJ7XqZTucJl5sH/PQAQwJ9HSlzWr8EFegzrdwk6ByROUAomW4MdVieNEgmv+DkkwR2tggly2TrEJh90gA9onpAopLTFRJlVrc/6Ax5krz3j6DO5BndT2JS4JFQYrTbufxuxznr00wOuZAChdJJPOEC/QBTcecPyv28PxzA8uAyrPZfSadUZy+IqFEhUYLUVDH5vnJuXtrWC584vQdlfUthUg4hayagFp35B7dUUG9R27xynvIlF/D7S+QKewTLwsNCl26Q4e8XTnAah3h4q3XXLdDotgkUuR/HfYcM2juoitWvWOmNs39dkz4yaKGUgd1H5SK3llVX8cnRj4ZlLL9xB5z3aJdUEnRhOY0kWf8e+sW7uX9BfHZ/ocH08D0AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Newsela Branded\"\n        title=\"Newsela Branded\"\n        src=\"/static/1eb02594a4fc667490fa7d4ea9f6fc97/a878e/newsela-illustrated-hero.png\"\n        srcset=\"/static/1eb02594a4fc667490fa7d4ea9f6fc97/01e7c/newsela-illustrated-hero.png 512w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/2bef9/newsela-illustrated-hero.png 1024w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/a878e/newsela-illustrated-hero.png 2048w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/f581c/newsela-illustrated-hero.png 3072w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/9b29b/newsela-illustrated-hero.png 3840w\"\n        sizes=\"(max-width: 2048px) 100vw, 2048px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Brand work at this scale isn't about a single beautiful artifact. It's about building enough shared decision-making into a system that dozens of people, most of whom aren't designers, can execute on-brand without you.</p>","frontmatter":{"date":"September 15, 2026","title":"Newsela Brand System","description":"Visual Identity","tags":["Brand Design","Creative Direction","Design Systems"],"externallink":"https://newsela.com/","featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACZElEQVQoz12TS08TYRSGu/cX+Avc6S9QV/4AVyZGoi6MLLzEuDANMfES2BATQlhIGpXENoqRWoQEimhCsYW04eJ0ei/TTtuZXi2ghdrOtI8zQ1rQxcn55nzfvO93zvt+NjGvESnomPlkCDmNcKFDTIUfslnTifT324R7Z078b2bb8YdGTNGJGjmuaGSrHXaUBhuJOmq9a9VFgyBikpQgqepIZZ2EegxmAR7fUGcl3iaUg+IeLARqXBkOMjg4xGUHeEWdbKmJmG2wHoqxLOzxckVjSWz3Qc2w9W4n5NpEDeaZZYGg24F9ws/V8Tyej3OcGdpl0qezk8mwLSRY9X7hpgtOPezwyK0ZHejWWPotm7OQyhoBCQZGVnkyvoD/xW38825C2TYu1yzTPpVqpY6Ur/HGt4d9us6DyRTzW03kWsfC6ANuZzVqv+HuVAnbpS3OPv3FYqiMIufJ1LrMCzpfk1AVg6SXphl1fCcx50Ra8xGJZkgWO30dLMCwgZ6pdFhLHuIJ1vkWbRKSu1QOIF6GG1Mthhd14oU/yGmJ8OYm+VyZdBXU3a4B+J/KpvQJg0Uqtbj/oc2YJ8N75wzeYIG1jTQeARYNUdxOJ4/f5Tl/bYLRMRdCtEgqXSBqWKsP2PNczpjD888NbAMKz2b3mXTHcfuLhFMVGi0MQg3H8k/O3VvHduETp+8obGzLxKISooLlTavlntxxQ/plscUr3yFTgTbegEpW3SdZNjxo+NIbPuTt6gF2+wgXb73muhNSxSaxIv/6sLcwi+YsjsyqWWF605yvFcY6XWwj10HZB7ly9ErE/17KX4es/o1+GKGGAAAAAElFTkSuQmCC","aspectRatio":1.7699115044247788,"src":"/static/1eb02594a4fc667490fa7d4ea9f6fc97/bc8e0/newsela-illustrated-hero.png","srcSet":"/static/1eb02594a4fc667490fa7d4ea9f6fc97/8ac63/newsela-illustrated-hero.png 200w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/3891b/newsela-illustrated-hero.png 400w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/bc8e0/newsela-illustrated-hero.png 800w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/6050d/newsela-illustrated-hero.png 1200w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/00405/newsela-illustrated-hero.png 1600w,\n/static/1eb02594a4fc667490fa7d4ea9f6fc97/b6b46/newsela-illustrated-hero.png 3840w","sizes":"(max-width: 800px) 100vw, 800px"}}},"bannerimage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAABYlAAAWJQFJUiTwAAAClElEQVQ4y+WU20sVURjFJzS7nAghgq5ED0VF0NUuVBqVRvQiFV0wu4nouejxmHkqQSyyTmplKZSmZSZpt1P0FL5Gf9SZvWdW39r7eJhAj5S99fAxe88wv1nf+tYeZ3Gji39Zzn8MXNSQwXTrPwby5VDgRmiOUKNwfjSDBTFbBZFMDvY3UKdIIFvvKqxodbH2loujvRpL4nNQuOami8QnoCSlcWbQw9VR3yguimZyFoQCVuQrinAuv/HB2vdQo1nAG9oVyh5po7pQ2iecxXXQ4+CVXeYUEsI2L434OD3gYaMAk1+AbfeUUVkzqtD+TePUgMK8eusx4bzyuSP3ViZd479RWPPWR8VTD00fgU0dCheGfVwRxXxpeYuL6LhGea9C7ZgSSxQGf2h0TWok0xrdk3Y9/NND6rtGcUIUVr6wvtG/7Z0KN9Iw7bKV4mZX4AptXzUqnyusEiVHnijsfuBiT8pWaY9CiewPdCszTKfimYeEqNt1X+P8kI/GD7bdi699eUHDqbNxKsx6yT1bZ6vmGtiblsPvfFS98rG/SyMusMi4hUYngNWSAHrFL+eCH/998mafLTMUquNQzg15BlgvH+C9w481lja5WHdbGYXBoOfLqFM75htgbMKq47VOoMuuu2bq9HbLHTssKl04C9Q5+9IDa0odY1QqOWR8Wj4DeyWfnDrBU7nLp9Q52e8hLMroGYvQ9W3KQKplMMckUvSUJ4of5qAKwpkZT47DacbeA+Gsdyf6PBzs0UbdcUkAbSgTP3d0arSm7UnitGcEEhYJKDwk7dLDa5JNDooeUzG7YNvBYzZty4SxGgRcPWIhPDUcAu8xTuXSNhVTHU9Qvh9FDkh1VMM1feSaP42dEng+I3xzx+zAXzX5spu6KQMtAAAAAElFTkSuQmCC","aspectRatio":0.8888888888888888,"src":"/static/d605cb9c88f1bb9c9eff21d7b2764259/bc8e0/newsela-cover-image.png","srcSet":"/static/d605cb9c88f1bb9c9eff21d7b2764259/8ac63/newsela-cover-image.png 200w,\n/static/d605cb9c88f1bb9c9eff21d7b2764259/3891b/newsela-cover-image.png 400w,\n/static/d605cb9c88f1bb9c9eff21d7b2764259/bc8e0/newsela-cover-image.png 800w,\n/static/d605cb9c88f1bb9c9eff21d7b2764259/6050d/newsela-cover-image.png 1200w,\n/static/d605cb9c88f1bb9c9eff21d7b2764259/00405/newsela-cover-image.png 1600w,\n/static/d605cb9c88f1bb9c9eff21d7b2764259/0e6e2/newsela-cover-image.png 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},"pageContext":{"id":"e440a788-3f82-50fa-a3b6-dc40a4cf8e3e"}},"staticQueryHashes":["4080856488"]}