# Ivvy Design System

> Deep forest greens anchored by high-contrast lime accents and heavy geometric typography.

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

## TL;DR
Ivvy utilizes a high-contrast "Dark Green and Lime" palette to establish a professional yet energetic hospitality-tech identity. The system is built on a foundation of `#103620` (Dark Green) and `#99cc52` (Primary Green), often used in inverted blocks to define section hierarchy. Typography is dominated by **Poppins** for heavy, extra-bold display headers (weight 800) and **Nunito** for highly legible body text. Component geometry favors a mix of sharp 0px edges for primary containers and ultra-soft 9999px pills for interactive CTAs.

## Signature DNA
1. **The Inverted Forest Block** (Large sections use `#103620` as a background with `#99cc52` text or buttons, creating high-impact visual breaks between white canvas areas. Seen on `ivvy.com` and `ivvy.com/about`.)
2. **Geometric Display Weight** (Headlines consistently use Poppins at weight 800 with tight or normal tracking, providing a "heavy" architectural feel to the page structure.)
3. **Pill-on-Sharp Contrast** (Interactive elements like buttons use `{radii.pill}` (9999px), while structural containers and section dividers often maintain `{radii.sharp}` (0px) edges.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ivvy-white` | `#ffffff` | Page background, primary surface | 98 | 1 | Computed Style |
| `--ivvy-dark-green` | `#103620` | Primary brand color, dark surfaces, headings | 111 | 1 | `--ivvy-dark-green` |
| `--ivvy-gray-500` | `#595959` | Standard body text | 60 | 1 | `--ivvy-gray-500` |
| `--ivvy-gray-200` | `#e5e5e5` | Borders and dividers | 29 | 1 | `--ivvy-gray-200` |
| `--ivvy-gray-50` | `#f5f5f5` | Subtle section backgrounds, card surfaces | 14 | 1 | `--ivvy-gray-50` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ivvy-primary` | `#99cc52` | Primary CTA background, accent text | 77 | 1 | `--ivvy-primary` |
| `--ivvy-icon-bg` | `#cce3a8` | Decorative icon backplates (decorative_only) | 4 | 1 | `--ivvy-icon-bg` |
| `--ivvy-gray-600` | `#4b5563` | Secondary text emphasis | 9 | 1 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Poppins | 700, 800 | Display, Hero Headings | Poppins (Google Fonts) | SIL Open Font |
| Nunito | 400, 500, 600, 700, 800 | Body, UI Labels, Subheadings | Nunito (Google Fonts) | SIL Open Font |
| Nunito Sans | 700, 800 | Functional labels, Card titles | Nunito Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 52px | 75.4px | normal | 800 | Hero Title | `h2.hero-mesh__title` |
| `{type.display-lg}` | 50px | 55px | normal | 800 | Page Hero | `h1.page-hero__title` |
| `{type.display-md}` | 44px | 50.6px | -0.88px | 800 | Section Heading | `h2.cta__title` |
| `{type.heading-md}` | 24px | 40.8px | normal | 700 | Testimonials | `p.testimonial__quote` |
| `{type.heading-sm}` | 20px | 24px | normal | 800 | Card Titles | `h3.venue-card__title` |
| `{type.body-lg}` | 18px | 30.6px | normal | 400 | Subtitles | `p.product-suite__subtitle` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Standard Body | `section.hero-mesh` |
| `{type.button}` | 16px | 25.6px | 0.8px | 700 | CTA Labels | `a.btn.btn--cta` |
| `{type.caption}` | 12px | 19.2px | normal | 700 | Small Labels | `span.integrations-module__tile-name` |

### Principles
1. **Heavyweight Hierarchy**: Display text never drops below weight 700; weight 800 is the standard for any headline above 20px.
2. **Generous Leading**: Body text (16px) uses a 1.6x line-height (25.6px) to maintain readability against dense green backgrounds.
3. **Negative Tracking on Display**: Large headings (44px+) utilize negative letter-spacing (-0.88px) to tighten the geometric Poppins letterforms.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 34 |
| `{space.sm}` | 12px | 30 |
| `{space.md}` | 16px | 47 |
| `{space.lg}` | 32px | 14 |
| `{space.xl}` | 96px | 3 |
| `{space.section}` | 112px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, primary buttons | 201 occurrences |
| `{radius.md}` | 12px | Small UI elements, icon plates | `span.venue-card__pill` |
| `{radius.lg}` | 16px | Content cards, testimonial blocks | `div.venue-card` |
| `{radius.pill}` | 9999px | Primary CTAs, section badges | `a.btn.btn--cta` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.18) 0px 8px 30px -4px` | Floating feature cards | `ivvy.com` |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.12) 0px 4px 20px -2px` | Hover states, elevated panels | `ivvy.com/about` |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary site-wide call to action.
**Pages observed:** `ivvy.com`, `ivvy.com/about`
**Spec:** 
- Background: `{colors.primary}` (#99cc52)
- Text: `{colors.dark-green}` (#103620)
- Radius: `{radius.pill}` (9999px)
- Padding: 8px 32px
- Typography: `{type.button}` (16px/700)
**States observed:** Default | Hover: `#88b848` | Focus: not captured | Active: not captured | Disabled: not captured

#### Button (Sharp)
**Role:** Secondary actions or legacy UI triggers.
**Pages observed:** `ivvy.com`, `ivvy.com/about`
**Spec:** 
- Background: `{colors.dark-green}` (#103620)
- Text: `#ffffff`
- Radius: `{radius.sharp}` (0px)
- Typography: 13.33px
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying venue types or product features.
**Pages observed:** `ivvy.com`, `ivvy.com/about`
**Spec:** 
- Background: `{colors.gray-50}` (#f5f5f5)
- Radius: `{radius.lg}` (16px)
- Text: `{colors.gray-500}` (#595959)
- Shadow: `{shadow.card}` on hover/active.

#### Section Badge
**Role:** Small eyebrow labels above headings.
**Pages observed:** `ivvy.com`
**Spec:**
- Background: `{colors.icon-bg}` (#cce3a8)
- Text: `{colors.dark-green}` (#103620)
- Radius: `{radius.pill}` (9999px)
- Typography: 13px / 600 / 0.65px tracking.

### Tier 3: Surface-specific

#### Dark Surface Block
**Role:** High-impact section container.
**Pages observed:** `ivvy.com`
**Spec:**
- Background: `{colors.dark-green}` (#103620)
- Padding: 112px 0px
- Text: `#ffffff` or `{colors.primary}` (#99cc52)

#### Integration Tile
**Role:** Logo grid for partner integrations.
**Pages observed:** `ivvy.com`
**Spec:**
- Background: `#ffffff`
- Border: 1px `{colors.gray-200}` (#e5e5e5)
- Radius: `{radius.lg}` (16px)
- Typography: 12px / 700 (Nunito Sans)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 112px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero padding reduces to 48px; headings scale to 32px; flex-direction: column. |
| Desktop | 1440px | 12-column grid; 112px section spacing. |

## Do's
- Use `#103620` for primary text on white backgrounds.
- Apply `weight 800` to all Poppins headings for brand consistency.
- Use `{radius.pill}` for all primary "Request Demo" or "Talk to Sales" buttons.
- Ensure `#99cc52` is used as the primary accent color for interactive elements.
- Maintain a 112px vertical rhythm between major homepage sections.

## Don'ts
- **Wrong:** Using `#99cc52` (Lime) as a background for large text blocks. **Right:** Use `#103620` (Dark Green) for backgrounds. **Reason:** Legibility and brand authority.
- **Wrong:** Applying rounded corners to section backgrounds. **Right:** Keep section edges at 0px. **Reason:** Maintains the architectural "block" feel.
- **Wrong:** Using sub-brand or secondary colors (like a generic blue) for primary CTAs. **Right:** Only use `#99cc52` or `#103620`.
- Do not use Poppins for body text; reserve it for display only.
- Do not use shadows on foundational buttons; keep them flat.

## Similar Brands
- Greenhouse (Color palette, tech-forward green)
- Shopify (Heavy geometric headers, clean surfaces)
- Sage (Professional services green, high-contrast UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --ivvy-primary: #99cc52;
  --ivvy-primary-hover: #88b848;
  --ivvy-dark-green: #103620;
  --ivvy-white: #ffffff;
  --ivvy-gray-500: #595959;
  --ivvy-gray-200: #e5e5e5;
  --ivvy-gray-50: #f5f5f5;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#103620` background, a Poppins 800 headline in `#99cc52`, and a pill-shaped CTA button."
- "Create a 3-column feature grid using cards with 16px border radius, `#f5f5f5` background, and Nunito 400 body text."
- "Design a section badge using `#cce3a8` background and `#103620` text with a 9999px border radius."

## Known gaps
- Hover states for secondary buttons were not captured in the source.
- Form input validation states (Success/Error) were not present on the analyzed pages.
- Mobile-specific navigation menu transitions were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://ivvy.com | 1440px | 2026-06-06 |
| About | https://ivvy.com/about | 1440px | 2026-06-06 |
| Pricing | https://ivvy.com/pricing | 1440px | 2026-06-06 |