Content Page Template (Font: Crimson Text)

This page is the reference for every design decision on corsetmaking.com: colors, button pairings, fonts, sizes, headings, and reusable content patterns. Everything here comes from :root tokens in corsetmaking.css. New content, templates, and Flex Components should use these tokens and classes only. If something you need isn't here, flag it before adding a new value.

Last updated: 2026-10-29 (text on photos / dark panels tokens). Contrast ratios are WCAG 2.1: 4.5:1 minimum for normal text, 3:1 for large text and UI borders.

H1: Page Title (rendered by the page shell, not editable here)

Font: var(--font-accent) (Crimson Text), Size: var(--font-size-35), Weight: 600, Color: var(--text-body). This comes from the h1.page-title-header rule and appears above the Header zone on every page using this template.

Class: h1 class="page-title-header"

1. Colors

Brand

Secondary Gold

Text

Lighter than --text-subtle is never used for text. Breadcrumbs, product codes, mini-basket text, and filter labels all use --text-subtle.

Borders and Surfaces

On --surface-subtle: --text-body 9.82:1, --text-subtle 4.54:1. --brand-gold-text drops to 4.45:1 on gray surfaces - keep gold text on white.

Text on Photos and Dark Panels

Text over a photo or a semi-transparent panel always gets a full halo on all sides: text-shadow: 0 0 1px, 0 0 2px, 0 0 4px in the halo color. WCAG treats a full halo as the text's background. An offset-only shadow (e.g. 2px 2px 1px) does not count. Tested on the homepage hero slider 2026-10-29: Corset panels over white product photos measured white 3.9:1 and gold 1.9:1 without a halo, and pass with it.

Status

Color Roles

Role tokens point at a brand color. New code and Flex Components use the role, so a future color change happens in one place.

• --link-color = var(--brand-purple) (9.17:1) - sample link
• --link-hover = var(--hover-magenta) (4.66:1) - sample hover state
• --focus-ring = 2px solid var(--brand-purple) - keyboard focus outline, always with outline-offset:2px - sample

Button Building Blocks (do not use directly)

These grays and hover colors are what the button tokens in section 3 are built from. Use the --btn-* tokens instead of these.

Other Grays (existing uses only)

Kept so existing rules keep working. Not for new content - pick a Text, Surface, or button token instead.

Department Colors

Corset, Bra, Hat, Steampunk, Leather, and Costume each have their own accent colors, used for department-tinted backgrounds and text (About page department blocks, homepage category background). These are a deliberate exception to the token system - they're hardcoded per department in corsetmaking.css and could be tokenized later if the need arises.

See: claude/cms-department-colors-reference-2026-09-25.md (Project Files)

2. Accessibility: Old vs. New

Each pair shows a value that failed WCAG AA (left) and its replacement (right). The old values are shown for reference only - never reuse them.

Gold Text (2026-08-23)

Light Gray Text (2026-10-26)

Status Red (2026-10-26)

Gold Buttons (2026-10-26)

3. Buttons

Every button on the site uses one of these seven styles. Each style is a tested pair: background, text, hover background, and hover text are set together as --btn-[style]-bg / -text / -hover-bg / -hover-text (outline styles add -border). Pick the style by purpose, then use its tokens - never mix one style's background with another style's text.

purple - the main action on a page: log in, create account, save, submit, return, estimate shipping, continue shopping. Text 9.17:1, hover 4.66:1. Tokens: --btn-purple-*. Class: a class="content-page-button-secondary"

purple-outline - smaller actions inside cards and lists: View Order, Reorder, Make Default pills. Text 9.17:1, hover 9.17:1. Tokens: --btn-purple-outline-*. Class: a class="content-page-button-purple-outline"

gold - moving the order forward: Checkout, Continue, Complete Order, account destinations (My Orders, Wishlist), Save, newsletter Sign Up. Text 5.63:1, hover 14.79:1. Tokens: --btn-gold-*. Class: a class="content-page-button-primary"

gold-outline - quantity Update in the basket (switches to solid gold when the quantity has changed). Text 4.85:1, hover 14.79:1. Tokens: --btn-gold-outline-*. Class: a class="content-page-button-gold-outline"

cart - Add to Cart only. Text 6.23:1. Tokens: --btn-cart-bg / --btn-cart-text. Class: a class="content-page-button-cart"

