# Marsello Design System

> High-contrast monochrome utility meeting soft coral accents and rounded geometric precision.

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

## TL;DR
Marsello utilizes a sophisticated "monochrome plus one" strategy, where a deep charcoal and white foundation is punctuated by a signature coral accent (`#fa5b50`). The system relies heavily on the **Poppins** typeface for structural clarity, paired with the more characterful **Gelica** for large-scale display moments. Layouts are defined by generous whitespace and a rigorous card-based architecture featuring varied corner radii (from 15px to 50px). Interactive elements transition from sharp-edged secondary buttons to fully pill-shaped primary CTAs, creating a clear hierarchy of action through geometry.

## Signature DNA
1. **The Coral Punctuation** (The use of `#fa5b50` is strictly reserved for primary actions, critical badges, and brand-gradient accents, standing out against the `#000000` and `#ffffff` base. Seen on all pages.)
2. **Geometric Hierarchy** (Primary CTAs use a 50px "pill" radius, while content cards use a softer 16px-24px radius, and secondary actions often revert to a 0px sharp edge. Seen on Homepage and Pricing.)
3. **Typographic Contrast** (The pairing of Poppins' geometric sans-serif for utility with Gelica's soft serif for headlines creates a "friendly professional" atmosphere. Seen on Homepage hero.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Marsello (Parent) | #fa5b50 | Geometric cards & gradients | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#000000` | Primary text, inverted logos, borders | 351 | 1 | `--primary-color` |
| `{color.white}` | `#ffffff` | Surface background, button text | 59 | 0.8 | Computed Style |
| `{color.border}` | `#dddddd` | Default dividers, card outlines | 12 | 1 | `--border-color` |
| `{color.grey.soft}` | `#f5f5f5` | Secondary section backgrounds | 4 | 1 | `--grey-color` |
| `{color.ink}` | `#333333` | Secondary text, button labels | 30 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent}` | `#fa5b50` | Primary CTAs, active states, badges | 3 | 1 | `--secondary-color` |
| `{color.slate}` | `#4a5568` | Secondary button backgrounds | 13 | 0.8 | Computed Style |
| `{color.muted}` | `#718096` | De-emphasized UI text | 11 | 0.8 | Computed Style |
| `{color.deep.navy}` | `#041527` | Decorative footer/hero backgrounds | 1 | 1 | Decorative Only |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | Not captured | Not captured |
| `{color.error}` | Not captured | Not captured |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 600 | UI, Body, Subheadings | Poppins (Google Fonts) | SIL Open Font |
| Gelica | 400, 500, 600 | Display, Hero Headlines | Literata | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 50px | 55px | -1px | 600 | Hero Headlines | `h2.h2__secondary` |
| `{type.display.md}` | 42px | 46.2px | -0.84px | 500 | Section Headers | `h2` |
| `{type.heading.sm}` | 25px | 27.5px | -0.5px | 600 | Card Titles | `h3.platform-card__title` |
| `{type.body.lg}` | 18px | 30.6px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 16px | 27.2px | normal | 400 | Standard Body | `p` |
| `{type.body.sm}` | 14px | 19.6px | normal | 400 | Captions, Small Text | `span.price-per` |
| `{type.label.xs}` | 12px | 19.2px | 2px | 400 | Badges (Uppercase) | `p.mfeature__badge` |
| `{type.button}` | 16px | 24px | normal | 500 | CTA Labels | `a.cta__primary` |

