A roadmap for accelerators

Mike's Notes

It's getting busy, so I need a roadmap for accelerators now.

Resources

• https://thespinoff.co.nz/business/16-10-2019/the-ministry-of-awesome-reflects-the-exciting-new-era-of-christchurch-startups
• https://creativehq.co.nz/stories/access-activator-successful-applicants/
• https://creativehq.co.nz/stories/wellingtons-creative-tech-scene-has-a-new-starting-point/
• https://www.sproutagritech.com/sprout-accelerator/
• https://ministryofawesome.com/founders/
• https://rowansimpson.com/essays/
• https://steveblank.com/tools-and-blogs-for-entrepreneurs/
• https://www.kiwisaas.com/
• https://my.nzte.govt.nz/essentials/export-essentials-saas

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

02/06/2026

A roadmap for accelerators

By: Mike Peters

On a Sandy Beach: 27/03/2026

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

Lots of opportunities are coming in.

This is a roadmap for using coaching, workshops, incubators and accelerators to develop, test and validate the Ajabbi Mission Business Model and the Pipi closed-core and Pipi open-source applications.

Ultimately, it's a record of what is learned, so it doesn't include missed opportunities or declined applications. There are a few missing items from some time back that are yet to be added.

Free is good (cloud credits, bro bono, software, training), but no funding or investment is being sought.

The roadmap is sorted by deadline, so that I remember to do them. The first row of the table is a key.

Date	Roadmap
deadline Start-End Status	Title Description What To come. To come Learned To come To do/done To come Resources
deadline 2017-2020 Completed	Steve Blank "Steve Blank (born 1953) is an American entrepreneur, educator, author and speaker. He created the customer development method that launched the lean startup movement. His work has influenced modern entrepreneurship through the creation of tools and processes for new ventures, which differ from those used in large companies." What Learning from the very best. Reading his books and blog Watching videos Using all the free courses and tools Learned How to use a Business Model Canvas How to use a Mission Model Canvas How to do customer discovery How to run experiments to validate assumptions Done Read and tried everything Build Pipi Experiment Engine Resources https://steveblank.com/tools-and-blogs-for-entrepreneurs/ The Startup Owners Manual
deadline 2020-2023 Completed	KiwiSaaS "Our community is free to join, and it's where we can safely share our knowledge and experiences with each other. Paying it forward is what drives kiwiSaaS growth." What Online workshops and random monthly one-on-one meetings with other founders. Learned To keep going and when to change course It is OK to make mistakes Will get lots of insights from being open The importance of listening to others Done Get stuck in Resources https://www.kiwisaas.com/
January 2024 January - October 2024 Completed	Startup Aotearoa "Startup Aotearoa ignites New Zealand’s entrepreneurial spirit by providing personalised one-to-one coaching to early-stage startup founders. Delivered nationwide through local regional providers," What Mentoring from Mr G led to testing the ICP at Waimumu Southern Field Days 2024 on Developers at Agritech companies Agricultural suppliers Learned Developers are the ICP There is a real problem to solve Find a teaching customer Done Pivot ajabbi.com to developers Host a teaching customer requiring 3 languages Resources https://startupaotearoa.org/ https://www.blog.ajabbi.com/2025/06/some-initial-notes-on-what-my-first.html
April 2024 May - November 2024 Completed	Creative HQ's On the Business workshop series "This 'On the Business' workshop series gives you the dedicated time and resource to help you grow your business. We'll provide tools, frameworks and hands-on..." What Remote workshops using Miro canvas. Learned To come Done To come Resources https://creativehq.co.nz/adapt-for-the-future/explore-courses/
February 2025 February 2025 - March 2025 Completed	NZTE Export Essentials SaaS 4-part workshop. "Learn what best-practise exporting involves when you sell SaaS offshore." What Workshops with individual follow-up sessions. Learned To use the tools available to test assumptions. Done To come Resources https://my.nzte.govt.nz/essentials/export-essentials-saas
February 2025 February 2025 - March 2025 Completed	NZTE Position for Growth workshop. "Our Position for Growth workshops help you define what problem you solve for" What Workshops with individual follow-up sessions. Learned To use the tools available to test assumptions. Done To come Resources https://my.nzte.govt.nz/courses/intro
25/03/2026 April 2026 - March 2028 Application Withdrawn	Google AI Accelerator "With this program, you can get access to startup experts, your Google Cloud and Firebase costs covered up to $200,000 USD (up to $350,000 USD for AI startups) over 2 years, technical training, business support, and Google-wide offers." What Collaborate with DeepMind to run wild ML integration experiments to go where no developer has gone before. Pipi > IaC > GCP Pipi > VM > BoxLang > Workspaces Pipi > MCP > DeepMind Gemini Pipi > Scientific Workflows > TPU Learned Invited to apply by a Google chap who was assisting behind the scenes using an unlisted pathway. I then discovered that free credits begin on the day of application approval, so I will reapply when ready to start in July to make the most of the 24-month window of opportunity. To do Increase Pipi DevOps speed (x1000) by completing work on automating the data centre (x10), workspace rendering (x10), and IaC to GCP free tier (x10). This will enable fast, multiple automated experiments. Resources https://cloud.google.com/startup?hl=en https://www.blog.ajabbi.com/2026/02/having-data-centre-changes-roadmap.html
26/05/2026 July - November 2026 Application underway	Sprout Accelerator "The Sprout Accelerator takes a cohort of agrifood innovators on a 3-month adventure to discover, articulate and refine the foundations to grow global startups." What Test farm management workspace using HTML Mockups on Dairy farmer-led catchment group Agritech wait list from Waimumu Learned To come To do To come Resources https://www.sproutagritech.com/sprout-accelerator/ https://www.blog.ajabbi.com/2025/11/workspaces-for-agriculture.html https://www.blog.ajabbi.com/2026/02/waimumu-field-days-background-to-ajabbi.html
June 2026 July 2026 - June 2028 To apply	Google AI Accelerator "With this program, you can get access to startup experts, your Google Cloud and Firebase costs covered up to $200,000 USD (up to $350,000 USD for AI startups) over 2 years, technical training, business support, and Google-wide offers." What Collaborate with DeepMind to run wild ML integration experiments to go where no developer has gone before. Pipi > IaC > GCP Pipi > VM > BoxLang > Workspaces Pipi > MCP > DeepMind Gemini Pipi > Scientific Workflows > TPU Learned To come To do To come Resources https://cloud.google.com/startup?hl=en