neutral - lesser or utility actions: Email Password, Log Out, Save Cart for Later, Delete Entire Cart. Text 8.34:1, hover 13.62:1. Tokens: --btn-neutral-*. Class: a class="content-page-button-neutral"

preorder - pre-order products only. Deliberately different from every other button so shoppers notice it. Text 7.13:1. Tokens: --btn-preorder-bg / --btn-preorder-text. Class: .button-preorder (added to the Add to Cart button); sample class a class="content-page-button-preorder"

4. Font Families

--font-primary: Montserrat, sans-serif

Primary UI and body typeface. Role alias: --font-heading-family, --font-ui-family

--font-secondary: Open Sans, sans-serif

Navigation, breadcrumbs, category listings. Role alias: --font-body-family

--font-accent: Crimson Text, serif

Headings and display only (page titles, cart flyout headings). Role alias: --font-accent-family

Usage: style="font-family:var(--font-primary)" (or --font-secondary / --font-accent). Never type a font name directly.

Font Weights

Loaded weights (Head Tag Content, since 2026-10-28): Montserrat 400 / 500 / 600 / 700, Open Sans 400 / 600 / 700, Crimson Text 400 / 600 regular and italic (italic added 2026-10-29). Any other weight or style is faked by the browser, so stick to these. Italic is loaded for Crimson Text only. Bold text in content (b, strong) is semi-bold (600); content-page H3 / H4 / H5 are 600. Save 700 for short labels, badges, and status text that must stand out.

5. Font Size Scale

The 10 sizes below are the only font sizes in use on the site. There is no 13px, 15px, 17px, 19px, 22px, or 24px step - use the nearest step, or flag a new one before adding it.

Minimum Sizes (Typography Pass 2, 2026-10-28)

• 14px (sm) - the minimum for anything a shopper reads or clicks: links, buttons, product info, prices, stock messages, table text.
• 16px (md) - long reading (paragraphs, lists) and every form field a shopper types in. Fields under 16px make iPhones zoom in when tapped.
• 12px (xs) - only for short labels, badges, captions, legends, and fine print.
• Nothing smaller than 12px.

Sizes in Use

--font-size-12 / --font-size-xs (12px) - The quick brown fox jumps over the lazy dog

Labels, badges, captions, fine print only

--font-size-14 / --font-size-sm (14px) - The quick brown fox jumps over the lazy dog

Minimum for anything read or clicked

--font-size-16 / --font-size-md (16px) - The quick brown fox jumps over the lazy dog

Long reading - paragraphs, lists, form fields

--font-size-18 / --font-size-lg (18px) - The quick brown fox jumps over the lazy dog

--font-size-20 / --font-size-xl (20px) - The quick brown fox jumps over the lazy dog

--font-size-25 / --font-size-2xl (25px) - The quick brown fox jumps

--font-size-30 / --font-size-3xl (30px) - The quick brown fox

--font-size-35 / --font-size-4xl (35px) - The quick brown

--font-size-50 (50px) - The quick

--font-size-60 (60px) - Quick fox

Named sizes (xs to 4xl) are the same names and values as the Delicious Boutique site. Either name works - var(--font-size-14) and var(--font-size-sm) are the same size. 50 and 60 keep their number names only.

Usage: style="font-size:var(--font-size-sm)" or style="font-size:var(--font-size-14)". Role aliases for common cases: --font-body-size-sm / -md / -lg (14 / 16 / 18), --font-heading-size-sm / -md / -lg / -xl (18 / 20 / 25 / 30), --font-ui-size-sm / -md (12 / 14), --font-accent-size-sm / -md / -lg (16 / 25 / 30).

Retired Sizes - Do Not Use

--font-size-10, --font-size-11, --font-size-13, and --font-size-17 are still defined in :root so older templates and components don't break, but nothing in corsetmaking.css uses them anymore. Use 12 (labels only) or 14 in place of 10 / 11 / 13, and 16 or 18 in place of 17. They will be removed after the template and Flex Component audit.

6. Heading Scale

Content-page headings (classes below) and the page-type headings used by store templates. Use the content-page classes for anything you write; the store-template headings are listed so new templates and components match them.

When to Use Each Level

