> 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/readme.md).

# Overview

Analog keeps layout, spacing, type, and color in theme settings so you can control the design from the theme editor.

Analog keeps the main design decisions in theme settings. You control layout, spacing, type, and color from the theme editor. The defaults use the same scales and rules, so they work together without much adjustment.

<figure><img src="https://256838974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDFCPNagZLqTjKwJXAF6W%2Fuploads%2Fgit-blob-d9495b6c16593ce0fc04c728d3454c104744cc6b%2Fhome-hero.jpg?alt=media" alt="A storefront built with Analog"><figcaption><p>A storefront built entirely in Analog's theme editor. No code.</p></figcaption></figure>

Start with these three rules.

## Pages are trees of sections and blocks

Every page is a stack of sections. Sections hold blocks, and some blocks hold more blocks. An accordion inside a Flex block inside a Custom section is normal. The same structure is used across the theme. See [The section & block model](/core-concepts/model.md).

## Set globally, override locally

Set spacing, rounding, color, and type globally. Override a value on a section or block only when it needs to be different. The setting closest to the content wins. See [Global settings & local overrides](/core-concepts/settings-cascade.md).

## Sizes are steps on one scale

A size in Analog is one step on a 15-step scale. Each step has a phone, tablet, and desktop value. Use the same step at every breakpoint. Type sizes, gaps, page margins, and section spacing all use this system. See [Scaling: size, space & rhythm](/core-concepts/scaling.md).

[Typography](/core-concepts/typography.md) uses four font roles and shared type presets. [Color](/core-concepts/color.md) uses a small set of color schemes. Set each system once and the elements that use it update together.

Pages are server-rendered Liquid. Alpine.js adds behavior on top, so the core shopping path works without JavaScript.

## Start here

* [Core concepts](/core-concepts/model.md): sections, blocks, settings, type, color, and scaling
* [Building](/building-pages/pair.md): Pair sections, cards, the Custom section, backgrounds, and layout blocks
* [Features](/features/header.md): header, search, product, collection, cart, and footer behavior
* [Developer platform](/developer-platform/blocks.md): developer blocks, custom code, and events
* Reference: [Tailwind utilities](/reference/utilities/spacing.md), [Alpine plugins](/reference/alpine.md), [metafields](/reference/metafields.md), and [TypeScript utilities](/reference/utils.md)