Design for the People: The US Web Design System and the Public Sans Typeface

Mike's Notes

The article reproduced below is from a fascinating website and is about another useful Design System.

Resources

• https://www.beautifulpublicdata.com/us-web-design-system-public-sans/
• https://designsystem.digital.gov/components/overview/
• https://designsystem.digital.gov/design-principles/
• https://github.com/uswds/uswds

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

16/03/2026

Design for the People: The US Web Design System and the Public Sans Typeface

By: Jon Keegan

On a Sandy Beach: 02/07/2024

Jon Keegan is an investigative data journalist who covers technology. His work has appeared in The Wall Street Journal, The Markup and MIT Technology Review. Jon’s work has won several journalism awards, including the Loeb Award, the Society of Professional Journalists’ Excellence in Journalism Award and the Society of News Design’s Best of Digital Gold Award.

The United States has an official web design system and a custom typeface that belongs to the people. This thoughtful public design system aims to make government websites not only look good, but to make them accessible and functional for all.

Before the internet, Americans may have interacted with the federal government by stepping into grand buildings adorned with impressive stone columns and gleaming marble floors. Today, the neoclassical architecture of those physical spaces has been replaced by the digital architecture of website design – HTML code, tables, forms, and buttons. 

While people visiting a government website to apply for student loans, research veterans’ benefits, or enroll in Medicare may not notice these digital elements, they play a crucial role. If a website is buggy or doesn’t work on your phone, taxpayers cannot access the services they have paid for. This can feel like walking up to a boarded-up government building with broken windows, creating a negative impression of the government itself.  

 In the US, there are about 26,000 federal websites. Early on, each site had its own designs, fonts, and login systems, creating frustration for the public, and wasting government resources.

 A survey of the many different styles of buttons from government websites as of 2015. Source: 18F / GSA 

The troubled launch Healthcare.gov in 2013 highlighted the need for a better way to build government digital services. In 2014, President Obama created two new teams to help improve government tech.

