# Kitchenmate Design System

> Fresh lime-green accents and bold Work Sans typography anchored by deep forest-green foundations.

**Source:** https://kitchenmate.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kitchenmate utilizes a high-contrast "monochrome" system that leans heavily on a specific green spectrum. The interface is defined by a bright lime-green primary action color (#c3dc76) paired with a deep forest-green (#1b530d) used for footer surfaces and secondary text. Typography is dominated by **Work Sans**, using heavy weights (700) for display and medium weights (500) for navigation. Layouts feature generous vertical spacing and a mix of sharp edges for sections and highly rounded "pill" geometry (60px) for interactive elements.

## Signature DNA
1. **The Lime-Green Action:** The primary CTA color (#c3dc76) is used exclusively for high-priority buttons and as a background for profile photography, creating a consistent "freshness" signal across the homepage and about pages.
2. **Heavyweight Work Sans:** Display headings consistently use Work Sans at weight 700 with sizes ranging from 40px to 48px, providing a sturdy, industrial-yet-friendly feel.
3. **Forest Foundations:** Deep green (#1b530d) acts as the brand's "black," used for large footer blocks and primary brand text, ensuring the palette remains organic rather than purely grayscale.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary canvas, button text | 51 | 0.8 | Computed style |
| `{colors.black}` | `#222222` | Primary body text | 25 | 1.0 | `--black` |
| `{colors.neutral-900}` | `#0d0f11` | Heading text | 25 | 1.0 | `--neutral--900` |
| `{colors.neutral-700}` | `#333333` | Secondary body text | 97 | 0.8 | Computed style |
| `{colors.sand}` | `#faf6f2` | Subtle section backgrounds | 4 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#c3dc76` | Primary button background | 4 | 0.6 | Computed style |
| `{colors.forest}` | `#1b530d` | Footer background, brand text | 14 | 0.8 | Computed style |
| `{colors.lime-soft}` | `#eaffad` | Decorative surface background | 4 | 0.6 | Computed style |
| `{colors.link}` | `#0000ee` | Inline links | 8 | 0.6 | Computed style |
| `{colors.neutral-600}` | `#4b5768` | Decorative only | 1 | 1.0 | `--neutral--600` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Work Sans | 400, 500, 600, 700 | Display, Heading, UI | Work Sans (Google Fonts) | SIL Open Font |
| Quicksand | 700 | Buttons, FAQ | Quicksand (Google Fonts) | SIL Open Font |
| Arial | 400 | Navigation, Footer | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display-lg}` | 48px | 57.6px | normal | 700 | Feature titles | `div.features-title` |
| `{typography.display-md}` | 44px | 55px | normal | 700 | Section headings | `h3.heading-style-h3` |
| `{typography.display-sm}` | 40px | 48px | normal | 700 | Menu titles | `div.menu-title` |
| `{typography.heading-md}` | 25px | 35px | normal | 700 | Brand text | `div.case-study-text-brand` |
| `{typography.heading-sm}` | 24px | 28.8px | normal | 600 | Card titles | `div.menu-card-title` |
| `{typography.body-lg}` | 20px | 30px | normal | 400 | Subheadings | `h4.subheading.white` |
| `{typography.button}` | 18px | 21.6px | normal | 700 | Primary CTAs | `a.primary-button.navbar-cta` |
| `{typography.nav}` | 18px | 20px | normal | 500 | Nav links | `a.nav-link.w-nav-link` |
| `{typography.body-sm}` | 14px | 20px | normal | 400 | Footer/Nav | `div.navbar.w-nav` |

### Principles
1. **Bold Display:** All major section headers must use Work Sans 700.
2. **Rounded UI Type:** Interactive elements like buttons and FAQs switch to Quicksand 700 for a softer, more approachable feel.
3. **High Contrast Text:** Body text never drops below #333333 on white, maintaining high legibility.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.xs}` | 5px | 26 |
| `{spacing.sm}` | 10px | 89 |
| `{spacing.md}` | 20px | 31 |
| `{spacing.lg}` | 40px | 7 |
| `{spacing.xl}` | 80px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 188 occurrences |
| `{radius.card}` | 18px | Team/Feature cards | `radius: 18px` |
| `{radius.pill}` | 60px | Primary buttons | `radius: 60px` |
| `{radius.panel}` | 100px | Large decorative panels | `radius: 100px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.focus}` | `rgb(25, 83, 13) 0px 0px 0px 8px` | Active/Focus states | Observed on 3 elements |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (Talk to Sales, Book a Tasting)
**Pages observed:** https://kitchenmate.com, https://kitchenmate.com/about
**Spec:** Background: #c3dc76 / Text: #ffffff / Radius: 60px / Padding: 14px 40px / Font: Quicksand 700 (18px)
**States observed:** Default | Hover: captured | Active: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying service benefits or team members
**Pages observed:** https://kitchenmate.com/about
**Spec:** Background: #ffffff / Border: #e7e3ee (0px width) / Radius: 18px / Padding: 0px 0px 10px
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://kitchenmate.com, https://kitchenmate.com/about
**Spec:** Background: #ffffff / Text: #333333 / Height: driven by 10px padding / Font: Work Sans 500 (18px)
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Forest Footer
**Role:** Global site footer
**Pages observed:** https://kitchenmate.com, https://kitchenmate.com/about
**Spec:** Background: #1b530d / Text: #ffffff / Padding: 132px top / Font: Work Sans 400 (16px)
**States observed:** Default: captured

#### Lime Surface
**Role:** Decorative section background
**Pages observed:** https://kitchenmate.com
**Spec:** Background: #eaffad / Radius: 0px / Padding: 0px
**States observed:** Default: captured

#### Dark Card
**Role:** High-contrast decorative panel
**Pages observed:** https://kitchenmate.com
**Spec:** Background: #414141 / Radius: 100px / Shadow: #19530d 8px spread
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Section padding (vertical) | 80px |
| Column gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-global-2 app (14px line-height) |
| Desktop | 1440px | Standard 12-column grid behavior |

## Imagery & decoration
Kitchenmate uses photography of fresh food and human-centric workplace scenes. A signature decorative move is placing portrait photography over lime-green (#c3dc76) rectangular blocks with 18px rounded corners.

## Do's
- Use Work Sans 700 for all display headings.
- Apply #c3dc76 for the primary "Talk to Sales" CTA.
- Use #1b530d for large footer surfaces to anchor the page.
- Maintain 18px border radius on all content cards.
- Use Quicksand 700 for button labels to differentiate from UI text.

## Don'ts
- **Wrong:** Using #f47920 (Dark Orange) as a primary button color. **Right:** Use #c3dc76. **Reason:** Orange is a decorative token, not the primary action color.
- **Wrong:** Using sharp 0px corners on buttons. **Right:** Use 60px pill radius.
- **Wrong:** Setting display headings in Arial. **Right:** Use Work Sans.
- **Wrong:** Using pure black #000000 for long-form body text. **Right:** Use #333333.
- **Wrong:** Mislabeled Sub-brand Color: Do not use `--km-red` (#e03c31) for parent brand CTAs; it is a reserved semantic/sub-brand token.

## Similar brands
- HelloFresh (Green-centric, food service)
- Daily Harvest (Clean typography, vibrant photography)
- Chobani (Organic palette, rounded geometry)

## Quick start
```css
/* CSS Variables */
:root {
  --color-primary: #c3dc76;
  --color-forest: #1b530d;
  --color-neutral-900: #0d0f11;
  --color-neutral-700: #333333;
  --font-display: 'Work Sans', sans-serif;
  --font-button: 'Quicksand', sans-serif;
  --radius-pill: 60px;
  --radius-card: 18px;
}
```

## Agent prompt examples
- "Generate a primary button using the Kitchenmate style: background #c3dc76, white text in Quicksand 700, 60px border radius, and 14px 40px padding."
- "Create a section header using Work Sans 700 at 48px, color #0d0f11, with 80px vertical spacing."
- "Design a team member card with an 18px border radius, white background, and a lime-green #c3dc76 accent block behind the headshot."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Specific tablet breakpoints (768px-1024px) were not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://kitchenmate.com | 1440x900 | 2026-06-06 |
| About | https://kitchenmate.com/about | 1440x900 | 2026-06-06 |
| Mobile | https://kitchenmate.com | 390x844 | 2026-06-06 |