• H2 - section titles. H3 - sub-sections. H4 - a sub-section inside an H3. Content pages use H2 to H4 only.
• Don't skip levels (no H4 directly under an H2) - screen readers and search engines read the heading levels as the page outline.
• H5 - not for new content. It is kept so older pages don't break; at 14px it is smaller than 16px body text.
• H6 - the label style: 12px bold uppercase, for a short label or eyebrow above a block (the 12px label rule). Not for a real section title.
• H2 is 20px normal weight and H3 is 18px semi-bold (changed 2026-10-28 - H2 used to be smaller than H3). H4 is the same size as body text and stands out by weight only.

Phones: content-page headings keep the same size on phones. Store-template headings that shrink are listed in the Phones column; none go below 16px. Flex Component content headers drop from 18 to 16 at 767px and below. Check every heading at 375px wide - headings should not wrap awkwardly on phones.

This is an H2

Class: h2 class="content-page-header"

This is an H3

Class: h3 class="content-page-subheader"

This is an H4

Class: h4 class="content-page-header-4"

This is an H5

Class: h5 class="content-page-header-5"

This is an H6

Class: h6 class="content-page-header-6"

7. Paragraph / Body Text

This is standard content-page-paragraph text. Font: var(--font-primary), Size: var(--font-size-16), Color: var(--brand-charcoal). Here is a paragraph with a link to a category page, showing the default in-paragraph link and its gold hover.

Class: p class="content-page-paragraph" (16px since 2026-10-28; lists use the same size)

This is content-page-quote-paragraph, an italic inline variant used for pull-quotes within body copy.

Class: p class="content-page-quote-paragraph"

8. Link Styles

Use one of these named link styles instead of an unstyled link. An unstyled link falls back to Bootstrap's default blue (#337ab7), because no site-wide base link color is set yet. New Flex Components use the role tokens --link-color / --link-hover (section 1).

Gold link, no underline, stays gold on hover