Within the General Services Administration (GSA), a new team called 18F (named for their Washington, DC office at 1800 F Street) was created to “collaborate with other agencies to fix technical problems, build products, and improve public service through technology.” The team was built to move at the speed of tech start-ups rather than lumbering bureaucratic agencies. 

The U.S. Digital Service (USDS) was tasked “to deliver better government services to the American people through technology and design.” In 2015, the two teams collaborated to build the US Web Design System (USWDS)—a style guide and collection of user interface components and design patterns to ensure a consistent user experience across government websites. “Inconsistency is felt, even if not always precisely articulated in usability research findings,” said Dan Williams, the USWDS program lead, in an email. 

Some of the sample design elements for the USWDS. Source: https://designsystem.digital.gov/

Today, the system defines 47 user interface components such as buttons, alerts, search boxes and forms each with their own design examples, sample code and guidelines such as “Be polite” and “Don’t overdo it.” The USWDS is now in its third iteration, and is used in 160 government websites. “As of September 2023, 94 agencies use USWDS code, and it powers about 1.1 billion pageviews on federal websites,” said Williams.

USWDS design principles include focusing on real users’ needs, earning trust and embracing accessibility. The system requires websites to be optimized for all users, including people with disabilities such as those using screen readers or those with color blindness. Williams said accessibility is important to the team’s efforts, noting that they “prioritize any accessibility-related bug or improvement we find (or is contributed by our community).”

Some federal websites that use the USWDS. Clockwise from top left: Va.gov, Medicaid.gov, Worker.gov, Supremecourt.gov

To ensure clear and consistent typography, the free and open-source typeface Public Sans was created for the US government. “It started as a design experiment,” said Williams, who designed the typeface, which was released in 2019. “We were interested in trying to establish an open source solution space for a typeface, just like we had for the other design elements in the design system,” said Williams. Based on the Libre Franklin typeface, Public Sans is described as “a strong, neutral, principles-driven, open-source typeface for text or display.” 

Both Public Sans and the USWDS embrace transparency and collaboration with government agencies and the public, inviting contributions to their development via the projects’ GitHub pages. 

To ensure that the hard-learned lessons of improving public technology aren’t forgotten, the projects embrace continuous improvement. One of Public Sans’ design principles offers key guidance in this area: “Strive to be better, not necessarily perfect.”

Design in code, get praise

Mike's Notes

Using this method for the upcoming workspace testing. Design is done in Pipi, not Figma. IMO, Figma is over-hyped.

Resources

• https://adamsilver.io/
• https://www.youtube.com/@adamsilverhq
• https://formdesignpatterns.com/
• https://www.smashingmagazine.com/2018/10/form-design-patterns-release/
• https://www.smashingmagazine.com/printed-books/form-design-patterns/
• https://www.smashingmagazine.com/provide/eBooks/form-design-patterns-excerpt.pdf
• https://prototype-kit.service.gov.uk/docs/
• http://gov.uk/
• https://www.gov.uk/service-manual/design
• https://prototypekitcourse.com
• https://www.blog.ajabbi.com/2023/12/uk-government-design-system.html

References

• Reference

Repository

• Home > Ajabbi Research > Library > Subscriptions > Adam Silver
• Home > Handbook > 

Last Updated

12/03/2026

Design in code, get praise

By: Adam Silver

Adam Silver: 19/01/2026

Adam Silver is an interaction designer with over 15 years experience working on the web for a range of companies including Tesco, BBC, Just Eat, Financial Times, the Department for Work and Pensions and others.

He’s particularly interested in inclusive design and design systems and writes about this on his blog and popular design publications such as A List Apart. This isn’t his first book either: he previously wrote Maintainable CSS, a book about crafting maintainable UIs with CSS.

This week I demoed some flows I’d been redesigning to a room full of product managers and stakeholders.

The programme I’m on is huge. We’re redesigning a highly complex, enterprise-grade, case-working system.

There are many feature teams, each with their own product manager. I’ve been on the programme for 6 months now but it’s so big I’ve not met many of them.

The meeting was meant to present the before/after of the redesigns to show what it looks like to just use the simple and accessible patterns from the GOV.UK Design System and a few of my own, encouraging other feature teams to reuse them.

It did that.

But it also did something else, something I didn’t really expect:

Toward the end of the meeting, the conversation veered off.

There were comments and questions about the tool I'd used to create and demo the designs:

“I love the way this demos new concepts.”

