> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/store-wide-design/brand.md).

# Logo, colors, fonts and buttons

Set your logo, favicon, colors, fonts, page layout and buttons so Stratum looks like your brand.

These settings apply to the whole store. Open the theme editor (**Online Store › Themes › Customize**) and click the **gear icon (Theme settings)** at the bottom of the left sidebar.

![The Stratum home page with default brand settings](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-8fda08e92ee8553f05690f2d8ccf03f37a4363c9%2Fhome-desktop.png?alt=media)

## Logo and favicon

| Setting                         | What it does                                                                 | Default |
| ------------------------------- | ---------------------------------------------------------------------------- | ------- |
| **Logo**                        | Your logo image. Without one, the header shows your store name in text.      | –       |
| **Logo width on large screens** | Width of the logo on computers and tablets (60–300 px).                      | 120 px  |
| **Logo width on small screens** | Width of the logo on phones (48–200 px).                                     | 96 px   |
| **Favicon**                     | The small icon in the browser tab and bookmarks. 32 × 32 px PNG recommended. | –       |

**Tips**

* Use a **transparent PNG or an SVG** so the logo sits cleanly on any background.
* The logo can be any shape. Set the width; the height follows from the image.
* Wide logos need less width than square ones to look the same size. Check the header on a phone after changing **Logo width on small screens**: the logo shares the row with the menu and bag buttons.
* The logo is also used by the footer's small logo and oversized wordmark, and by the [page loader](/store-wide-design/animations.md#page-loader) when it is on.

## Colors

Stratum uses **color schemes**: sets of colors that work together. Every section, and many blocks and cards, lets you pick a scheme with its **Color scheme** setting. Change a scheme once and every section that uses it updates.

Stratum ships six schemes:

