# MementoMKT.com - Style Pattern Reference

> Extracted: 2026-01-23
> Source: https://mementomkt.com

---

## Brand Identity

**Type:** B2B Marketing Agency
**Feel:** Professional, Modern, Eco-conscious, Clean
**Industry:** Marketing / Sustainability

---

## Color Palette

### Primary Colors

| Name | HEX | RGB | Usage |
|------|-----|-----|-------|
| **Primary (Deep Forest)** | `#003626` | rgb(0, 54, 38) | Card backgrounds, dark sections, primary brand color |
| **Secondary (Mist)** | `#F2F2F2` | rgb(242, 242, 242) | Card backgrounds, light sections, footer |
| **Text** | `#212121` | rgb(33, 33, 33) | Body text, headings on light backgrounds |
| **Accent (Lime)** | `#CAD200` | rgb(202, 210, 0) | Dividers, highlights, decorative elements |

### Extended Palette

| Name | HEX | RGB | Usage |
|------|-----|-----|-------|
| **CTA Green** | `#93C022` | rgb(147, 192, 34) | Buttons, links, action elements |
| **Cream** | `#F4EDDB` | rgb(244, 237, 219) | Alternative background |
| **Nav Blue Dark** | `#1C244B` | rgb(28, 36, 75) | Navigation text |
| **Nav Blue Hover** | `#324A6D` | rgb(50, 74, 109) | Navigation hover state |
| **Dropdown BG** | `#F3F5F8` | rgb(243, 245, 248) | Dropdown menus |
| **Dropdown Hover** | `#F9FAFD` | rgb(249, 250, 253) | Dropdown item hover |
| **White** | `#FFFFFF` | rgb(255, 255, 255) | Button text, backgrounds |

### CSS Variables (Elementor Kit)

```css
:root {
  --e-global-color-primary: #003626;
  --e-global-color-secondary: #F2F2F2;
  --e-global-color-text: #212121;
  --e-global-color-accent: #CAD200;
  --e-global-color-cta: #93C022;
  --e-global-color-cream: #F4EDDB;
}
```

---

## Typography

### Font Families

| Font | Weight Range | Usage |
|------|--------------|-------|
| **Lexend Deca** | 100-900 | Headlines (H1), large display text |
| **Lexend** | 100-900 | Body text, buttons, secondary headings |
| **Poppins** | 400 | Navigation menu |

### Type Scale - Desktop (>1024px)

| Element | Font | Size | Weight | Line Height |
|---------|------|------|--------|-------------|
| **H1 (Primary)** | Lexend Deca | 62px | 500 | 1.2 |
| **H2 (Section Title)** | Lexend | 46px | 500 | 1.2 |
| **H3 (Card Title)** | Lexend | 24px | 500 | 1.3 |
| **Subtitle** | Lexend | 22px | 500 | 1.4 |
| **Body (Text)** | Lexend | 18px | 300 | 1.6 |
| **Body (Secondary)** | Lexend | 18px | 300 | 1.6 |
| **Accent/Button** | Lexend | 18px | 600 | 1.4 |
| **Navigation** | Poppins | 16px | 400 | 1.0 |

### Type Scale - Tablet (768px - 1024px)

| Element | Font | Size | Weight |
|---------|------|------|--------|
| **H1 (Primary)** | Lexend Deca | 35px | 500 |
| **H2 (Section Title)** | Lexend | 24px | 500 |
| **H3 (Card Title)** | Lexend | 16px | 500 |
| **Subtitle** | Lexend | 18px | 500 |
| **Body (Text)** | Lexend | 14px | 300 |
| **Body (Secondary)** | Lexend | 16px | 300 |
| **Accent/Button** | Lexend | 16px | 600 |
| **Navigation** | Poppins | 14px | 400 |

### Type Scale - Mobile (<768px)

| Element | Font | Size | Weight |
|---------|------|------|--------|
| **H1 (Primary)** | Lexend Deca | 30px | 500 |
| **H2 (Section Title)** | Lexend | 24px | 500 |
| **H3 (Card Title)** | Lexend | 20px | 500 |
| **Subtitle** | Lexend | 18px | 500 |
| **Body (Text)** | Lexend | 16px | 300 |
| **Body (Secondary)** | Lexend | 16px | 300 |
| **Accent/Button** | Lexend | 16px | 600 |

### CSS Variables (Typography)