“The prototype really helps you to understand the user journey”

“It’s been so helpful for our developers to show them how something actually works”

Most designers use Figma, but I had created an HTML prototype using the GOV.UK Prototype Kit.

Don’t get me wrong, Figma has its place but at the end of the day:

Figma can only produce pictures of software.

Not actual software.

Actual software is alive.

• It moves
• It adapts
• It errors
• It loads
• It responds

Figma might be useful to design in.

But it’s not good to design “out”.

By that I mean:

When you present your designs with Figma, you’re not interacting with the product you’re designing.

You’re interacting with the software you used to design.

As a result:

1. It’s slow and jarring. Your audience has to watch you stop, scroll, pan and zoom around Figma between each step.
2. It may not do your design justice. Your audience is focused on you navigating Figma rather than experiencing your design.
3. It may hide problems. You’ll probably jump between screens and miss important details - realistic data, micro interactions, transitions, loading states, error states and edge cases.

Designing in code and demoing in the browser forces you - or at least encourages you - to confront these things.

For my demo, instead of just sharing screens:

1. I opened the browser and typed in the URL
2. I signed into the case-working system
3. I landed on the overview page which showed me my priority tasks
4. I made the screen smaller to show two instances of the app side by side
5. I clicked “Cases” in the primary menu to go to the case list
6. I searched, filtered and sorted the list to find a particular case
7. I filled out a complex multi-step form flow with conditional logic

In other words, I went through the entire end-to-end journey and interacted with the prototype just like real users would.

This allowed my audience of product managers to free up their mental energy and instead focus on understanding the design intention and potential gaps.

That’s 100x harder to do with Figma.

After the meeting, I received a lot of positive feedback which is great because I love praise.

One product manager actually suggested I help train some of the other designers on the programme who are less familiar with the Prototype Kit.

But she also pointed out that it would probably take up too much of my time.

Luckily, I’ve been preparing for this moment for 2 years. I told her:

I have a course that teaches designers how to use the GOV.UK Prototype Kit to unlock the many benefits of prototyping in code.

If you’d like to learn how to use the Prototype Kit and unlock those benefits — including a little unexpected praise when you present at your next show and tell:

​https://prototypekitcourse.com​

Cheers,

Adam

Ajabbi Research Monthly Newsletter

Mike's Notes

Below is an initial mockup of Ajabbi Research's proposed free monthly email newsletter. The newsletter will focus on a different subject in-depth each month. Examples could include User Interfaces, Ontologies, and API.

Existing content from On a Sandy Beach and Ajabbi.com will be referred to.

This draft mockup is an experiment. A presentation will be given to the Open R&D Group on Sunday. All suggestions are welcome. Please forgive the formatting. It will get better.

Subscriptions

Anyone is welcome to subscribe; it's 100% free, and it can be discussed, shared, and reused.

• https://ajabbi.substack.com

Schedule

Publishing on SubStack will begin in January 2026 and will be issued on the first Friday of each month. Each issue will also be published on the Ajabbi Research website a month later.

• https://research.ajabbi.com

Planned Issues

• January 2026: Workspace
• February 2026: i18n
• March 2026: Open Handbook
• April 2026: Complex Adaptive Systems
• May 2026: Origins of Pipi
• June 2026: 

Resources

• https://ajabbi.substack.com/

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

06/10/2025

Ajabbi Research Monthly Newsletter

By: Mike Peters

On a Sandy Beach: 22/09/2025

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

---

Ajabbi Research

October 2026

Design System Issue

"A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels." - Therese Fessenden, NNGroup

Summary

One paragraph goes here. etc

The Problem

Some words to explain what the problem is, and what a design system does. The lack of a naming standard for components. Why the need for Design Tokens? etc

Design Systems

Give detailed examples of other successful design systems. etc

Design Tokens

Nathan Curtis. etc

Pipi Design System Engine

Explain how the Design System engine was built over time. Its unique features. Its integration with the CMS. UI component primitives. The engine can automatically lay out the components. No code interface. etc

User Customisation

Ability of users to customise the UI component primitives. etc

Conclusion

Two paragraphs of words go here. etc

References

• Reference 1
• Reference 2

Further Reading

• Book 1
• Book 2

See Also

• Design System
• Etc

External Links

