> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/core-concepts/scaling.md).

# Scaling: size, space & rhythm

How Analog uses responsive scales for type, gaps, margins, width, and section spacing.

A size in Analog is a step on a scale. Pick the step once and the theme uses its mobile, tablet, or desktop value at each breakpoint. Type and spacing use separate values but follow the same rule.

## Pick a step

A fixed pixel value rarely works on every screen. A 48px heading may fit on desktop and look oversized on a phone. A gap that works on a phone can look too tight on a wide layout. Setting each value at every breakpoint fixes this, but also creates three settings to maintain.

Analog uses one setting instead. Type sizes use a 15-step scale (`r1`–`r15`), with a value for each breakpoint. Spacing uses the same step names. It resolves to roughly 60% of the desktop value on phones and 83% on tablets.

{% hint style="info" %}
Keep the same step across breakpoints. It already shrinks on mobile and grows on desktop. Use a custom pixel value only when the element needs to leave the scale.
{% endhint %}

## What scales

The controls are split between Typography and Layout settings.

| What                         | Setting                                             | Notes                                                                                                  |
| ---------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| All text at once             | Typography › "Type sizing"                          | The master control for the type scale: "Small", "Medium", or "Large" swaps the whole 15-step value set |
| One element's text           | Each type preset's "Size" (1–15)                    | See [typography](/core-concepts/typography.md) for the presets                                         |
| One block's text             | The block's "Text size" (XS–XL)                     | Steps the element one or two steps along the scale without leaving it                                  |
| The S / M / L spacing values | Layout › Grid values › "Small" / "Medium" / "Large" | Sets what S, M, and L mean everywhere spacing is offered. Mobile and tablet scale automatically        |
| Space between blocks         | Layout › "Default gap"                              | Spacing between text, icons, buttons, and other basic blocks                                           |
| Space between cards          | Layout › "Card gap"                                 | S, M, L, or "⋯" with a "Custom card gap" in pixels                                                     |
| The outer page edge          | Layout › "Page margin"                              | How far content sits from the screen edge                                                              |
| Content width                | Layout › "Max width"                                | The width content is allowed to fill                                                                   |
| Space between sections       | Layout › Section spacing › "Default"                | Each section can break it with "Custom rhythm"                                                         |

## Why do the axes scale differently?

Horizontal and vertical space need different rules because desktop is usually landscape and mobile is portrait:

* Page margins drop to roughly a third of their desktop value on mobile. This gives the content more width on a small screen.
* Section spacing uses the regular spacing scale. It is independent of the page margin because vertical space doesn't reduce the available content width.
* Item gaps and page margins scale separately, so you can change the inner density without changing the page edge.

### Wide editorial spacing

Use a small "Page margin" and a large section spacing "Default" for wide pages with more space between sections:

* Layout › Page layout › Page margin: "S"
* Layout › Section spacing › Default: a high value, for example 120px

## Change the overall density

Change these global values before editing individual sections.

| You want                        | Move                                                                                         |
| ------------------------------- | -------------------------------------------------------------------------------------------- |
| Denser, more content per screen | Lower the section spacing "Default" and "Page margin"; keep "Default gap" at "S"             |
| More open                       | Raise the section spacing "Default" and the Grid values "Large"; keep "Small" tight          |
| Flat, uniform                   | Set the Grid values "Small", "Medium", and "Large" close together so the steps barely differ |
| Everything bigger or smaller    | Move "Type sizing" one step instead of resizing elements one by one                          |

{% hint style="warning" %}
"Card gap" is the exception. At 0, product images touch edge to edge. Text inside each card keeps a minimum inset from the card edge.
{% endhint %}

## Going off-scale

A block's "Text size" and a preset's "Size" move the element to another step, so they stay responsive. "Max width", "Custom card gap", and a section's "Custom rhythm" use exact pixel values. Use these as exceptions since they don't get a different value per breakpoint.

The full `r1`–`r15` value table and the `gap-r{n}` / `p{t,b,x,y}-r{n}` / `text-r{n}` utility classes live in the [spacing utilities reference](/reference/utilities/spacing.md).

## See also

* [Typography](/core-concepts/typography.md): the presets that select a step for each element
* [Global settings & local overrides](/core-concepts/settings-cascade.md): how sections override global values
* [Color](/core-concepts/color.md): color schemes and derived tints