# Momos Design System

> High-contrast geometric utility meets soft coral warmth, anchored by bold Poppins display type and rounded container logic.

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

## TL;DR
Momos utilizes a high-contrast foundation of pure white (#ffffff) and deep obsidian (#15181e) to establish a professional SaaS framework. This severity is balanced by a signature coral accent (#d73e33) used for primary calls to action and soft, rounded geometry (16px to 100px radii). Typography is dominated by Poppins, ranging from heavy 600-weight display headers to functional 400-weight body text. The layout relies on generous vertical spacing (up to 120px) and a distinct card-on-canvas elevation model that uses subtle shadows and 16px corner rounding to group content.

## Signature DNA
1. **The Coral Pulse:** Primary actions and brand signals use a specific coral-red (#d73e33) often paired with a soft glow shadow (`rgba(255, 120, 122, 0.6)`), seen on the "Book a demo" and "Talk to us" buttons across all pages.
2. **Geometric Softness:** A strict adherence to rounded containers, specifically 16px for content cards and 100px for pills and decorative plates, softening the high-contrast monochrome palette.
3. **Poppins Hierarchy:** The system relies on Poppins for all brand-facing copy, using tight negative letter-spacing (-1.92px) at large display sizes (64px) to create a compact, modern editorial feel.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 315 | 0.8 | Computed style |
| `{color.ink}` | `#15181e` | Primary text and dark section backgrounds | 1132 | 0.8 | Computed style |
| `{color.obsidian}` | `#000000` | Secondary text and button backgrounds | 562 | 0.8 | Computed style |
| `{color.surface.muted}` | `#fbf8f4` | Subtle section backgrounds (Pricing) | 8 | 0.6 | Computed style |
| `{color.surface.tint}` | `#fff0f0` | Soft coral-tinted card backgrounds | 9 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#d73e33` | Primary CTA background, active signals | 68 | 0.8 | Computed style |
| `{color.link}` | `#0000ee` | Inline text links | 137 | 0.8 | Computed style |
| `{color.accent.glow}` | `#ff787a` | Shadow color for primary buttons | 4 | 0.6 | decorative_only |
| `{color.accent.purple}` | `#7b00ff` | Rare decorative text accent | 5 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Poppins | 300, 400, 500, 600, 700 | Heading & Brand | Poppins (Google Fonts) | SIL Open Font |
| Inter | 400 | Functional Body | Inter (Google Fonts) | SIL Open Font |
| Caveat | 700 | Handwritten accents | Caveat (Google Fonts) | SIL Open Font |
| Geist | 900 | Ultra-heavy display | Geist (Vercel) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 64px | 80.64px | -1.92px | 600 | Hero H1 | `h1.framer-text` |
| `{type.display.lg}` | 56px | 76.16px | -1.68px | 600 | Section H2 | `h2.framer-text` |
| `{type.heading.md}` | 36px | 50.4px | -0.72px | 600 | Sub-section H4 | `h4.framer-text` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 600 | Card titles | `h6.framer-text` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Intro paragraphs | `p.framer-text` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body | `p.framer-text` |
| `{type.body.sm}` | 14px | 21.84px | normal | 500 | UI labels / small text | `p.framer-text` |
| `{type.caption}` | 12px | normal | normal | 400 | Metadata / footer | `div.framer-uBVaq` |

### Principles
1. **Tight Display Tracking:** Large Poppins headers (36px+) must use negative letter-spacing (-0.72px to -1.92px) to maintain visual density.
2. **Body Neutrality:** Standard body copy (16px) defaults to normal letter-spacing and a generous 1.5x line height for legibility.
3. **Handwritten Emphasis:** Use Caveat 700 (28px) sparingly for "human" annotations or callouts that break the geometric grid.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 117 |
| `{space.sm}` | 16px | 64 |
| `{space.md}` | 24px | 17 |
| `{space.lg}` | 48px | 3 |
| `{space.xl}` | 64px | 14 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sm}` | 8px | Input fields, small UI cards | 40 occurrences |
| `{radius.md}` | 12px | Standard content cards | 55 occurrences |
| `{radius.lg}` | 16px | Feature cards, pricing tiers | 148 occurrences |
| `{radius.pill}` | 100px | Buttons, badges, decorative plates | 83 occurrences |
| `{radius.max}` | 999px | Full pill buttons | 11 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Low | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Standard card hover | 69 occurrences |
| Brand | `rgba(255, 120, 122, 0.6) 0px 6px 20px 0px` | Primary CTA glow | 5 occurrences |
| Deep | `rgba(0, 0, 0, 0.06) 0px 0px 100px 4px` | High-focus modal/card | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button (Pill)
**Role:** Main call to action (Demo, Talk to us)
**Pages observed:** https://momos.com, https://momos.com/pricing, https://momos.com/about
**Spec:** Background `#d73e33` / Text `#ffffff` / Radius `100px` / Shadow `rgba(255, 120, 122, 0.6) 0px 6px 20px 0px`
**States observed:** Default | Hover: captured

#### Secondary Button (Outline)
**Role:** Navigation and secondary actions (Login, Back to Home)
**Pages observed:** https://momos.com, https://momos.com/pricing
**Spec:** Background `transparent` / Text `#000000` / Border `1px solid #000000` / Radius `8px` / Padding `4px 12px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Grouping benefit or product information
**Pages observed:** https://momos.com, https://momos.com/about
**Spec:** Background `#ffffff` / Radius `16px` / Padding `20px` / Shadow `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
**States observed:** Default: captured

#### Testimonial Plate
**Role:** Customer quotes and social proof
**Pages observed:** https://momos.com, https://momos.com/about
**Spec:** Background `#fff0f0` / Text `#000000` / Radius `100px` / Padding `8px 16px` / Typography `Poppins 14px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Footer Section
**Role:** Global site navigation and legal
**Pages observed:** https://momos.com, https://momos.com/pricing, https://momos.com/about
**Spec:** Background `#15181e` / Text `#ffffff` / Radius `0px` / Padding `48px 64px`
**States observed:** Default: captured

#### Pricing Card (Elevated)
**Role:** Highlighting specific purchase tiers
**Pages observed:** https://momos.com/pricing
**Spec:** Background `#ffffff` / Radius `12px` / Shadow `rgba(0, 0, 0, 0.06) 0px 0px 100px 4px` / Padding `16px 24px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 120px |
| Card Grid Gap | 24px |
| Horizontal Page Padding | 64px (Desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px; 1-column grid |
| Desktop | 1440px | 12-column grid; 64px horizontal padding; horizontal nav menu |

## Imagery & decoration
Momos uses playful, character-driven illustrations with thin black outlines and coral-red accents to humanize the AI product. Decorative elements include soft, large-scale radial gradients (coral to white) behind hero sections and the use of "handwritten" annotations (Caveat font) to simulate human feedback.

## Do's
- Use Poppins 600 for all display headers.
- Apply `-1.92px` letter spacing to H1 headers.
- Use `#d73e33` for the primary "Book a demo" action.
- Ensure all content cards have a minimum radius of `16px`.
- Use `#15181e` for full-width footer backgrounds.

## Don'ts
- **Wrong:** Using `#0000ee` (standard blue) for primary buttons. **Right:** Use `#d73e33` (Coral). **Reason:** Blue is reserved for inline text links only.
- **Wrong:** Using sharp corners for content containers. **Right:** Minimum `12px` radius. **Reason:** Brand identity relies on geometric softness.
- **Wrong:** Setting display headers with positive letter-spacing. **Right:** Use negative tracking for Poppins at large sizes.
- **Wrong:** Using pure white text on the coral background without checking contrast.

## Similar brands
- **Attentive:** Similar use of high-contrast monochrome with a single vibrant accent.
- **Intercom:** Shared reliance on rounded UI and friendly illustration styles.
- **Gorgias:** Overlapping SaaS utility aesthetic with soft container logic.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --momos-primary: #d73e33;
  --momos-ink: #15181e;
  --momos-canvas: #ffffff;
  --momos-radius-card: 16px;
  --momos-radius-pill: 100px;
  --momos-shadow-glow: 0px 6px 20px 0px rgba(255, 120, 122, 0.6);
}
```

## Agent prompt examples
- "Create a primary CTA button using Momos Coral #d73e33, 100px border radius, and a soft coral glow shadow."
- "Design a feature card with a white background, 16px corner radius, and Poppins 600 for the title."
- "Generate a hero section with Poppins 600 text at 64px, using -1.92px letter spacing."

## Known gaps
- Hover states for secondary buttons were not fully captured in the computed style evidence.
- Specific tablet breakpoints (768px-1024px) were not sampled in this run.
- The exact transition timing for button hover effects was not captured.

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