• UI Guideline is now open source by Sergio Ruiz
• Using Grids in Interface Designs by Kelly Gordon (NNGroup)
• Design Systems 101 by Therese Fessende (NNGroup)
• Neobrutalism: Definition and Best Practices by Hayat Sheikh (NNGroup)
• Smashing Meets Future of Design Systems by Brad Frost (bradfrost.com)
• Figma on Design Systems by Mike Peters (On a Sandy Beach)
• More on Design Tokens by Mike Peters (On a Sandy Beach)
• How To Design Complex Data Tables (+ Figma Kits) by Vitaly Friedman (Smashing Magazine)

UI Guideline is now open source

Mike's Notes

Pipi 9 uses the names and technical properties of UI Guideline v2. Components in the Pipi Design System Engine. Additional components from the open-source Metro UI have been added, including Table and Ribbon.

Open UI also needs to be considered.

Sergio Ruiz, AKA " Seruda", today announced that the UI Guideline is now open source. UI Guideline standardises the names and descriptions of UI Components by surveying the top Design Systems currently in use.

Thanks for your great work, Seruda.Once Ajabbi is generating revenue, the open-source UI Guideline effort could be supported. (Ajabbi intends to provide generous long-term support to all open-source software that Pipi uses.)

Resources

• https://www.uiguideline.com
• https://uiguideline.substack.com/p/big-changes-are-coming-to-ui-guideline
• https://substack.com/home/post/p-181201649
• https://v3.uiguideline.com/docs/components
• https://github.com/UIGuideline/ui-guideline.v3
• https://substack.com/@serudda
• https://metroui.org.ua/6
• https://open-ui.org/
• https://github.com/openui

References

• Reference

Repository

• Home > Ajabbi Research > Library > Subscriptions > UI Guideline
• Home > Handbook > 

Last Updated

25/12/2025

UI Guideline is now open source

By: Sergio Ruiz

UI Guideline: 16/09/2025

Sergio Ruiz is the author of UI Guideline.

Hello, team

It’s been a while since my last update, and today I want to share something very important about the future of UI Guideline.

Why we’re changing

For more than 3 years, we’ve been curating and improving UI Guideline. In the beginning, our “lifetime license” model helped us grow. Thanks to those of you who supported us early, UI Guideline became possible.

But as tools like ChatGPT appeared, it became clear that our old model wasn’t sustainable. If we continued that way, we wouldn’t be able to dedicate the time and resources needed to keep UI Guideline alive and growing.

That’s why we’ve decided to evolve: all UI Guideline data will now be open source. This allows us to share our research with the whole community and keep improving with everyone’s contributions.

What this means for lifetime license users

First of all: thank you. Without your trust, UI Guideline wouldn’t be where it is today.

We know you believed in us and supported us with a lifetime license, and we want to make sure you feel valued—not left behind. That’s why you will now be recognized as VIP Users.

Being a VIP User means you’ll have:

• Early access to any new features or products we launch.
• Exclusive offers and perks reserved only for you.
• Unlimited access, forever.
• (And more benefits we’re designing together with the next version of UI Guideline).

Even though we are still shaping the details of UI Guideline v3, please know that our priority is to reward and add value to those who trusted us from the beginning.

Thank you again for being part of this journey. We’re excited about what’s coming, and we’ll be sharing more updates in the coming months.

— The UI Guideline Team

---

The Design System... of top Design Systems

Save a lot of time in researching, defining and creating your UI components by synthesizing all the wisdom of the most popular Design Systems and UI libraries in one place." - UI Guideline 

Our researching process

Check out the step-by-step process of extracting and documenting UI components from top systems.

Step 1. Annual Top 20 Systems

Every year, we select the top 20 best Design Systems and UI libraries. This choice is based on several criteria: a survey conducted among hundreds of developers and designers, popularity, the number of components, whether they are up-to-date or not, and, of course, our experience of over 5 years in crafting UI components.

Step 2. Manual Review and Consolidation of Patterns

For each component, we manually reviewed the 20 systems one by one, looking for a repeating pattern. We observed the way they name the component, how they define its props and anatomy, and, above all, the best practices. Finally, we consolidate all this data into a single file. e.g. modal_consolidate.json.

Step 3. Identify a common UI Pattern

