Design System
Nourished Natural Health
A comprehensive guide to our brand's visual language, typography, and color palette
Page chrome only — style-guide__hero-* uses custom sizes in _style-guide.scss, not the fluid h1 scale.
Brand Identity
Our logo variations and primary brand marks
nourished
natural health
nourished
NATURAL HEALTH
Typography
Our carefully selected typefaces create a warm, trustworthy, and modern voice
Aa
Fraunces
Display & Headings
Bold 700 (h1–h3) · Semibold 600 (.stat-display mobile)
Aa
DM Sans
Body & Interface
Regular & Medium
Aa
DM Mono
Captions & Code
Regular 400 · .subtitle uppercase
Click to copy — swatches, hex values, SCSS tokens, utility classes, and table codes copy to your clipboard.
Section SCSS rule: Use h1–h6 or typography utility classes in Liquid. Section SCSS is layout, spacing, and color only — do not redeclare font-size, font-family, or font-weight on those elements.
Source of truth: base/_typography.scss and utils/_variables.scss. Bare <p> uses fluid $type-body; .body-default is fixed 16px. h1–h6 all use font-weight-bold (700). h1–h3 are Fraunces; h4–h6 are DM Sans. Utility .text-muted → $gray-600 (#525252); SCSS token $text-muted is #655E5C.
Heading 1 · h1
$type-h1 · 26px → 42px fluid · Fraunces · bold 700
Almost before we knew it, we had left the ground
Heading 2 · h2
$type-h2 · 22px → 34px fluid · Fraunces · bold 700
Almost before we knew it, we had left the ground
Heading 3 · h3
$type-h3 · 20px → 27px fluid · Fraunces · bold 700
Almost before we knew it, we had left the ground
Heading 4 · h4
$type-h4 · 17px → 20px fluid · DM Sans · bold 700
Almost before we knew it, we had left the ground
Heading 5 · h5
$type-h5 · 16px → 18px fluid · DM Sans · bold 700
Almost before we knew it, we had left the ground
Heading 6 · h6
$type-h6 · 14px → 16px fluid · DM Sans · bold 700
Almost before we knew it, we had left the ground
Body utility classes
Pair with BEM layout classes in Liquid — defined in base/_typography.scss
Lead body copy for intros and emphasis.
Same styles as .body-lead.
Explicit 16px body — not the same as bare p.
Legacy — prefer .body-default for new markup.
Small body, labels, supporting copy.
Captions, meta, fine print.
Micro labels, compact pills, save tablets.
Responsive body — sm on mobile, base on tablet+.
Package subtitles, founder credentials.
Section eyebrows and mono labels.
Text color & weight utilities
Combine with body classes — e.g. body-small text-muted
Utility class — buy-box secondary copy, ongoing rows.
Lighter muted — PDP supporting copy.
Brand pink — savings, icons, links.
Accent emphasis — promos, highlights.
SUBSCRIBE & SAVE:
$55.00
Banner text — pair with $bg-dark in SCSS
Commerce typography
PDP pricing roles — pair with BEM layout in Liquid
$41.25
$41.25
$55.00
Best Value
SAVE 40%
SAVE 15%
Best Seller
$41.25/mo
87%
87%
101
Blog card roles
Used in snippets/article-card.liquid
Article title
Short excerpt from the article body.
Additional utilities
Also defined in base/_typography.scss
Hero stat
Hero stat
Hero stat
™
Legacy bootstrap utility
Centered copy
Color Palette
A vibrant, accessible color system designed for clarity and emotional resonance
Two layers: This tab shows the $primary-* / $accent-* scale steps from _variables.scss. The Semantic tab shows runtime tokens like $primary-main (#E51550) and $primary / $primary-color (alias of $primary-600 #E81050) — both exist in the theme.
Primary
Core brand colors for primary actions, links, and brand identity
100
#FDE8EF
200
#FBCFDD
300
#F7A0BB
400
#F3719A
500
#ED3770
600
#E81050
700
#BC0E40
800
#A40D38
900
#8B0F32
950
#6F293C
Secondary
Complementary colors for alternative actions
50
#FEF6F6
100
#FDF1E8
200
#FBDDCD
300
#F8B8A2
400
#F37C44
500
#CD6533
600
#C34828
700
#A63921
800
#903728
900
#4E1B0E
950
#2B0E08
Accent
Highlight colors for drawing attention
50
#FCF3F8
100
#FBE5F3
200
#F8CEE7
300
#F5A4D5
400
#EE6DB9
500
#E14694
600
#CD2B78
700
#AF1B62
800
#901A53
900
#761948
950
#490627
Neutral
Foundation colors for text and UI structure
50
#FAFAFA
100
#E6E6E6
200
#A3A3A3
400
#737373
600
#525252
700
#424242
800
#262626
900
#171717
System States
Primitive feedback tokens — $success, $warning, $danger. Legacy utilities map to Semantic feedback tokens ($success-color → $feedback-success).
Success ($success)
Primitive system state — not the same as $feedback-success (#037A5C)
Warning ($warning)
Primitive system state — $warning-color aliases $feedback-warning
Danger ($danger)
Primitive system state — $danger-color aliases $feedback-danger
Values below are exact utils/_variables.scss tokens used in section SCSS and utilities. Scale step names (e.g. primary-600) may differ from the hex on the Colors tab.
Base
black
prim/neutral-darkest
Primary text colour for headings or high-priority content.
white
#FFFFFF
Neutral colour for light backgrounds, text, and default states.
primary-main
$primary-main
Semantic brand pink — .text-primary-brand, buy-box savings, stars ($color-stars).
primary-dark
$primary-dark → $primary-700
Hover / pressed states. Final SCSS value after legacy alias.
primary-light
$primary-light
Light pink wash — save tablets, soft highlights.
primary
$primary / $primary-color → $primary-600
Legacy alias — .label-badge background, .text-primary utility, older components.
accent-main
$accent-main
Accent emphasis — .text-accent, promos.
accent-dark
$accent-dark
Deep accent for high-emphasis UI.
accent-light
$accent-light
Light accent backgrounds — not the same hex as $accent-200 (#F8CEE7).
secondary-main
$secondary-main
Secondary actions — not the same hex as $secondary-300 (#F8B8A2).
secondary-dark
$secondary-dark
Deep secondary tone.
secondary-light
$secondary-light
Soft secondary backgrounds.
Background Color
bg-primary
sem/Base/white
Base background colour for general use. This is the primary background colour for the full site, including the main canvas or body area.
bg-secondary
prim/Secondary/secondary-50
The alternating background colour, used to break up sections or rows for better readability,
bg-tertiary
prim/Secondary/secondary-100
A muted variation of bg-secondary, designed for low-emphasis areas such as footers, summaries, or low-priority content.
bg-accent
prim/Accent/accent-100
Used sparingly to highlight promotional sections, limited-time offers, or important calls-to-action. Reserve this for attention-grabbing sections that demand focus without overwhelming the user.
bg-alternate
prim/Secondary/secondary-200
A subtle emphasis colour, ideal for featured elements or sections requiring soft attention without pulling focus. Good for important but non-transactional sections.
bg-dark
$bg-dark
Dark section backgrounds (buy-box banners) — custom token, not $accent-950.
bg-warm-ivory
PDP hero background
Warm ivory — universal PDP / protocol hero backgrounds
bg-modular-blush
Modular band wash
Soft lilac — primary modular section wash
bg-modular-lilac
Modular alt band
Soft pink — alternate modular band (also $primary-light)
bg-modular-rose
Modular rose band
Soft rose — clinical authority cards
bg-package-active
Active selection
Active package / card selection background
Specific Uses
border
sem/Base/neutral-lighter
Used for borders around containers, cards, or inputs to visually separate elements while maintaining a clean aesthetic.
color-stars
sem/Base/primary-main
Used specifically for star ratings, ensuring visibility and alignment with brand colors. Used in product reviews or feedback components.
primary-link
sem/Base/primary-main
Primary link and button color
selected-stroke
sem/Base/neutral-dark
Used for strokes or outlines on selected items, such as color swatches or selected filters
Icons
icon-primary
$icon-primary
Default icon color on light backgrounds.
icon-dark
$icon-dark
High-contrast icons.
icon-light
$icon-light
Subtle icon emphasis — not $primary-300 (#F7A0BB).
icon-invert
$icon-invert
Icons on dark backgrounds.
Feedback
feedback-success
$feedback-success / $success-color
UI feedback — .text-success utility uses this via $success-color alias.
feedback-warning
$feedback-warning / $warning-color
Warnings and cautions in product UI.
feedback-danger
$feedback-danger / $danger-color
Errors and destructive states.
Text
text-main
prim/neutral-darkest
Primary text colour for most content, including product descriptions, headings, and general text across the site.
text-mid
prim/Neutral/neutral-dark
Secondary text colour for subheadings, labels, or secondary information
text-muted
prim/Neutral/neutral-mid-dark
SCSS token for section styles. Note: utility .text-muted uses $gray-600 (#525252) instead.
text-muted-subtle
$neutral-400
Utility .text-muted-subtle — lighter PDP supporting copy.
text-light-gray
$text-light-gray
SCSS variable only — rgba($text-main, 0.6). No utility class.
text-white
sem/Base/white
Used for text on dark backgrounds, such as in footers, buttons, or dark-themed hero sections.
Breakpoints
Mobile-first only — use @include media-breakpoint-up(tablet|desktop)
| Name | Min width | SCSS variable |
|---|---|---|
| mobile | 0px (base) | $breakpoints.mobile |
| tablet | 768px | $breakpoint-tablet |
| desktop | 1024px | $breakpoint-desktop |
Font families
| Token | Stack | Use |
|---|---|---|
$font-fraunces | Fraunces, Georgia, serif | h1–h3, .card-title, .stat-display |
$font-dm-sans | DM Sans, system-ui… | h4–h6, body utilities, .price-display |
$font-dm-mono | DM Mono, monospace | .subtitle, code labels |
Fluid type scale (SCSS)
Defined in utils/_variables.scss · exposed as CSS vars on :root
| Token | CSS variable | Range |
|---|---|---|
$type-h1 | --nnh-type-h1 | 26px → 42px |
$type-h2 | --nnh-type-h2 | 22px → 34px |
$type-h3 | --nnh-type-h3 | 20px → 27px |
$type-h4 | --nnh-type-h4 | 17px → 20px |
$type-h5 | --nnh-type-h5 | 16px → 18px |
$type-h6 | --nnh-type-h6 | 14px → 16px |
$type-body | --nnh-type-body | 16px → 17px |
$type-lead | --nnh-type-lead | 18px → 24px |
$type-display-1 | — | 36px → 80px · .display-1 |
$type-display-2 | — | 32px → 72px · .display-2 |
$type-display-3 | — | 28px → 64px · .display-3 |
$type-display-4 | — | 24px → 56px · .display-4 |
Font weights
| Token | Value | Utility class |
|---|---|---|
$font-weight-light | 300 | .font-weight-light |
$font-weight-normal | 400 | .font-weight-normal |
$font-weight-medium | 500 | .font-weight-medium |
$font-weight-semibold | 600 | .font-weight-semibold |
$font-weight-bold | 700 | .font-weight-bold |
h1–h6 | 700 | Always bold — not configurable per level |
.display-1–.display-4 | 300 | Default light — override in Liquid when needed |
.stat-display | 600 → 700 | Italic semibold mobile → normal bold desktop |
Layout tokens (PDP)
| Token | Value | Use |
|---|---|---|
$max-width-pdp | 90rem (1440px) | PDP content cap |
$pdp-hero-row-max | 68rem | Two-column hero row |
$nnh-pdp-section-padding-mobile | 20px 10px | Modular section shell |
$nnh-pdp-section-padding-desktop | 4.5rem | Modular section shell |
PDP & breakpoint mixins
Subset from utils/_mixins.scss — not an exhaustive list
media-breakpoint-up($name)— min-width queries (tablet, desktop)media-breakpoint-down($name)— max-width queriesnnh-pdp-section-shell-padding— modular section outer paddingnnh-pdp-section-inner($content-max)— centered content max-widthnnh-pdp-pdp-inner— hero / PDP inner widthpdp-two-column-grid— gallery + buy box grid