Skip to content
DesignMunkDesignMunk Submit a site

Jolly Commerce

jollycommerce.io
We make your Shopify website make more money.
Agency Ecommerce Homepage DM Sans
Share Visit site
jollycommerce.io DESKTOP · 1440
Jolly Commerce

AI Breakdown

Design export

---
version: alpha
name: Jolly Commerce
description: We make your Shopify website make more money.
colors:
  primary: "#1a1a1a"
  secondary: "#f8eaab"
  tertiary: "#fcecc8"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-messenger-bag: "#7c745c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: DM Sans
    fontSize: 71px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: DM Sans
    fontSize: 50px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.028em
  headline-sm:
    fontFamily: DM Sans
    fontSize: 35px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.21
  body-md:
    fontFamily: DM Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 74px
  xl: 100px
components:
  button-primary:
    backgroundColor: "#000000"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 14px 32px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 14px 32px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Jolly Commerce: Giant DM Sans Headlines With Beige Highlights

## Overview

A focused, conversion-first system: black text on white, a single beige accent, and large, heavy headlines that state outcomes. Audience is Shopify operators and founders; tone is direct, expert, and test-driven. Pages should feel spacious rather than dense, using wide gutters and generous vertical rhythm. When tokens don't specify, default to clarity: high contrast, short paragraphs, and weight-based hierarchy over color.

## Colors