Identify a common pattern and synthesize these into a new file that defines the UI component in detail, including props, anatomy, alternative names, among other aspects. In UI Guideline, you'll be able to find the details of each component in one place.

Why? Save hours of time and effort

With UI Guideline, we save you hours of research and definition of your own components. For example, when you need to define or create a Sidebar component from scratch, you will no longer have to review system by system. Here you'll find all the necessary information to define your Sidebar, based on the wisdom of the best systems of the year.

Active item visual representation

60 Unique Components:

Unveiled Through Extensive Research

Explore 60 components analyzed from 20 design systems and UI Library, offering you refined insights and practical design solutions.

• Accordion
• Alert
• Avatar
• Badge
• Breadcrumbs
• Button
• Calendar
• Card
• Carousel
• Checkbox
• Collapse
• Color Picker
• Combobox
• Date Picker
• Divider
• Empty State
• Error State
• File Uploader
• Inline Alert
• Link
• Menu
• Modal
• Number Input
• Pagination
• Popover
• Progress Bar
• Radio
• Rating
• Search
• Select
• Sidebar
• Skeleton
• Slider
• Spinner
• Stepper
• Success State

The internal control hierarchy of Pipi

Mike's Notes

I'm writing up some notes on current work driven by a teaching customer.

i18n

• For Languages, a 3-letter string is added. e.g. eng for English and mri for Maori.
• For Writing Scripts (alphabets), a 4-letter string is added for the script. e.g. latn for Latin.
• For Locales, a 2-letter capitalised string is added. e.g. eng-GB for English spoken in the UK, eng-US for English spoken in the United States.

Resources

• https://www.blog.ajabbi.com/2025/01/design-token-based-ui-architecture.html

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

11/04/2026

The internal control hierarchy of Pipi

By: Mike Peters

On a Sandy Beach: 02/09/2025

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

Pipi is a self-organising system. Self-regulating constraints are operating on internal models. There are numerous internal hierarchies of control within Pipi, with properties that are inherited, including multi-inheritance.

Examples include;

• Class packages: eg, namespace
• Nested systems: eg, Account > Deployment > Deployment Object > Publication > Website > Workspace
• Schema, ontologies, etc: eg, SNOMED, MovieLab
• Design systems: eg, Account > Design System > Component > Design Token

Descriptions

Pipi Nest

Each account can only be in a single nest

•  <pipi major version><pipi edition><account type>

Account

Every customer or user has an account, which is opened when they sign up.

A customer account has these properties;

• One account type.
• Contains one or more deployments.

Account types:

Each account type comes with different options. Enterprise has the most options, and Individual has the least.

• DevOps (paid).
• Enterprise (paid).
• Individual (free).
• Pipi (paid)
• Researcher (paid)
• SME (paid).
• Temp (free)

Deployment

A deployment has these properties;

• One deployment tenancy type.
• One language.
• Contains one or more deployment objects.
• Can contain other deployments to create global settings for an account (Enterprise or DevOps).

Deployment tenancy types:

• Exclusive tenancy
• Shared tenancy
• Multi-agent

Deployment Object

A deployment object has these properties;

• One deployment object type

Deployment Object Types:

Used by the administrator through configuration settings.

• Billing
• Datasource
• Folders
• Permission
• Plugin
• Publication
• Usage
• Users and Groups
• etc

Publication

All publications are created by the Content Management System (CMS).

A publication has these properties;

• One publication type.
• It can be combined to build a whole system.

Publication Types

• Code
• CSS
• Database
• Deployment
• Email Newsletter
• Notebook (Jupyter, etc)
• PDF
• Website
• XML
• etc

Website

A website has these properties;

• One language. 
• One website type.
• Can be combined with other websites (to become a multi-language website).

Website types

• API (Endpoints)
• Docs (like JavaDocs)
• Help
• Website (standard)
• Wiki
• Workspace (enterprise applications)
• etc

Example

ASCI internal names are automatically provided by Pipi. A customer can choose different public names for URLs.

An example control hierarchy;

Pipi Nest > Account > Deployment > Deployment Object > Publication > Website > Workspace.

