# When Does a Startup Need a Design System? | Gr8r Studio

> When does a startup need a design system, and how big should the first one be? Signs it is time, a sizing guide by stage, and what to build first.

Source: https://gr8rstudio.com/blog/saas-design-system-v1

[Product Design](https://gr8rstudio.com/blog)

# When Your SaaS Needs a Design System, and How Big

Tanjim Islam

Founder & CEO · 26 Oct 26 · 6 min read

Summarise with AI [Summarise with AI: ChatGPT](https://chatgpt.com/?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fsaas-design-system-v1)[Summarise with AI: Claude](https://claude.ai/new?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fsaas-design-system-v1)[Summarise with AI: Perplexity](https://www.perplexity.ai/search?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fsaas-design-system-v1)

On this page

1. [ 01What is a design system, in plain words?](#what-is-a-design-system-in-plain-words)
2. [ 02What are the signs you need one now?](#what-are-the-signs-you-need-one-now)
3. [ 03When is it too early?](#when-is-it-too-early)
4. [ 04How big should it be at each stage?](#how-big-should-it-be-at-each-stage)
5. [ 05What goes in a version 1?](#what-goes-in-a-version-1)
6. [ 06What does a design system cost you to keep?](#what-does-a-design-system-cost-you-to-keep)
7. [ 07What is an agentic design system?](#what-is-an-agentic-design-system)
8. [ 08How do you start this month?](#how-do-you-start-this-month)
9. [ 09Frequently asked questions](#frequently-asked-questions)
10. [ 10About the author](#about-the-author)
11. [ 11Related reading](#related-reading)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## TL;DR

- A startup needs a design system when the same parts are being rebuilt by different people and the product starts to look like several products.
- For many early SaaS teams that point comes after the MVP.
- Start small: tokens for color, type and spacing, plus the ten or so components every screen uses.

Most advice says "when you scale." That is true and not much help. This post gives you the signs to look for this week and a rough size for each stage, so you build enough and not more.

## What is a design system, in plain words?

A shared box of parts, plus the rules for using them.

The parts are buttons, inputs, tables, cards and modals. Under them sit tokens: the named values for color, type size, spacing and corner radius. The rules say which button goes where and what an error looks like.

The Nielsen Norman Group defines it as "a complete set of standards intended to manage design at scale using reusable components and patterns" ([NN/g, Design Systems 101, Therese Fessenden, 11 April 2021, last reviewed 27 August 2026](https://www.nngroup.com/articles/design-systems-101/), fetched 25 Oct 2026).

Note "at scale." A system pays off when there is enough repeated work to share.

## What are the signs you need one now?

Open your product and your design file side by side. Look for these.

- **Five buttons that should be one.** Slightly different blues, slightly different corners, on different screens.
- **The same table built three times.** Each by a different person, each sorting differently.
- **A color change takes a day.** Because it lives in forty places.
- **New screens take longer than they should.** Designers start from a blank page because nothing is reusable.
- **Engineers ask "which one?"** Two versions of the date picker exist and nobody knows which is right.
- **A second designer or a second front end engineer is joining.** Without shared parts they will make a third version of everything.

Two or more of these, and it is time for a version 1.

## When is it too early?

Before you know what the product is.

During an MVP, screens change every week. Building polished, documented components for screens you may delete next month is time taken from finding out what users want. NN/g lists the same trade off. Creating and maintaining a design system takes a lot of time and "requires a dedicated team," and it is never finished once and left alone (same article).

That does not mean chaos. Even in an MVP, set a few tokens and reuse your buttons and inputs. That costs almost nothing and saves the cleanup later. For the MVP stage itself, see [SaaS MVP product design guide](https://gr8rstudio.com/blog/saas-mvp-product-design-guide).

## How big should it be at each stage?

Here is a rough guide. The counts are a rule of thumb from how products tend to grow, not a published benchmark. Use them to size the work, then adjust to your product.

| Stage                     | Who builds screens                 | What to have             | Rough size                                                      |
| ------------------------- | ---------------------------------- | ------------------------ | --------------------------------------------------------------- |
| MVP, finding fit          | One designer, one or two engineers | Tokens and reused basics | Tokens plus about 5 parts                                       |
| First paying customers    | A small team                       | Version 1 system         | Tokens plus about 10 to 15 parts, one page of rules             |
| Growing product           | Several designers and engineers    | Documented system        | Tokens plus about 25 to 40 parts, usage guidance, code to match |
| Several products or teams | Many teams                         | Owned system             | A named owner, versioning, a request process                    |

The jump that matters most is the second row. That is where a small system saves the most and costs the least.

## What goes in a version 1?

Only what every screen uses. Here is a starting list.

Illustrative diagram based on this article. Not product UI, not real data.

**Tokens**

- Color: brand, text, background, border, success, warning, error
- Type: three to five sizes, two weights
- Spacing: one scale, such as 4, 8, 12, 16, 24, 32
- Radius and shadow: one or two of each

**Components**

1. Button (primary, secondary, quiet, destructive)
2. Text input with label, help text and error
3. Select or dropdown
4. Checkbox and toggle
5. Table with sorting and an empty state
6. Card
7. Modal or dialog
8. Toast or inline message
9. Navigation (side or top)
10. Page header with title and actions

**Rules, on one page**

- When to use each button type
- How errors and empty states look
- Spacing between sections

One rule of thumb: a part joins the system the third time someone needs it. Once is a one off. Twice is a coincidence. Three times is a pattern.

Consistency shows most when one pattern repeats many times. [Isoform](https://isoform-ashy.vercel.app/catalog), an asset catalog Gr8r built, shows 333 isometric drawings for physics, chemistry and biology. It uses one set of filters and sort options for all of them. Built by Gr8r for its own portfolio. Not client work.

Isoform, built by Gr8r for its own portfolio. Not client work. Demo data. Screenshot from 6 Nov 2026 checks.

## What does a design system cost you to keep?

Time, every month. Not money once.

Someone has to answer "can I change this button?", add the new part a team asked for, and keep the design file and the code in step. NN/g also points out that "it takes time to teach others how to use the design system" (same article).

So name an owner, even if it is a few hours a week. A system with no owner drifts, and in a year you are back to five buttons.

## What is an agentic design system?

A design system set up so AI agents can use it as well as people. We cover it in full in our guide, so here is only where it fits.

Gr8r designed HostOp, built its Framer site and built an agentic design system for it. If your team already builds screens with AI coding tools, that guide explains why the same version 1 above matters even more: an agent copies whatever parts it finds, good or bad.

## How do you start this month?

A short plan:

1. **Week 1.** Screenshot every button, input and table in the product. Put them on one board. Count the duplicates.
2. **Week 2.** Agree the tokens. Replace hard coded colors and sizes with them.
3. **Week 3.** Build the ten components above, in design and in code, from the best existing version.
4. **Week 4.** Write the one page of rules and name the owner.

Gr8r offers a [free UX audit](https://gr8rstudio.com/services/ux-audit) to the first 5 companies that ask, and our [product design](https://gr8rstudio.com/services/product-design) work can take a version 1 from there, with a first concept within 48 hours of kickoff and a revised draft by day 2 to 3\. Clients own everything once it's paid for.

## Frequently asked questions

### When does a startup need a design system?

When more than one person designs or builds screens, the same parts keep being rebuilt slightly differently, and small changes have to be made in many places. For many early SaaS teams that happens after the MVP, not before.

### How big should a first design system be?

Small. Tokens for color, type, spacing and radius, the ten or so components every screen uses, and one page of rules. Grow it only when a part has been needed three times.

### Should you start with design tokens?

Yes. Tokens are the named values for color, type and spacing. They are cheap to set up, they make every later component consistent, and changing one token updates the whole product.

### Can you use an existing component library instead?

Often, yes. Many teams start from an existing library and add their own tokens on top. Which library fits depends on your stack and product, and that choice deserves its own comparison.

### Did Gr8r build a design system for a client?

Yes. Gr8r designed HostOp, built its Framer site and built an agentic design system for it.

## About the author

**Tanjim Islam** is the founder and CEO of Gr8r Studio. He founded the studio in 2023\. Here he writes about how Gr8r approaches hiring, product design and AI engineering. More on the [About page](https://gr8rstudio.com/about/tanjim-islam).

[Axle](https://axle-fleet-os.vercel.app/#/), a fleet operations app Gr8r built, shows why shared parts matter on dense screens: its fleet status panel sorts vehicles with one set of status labels (Moving, Stopped, Idle, Offline, In shop), and a shared system is what keeps labels like these the same on every screen. Built by Gr8r for its own portfolio. Not client work. It runs on demo data, so it shows the screens, not results.

If you want help with this, [book a 30 minute call](https://cal.com/tanjim-38/30min).

## Related reading

- [Isoform](https://isoform-ashy.vercel.app/catalog), built by Gr8r for its own portfolio
- [product design](https://gr8rstudio.com/services/product-design)
- [SaaS MVP product design guide](https://gr8rstudio.com/blog/saas-mvp-product-design-guide)
- [redesign, refactor or rebuild](https://gr8rstudio.com/blog/saas-product-redesign)
- [talk to us](https://cal.com/tanjim-38/30min)

Written by

Tanjim Islam

Founder & CEO

Share [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fsaas-design-system-v1)[X](https://x.com/intent/post?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fsaas-design-system-v1&text=When%20Your%20SaaS%20Needs%20a%20Design%20System%2C%20and%20How%20Big)

This article supports

[Product Design](https://gr8rstudio.com/services/product-design)[Review your product challenge](https://cal.com/tanjim-38/30min)

## Keep reading

- [ Product Design 26 Oct 26 16 min read AI UX Design: 7 Screen States That Make Users Trust Your AI FeatureAI UX design for SaaS teams: the trust ladder, seven screen states to ship, what engineering must expose, how to measure trust, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-product-design-guide)
- [ Product Design 26 Oct 26 6 min read How to Design an AI Copilot Sidebar for B2B SaaSHow to design an AI copilot for SaaS: when a sidebar beats inline AI, the six parts of a copilot panel, context chips, permissions and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-copilot-in-saas)
- [ Product Design 26 Oct 26 6 min read When the AI Gets It Wrong: Designing Error States for AI FeaturesHow to design error states for AI: five ways AI fails (wrong, incomplete, refused, slow, unsafe), the UI response for each, and a review checklist.By Tanjim Islam](https://gr8rstudio.com/blog/ai-feature-error-states)

## Book a call with our CEO.

Pick a time that suits you. A product idea or a workflow that slows your team down: a clear problem is enough, no full specification needed.

5.0

[11 verified reviews Read them on Contra ](https://contra.com/tanjimislam/reviews)

- Tanjim is a great designer without any doubt. I love the way he heard my project details and created the better design I was looking for. I highly recommend Tanjim to other Business owners. Thanks Tanjim 🫶
Muhammad Talha · Founder, SetFrame
- Amazing work as always!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- It was really amazing to work with Tanjim, superfast delivery and amazing work
Dhruval Golakiya · Founder, Ryplix
- It was really amazing to work with Tanjim, Superfast delivery and amazing work, highly recommended for any website design and development
Dhruval Golakiya · Founder, Ryplix
- Tanjim and his team did a great job on the hero section I needed in Framer. Super easy to work with and delivered exactly what I had in mind. Highly recommeded!
Muhammad Talha · Founder, SetFrame
- Tanjim is very good at what he does & super easy to work with. He is a genuinely good guy. I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is a very talented designer who delivers high-quality work with precision. I hired him to handle client projects for my agency & he exceeded expectations every time. If you need an efficient designer, he is the one to go for!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Every project I’ve entrusted to Tanjim has exceeded expectations. If you're looking for a top-tier designer who consistently delivers exceptional work, Tanjim is the one. Looking forward to working together on more projects 🤝
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is an excellent guy. He is super professional in his work and always goes the extra mile. If you're looking for any UI or Framer work, I highly recommend him!
Md Nomail Hossain Samir · Co-founder, Remarked Design
- Tanjim is the founder of Gr8r studio and his Framer expertise is exactly what you need if you are looking for design and development work. Tanjim goes the extra mile on his projects and his attention to detail makes every website stand out I collaborated with Tanjim on a project and he is my main choice for a design partnership.
Miguel Queirós · Collaborator

Your call is with Tanjim Islam, our CEO A free 30-minute conversation about your problem, not a sales pitch.

Calendar not loading? [Open the booking page](https://cal.com/tanjim-38/30min)

Ask Ali