Script&Theory

§05 / PRESETS

REF: TG–DOC–05 · REV. 1.7

Selvedge

Selvedge pairs Playfair Display headings with Raleway body text on a warm linen background, with a brown accent. Product cards use the tall 2:3 image ratio and buttons and inputs have square corners.

TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19

tangent / home
FIG. 01 — SELVEDGE HOME PAGEDEMO STORE · PROTOTYPE
tangent / products / storm-parka
FIG. 02 — SELVEDGE PRODUCT PAGEDEMO STORE · PROTOTYPE

To apply it, open Theme settings in the theme editor and choose the Selvedge theme style. Applying a preset changes the theme settings and color schemes it defines. Templates and section content are not changed.

Listing detailValue
Industry tagClothing and accessories
Catalog sizeSmall

Settings

"Preset" means the value is set by the Selvedge preset. "Theme default" means the preset does not set it and the default from config/settings_schema.json applies.

GroupSettingValueSource
TypographyHeadings: FontPlayfair Display Regular (400)Preset
TypographyHeadings: Size90%Preset
TypographyHeadings: Letter caseAs typedPreset
TypographyHeadings: Letter spacing-2%Preset
TypographyHeadings: Line height104%Preset
TypographyBody: FontRaleway Regular (400)Preset
TypographyBody: Size15pxTheme default
TypographyLabels: Letter caseUppercasePreset
LayoutPage width1440pxPreset
LayoutPage margin32pxPreset
LayoutSpace between sections100%Theme default
LayoutGrid spacing10pxPreset
Buttons and inputsPrimary button styleSolidTheme default
Buttons and inputsButton corner radius0pxPreset
Buttons and inputsInput corner radius0pxPreset
Buttons and inputsButton letter caseAs typedPreset
ColorsProduct image background#E8E2D8Preset
Product cardsImage ratioTall (2:3)Preset
Product cardsHover effectZoomTheme default
Product cardsText alignmentLeftTheme default
Product cardsShow star ratingOffTheme default
SwatchesShapeCirclePreset

Letter spacing is a percentage of the font size: -2% renders as -0.02em.

Color schemes

The preset defines five color schemes. Scheme 1 also sets the page-wide default colors (:root in snippets/css-variables.liquid).

RoleScheme 1Scheme 2Scheme 3Scheme 4Scheme 5
Background#F1EDE6#E6DFD3#2A2520#FBF8F3#8C5A3C
Text#2A2520#2A2520#F1EDE6#2A2520#FBF8F3
Secondary text#726A5F#6A6257#B5AB9C#756D62#F3E0D1
Panel background#E8E2D8#DDD5C7#353029#F1EDE6#9A6A4B
Borders#DCD4C7#D0C6B6#47403A#E3DCD0#A87B5D
Primary button background#2A2520#2A2520#F1EDE6#2A2520#FBF8F3
Primary button label#F1EDE6#E6DFD3#2A2520#FBF8F3#8C5A3C
Accent#8C5A3C#8C5A3C#C79B6E#8C5A3C#2A2520
Text on accent#F1EDE6#F1EDE6#2A2520#FBF8F3#FBF8F3

Product images

Product cards crop images to a 2:3 portrait frame (card_ratio: 0.667). Product photos shot at 2:3 display without cropping. Images with another ratio are cropped to fill the frame, because the theme default Image fit is Fill (card_image_fit: cover). You can change Image ratio under Theme settings > Product cards.

What all presets share

A preset changes theme settings and color schemes only. It does not change templates or section settings.

  • Templates. listings/tangent/, listings/selvedge/, listings/muslin/, listings/asphalt/ and listings/lumen/ contain identical template files. The home page uses the same sections in the same order in every preset: Image or video banner, Scrolling text, Featured collection, Image tiles, Lookbook, Shoppable videos, Shop the look, Image with text, Collage, Collection index, Image with text, Logos and press, Icons with text, Testimonials and Email signup.
  • Header. The header is set in sections/header-group.json and is the same for every preset. Layout: Logo left, menu center. Menu style: Mega menu, opened on hover, with the Underline hover effect. Sticky header: Always. The header shows over the first banner on the home page. On mobile, sub-menus slide in and the menu opens as a drawer.
  • Collection filters. The collection template uses the same settings in every preset. Filters on desktop: Sidebar. Apply filters: Instantly. Filter groups: All open. Filter values: Checkboxes. Color filters: Swatch and name. Price filter: Single slider (Under price). 8 values show before "Show more". The search box in long filter lists and product counts are on. The grid shows 3 columns on desktop and 2 on mobile, 12 products per page, with a Load more button.
  • Body text size. No preset sets body_scale, so body text uses the 15px default.
For developers

Last updated for Tangent 1.7

Get support ↗