Inheritance	Internal name	Examples
Pipi Nest	Pipin Nest: <pipi major version><pipi edition><account type>	9ae
Account	<ASCI characters>	ajabbi
Deployment	<Account>-<4 Digit>-<Locale>	ajabbi-0001-eng-latn-uk
Deployment Object	<Deployment>-<ObjectType>	ajabbi-0001-eng-latn-uk-pub
Publication	<Deployment Object>-<Publication Type>	ajabbi-0001-eng-latn-uk-pub-cde ajabbi-0001-eng-latn-uk-pub-dta ajabbi-0001-eng-latn-uk-pub-wbs
Website	<Domain>	wiki.example.com/eng-latn/ blog.example.com/en-nz/ en.example.com/uk/ workspace.example.com/eng/

Using Grids in Interface Designs

Mike's Notes

The Ajabbi UI is going to be more like Craigslist rather than Squarespace. A bit clunky, predictable, straightforward to use and able to be reliably laid out by a robot in multiple languages and writing systems, including sign languages and AAC picture language. In Desktop, mobile, braille and kiosk formats.

That's why the early draft webpages at Ajabbi.com resemble Wikipedia.

I read this article to see if this could help with the layout rules that apply as constraints on the layout robot.

Resources

• https://www.nngroup.com/articles/using-grids-in-interface-designs/
• https://www.nngroup.com/articles/author/kelley-gordon/
• https://www.nytimes.com/
• https://ritual.com/
• https://www.behance.net/
• https://material.io/design/material-studies/shrine.html#product-architecture
• https://www.nngroup.com/articles/responsive-web-design-definition/
• https://www.youtube.com/watch?v=Vl1VYQXElus

References

• Reference

Repository

• Home > Ajabbi Research > Library > Subscriptions > NNGroup
• Home > Handbook > Design System
• Home > pipiWiki > Design System Engine

Last Updated

27/06/2025

Using Grids in Interface Designs

By: Kelly Gordon

NNGroup: 17/07/2022

Kelley Gordon is the Director of Product at Nielsen Norman Group. She plays a crucial role in driving the success of NN/g’s digital products, including the strategy, design, development, and management of it.

Summary:

Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms.

If you’ve been to New York City and have walked the streets, it is easy to figure out how to get from one place to another because of the grid system that the city is built on. Just as the predictability of a city grid helps locals and tourists get around easily, so do webpage grids provide a structure that guides users and designers alike. Because of their consistent reference point, grids improve page readability and scannability and allow people to quickly get where they need to go.

Grid: A visual made up of columns, gutters, and margins that provide a structure for the layout of elements on a page.

There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid.

Common Grid Structures in Websites and Interfaces

The column, modular, and hierarchical grid are commonly used in interfaces.

Column grid involves dividing a page into vertical columns. UI elements and content are then aligned to these columns.

Modular grid extends the column grid further by adding rows to it. This intersection of columns and rows make up modules to which elements and content are aligned. Modular grids are great for ecommerce and listing pages, as rows are repeatable to accommodate browsing.

Hierarchical grid: Content is organized by importance using columns, rows, and modules. The most important elements and pieces of content take up the biggest pieces of the grid.

In This Article:

• Breaking Down the Grid
• Examples of Grids in Use
• Benefits of the Grid 
• Choosing and Setting Up Your Grid
• Conclusion

Breaking Down the Grid

Regardless of the type of grid you are using, the grid is made up of three elements: columns, gutters, and margins.

Columns: Columns take up most of the real estate in a grid. Elements and content are placed in columns. To adapt to any screen size, column widths are generally defined with percentages rather than fixed values and the number of columns will vary. For example, a grid on a mobile device might have 4 columns and a grid on a desktop might have 12 columns.

Gutters: The gutter is the space between columns that separates elements and content from different columns. Gutter widths are fixed values but can change based on different breakpoints. For example, wider gutters are appropriate for larger screens, whereas smaller gutters are appropriate for smaller screens like mobile.

Margins: This refers to the left and right outermost areas on the screen. Content does not live in the margins of a grid. This space can be fixed or expressed as a percentage of the screen width and can change at different breakpoints.

Annotated picture of a column grid

Three elements make up any grid: (1) columns, (2) gutters, and (3) margins.

Examples of Grids in Use

Example 1: Hierarchical Grid

Our first example is from The New York Times. This screen utilizes a hierarchical grid to create a newspaper-like reading experience. At desktop screen size, two main columns make up the hierarchical grid. The most important news story takes up the most space in the grid, the left column, followed by secondary and tertiary stories, which take up the smaller column and modules on the right.

