DESIGN.md@research/cases/saas-dashboard/shopify-app-settings-2026-11-05/measurements git:20261105.7559d8bA

Immutable. This exact content never changes and is served at /api/v1/blob/0354f99768258fc8.

---
site: Settings
url: "https://shopify.dev/docs/api/app-home/patterns/templates/settings"
generated_at: "2026-11-05T03:39:13.512Z"
generator: "designlang@13.4.0"
intent: docs
material: flat
tokens:
  colors:
    primary: "#475f91"
    secondary: "#8ec1c9"
    accent: "#474f94"
    background: "#ffffff"
    foreground: "#44474a"
  typography:
    sans: Inter
    mono: JetBrains Mono
    base: 14
  spacing:
    base: 4
    scale: "[4, 8, 12, 16, 20, 28, 40, 48, 60]"
  radii:
    sm: 3
    md: 8
    lg: 16
    full: 100
  shadows:
    xs: "rgba(0, 0, 0, 0.2) 0px 2px 0px 0px inset"
---

# Overview

A **docs** page (heuristic confidence 1), dressed in **flat** material.

> "Settings"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → nav → sidebar → nav → testimonials → content → nav → nav → testimonial → nav → nav → nav → nav → nav → footer`.

Source: <https://shopify.dev/docs/api/app-home/patterns/templates/settings>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#475f91` | 71 |
| secondary | `#8ec1c9` | 267 |
| accent | `#474f94` | 1 |
| background | `#ffffff` | — |
| foreground | `#44474a` | — |

**Neutrals:** `#d2d5d8` · `#44474a` · `#eef1f1` · `#000000` · `#6d7175`

**Tonal ramps** (OKLCH, base step in bold)
- primary: 50 `#e4f6ff` · 100 `#d7eaff` · 200 `#c4daff` · 300 `#a8c0f0` · 400 `#869fd4` · 500 `#6881b6` · 600 `#546b9c` · **700 `#475f91`** · 800 `#33466c` · 900 `#283859` · 950 `#131e35`
- secondary: 50 `#ddfcff` · 100 `#cff1f6` · 200 `#bbe1e7` · **300 `#8ec1c9`** · 400 `#79a9b1` · 500 `#5a8b93` · 600 `#46757c` · 700 `#345e65` · 800 `#284d53` · 900 `#1e3e43` · 950 `#0c2326`
- accent: 50 `#e9f3ff` · 100 `#dce7ff` · 200 `#cad5ff` · 300 `#afbbfe` · 400 `#8d9ae2` · 500 `#707bc4` · 600 `#5c65a9` · **700 `#474f94`** · 800 `#3a4176` · 900 `#2e3462` · 950 `#181b3b`
- neutral: 50 `#f4f6f7` · 100 `#e8eaec` · **200 `#d2d5d8`** · 300 `#bec0c3` · 400 `#9da0a3` · 500 `#808285` · 600 `#6a6c6f` · 700 `#555759` · 800 `#454749` · 900 `#37393b` · 950 `#1e1f20`

**Measured pairs**
| role | bg | fg | contrast |
|---|---|---|---|
| surface.page | `#ffffff` | `#202223` | 15.98:1 AAA |
| surface.raised | `#f6f6f7` | `#202223` | 14.79:1 AAA |
| action.primary | `#475f91` | `#ffffff` | 6.34:1 AA |
| action.secondary | `#8ec1c9` | `#202223` | 8.08:1 AAA |
| action.accent | `#474f94` | `#a8e1ea` | 5.2:1 AA |

**Dominance (share of painted area):** `#ffffff` 80% · `#304b4f` 14% · `#eef1f1` 5% · `#24393d` 1%

**Total unique colors detected:** 27.

# Typography

**Families**
- `Inter` · 122 uses
- `JetBrains Mono` · 1125 uses

**Body size:** `14px` / line-height `20px`.

**Scale ratio:** `1.2` (minor third) from `14px` — 83% of sizes on the ladder.
**Measure:** ~60 characters per line (comfortable).
**Fluid type:** none — fixed sizes per breakpoint.

**Named scale**
| role | size | weight | line-height |
|---|---|---|---|
| h1 | `32px` | `600` | `40px` |
| h2 | `24px` | `600` | `28px` |
| h3 | `20px` | `600` | `24px` |
| h4 | `16px` | `400` | `24px` |
| body | `14px` | `400` | `20px` |
| body-sm | `12px` | `400` | `16px` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `4px` · `8px` · `12px` · `16px` · `20px` · `28px` · `40px` · `48px` · `60px`

**Content column:** `884px`
**Column system:** 2 columns.
**Section rhythm:** `32px` vertical padding.
**Gap scale:** `2px` · `8px` · `12px` · `16px` · `20px` · `36px`

**Layout primitives:** 5 grid containers · 290 flex containers.

# Elevation and Depth

**Elevation ladder**
- `xs` — `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px`

**Shadow system:** 1 levels from 4 raw values (redundancy 4×) · neutral tint.

**Z-index layers:** 16

# Shapes

**Radius scale**
- `sm` — `3px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `50px`
- `full` — `100px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `tabs` · `accordions` · `progressBars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 38 |

# Do's and Don'ts

**Do's**
- Use `copy`, `jsx`, `html` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 45 !important rules — prefer specificity over overrides.
- Don't 64% of css is unused — consider purging.
- Don't 5590 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.4.0 from <https://shopify.dev/docs/api/app-home/patterns/templates/settings>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

---

Measured with [designlang](https://designlang.app).