```css
:root {
  /* Primary - Headlines */
  --e-global-typography-primary-font-family: "Lexend Deca";
  --e-global-typography-primary-font-size: 62px;
  --e-global-typography-primary-font-weight: 500;

  /* Secondary - Body emphasis */
  --e-global-typography-secondary-font-family: "Lexend";
  --e-global-typography-secondary-font-size: 18px;
  --e-global-typography-secondary-font-weight: 300;

  /* Text - Body copy */
  --e-global-typography-text-font-family: "Lexend";
  --e-global-typography-text-font-size: 18px;
  --e-global-typography-text-font-weight: 300;

  /* Accent - Buttons, CTAs */
  --e-global-typography-accent-font-family: "Lexend";
  --e-global-typography-accent-font-size: 18px;
  --e-global-typography-accent-font-weight: 600;

  /* Section titles */
  --e-global-typography-section-title-font-family: "Lexend";
  --e-global-typography-section-title-font-size: 46px;
  --e-global-typography-section-title-font-weight: 500;

  /* Card titles */
  --e-global-typography-card-title-font-family: "Lexend";
  --e-global-typography-card-title-font-size: 24px;
  --e-global-typography-card-title-font-weight: 500;
}
```

---

## Spacing System

### Container Widths

| Breakpoint | Max Width |
|------------|-----------|
| Desktop (>1200px) | 1140px |
| Desktop (>992px) | 800px |
| Tablet (>768px) | 600px |
| Mobile (>576px) | 500px |
| XS (<575px) | 100% with 10px padding |

### Section Padding

| Type | Desktop | Tablet | Mobile |
|------|---------|--------|--------|
| **Standard Section** | 8% top/bottom | 4% top/bottom | 22% top, 10% bottom |
| **Hero Section** | 50vh min-height | 40vh min-height | 60vh min-height |
| **Compact Section** | 5% top, 3% bottom | 4% all | 6% all |
| **Container Padding** | 0% horizontal | 4% horizontal | 4% horizontal |

### Widget Spacing

```css
:root {
  --widgets-spacing: 20px;
  --widgets-spacing-row: 20px;
  --widgets-spacing-column: 20px;
}
```

### Gap Scale

| Size | Value |
|------|-------|
| XS | 0px |
| SM | 10px |
| MD | 20px |
| LG | 30px |
| XL | 50px |

---

## Components

### Buttons

#### Primary Button (CTA)

```css
.btn-primary {
  background-color: #93C022;
  color: #FFFFFF;
  font-family: "Lexend", sans-serif;
  font-size: 18px;
  font-weight: 600;
  padding: 20px 50px;
  border: 0;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  transition: all 0.3s;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #000000;
}

/* Tablet */
@media (max-width: 1024px) {
  .btn-primary {
    padding: 20px 30px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .btn-primary {
    padding: 15px 30px;
  }
}
```

#### Button Specifications

| Property | Value |
|----------|-------|
| Background | `#93C022` |
| Text Color | `#FFFFFF` |
| Border Radius | 50px (pill) |
| Padding (Desktop) | 20px 50px |
| Padding (Tablet) | 20px 30px |
| Padding (Mobile) | 15px 30px |
| Icon Gap | 17px |
| Transition | all 0.3s |

### Cards

#### Feature Card (Light)

```css
.card-light {
  background-color: #F2F2F2;
  border-radius: 30px;
  padding: 4%;
  padding-bottom: 8%;
}

@media (max-width: 1024px) {
  .card-light {
    padding: 4% 4% 6% 4%;
  }
}

@media (max-width: 767px) {
  .card-light {
    padding: 10%;
  }
}
```

#### Feature Card (Dark)

```css
.card-dark {
  background-color: #003626;
  border-radius: 30px;
  padding: 4%;
  padding-bottom: 8%;
  color: #F2F2F2;
}
```

#### Card Specifications

| Property | Value |
|----------|-------|
| Border Radius | 30px |
| Padding (Desktop) | 4% top, 8% bottom, 4% sides |
| Padding (Tablet) | 4% top, 6% bottom, 4% sides |
| Padding (Mobile) | 10% all |
| Background Light | `#F2F2F2` |
| Background Dark | `#003626` |

### Navigation

```css
.nav-menu {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  letter-spacing: 0;
}

.nav-item {
  color: #1C244B;
  padding: 5px 0;
}

.nav-item:hover,
.nav-item:focus,
.nav-item.active {
  color: #324A6D;
}

.nav-menu-horizontal {
  gap: 30px;
}

/* Dropdown */
.nav-dropdown {
  background-color: #F3F5F8;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus,
.nav-dropdown-item.active {
  background-color: #F9FAFD;
}

/* Mobile toggle */
.menu-toggle {
  color: #467FF7;
  background-color: transparent;
}

@media (max-width: 1024px) {
  .nav-menu {
    font-size: 14px;
  }
}
```

### Dividers

```css
.divider-accent {
  border-style: solid;
  border-color: #CAD200;
  border-width: 5.6px;
  width: 200px;
  margin: 0 auto 2%;
}

@media (max-width: 1024px) {
  .divider-accent {
    width: 105px;
  }
}

@media (max-width: 767px) {
  .divider-accent {
    margin-bottom: 4%;
  }
}
```

### Icon Lists

```css
.icon-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-list-icon {
  color: #CAD200;
  font-size: 14px;
}

.icon-list-text {
  color: #212121; /* or #F2F2F2 on dark backgrounds */
  transition: color 0.3s;
}
```