The New York Times annotated with a hierarchical grid.

The New York Times uses a hierarchical grid to achieve its newspaper-like reading experience. (We highlighted the columns in yellow, the gutters in blue, and the margins in purple.)

Example 2: Column Grid

Our second example is from Ritual.com, a vitamin company. This design uses a column grid to create an attractive visual experience. At this screen size, four consistently sized columns make up the grid structure and elements are aligned to and within these columns. The gutters, the spaces in between the columns, are also consistently sized and help the user visually separate the different products. The margins are independently sized and are the same between the left and right sides.

Ritual screen annotated with a four-column grid

Ritual’s four-column grid makes scanning products easy. (We highlighted the columns in yellow, the gutters in blue, and the margins in purple.)

Example 3: Modular Grid

Our third example is from Behance, a design library. The site’s design uses a modular grid to create a pleasant browsing experience. At desktop size, rows are made up of 4 consistently sized modules. Horizontal gutters are slightly thicker than vertical gutters and the margins are consistently sized on the left and right of the design. Like in previous example, the gutters visually separate each element.

Behance screen annotated with a modular grid.

Behance’s design uses a modular grid, which allows users to easily browse. (We highlighted the columns in yellow, the gutters in blue, and the margins in purple.)

Example 4: Breaking the Grid

Our last example is Shrine from Google’s Material Studies. This design uses a column grid, as we can see based on the left navigation, which is 2 columns wide. Look closely and you will see that some product images settle to the margins, while others do not. Breaking the grid like this makes it challenging to focus or quickly scan product images and calls more attention to some products over others. It is okay to break the grid every so often, as long as you have a valid reason for it.

Shrine screen annotated with a column grid

Breaking the grid produces a chaotic browsing experience for users. (We highlighted the columns in yellow, the gutters in blue, and the margins in purple.)

Benefits of the Grid 

Using a grid benefits both end users and the designers alike:

• Designers can quickly put together well-aligned interfaces.
• Users can easily scan predictable grid-based interfaces.
• A good grid is easy to adapt to various screen sizes and orientations. In fact, grid layouts are an essential component of responsive web design. Responsive design uses breakpoints to determine the screen size threshold at which the layout should change. For example, a desktop screen may have 12 grid columns, which may be stacked on mobile so that the resulting layout has only 4 columns.

Behance mobile and web screen

At the mobile size, Behance’s one-column grid (left) was reflowed into a four-column grid structure (right).

Even more importantly, the grid is not a throw-away concept. It is used by both designers and developers alike. Be sure to communicate with your developers the grid structure used when creating the design, so they can implement it accordingly.

Choosing and Setting Up Your Grid

How you use and set up a grid is fundamental to creating well thought out layouts and experiences for your user.

Choose the right grid for your needs. Take time to think through what type of grid ­— column, modular, or hierarchical — best suits your needs. A hierarchical grid may be the best fit if one item on your page will always be more important than the surrounding elements. For example, hierarchical grids are great for online news platforms. If the content you need to display is highly variable, consider using a basic column or modular grid, as these provide lots of flexibility when designing. For example, elements and content can span across multiple columns or modules or just one to fit design needs.

Spend time setting up your grid. Once you have figured out what type of grid will work well for your needs, start setting it up. Determine the number of columns and the margin and gutter sizes relative to your screen sizes. You will most likely want to prepare for mobile, tablet, and desktop screens. A 12-column grid at laptop or desktop size is generally flexible enough for most design needs. The number of columns will decrease as your device size decreases. Wireframing tools like Sketch and Figma have quick and easy ways to set up and edit your grid, even after you have started designing.

Setting up grid structure in Figma

Easily set the number of columns, the gutter size, and margin size in Figma.

Always place content within columns, not gutters. The gutters should remain empty as you place elements on the grid in order to clearly separate and align content and elements.

Content or elements should be placed within and across columns, not gutters.

Consider using an 8px grid system. For most common devices, the screen size in pixels is a multiple of 8. Keeping grid-component values at a multiple of 8 will generally make it easier to scale and implement a grid.

Conclusion

Grids not only provide designers a structure on which to base layouts, but they also improve readability and scannability for end users. Use a good grid system that easily adapts to various screen sizes.

---

Grids 101

Kelley Gordon · 4 min