### Principles
1. **Display Tracking:** Large display type (42px+) uses negative letter spacing (-0.5px to -1px) to maintain visual tension.
2. **Badge Spacing:** Small labels and badges use wide tracking (2px) for legibility at 12px sizes.
3. **Weight Pairing:** Headlines typically jump from 400 (Gelica) to 600 (Poppins) to create clear hierarchy.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 65 |
| `{space.sm}` | 16px | 65 |
| `{space.md}` | 24px | 39 |
| `{space.lg}` | 32px | 27 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Secondary Buttons, Sharp Sections | `button.accordion` |
| `{radius.card}` | 16px | Feature Cards, Content Blocks | `a.platform-card` |
| `{radius.panel}` | 24px | Large Containers, Pricing Tiers | `div.card` |
| `{radius.pill}` | 50px | Primary CTAs, Badges | `a.cta__primary` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.016) 0px 2px 4px 0px` | Floating Cards | Observed on Pricing |
| `{shadow.medium}` | `rgba(99, 99, 99, 0.2) 0px 2px 8px 0px` | Hovered Cards | Observed on Homepage |

## Components
### Tier 1: Foundational
#### Primary CTA (Pill)
**Role:** Main conversion actions (Start trial, Sign up)
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `{color.accent}` (#fa5b50) / Text: `{color.white}` (#ffffff) / Radius: `{radius.pill}` (50px) / Padding: 0px 26px / Typography: `{type.button}`
**States observed:** Default | Hover: Not captured

#### Secondary Button (Sharp)
**Role:** Auxiliary actions (Book demo, See integrations)
**Pages observed:** Homepage, Pricing
**Spec:** Background: transparent / Text: `{color.ink}` (#333333) / Border: 1px `{color.primary}` (#000000) / Radius: `{radius.none}` (0px) / Padding: 32px 0px
**States observed:** Default | Active: Captured

### Tier 2: Patterns
#### Pricing Card
**Role:** Plan comparison
**Pages observed:** Pricing
**Spec:** Background: `{color.white}` (#ffffff) / Border: 1px `{color.border}` (#dddddd) / Radius: 15px / Padding: 32px / Shadow: none
**States observed:** Default | Featured: Border becomes `{color.accent}` (#fa5b50)

#### Feature Card
**Role:** Product capability showcase
**Pages observed:** Homepage, About
**Spec:** Background: `#fafafa` / Radius: 24px / Padding: 24px / Typography: `{type.body.md}`
**States observed:** Default

### Tier 3: Surface-specific
#### Currency Toggle
**Role:** Pricing adjustment
**Pages observed:** Pricing
**Spec:** Background: transparent / Text: `{color.ink}` (#333333) / Radius: 6px / Padding: 6.4px 16px / Typography: 13px Poppins 500
**States observed:** Active: Background becomes `{color.accent}` (#fa5b50) (Inferred from active state logic)

#### Most Popular Badge
**Role:** Plan highlighting
**Pages observed:** Pricing
**Spec:** Background: `{color.accent}` (#fa5b50) / Text: `{color.white}` (#ffffff) / Radius: 4px / Typography: 13px Poppins 500
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 120px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; multi-column feature grids. |

## Imagery & decoration
Marsello uses clean, high-fidelity product screenshots embedded within rounded device frames (laptops, mobile phones). Backgrounds often feature soft, large-scale gradients transitioning from white to coral (`#f36a62` to `#e06e7c`). Icons are thin-stroke, monochrome line art.

## Do's
- Use `{color.accent}` (#fa5b50) exclusively for the primary path to conversion.
- Pair Poppins (600) with Gelica (400) for high-contrast display headers.
- Maintain a minimum of `{space.lg}` (32px) between distinct content cards.
- Apply `{radius.pill}` (50px) to all primary buttons.
- Use `{color.grey.soft}` (#f5f5f5) for alternating background sections to define rhythm.

## Don'ts
- **Wrong:** Using `#fa5b50` for body text. **Right:** Use `#000000` or `#333333`. **Reason:** Accessibility and brand hierarchy.
- **Wrong:** Mixing `{radius.pill}` and `{radius.none}` on the same button tier. **Reason:** Breaks the geometric hierarchy of action.
- **Wrong:** Using sub-brand colors (like potential future product-specific blues) as the main site background. **Reason:** Marsello parent brand is monochrome-dominant.
- Do not use shadows on foundational surfaces; reserve for floating cards only.
- Do not use Gelica for body copy or small UI labels.

## Similar brands
- Shopify (Clean, commerce-focused utility)
- Klaviyo (Data-centric, high-contrast UI)
- Mailchimp (Friendly serif headlines with geometric sans body)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #000000;
  --color-secondary: #fa5b50;
  --color-border: #dddddd;
  --color-grey-light: #f6f6f6;
  --font-main: 'Poppins', sans-serif;
  --font-display: 'Gelica', serif;
  --radius-card: 16px;
  --radius-pill: 50px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#000000" },
      "accent": { "value": "#fa5b50" }
    },
    "neutral": {
      "surface": { "value": "#ffffff" },
      "border": { "value": "#dddddd" }
    }
  }
}
```

## Agent prompt examples
- "Create a pricing card using a 15px border radius, a 1px #dddddd border, and a primary pill button using #fa5b50."
- "Generate a hero section with a Gelica 400 headline at 50px and a Poppins 600 subheadline."
- "Design a feature grid where cards have a 24px radius and #f5f5f5 background."

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the static evidence.
- Success and Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific font scaling for display sizes was not fully documented.

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