Class: a class="content-page-link-gold" (matches the site's telephone-link / email-link pattern). 4.85:1

Default-color link, turns gold on hover, never underlined

Class: a class="content-page-link-gold-hover" (matches the standard in-paragraph link shown above)

Gold, underlined link, fades to muted gray on hover

Class: a class="content-page-link-underline" (matches the "Read More" link pattern)

Purple link using the --link-color role token

Style: color:var(--link-color), hover var(--link-hover) - the standard for new Flex Components. 9.17:1

Unstyled link (Bootstrap default blue) - legacy look, avoid for new content

No class - this is what you get by default, seen in older custom field content and the basket "Save to Wishlist" link. 4.56:1

9. Blockquote

Corsetmaking is equal parts engineering and artistry. Every pattern piece has a purpose. Example attribution line

Class: blockquote class="content-page-blockquote" (with an optional cite tag inside for attribution)

10. Code / Pre

Inline code example: --font-size-14 renders using the content-page-code class.

Class: code class="content-page-code"

.my-new-button {
background-color: var(--btn-gold-bg);
color: var(--btn-gold-text);
font-family: var(--font-primary);
font-size: var(--font-size-16);
}
.my-new-button:hover {
background-color: var(--btn-gold-hover-bg);
color: var(--btn-gold-hover-text);
}

Class: pre class="content-page-pre"

11. Lists

Unordered List

• Bones and boning channels
• Busks and closures
• Grommets and lacing

Class: ul class="content-page-ul"

Ordered List

1. Cut fabric pieces from pattern
2. Sew panels together
3. Insert boning channels

Class: ol class="content-page-ol"

12. Tables

Markup: div class="table-responsive" wrapping table class="table table-striped table-hover" (native Bootstrap classes). The wrapper adds horizontal scroll on phones - always include it.

13. Images and Reusable Content Patterns

Banner Image (full-width)

Class: div class="content-page-banner-image"

Inline / Product Image (centered, capped width)

Class: div class="content-page-image-container"

Image Upload Sizes

Legacy sizes still under review (from the 2014 spec, not yet updated for high-resolution screens): top-level category circles 200 x 200 (PNG-24, 4px white inside stroke, /Merchant2/graphics/storeswap), top-level category background 1062 x 475, testimonial background 1058 x 310, content page image 297 x 219, product tab images 300 x 300.

Tutorial Link + Responsive Image (Product Custom Field)

Used in the "Tips & Tutorials" product custom field, rendered as a collapsible accordion panel on PROD pages (alongside Overview, Technical Specs, and Reviews). Pattern: a plain text link, followed by a separately link-wrapped image using img-responsive (Bootstrap's native responsive-image class). Tutorials now live at /miy/[slug].html.

Markup: a href="..." (link text), then a href="..." img class="img-responsive" (image)

Technical Specs Variant (Opens Full-Scale in New Tab)

A variant of the same pattern, used in a Technical Specs custom field, where the link text itself is the caption and target="_blank" opens the full-size chart image in a new tab.

Markup: a href="..." target="_blank" (caption link), then a href="..." target="_blank" img class="img-responsive" (image)

Product Page Accordion Sections

The Overview, Technical Specs, Tips & Tutorials, and Reviews sections on PROD pages use div.product-page-section-toggle for the collapsible toggle row.

Class: div class="product-page-section-toggle"

Sizing Table - Legacy vs. Recommended

Older product custom fields (e.g. the 1864 Spanish Jackets sizing table) hand-code tables with inline colors that predate the token system. Don't copy the colors from this one; it's shown for reference only and will phase out as those products are discontinued or updated. The recommended version uses the standard table classes from section 12.

Legacy version (as found, do not reuse colors):

Recommended modern version (copy this for new sizing tables):

Markup: div class="table-responsive" wrapping table class="table table-striped table-hover"

14. Form Elements

Classes: label class="content-page-form-label" (labels, with for= matching the field id) + input/select class="form-control" (native Bootstrap for fields, checkboxes, and radios). Every typed field and dropdown on the site is 16px - set once in corsetmaking.css, so don't set a smaller size on a field.

15. Muted / Fine-Print Text

This is content-page-text-muted (var(--text-muted), 14px, Open Sans). Used for secondary/supporting copy.

Class: p class="content-page-text-muted"

This is content-page-text-fine-print (var(--text-fine-print), 12px, Open Sans). Used for disclaimers and small print - not for anything a shopper needs to act on.

Class: p class="content-page-text-fine-print"

16. Notice / Callout Boxes

Class: div class="content-page-notice" (background var(--surface-subtle), purple left border)

Class: div class="content-page-notice notice-success"

Class: div class="content-page-notice notice-error" (left border var(--status-error-text))

Classes: cssui-information-message / cssui-error-message - Miva system messages, using the --status-* background, border, and text tokens

17. Found in the Wild (not part of the system)

Values and patterns still on the site that aren't tokenized. Don't copy them into new work. Each is listed with what to use instead.

• Helvetica Neue - only in the basket Edit Options modal dropdown (.c-dialog select.c-form-select__dropdown). Matches the Bootstrap default stack, not a brand choice. Use --font-primary / --font-secondary / --font-accent.
• Department colors - hardcoded per department (section 1). A deliberate exception for now.
• Legacy sizing-table colors (#790000, #fbf2f0) - older product custom fields only (section 13).
• Bootstrap default blue links (#337ab7) - unstyled links in older custom fields and the basket "Save to Wishlist" link. Use a named link style or --link-color.
• #8e5ba0 outside of prices - category "volume pricing" link and the product Quick View overlay. Same value as --price-color; not yet tokenized.
• Image buttons - the header mini-basket flyout uses PNG images for View Cart, Checkout, and Continue Shopping (and some older category pages use an image Add to Cart). These can't follow the button tokens until they're replaced with real buttons.
• "In Stock" in red - the product page stock message (p.product-page-inventory-status-message) uses --status-error-text even for in-stock items. Should become --status-success-text in a later pass.
• B2B No Tax "Resale #" box (checkout Shipping & Payment step) - its HTML lives in the B2B No Tax module settings, not a template. Module settings are not branch-specific: an edit there goes live immediately.
• InsureShield box (checkout Shipping & Payment step) - vendor content section with its own style block and colors (#111, #407A65). Only its font sizes were changed to tokens.
• Inline small text in older templates - e.g. the ORDP order contents SKU line (inline font-size:11px). Fix during the template audit.
• Checkout step indicator default steps - #d4d4d4 background with --text-body (7.22:1, passes). Not tokenized.