TABS is a content-driven frontend architecture where Pages are built on TABS: Typography, Atoms, Base, and Sections.

The architecture is defined by a small set of constraints. Each layer has a clear responsibility and a strict dependency direction.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

For developers, this provides a predictable structure for building and evolving a frontend without it turning into a tangle of one-off components.

For non-technical users working in the CMS, it means pages are assembled from a set of well-defined building blocks, so changing content is less likely to break the layout.

Purpose: Text primitives and typographic consistency.

• Headings, paragraphs, inline text

• No layout

• No composition

• No CMS awareness

Examples:

• Heading1

• Paragraph

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

This keeps text styles predictable across the site, so changing typography happens in one place instead of across many components and pages.

Purpose: Small, reusable UI elements users interact with.

• Buttons, links, form controls

• Single responsibility

• No layout systems

• No knowledge of Sections or Pages

Atoms may depend on Typography, but nothing above.

Examples:

• Button

• Link

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

This reduces duplication and makes it easier to refine common interactions (such as buttons and links) consistently across the whole site.

Purpose: Layout and structural primitives.

• Grid, stack, container, spacing

• No meaningful content

• No business logic

• Visually neutral

Base components are used by Atoms and Sections to ensure consistent layout.

Examples:

• Section (layout wrapper)

• Grid

• Container

By reusing the same layout primitives everywhere, you avoid one-off layouts and keep spacing and alignment consistent across pages.

Purpose: Vertically stacked, CMS-driven visual patterns.

• Always stack vertically

• Named by visual appearance, not semantics

• Compose Atoms and Base components

• No layout systems of their own

• 1:1 mapping with CMS schemas

Sections are replaceable and isolated. Removing one must not affect others.

Examples:

• TitleTextSection

• ImageTextSection

• FeatureGridSection

This makes it safer to iterate on the design of a site: you can introduce new Sections, remove old ones, and adjust content in the CMS without affecting the rest of the page.

Pages are composition only.

• Pages import Sections only

• No direct use of Atoms, Base, or Typography

• Page structure is driven by the CMS

• Pages define order, not implementation

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.

In practice, this turns your CMS into a structured page builder: editors choose and order Sections, while the visual design and behavior of each Section stays in code. This gives you the flexibility of a page builder without exposing low-level layout controls to non-developers.