Colour Palette

Eleven TLC operates a two-tier colour system. The parent brand is cream and blush-dominant with magenta CTAs. Verdant Daily, the premium sub-brand, is green-dominant with no magenta. Sage is approved for both tiers.

Warm Neutrals: Page Structure

Near White #FDFAF6

Nav backgrounds, card fills, near-white moments

Warm Cream #F5F0E8

Primary body background, shared across both tiers

Warm Sand #EDE6D6

Section fills, hospitality and B2B sections

Warm Stone #C8B8A0

Mid-neutral fills, structural depth

Warm Taupe #9B8B78

Borders, dividers, secondary labels

Blush Rose: Eleven TLC Main Site

Blush Light #FBE8EA

Hero sections, benefit card fills, one colour moment per page

Blush Rose #F6D7D9

Best Sellers, Subscribe strip, Feel Good Guarantee

Blush Deep #E6BFC3

Borders on blush sections, card hairlines

Gold: Shared Accent

Gold Wash #F2E8D0

Testimonial section backgrounds, warm honey alternative

Gold Light #D4B06A

Announcement bars, typographic rules, pill labels

Gold #B8975A

Primary accent, dividers, price display

Gold Deep #967847

Label text (ABOUT THIS PRODUCT etc), rich emphasis

Magenta: CTA Reserved

Magenta #E8147E

Primary CTA buttons and logo badge only

Magenta Dark #C9116B

Hover state for CTAs

Magenta appears only where action is required — purchase CTAs and the logo badge. Never use as a background, text colour, section fill, or on Verdant Daily pages.

Forest Green: Structural + Botanical

Light Sage #E8EDE8

Verdant Daily only: ingredient panels, system cards

Sage #7A9E7E

Main site + Verdant Daily: botanical section fills, one to two moments per page

Forest Green #2D4A3E

Navigation bar, footer, max one brand section on main site

Deep Green #1B3329

Footer background, cover, Verdant hero sections

Sage (#7A9E7E) is approved for Eleven TLC main site use as a botanical section fill. Light Sage (#E8EDE8) remains Verdant Daily only. Forest Green is used for the navigation bar, footer, and a maximum of one brand section.

Text Stack: UI Neutrals

Near-Black #1A1816

All body copy and headings on light backgrounds

Warm Charcoal #4A4540

Captions, subheadings, metadata

Warm Grey #8C857F

Placeholder text, inactive states

White #FFFFFF

Text on Forest Green or Deep Green backgrounds

Typography

Cormorant Garamond and DM Sans form the complete typographic system. Cormorant carries the brand's editorial warmth at display scale. DM Sans provides clean legibility at body and UI scale. Both are used across Eleven TLC and Verdant Daily.

Cormorant Garamond — Display & Headings

Your Metabolic Rhythm

Light 300

Regular 400

SemiBold 600

Light Italic 300i

Regular Italic 400i

SemiBold Italic 600i

DM Sans — Body & UI

Wellness that starts from the root.

Regular 400

Medium 500

SemiBold 600

Type Scale

Display

Restored.

64px / Cormorant Garamond SemiBold 600

Your Metabolic Rhythm

48px / Cormorant Garamond SemiBold 600

Formulated by Physicians

36px / Cormorant Garamond SemiBold 600

Sustained Energy Support

28px / Cormorant Garamond Regular 400

Body Large

Gelatinization removes raw starch for easier digestion.

18px / DM Sans Regular 400

Body

100% organic, no excipients, binders, or flow agents.

16px / DM Sans Regular 400

Caption

Shelf stability: 2 years. Store in a cool, dark environment.

14px / DM Sans Regular 400

Buttons & UI

Magenta is the only CTA colour. All buttons are full pill shape (border-radius 100px). Buttons appear on both dark Forest Green and light Near White surfaces.

Dark Surface

Add to Cart Learn More

Light Surface

Add to Cart Learn More

Element

Radius

Token

Buttons

100px

--r-pill

Cards

20px

--r-lg

Callout blocks

10px

--r-card

Input fields

14px

--r-md

Badges / Chips

100px

--r-pill

Section labels

100px

--r-pill

Homepage Section Layout

The confirmed homepage sequence. Forest Green anchors the navigation. Blush Light opens the hero. A Sage botanical panel provides the plant-forward green moment mid-page. Blush Rose carries warmth through Best Sellers and the subscribe strip. Deep Green closes the footer.

Navigation Forest Green · Near White text

Hero Section Blush Light · Magenta CTA

Wellness Text / Intro Warm Cream

One Integrated Metabolic System Near White · Blush Light cards + Warm Taupe border

Shop by Collection Dark photography — no background colour

Formulated by Physicians / Trusted By Warm Cream

Best Sellers Blush Rose · Magenta CTA

Botanical Panel Sage · Near White text · Magenta CTA

From Our Customers Warm Cream

Testimonials Gold Wash · Gold Light divider rule

Find What You're Looking For Warm Cream

For Cafes, Hotels + Food Service Warm Sand

Subscribe Strip Blush Rose · Magenta CTA

Footer Deep Green · Cream text · Gold accents

Section

Background

Text

Notes

Navigation

#2D4A3E

#FDFAF6

Forest Green

Hero Section

#FBE8EA

#1A1816

Blush Light · Magenta CTA

Wellness Intro

#F5F0E8

#1A1816

Warm Cream

One Integrated System

#FDFAF6

#1A1816

Near White · Blush Light cards

Shop by Collection

#1A1816

#FFFFFF

Dark photography

Formulated by Physicians

#F5F0E8

#1A1816

Warm Cream

Best Sellers

#F6D7D9

#1A1816

Blush Rose · Magenta CTA

Botanical Panel

#7A9E7E

#FDFAF6

Sage · Magenta CTA

From Our Customers

#F5F0E8

#1A1816

Warm Cream

Testimonials

#F2E8D0

#1A1816

Gold Wash · Gold Light rule

Find What You're Looking For

#F5F0E8

#1A1816

Warm Cream

Cafes, Hotels + Food Service

#EDE6D6

#1A1816

Warm Sand

Subscribe Strip

#F6D7D9

#1A1816

Blush Rose · Magenta CTA

Footer

#1B3329

#F5F0E8

Deep Green · Gold accents

Product Page (PDP) Layout

The product page uses a white-dominant structure. Colour appears once in Benefits (Blush Light) and once in Feel Good Guarantee (Blush Rose). Forest Green anchors the Customer Reviews section as a strong dark moment.

Navigation Forest Green

Product Hero Warm Cream · Purchase panel: Near White card + Warm Taupe border

Product Identity Cards White section · Near White cards (#FDFAF6) · Warm Taupe border

Benefits Blush Light · Single colour moment in metafield block

Why It Works Near White · Gold Light divider rule

Taste and Texture Warm Cream · White cards + Warm Taupe border

Product Details Near White · Warm Stone low-opacity dividers

Technical Profile Warm Cream · Warm Stone low-opacity dividers

Feel Good Guarantee Blush Rose · Trust section