### Images

#### Logo Filters (Client Logos - Grayscale)

```css
.client-logo {
  filter: brightness(199%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
  /* Alternative variations */
  /* filter: brightness(121%) contrast(100%) saturate(0%) blur(0px); */
  /* filter: brightness(116%) contrast(100%) saturate(0%); */
}
```

### Forms

```css
.form-field {
  background-color: #FFFFFF;
  border-color: #D1D1D1;
  border-width: 0 0 1px 0;
  color: #212121;
}

.form-submit-btn {
  background-color: #93C022;
  color: #FFFFFF;
}
```

---

## Section Patterns

### Hero Section

```css
.hero-section {
  min-height: 50vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 4%;
}

@media (max-width: 1024px) {
  .hero-section {
    min-height: 40vh;
  }
}

@media (max-width: 767px) {
  .hero-section {
    min-height: 60vh;
    text-align: center;
  }
}
```

### Content Section with Background Image

```css
.content-section-bg {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
}
```

### Services Grid

```css
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  align-items: end;
}

@media (max-width: 767px) {
  .services-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
}
```

### Pricing/Feature Cards Layout

```css
.cards-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

@media (max-width: 1024px) {
  .cards-row {
    flex-direction: row;
  }
}

@media (max-width: 767px) {
  .cards-row {
    flex-direction: column;
  }
}
```

---

## Responsive Breakpoints

| Name | Width | Usage |
|------|-------|-------|
| Desktop Large | >1200px | Full experience |
| Desktop | 992px - 1200px | Standard desktop |
| Tablet | 768px - 1024px | Tablet landscape/portrait |
| Mobile Large | 576px - 767px | Large phones |
| Mobile | <576px | Small phones |

### Media Query Structure

```css
/* Desktop (default) */
.element { }

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

/* Mobile */
@media (max-width: 767px) { }
```

---

## Animation & Transitions

### Standard Transitions

```css
:root {
  --transition-default: all 0.3s;
  --transition-color: color 0.3s;
  --transition-background: background 0.3s;
  --transition-border: border 0.3s;
  --transition-transform: transform 0.4s;
}
```

### Applied Transitions

| Element | Property | Duration |
|---------|----------|----------|
| Buttons | all | 0.3s |
| Icons | color/fill | 0.3s |
| Text hover | color | 0.3s |
| Containers | background, border, box-shadow | 0.3s |
| Transform effects | transform | 0.4s |
| Images | transition-duration | 0.3s |

---

## Footer

```css
.footer {
  background-color: #F2F2F2;
  padding: 5% 0 3% 0;
}

.footer-logo {
  width: 45%;
}

.footer-links {
  color: #93C022;
  font-weight: 600;
}

.footer-links:hover {
  color: #003626;
}

.footer-copyright {
  text-align: center;
  color: #003626;
  padding: 6% 0;
}

@media (max-width: 1024px) {
  .footer {
    padding: 10% 4% 1% 4%;
  }

  .footer-logo {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 12% 0;
  }

  .footer-logo {
    width: 50%;
    text-align: center;
  }

  .footer-copyright {
    padding: 6% 0;
  }
}
```

---

## Quick Reference - CSS Custom Properties

```css
:root {
  /* Colors */
  --color-primary: #003626;
  --color-secondary: #F2F2F2;
  --color-text: #212121;
  --color-accent: #CAD200;
  --color-cta: #93C022;
  --color-cream: #F4EDDB;
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: "Lexend Deca", sans-serif;
  --font-body: "Lexend", sans-serif;
  --font-nav: "Poppins", sans-serif;

  /* Font Sizes */
  --text-h1: 62px;
  --text-h2: 46px;
  --text-h3: 24px;
  --text-subtitle: 22px;
  --text-body: 18px;
  --text-nav: 16px;

  /* Spacing */
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 30px;
  --space-lg: 50px;
  --space-section: 8%;

  /* Border Radius */
  --radius-pill: 50px;
  --radius-card: 30px;
  --radius-small: 3px;

  /* Container */
  --container-max: 1140px;
  --container-padding: 4%;

  /* Transitions */
  --transition-fast: 0.3s;
  --transition-normal: 0.4s;
}
```

---

## Design Notes

1. **Color Contrast:** The site uses strong contrast between deep forest green (#003626) and lime accent (#CAD200) for visual impact.

2. **Typography Hierarchy:** Clean hierarchy using only two font families (Lexend Deca for display, Lexend for everything else).

3. **Spacing Philosophy:** Generous white space with percentage-based padding that scales responsively.

4. **Component Consistency:** Pill-shaped buttons (50px radius) and large card radius (30px) create a soft, approachable feel.

5. **Mobile-First Responsive:** Text centers on mobile, layouts stack vertically, padding increases for touch targets.

6. **Eco-Conscious Branding:** Green color palette reinforces sustainability messaging.
