--- title: "Introducing A New Design System | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2017/03/14/introducing-a-new-design-system/" last_updated: "2026-07-15T19:17:56.000Z" --- Netlify is growing. As our user base and team grows, it’s natural our product would as well. Since I joined this brilliant team we have shipped amazing new features at a incredible pace, and we have an exciting roadmap planned for the future. However, this amazing pace means that sometimes our product’s current design showed its limitations — if we want new features and our product to scale graciously, we needed our UI to do the same. Our goal was to facilitate and accommodate, rather than create friction. [Today we are rolling out the first of many iterations to our app‘s user interface.](https://app.netlify.com/) ## What’s wrong with the current design? The problem we are solving is not the overall ‘look’ but instead how flexible the User Interface can grow while welcoming big and transformative features. It’s easy for designers to fall in love with the **idea** of a redesign. It’s romantic, the idea of being able to redesign your product from scratch, no restrictions no limitations, it’s a product designer’s platonic dream. It can also be a very dangerous trap. A complete redesign is a massive project that can take months (sometimes years). They take up crazy amounts of resources and if you’re not solving a real problem, you are really wasting time and money. The whole Netlify team was aware of these pitfalls, we carefully studied _how_ we should do it, _which_ problems were we solving, and _when_ to do it. It was decided that now was the time. ## What we came up with. Creating a more simple organizational structure and hierarchy for our application was the first step, and reflecting that in our header and navigation was one of our top priorities. Part of that new header is something that we are calling the ‘Hero Card’. Many of our users, after setting up their sites in Netlify, don’t really need to revisit the UI often. That’s one of the brilliant things about Netlify, you can set it, and forget it. However, in the situation where you are going back to the UI, it’s ideal that for you to get in and get the job done as quickly possible. ![Screenshot of the new Header](/v3/img/blog/image.png) The Hero Card is the first element that you see in most pages. It allows you to see a quick summary of the page and gives access to the most common/pertinent actions and information. _I personally want to thank the whole **Netlify team** for being so supportive, smart as hell, and help get these mockups into a real product; **Wilson Miner** for being a scary well of wisdom and insight, I cannot stress enough how honored I am being able to count on your support._ _And **You**, the Netlify user, for being the best, most passionate, smart group of people I’ve worked for._ * * * _This post has been featured on **[Netlify Milestones on the road to 1 Million Devs](https://www.netlify.com/blog/2020/08/03/netlify-milestones-on-the-road-to-1-million-devs/#introduced-a-new-design-system-for-the-app)**_: [![Netlify 1 Million Devs article feature](/v3/img/blog/featured-on-1-million-devs-banner.png)](https://www.netlify.com/blog/2020/08/03/netlify-milestones-on-the-road-to-1-million-devs/#introduced-a-new-design-system-for-the-app) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Introducing A New Design System&url=https://www.netlify.com/blog/2017/03/14/introducing-a-new-design-system//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F03%2F14%2Fintroducing-a-new-design-system%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/03/14/introducing-a-new-design-system//) - [Bluesky](https://bsky.app/intent/compose?text=Introducing A New Design System+https://www.netlify.com/blog/2017/03/14/introducing-a-new-design-system//) * * * ### Tags - [Design](/blog/tags/design/) - [UI](/blog/tags/ui/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) News & Announcements August 3, 2020 [ ### Netlify Milestones on the road to 1 Million Devs ](/blog/2020/08/03/netlify-milestones-on-the-road-to-1-million-devs) - ![Profile picture of Scott Mathson](/_astro/ff50e3d67a0f986ff642fc8ce6e492bc7ed05525-80x80_Z1UEirk.webp) Scott Mathson ![](/_astro/d0354fe52c160a3abdfdeff297a1baf090302a3d-1600x900_Z1eDdJG.webp) News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz ## Recent posts News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)