| Scheme                       | Background               | Typical use                                    |
| ---------------------------- | ------------------------ | ---------------------------------------------- |
| **Scheme 1** – Light         | White                    | Most sections; the default for pages           |
| **Scheme 2** – Soft gray     | Light gray (#f5f5f7)     | Footer, cards, alternating sections            |
| **Scheme 3** – Dark          | Near-black (#1d1d1f)     | Announcement bar, bold statements, dark heroes |
| **Scheme 4** – Sand          | Warm beige (#eeece6)     | Promotions and calm feature sections           |
| **Scheme 5** – Mist          | Cool blue-gray (#e6ebf1) | Promotions and info sections                   |
| **Scheme 6** – Graphite card | Dark gray (#2c2c2e)      | Dark cards inside light sections               |

You can rename schemes, change their colors and add more schemes in **Theme settings › Colors**.

### The colors in a scheme

**Text and background**

| Color              | Where it shows                                                                        |
| ------------------ | ------------------------------------------------------------------------------------- |
| **Background**     | Section background                                                                    |
| **Text**           | Headings, product titles, prices and other strong text                                |
| **Body text**      | Paragraphs and descriptions                                                           |
| **Secondary text** | Small print, captions, labels, counts and placeholders                                |
| **Eyebrow text**   | The small line above some headings (for example "Fall kitchen edit") and "New" badges |

**Surfaces and borders**

| Color                | Where it shows                                                                    |
| -------------------- | --------------------------------------------------------------------------------- |
| **Card background**  | Cards, image frames before images load, and info panels such as the stock message |
| **Field background** | Search fields, quantity selectors, soft buttons and chips                         |
| **Divider**          | Thin lines between rows, such as the specifications table                         |
| **Border**           | Outlines of inputs, option buttons and outlined buttons                           |

**Links and buttons**

| Color                    | Where it shows                                          |
| ------------------------ | ------------------------------------------------------- |
| **Links**                | Text links, such as "Shop all ›"                        |
| **Primary button**       | Filled buttons such as **Add to bag** and **Check out** |
| **Primary button label** | The text on primary buttons                             |

### Status colors

These are shared by all schemes:

| Setting                           | Used for                                 | Default       |
| --------------------------------- | ---------------------------------------- | ------------- |
| **In stock and success messages** | "In stock", "Link copied", confirmations | Green #1a7f37 |
| **Low stock messages**            | "Only 3 left"                            | Amber #a05400 |
| **Sold out and error messages**   | "Sold out", sale prices, form errors     | Red #c4320a   |

{% hint style="warning" %}
**Keep text readable.** Make sure **Text**, **Body text** and **Secondary text** stand out clearly against **Background** and **Card background**, and that **Primary button label** stands out against **Primary button**. Aim for a contrast ratio of at least 4.5:1 for small text; free online contrast checkers will tell you. Low contrast is the most common accessibility problem in store designs.
{% endhint %}

**Tips**

* Change **Primary button** and **Links** first; together with your logo, these do most of the branding work.
* Keep the **Background** of Scheme 1 white or very light: product photos on white backgrounds look best on it.
* For a dark section, pick Scheme 3 instead of changing Scheme 1, so the rest of the store stays light.

## Typography

| Setting                    | What it does                                     | Options                                                    | Default         |
| -------------------------- | ------------------------------------------------ | ---------------------------------------------------------- | --------------- |
| **Heading font**           | Font for headings and product titles             | Any font in Shopify's font library                         | System UI, bold |
| **Heading weight**         | How heavy headings are                           | **Match heading font**, **Medium**, **Semibold**, **Bold** | Semibold        |
| **Heading size**           | Scales every heading up or down                  | 80–130%                                                    | 100%            |
| **Heading case**           | Headings as typed, or all capitals               | **As typed**, **Uppercase**                                | As typed        |
| **Heading letter spacing** | Space between letters in headings                | **Tight**, **Normal**, **Wide**                            | Tight           |
| **Body font**              | Font for paragraphs, buttons and everything else | Any font in Shopify's font library                         | System UI       |
| **Body text size**         | Scales body text                                 | 90–120%                                                    | 100%            |

**Tips**

* **System fonts are the fastest.** The default "System UI" uses the font already on each visitor's device (San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android). Nothing has to download, so pages appear faster.
* **Heading weight** needs the weight to exist in your font. Medium and Semibold need a font that includes those weights; other fonts use the closest available weight. Choose **Match heading font** to use exactly the weight you picked in the font picker.
* **Heading case: Uppercase** applies to every heading, including product titles on cards. Long product names in capitals are harder to read, so test a collection page before keeping it.
* **Heading letter spacing: Tight** suits sans-serif fonts like the default. Use **Normal** or **Wide** for serif, display or uppercase headings, which look cramped when tight.
* Keep **Body text size** at 100% or above for readability on phones.

## Layout

| Setting                    | What it does                                                                             | Range        | Default |
| -------------------------- | ---------------------------------------------------------------------------------------- | ------------ | ------- |
| **Page width**             | Maximum width of the content on large screens. Wider screens show margins on both sides. | 1000–1600 px | 1280 px |
| **Space between sections** | Scales the top and bottom padding of every section                                       | 50–150%      | 100%    |
| **Corner roundness**       | Scales the rounded corners of images, cards, panels and fields. 0% gives square corners. | 0–150%       | 100%    |

**Tips**

* Each section also has its own **Top padding** and **Bottom padding**. **Space between sections** multiplies all of them, so use it to make the whole store airier or denser in one step.
* **Corner roundness** does not change buttons; button shape has its own setting below.
* A wider **Page width** shows more products per row in grids; 1280 px suits most stores, 1360–1440 px suits large catalogs.

## Buttons

| Setting          | What it does                                                                    | Options                            | Default      |
| ---------------- | ------------------------------------------------------------------------------- | ---------------------------------- | ------------ |
| **Button shape** | The outline of every button: fully round ends, 12 px corners, or square corners | **Pill**, **Rounded**, **Square**  | Pill         |
| **Hover effect** | What buttons do when the pointer is over them                                   | **Arrow reveal**, **Simple shade** | Arrow reveal |
| **Text case**    | Button labels as typed, or all capitals                                         | **As typed**, **Uppercase**        | As typed     |

* **Arrow reveal** narrows the button slightly and slides in a round arrow at its end. It is skipped for visitors who ask their device to reduce motion; they get the simple shade instead.
* **Simple shade** only darkens the button. It suits calmer, more corporate designs.
* Some buttons carry their own icon in the arrow's place, such as the cart icon on product cards.

{% hint style="info" %}
Button colors come from the color scheme of the section the button is in: **Primary button** and **Primary button label**. Outlined buttons use **Text** and **Border**.
{% endhint %}

## Related pages

* [Animations and motion](/store-wide-design/animations.md)
* [Product cards](/products/product-cards.md) for how products look in grids
* [Theme settings reference](/reference/theme-settings.md) for every setting in one place