Skip to content
DesignMunkDesignMunk Submit a site

Modash

modash.io
Everything under one roof to grow your influencer program.
Marketing Software Webflow Homepage Inter Mosans
Share Visit site
modash.io DESKTOP · 1440
Modash

AI Breakdown

Design export

---
version: alpha
name: Modash
description: Everything under one roof to grow your influencer program.
colors:
  primary: "#141414"
  secondary: "#845c74"
  tertiary: "#ffa3d1"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Mosans
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Inter
    fontSize: 61px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Inter
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.07
    letterSpacing: -0.016em
  headline-xs:
    fontFamily: Inter
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.019em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 20px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 160px
components:
  button-primary:
    backgroundColor: "#f7f5f3"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 20px 48px
    height: 65px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px 48px
    height: 65px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Modash: Oversized Mosans Headlines, Pink Split Hero

## Overview

Modash's UI is bold and commercial: large display headlines, generous white space, and a single playful accent. The voice is direct and conversion-oriented, aimed at ecommerce marketers and agencies. Layouts are spacious up top (hero, proof lines) and denser in long-form sections (resources, FAQ). When tokens don't cover a case, favor high-contrast text on white with pink as the primary accent and minimal ornament.

## Colors

- **primary (#141414):** Core ink for headlines, body text, and icons. Always meets contrast on white.
- **secondary (#845c74):** Subtle plum accent for hovers, secondary badges, or muted charts; keep usage light.
- **tertiary (#ffa3d1):** Candy pink for callouts and hero panels; reserve for high-attention modules and empty states.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **surface ({colors.neutral}):** Surfaces that read as cards or panels on the white canvas.
- **on-surface ({colors.primary}):** Default text and icon color placed on any surface.

## Typography

- Mosans (headline-lg, 96px/1.2, 400): Custom/self-hosted; an agent cannot fetch it from Google. Use substitutes with similar heft and width: Anton (Google), Archivo Black (Google), or Poppins ExtraBold (Google) when Mosans isn't available.
- Inter (headline-md 61px/1.2, headline-sm 39px/1.07, headline-xs 25px/1.25, body-md 16px/1.4): Freely available on Google Fonts. Use Inter for all body copy, UI labels, FAQs, and secondary headings. Tight negative tracking is applied to md/sm/xs headlines for a compact feel. Keep body at 16/1.4 as the default reading size.

## Layout

Spacing scale favors roomy hero and compact content blocks: xs 6, sm 16, md 24, lg 40, xl 160. Use xl for top/bottom hero gutters, lg for section paddings, and md/sm for intra-component spacing. A simple 12-column grid works well; cards typically span 3–4 columns on desktop and stack to full width on mobile. Maintain generous margins around pink callouts to prevent color bleed into adjacent sections.

## Elevation & Depth

Depth is subtle. Use shadows sparingly: sm for small controls or menus, md for raised cards and popovers, lg for modals or media frames; xl is none. The inner inset ring provides a 1px neutral stroke for inputs or outlined buttons without heavy contrast. When shadows are avoided, rely on the white canvas, 1px inset borders, and tonal blocks of tertiary pink for separation.

## Shapes

Two radii communicate intent: sm 4px for compact or utility elements (secondary buttons, inputs), and md 20px for primary CTAs and major cards. Use md on hero panels and feature cards to signal friendliness and click targets; mixing sm and md in the same component should be avoided.

## Components

Buttons and Card (tokened)
- Button — primary: 65px tall with 20px radius, padding 20px 48px, background #f7f5f3, text #141414. Use for key CTAs like "Try for free".
- Button — secondary: 65px tall with 4px radius, padding 20px 48px, text #141414 on the surface; pair with a 1px inset border for definition.
- Button — link: Text-only action using #141414 with no radius.
- Card: White background, #141414 text, 20px radius, 16px padding. Add md shadow for elevation when needed.

### Split Hero CTA
- Left panel uses tertiary #ffa3d1 with a white card or direct copy on pink, plus two CTAs (primary and secondary). Headline: Mosans 96px; subhead: Inter 25px; body: Inter 16px.

### Navigation Bar with Dual CTAs
- Left-aligned logo and links; right-aligned actions. "Request demo" (secondary) and "Try for free" (primary). Keep 40px (lg) vertical padding and use sm shadow when sticky.

### Proof Metric Strip
- Single line like "2,600+ in-house teams...". Set in Inter headline-xs 25px with ample white space (lg). No icons; rely on text weight and spacing.

### Capabilities Five-Up Grid
- Manage, Discover, Email, Track, Pay. Each tile is a card with 20px corners, headline in Inter headline-sm 39px, description in body-md, and a link. Use md gaps.

### Shopify Integration Panel
- Two-column layout: description plus a checklist. White panel or soft pink accents; apply md shadow and 20px corners. Links use #141414.

### Testimonial Carousel/Stack
- Quotes as cards on white with md shadow. Names and roles in Inter body-md; keep generous padding 24px and radius 20px.

### Resource Hub
- Grid of cards (Newsletter, Webinars, TikTok, Research, Blog). 20px radius, md shadow on hover, titles in Inter headline-xs.

### FAQ Accordion
- Title rows in Inter headline-xs; answers in body-md. Use inner inset border to separate items and sm shadow on expanded content.

## Do's and Don'ts

- Do reserve #ffa3d1 for high-attention panels, badges, or empty states; overuse dilutes emphasis.
- Do keep headlines in Mosans (or its substitutes) and all supporting copy in Inter to maintain the strong pairing.
- Do apply 20px radius on primary CTAs and cards; use 4px only for utility elements.
- Don't mix multiple CTA styles in the same viewport; pick one primary style and repeat it.
- Don't stack more than one md or lg shadow on a single element; choose the smallest that achieves separation.
- Don't use colored text on pink backgrounds; keep text #141414 on white or reverse only when contrast is tested.

## Agent Prompt Guide

Quick color reference
- Text: #141414
- Background: #ffffff
- Border (inset): rgba(20,20,20,0.08)
- Accent: #ffa3d1

1) Build the split hero
- Canvas #ffffff. Left panel: #ffa3d1 with 20px radius and md shadow. Headline: Mosans 96px/1.2, weight 400 (substitute Anton if Mosans unavailable). Subhead: Inter 25px/1.25. Body: Inter 16px/1.4. Primary button: 65px height, 20px radius, padding 20px 48px, background #f7f5f3, text #141414. Secondary: 65px height, 4px radius, 1px border rgba(20,20,20,0.08), text #141414.

2) Create the capabilities five-up grid
- 12-col container, 40px (lg) gutters. Each card: #ffffff, 20px radius, padding 16px, md shadow. Title: Inter 39px/1.07 with -0.016em tracking. Body: Inter 16px/1.4. Link uses #141414.

3) Make a proof metric strip
- Full-width band on #ffffff with 160px (xl) top/bottom spacing. Text centered in Inter 25px/1.25, color #141414.

4) Testimonial card
- Card: #ffffff, 20px radius, padding 16px, md shadow. Quote set in Inter 25px/1.25, name/role in Inter 16px/1.4. Use a subtle 1px border via inset rgba(20,20,20,0.08) on hover.

5) FAQ accordion
- Each item: border using inset rgba(20,20,20,0.08), no outer shadow. Question in Inter 25px/1.25, answer in Inter 16px/1.4. Expand/collapse icon in #141414.

## Similar Brands

- Shopify: Black-on-white commerce UI with confident headings; Shopify is denser and greener, while Modash leans pink and larger display type.
- Webflow: Monochrome foundation with dramatic headlines; Webflow's motion and gradients are heavier than Modash's minimal accents.
- Klaviyo: Ecommerce marketing SaaS with clear conversion paths; Klaviyo uses green and denser data visuals versus Modash's softer cards and pink accent.
- Hootsuite: Social marketing platform with proof-first sections; Hootsuite's palette is cooler and more corporate, while Modash keeps it playful with pink.

More like this

Browse Marketing →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 15 hours ago
customer.io
Customer.io AI
Customer.io
Supercharge your messaging with compounding customer engagement
Homepage · 16 hours ago