- **primary (#1a1a1a):** Primary text and headline color; use for all body copy and strong headings.
- **secondary (#f8eaab):** Accent slab for highlighted headline fragments, badges, and light callouts; avoid using for large backgrounds.
- **tertiary (#fcecc8):** Softer accent tint for secondary callouts or hover fills where a quieter note is needed.
- **neutral (#ffffff):** Page background and card surfaces.
- **border (#e5e7eb):** Subtle dividers and card outlines; also for section separators on white.
- **brand-messenger-bag (#7c745c):** Occasional brand accent seen in case-study imagery; keep usage minimal.
- **surface ({colors.neutral}):** Alias of neutral for component surfaces.
- **on-surface ({colors.primary}):** Alias of primary for text/icons placed on neutral surfaces.

## Typography

The system uses a single family, DM Sans, across all levels.
- Headlines (headline-lg 71px/900, headline-md 50px/900, headline-sm 35px/900, headline-xs 24px/600): Bold, compact lines with slight negative tracking for impact. Freely available from Google Fonts. Suitable substitutes with similar geometry: Inter, Plus Jakarta Sans, or Outfit.
- Body (body-md 17px/400, line-height 1.7): Comfortable reading size for dense CRO content and short paragraphs. Use 600–700 only for short emphasis inside body copy. Keep link text in primary; underline only when necessary for clarity.

## Layout

Spacing follows an 8px base scale: xs 8, sm 16, md 32 for element padding and stack gaps. Use lg 74 and xl 100 as section separations to preserve the airy, editorial feel. A centered content column with generous side gutters keeps lines short; cards and metrics can use equal-width columns on wider screens and collapse to a single column on mobile. Maintain consistent 32px rhythm between paragraphs, lists, and CTAs.

## Elevation & Depth

Depth is minimal. Only the small shadow is available: rgba(0,0,0,0.18) 0 4px 12px; reserve it for media thumbnails or hover states. Most hierarchy comes from type size/weight, white space, and subtle borders (#e5e7eb). When emphasis is needed, prefer a beige accent block behind text instead of heavier shadows.

## Shapes

Two radii communicate hierarchy. Controls and small elements use 4px (rounded.sm). Larger surfaces like cards use 8px (rounded.md). Link buttons are square (0px) to read as textual actions. Avoid introducing larger radii; this system aims for crisp geometry.

## Components

Buttons and card variants:
- Primary button: #000000 background, white text, 52px height, 14px×32px padding, 4px radius. Use for the main CTA ("Book a call").
- Secondary button: white background, black text, same height/padding/radius; add a 1px border in #e5e7eb when needed on white.
- Link button: text-only action in primary, radius 0.
- Card: white background, primary text, 16px padding, 8px radius; add border #e5e7eb or the small shadow for lift when grouped.

### Highlighted headline slab
Use a rectangular block of secondary (#f8eaab) or tertiary (#fcecc8) behind critical words. Tight vertical padding (approx. line box fit) and short horizontal insets keep it integrated with the line. Works with headline-md/-lg.

### KPI strip
Three to four metrics set in headline-sm (35px/900) with short labels in body-md. Use equal columns, 32px vertical gaps, and borders #e5e7eb as separators on white.

### Live stores strip
A row of small thumbnail cards using the small shadow and 8px radius. Each card sits on white; 16px inner padding and 16–32px gaps between items.

### Process timeline (weeks 1–5)
A vertical stepper with headline-xs (24px/600) step headers and body-md descriptions. Use 74–100px section spacing and light dividers in #e5e7eb between steps.

### Numbered principles list
Four items prefixed by two-digit numerals (01–04). Titles in headline-xs, copy in body-md, with a 32px gap per item and 74px top/bottom padding.

### Team roster grid
Simple photo grid of people with names (headline-xs) and roles (body-md). Cards are neutral on neutral with 8px radius; use the small shadow only on hover.

### Blog teasers
Stacked list of posts: category label (body-md, 600), title in headline-xs, one-line summary in body-md, and a link button. 32px vertical rhythm; 16px internal padding on small cards.

## Do's and Don'ts

- Do keep headlines in DM Sans 900 and use the beige highlight sparingly for the most valuable claim.
- Do space sections with 74–100px vertical gaps; keep intra-component gaps to 16–32px for rhythm.
- Do reserve the small shadow for media and hover; rely on #e5e7eb borders for structure.
- Don't introduce new accent colors or larger corner radii; stick to 4px and 8px.
- Don't invert the palette casually; black backgrounds are for primary buttons, not sections.
- Don't stack beige accents over imagery or patterned backgrounds where contrast could drop.

## Agent Prompt Guide

Quick color reference — text: #1a1a1a, background: #ffffff, border: #e5e7eb, accent: #f8eaab.

1) Build the hero
- Canvas #ffffff. Center a headline using DM Sans 900 at 71px, line-height 1.2, letter-spacing -0.03em, color #1a1a1a. Wrap one line fragment in a block highlight with background #f8eaab and no border; keep padding tight to the line box. Add body copy in DM Sans 17px/1.7 below with 32px top margin. Place two buttons: primary (52px height, 14px 32px, bg #000000, text #ffffff, radius 4px) and secondary (same size, bg #ffffff, text #000000, 1px border #e5e7eb).

2) KPI strip
- Three columns on desktop, stacked on mobile. Each metric in DM Sans 900 at 35px, label in 17px/1.7 below. Use 32px gaps, 74px top and bottom padding, and dividers in #e5e7eb between columns on white.

3) Process timeline
- Section padding 100px top, 100px bottom. For each step, title in DM Sans 600 at 24px (line-height 1.21), description in 17px/1.7. Add a 1px #e5e7eb divider between steps with 32px vertical spacing.

4) Principles list
- Four items. Leading two-digit numerals, then a title in DM Sans 600 at 24px and a paragraph in 17px/1.7. Use 16px internal padding per item, 32px gaps, and maintain a uniform 8px card radius when boxed.

5) Blog teasers + subscribe
- Stack three cards: title in 24px/600, summary in 17px/1.7, link styled as button-link (text #1a1a1a, radius 0). Follow with a simple email input and a secondary button at 52px height, 4px radius.

## Similar Brands

- Mailchimp: Black/white core with a friendly yellow accent; Jolly is sharper and relies more on weight than illustration.
- Linear: Monochrome UI and heavy typographic hierarchy; Jolly is warmer thanks to the beige highlight.
- Shopify: Clean product pages with decisive CTAs; Jolly borrows the restraint but swaps green for beige and ups headline weight.
- Basecamp/37signals: Text-first storytelling with minimal chrome; Jolly adds a clearer KPI strip and a more formal grid.

More like this

Browse Agency →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 3 days ago
craft.wild.as
Craft Wild Agency
Craft Wild
Craft, engineered. Explore. Generate. Refine. Scale.
Homepage · 4 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago