Protocol Raw Web Design System v1.0¶

Purpose¶

This document defines the design patterns, components, and interactions that make Protocol Raw web pages feel exceptional. It serves as the implementation guide for designers and developers (human or LLM) building new pages or components.

For brand positioning, voice, and strategic identity, see the Visual Identity Guide. This document assumes familiarity with those principles and focuses on tactical execution.

1. Design Principles¶

1.1 Systematic, Not Emotional¶

Our design reflects our brand: evidence-based, precise, and confident without being loud. We communicate premium through restraint, not decoration.

Do: - Use whitespace generously - Let typography do the work - Create clear visual hierarchy - Use subtle micro-interactions

Don't: - Add decorative elements without purpose - Use gradients, glows, or heavy shadows - Over-animate or distract - Compete for attention across sections

1.2 Signature Moments¶

Every page should have one "signature moment" - a single visual element that creates impact and memorability. This is the thing a visitor remembers after leaving.

Examples: | Page | Signature Moment | |------|------------------| | Ingredients | "None." pop-in with contrast cards | | Nutrition | Vertical FEDIAF tier stack with glow | | About | Dark manifesto card ("Raw feeding shouldn't require faith. It should require proof.") |

Principles for signature moments: - One per page maximum - Should communicate a core brand truth - Earns visual drama through meaning, not decoration - Often involves contrast (us vs them, before vs after, question vs answer)

1.3 Premium Through Details¶

Premium feel comes from consistent, considered details: - Consistent letter-spacing on labels - Smooth, unified transition timing - Proper hover states on every interactive element - Generous padding and whitespace - Typography that breathes

2. Foundation¶

2.1 Color System¶

:root {
  /* Primary */
  --col-espresso: #2B2523;        /* Primary text, dark backgrounds */
  --col-forest-green: #2D5144;    /* Trust, verification, positive states */
  --col-burnt-sienna: #B85C3A;    /* Accent, CTAs, labels */
  --col-burnt-sienna-dark: #9F4D2F; /* CTA hover state */

  /* Neutrals */
  --col-cream: #F9F7F4;           /* Primary background */
  --col-warm-linen: #EBE8E3;      /* Secondary background */
  --col-stone: #C4BCB0;           /* Tertiary background, borders */
  --col-warm-gray: #918A85;       /* Muted text, disabled states */
  --col-taupe: #6B6360;           /* Secondary text */
}

Background alternation pattern:

Hero:     cream
Section:  warm-linen
Section:  stone (with dot texture)
Section:  cream
CTA:      stone (with dot texture)

2.2 Typography¶

Font families: - Headings: 'Montserrat', sans-serif - weight 600-700 - Body: 'Inter', sans-serif - weight 400-600

Type scale:

Element	Desktop	Mobile (â‰¤600px)	Weight	Letter-spacing
Hero title	80px	44px	700	-0.03em
Section title	40px	28px	700	-0.02em
Card title	18-24px	18-22px	700	0
Body text	18px	16px	400	0
Section label	12px	12px	600	0.15em
Badge/tag text	11-12px	10-11px	600	0.08-0.15em

Line heights: - Headings: 1.0-1.1 - Body text: 1.8-1.9 - Labels: 1.0

Critical: All section labels use letter-spacing: 0.15em and text-transform: uppercase.

2.3 Spacing System¶

Section padding: - Desktop: 120px vertical - Tablet (â‰¤900px): 80px vertical - Mobile (â‰¤600px): 80px vertical (or 60px for hero)

Page width: - Max width: 1400px - Horizontal padding: 64px â†’ 40px â†’ 24px (desktop â†’ tablet â†’ mobile)

Content max-widths: - Prose content: 720px - Card grids: 800-1100px - Hero content: 900-1000px

Component spacing: - Section label to title: 16-20px - Title to body: 32-40px - Between paragraphs: 24px - Card padding: 32-48px

2.4 Border Radius¶

Element	Radius
Large cards (story, solve, list)	20px
Standard cards (learn, proof)	16px
Icon containers	12-14px
Buttons	10px
Circular icons	50%

2.5 Shadows¶

/* Subtle - default cards */
box-shadow: 0 4px 12px rgba(43, 37, 35, 0.08);

/* Medium - elevated cards */
box-shadow: 0 8px 32px rgba(43, 37, 35, 0.08);

/* Strong - signature cards, hovers */
box-shadow: 0 16px 64px rgba(43, 37, 35, 0.12);

/* CTA buttons */
box-shadow: 0 4px 16px rgba(184, 92, 58, 0.2);

/* Green emphasis (for "our" cards) */
box-shadow: 0 12px 48px rgba(45, 81, 68, 0.15);

2.6 Dot Texture Overlay¶

Used on hero sections, stone backgrounds, and dark cards for subtle depth:

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 1px 1px, rgba(43, 37, 35, 0.03) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

/* For dark backgrounds, use white dots */
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
background-size: 24px 24px;

3. Components¶

3.1 Section Labels¶

Every section should have a label above the title. This creates rhythm and aids scanning.

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--col-burnt-sienna);  /* or --col-taupe on dark backgrounds */
  margin-bottom: 16-20px;
}

Label naming conventions: - Use noun phrases: "The Challenge", "The Solution", "Verification" - Or thematic: "Philosophy", "Our Story", "Our Principles" - Keep to 1-3 words

3.2 Cards¶

Learn/Explore Cards¶

Used for navigation to other pages. Features green bar animation and icon inversion.

.learn-card {
  background: var(--col-cream);
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Green bar on left */
.learn-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--col-forest-green);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(43, 37, 35, 0.1);
  border-color: var(--col-forest-green);
}

.learn-card:hover::before {
  transform: scaleY(1);
}

Structure: 1. Icon (48x48px, rounded square, inverts on hover) 2. Title (Montserrat 700, 18px) 3. Description (Inter 400, 14px, taupe) 4. "Explore â†’" link (Inter 600, burnt sienna, arrow animates)

Contrast Cards¶

Used for us-vs-them comparisons. "Ours" card is pre-elevated.

/* "Theirs" card - subdued */
.contrast-card--theirs {
  border-top: 4px solid var(--col-warm-gray);
  opacity: 0.85;
}

.contrast-card--theirs:hover {
  opacity: 1;
}

/* "Ours" card - elevated */
.contrast-card--ours {
  border-top: 4px solid var(--col-forest-green);
  border-color: var(--col-forest-green);
  box-shadow: 0 12px 48px rgba(45, 81, 68, 0.15);
}

Story/Content Cards¶

Large cards for narrative content. Green border appears on hover.

.story-card {
  background: var(--col-cream);
  border-radius: 20px;
  padding: 56px;
  box-shadow: 0 16px 64px rgba(43, 37, 35, 0.12);
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.story-card:hover {
  border-color: var(--col-forest-green);
}

3.3 Buttons¶

Primary CTA¶

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: white;
  background: var(--col-burnt-sienna);
  border: none;
  border-radius: 10px;
  padding: 20px 40px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(184, 92, 58, 0.2);
}

.btn-primary:hover {
  background: var(--col-burnt-sienna-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184, 92, 58, 0.3);
}

.btn-primary svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

Mobile: Full width with justify-content: center.

3.4 Icon Containers¶

Rounded Square (for cards)¶

.icon-container {
  width: 48-56px;
  height: 48-56px;
  background: rgba(45, 81, 68, 0.1);
  border-radius: 12-14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.card:hover .icon-container {
  background: var(--col-forest-green);
}

.icon-container svg {
  width: 24-26px;
  height: 24-26px;
  stroke: var(--col-forest-green);
  transition: stroke 0.3s ease;
}

.card:hover .icon-container svg {
  stroke: white;
}

Circular (for callouts, closings)¶

.icon-circle {
  width: 40-48px;
  height: 40-48px;
  background: rgba(45, 81, 68, 0.1);  /* or solid --col-forest-green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

3.5 Pullquotes/Callouts¶

Pullquote (in content sections)¶

.pullquote {
  margin: 56px 0;
  padding: 40px;
  background: var(--col-cream);
  border-radius: 16px;
  border-left: 4px solid var(--col-forest-green);
  box-shadow: 0 4px 24px rgba(43, 37, 35, 0.06);
}

.pullquote p {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--col-espresso);
  margin: 0;
}

Callout (with icon)¶

.callout {
  padding: 32px;
  background: rgba(45, 81, 68, 0.06);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

3.6 Manifesto Block¶

The signature dark block for brand statements.

.manifesto {
  padding: 64px 48px;
  background: var(--col-espresso);
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* White dot texture */
.manifesto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.manifesto__text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: white;
}

.manifesto__emphasis {
  color: var(--col-burnt-sienna);
}

3.7 Result Line / Statement¶

Mid-content emphasis for key points.

.result-line {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--col-forest-green);
  margin: 40px 0;
  padding: 28px 0;
  border-top: 1px solid var(--col-stone);
  border-bottom: 1px solid var(--col-stone);
}

3.8 Badges/Tags¶

Product Badges (vertical with icon)¶

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.badge__icon {
  width: 44px;
  height: 44px;
  background: rgba(45, 81, 68, 0.1);
  border-radius: 12px;
  /* icon inversion on parent hover */
}

.badge__text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--col-forest-green);
}

Life Stage Tags (pills)¶

.tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(45, 81, 68, 0.08);
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--col-forest-green);
}

4. Interactions¶

4.1 Transition Standard¶

All transitions use 0.3s ease unless otherwise specified:

transition: all 0.3s ease;

For arrow/gap animations, use 0.2s ease:

transition: gap 0.2s ease;
transition: transform 0.2s ease;

4.2 Hover States¶

Card Lift¶

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(43, 37, 35, 0.1);
  border-color: var(--col-forest-green);
}

Icon Inversion¶

.card:hover .icon-container {
  background: var(--col-forest-green);
}

.card:hover .icon-container svg {
  stroke: white;
}

Green Bar Scale¶

.card::before {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.card:hover::before {
  transform: scaleY(1);
}

Arrow Gap Animation¶

.link {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s ease;
}

.link:hover {
  gap: 12px;
}

Button Arrow¶

.btn:hover svg {
  transform: translateX(4px);
}

4.3 Animations¶

Pop-In (for signature moments)¶

.pop-in {
  opacity: 0;
  transform: scale(0.9);
  animation: popIn 0.5s ease forwards 0.6s;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

4.4 Focus States¶

For accessibility, ensure visible focus states:

.card:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--col-forest-green);
  outline-offset: 2px;
}

5. Page Structure¶

5.1 Section Rhythm¶

Pages follow a consistent vertical rhythm:

HERO (cream + dot texture)
  - Label
  - Title (80px)
  - Subtitle
  - [Optional: product card, key visual]

SECTION A (warm-linen)
  - Label
  - Title (40px)
  - Content
  - [Optional: cards, grids]

SECTION B (stone + dot texture)
  - Label
  - Title
  - Content
  - [Signature moment often here]

SECTION C (cream)
  - Label
  - Title
  - Content

CTA (stone + dot texture)
  - Title
  - Text
  - Button

5.2 Content Centering¶

All prose content centers in a 720px container:

.content {
  max-width: 720px;
  margin: 0 auto;
}

Card grids use wider containers (800-1100px) but remain centered.

5.3 Section Label Placement¶

Labels appear at the start of every major section:

<section>
  <p class="section-label">Section Name</p>
  <h2>Section Title</h2>
  ...
</section>

Exception: Hero sections may have label above title or omit if the page title serves as context.

6. Signature Moments¶

6.1 Philosophy¶

A signature moment is not decorationâ€”it's a visual manifestation of a core brand truth. It should:

Communicate meaning - Not just look good, but say something
Create contrast - Often through juxtaposition
Be memorable - The one thing someone remembers
Earn its drama - Restraint everywhere else justifies impact here

6.2 Patterns That Work¶

The Contrast Reveal¶

Side-by-side comparison where "ours" dramatically differs: - Ingredients: Long list vs "None." - Works because it's factual, not boastful

The Hierarchy Statement¶

Visual positioning that implies superiority: - Nutrition: Premium tier literally sits above standard tier - Works because position = meaning

The Dark Declaration¶

Inverting to dark background for a brand manifesto: - About: "Raw feeding shouldn't require faith. It should require proof." - Works because contrast demands attention

6.3 Creating New Signature Moments¶

When designing a new page, ask:

What is the single most important truth this page communicates?
How can that truth be visualized, not just stated?
Does this earn visual drama, or is it decoration?
Will someone remember this after leaving?

Test: If you removed the signature moment, would the page feel generic? If yes, it's working.

7. Mobile Responsive¶

7.1 Breakpoints¶

/* Tablet */
@media (max-width: 900px) { ... }

/* Mobile */
@media (max-width: 600px) { ... }

7.2 What Scales¶

Element	Desktop	Tablet	Mobile
Hero title	80px	56px	44px
Section title	40px	32px	28px
Body text	18px	18px	16px
Section padding	120px	80px	80px
Page padding	64px	40px	24px
Card padding	48px	40px	24-32px

7.3 What Restructures¶

Grids â†’ Single Column¶

@media (max-width: 900px) {
  .grid-2-col {
    grid-template-columns: 1fr;
  }
}

At 900px: - 4-column grids â†’ 2 columns - 2-column grids â†’ 1 column

At 600px: - All grids â†’ 1 column

Badges â†’ Horizontal¶

Product badges switch from vertical stacks to horizontal rows on mobile:

@media (max-width: 600px) {
  .badge {
    flex-direction: row;
    gap: 12px;
  }
}

Buttons â†’ Full Width¶

@media (max-width: 600px) {
  .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

Callouts â†’ Vertical + Centered¶

@media (max-width: 900px) {
  .callout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

7.4 What Doesn't Change¶

Section labels (12px, 0.15em spacing)
Color system
Border radius
Transition timing
Hover behaviors (though less relevant on touch)

8. Checklist for New Pages¶

Before considering a page complete, verify:

Foundation¶

[ ] All colors use CSS variables
[ ] Typography matches scale (check letter-spacing on labels)
[ ] Dot texture on appropriate sections
[ ] Proper spacing and max-widths

Components¶

[ ] Every section has a label
[ ] Cards have complete hover states (lift, border, icon inversion if applicable)
[ ] Buttons have hover + arrow animation
[ ] Links have gap animation

Interactions¶

[ ] All transitions use 0.3s ease (0.2s for arrows)
[ ] No jarring or inconsistent animations
[ ] Focus states are visible

Structure¶

[ ] Background colors alternate properly
[ ] Content is centered appropriately
[ ] Visual hierarchy is clear

Signature Moment¶

[ ] Page has one (and only one) signature moment
[ ] It communicates meaning, not just decoration
[ ] Rest of page shows restraint

Responsive¶

[ ] Tested at 900px and 600px breakpoints
[ ] Grids collapse appropriately
[ ] Text remains readable
[ ] Buttons go full-width on mobile
[ ] Touch targets are adequate (min 44px)

9. Code Snippets¶

9.1 Section Template¶

<section class="section-name">
  <div class="page-width">
    <div class="section-content">
      <p class="section-label">Label</p>
      <h2 class="section-title">Title</h2>
      <div class="section-text">
        <p>Content...</p>
      </div>
    </div>
  </div>
</section>

9.2 Learn Card Template¶

<a href="/pages/..." class="learn-card">
  <div class="learn-card__icon">
    <svg>...</svg>
  </div>
  <h3 class="learn-card__title">Title</h3>
  <p class="learn-card__desc">Description</p>
  <span class="learn-card__arrow">
    Explore
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"></line>
      <polyline points="12 5 19 12 12 19"></polyline>
    </svg>
  </span>
</a>

9.3 CTA Section Template¶

<section class="cta-section">
  <div class="page-width">
    <div class="cta-content">
      <h2 class="cta-title">Ready to start?</h2>
      <p class="cta-text">Calculate your dog's precise daily requirement.</p>
      <a href="/pages/calculator" class="btn-primary">
        Calculate Your Dog's Plan
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="5" y1="12" x2="19" y2="12"></line>
          <polyline points="12 5 19 12 12 19"></polyline>
        </svg>
      </a>
    </div>
  </div>
</section>

Version History¶

Version	Date	Changes
1.0	November 2024	Initial release covering Ingredients, Nutrition, About pages

This is a living document. Update as new patterns emerge or existing patterns evolve.