Skip to content
DesignMunkDesignMunk Submit a site

WizCommerce

wizcommerce.com
Built for Wholesale. Powered by AI.
AI Ecommerce Elementor WordPress Homepage Geist Mono Recife
Share Visit site
wizcommerce.com DESKTOP · 1440
WizCommerce

AI Breakdown

Design export

# Design brief: the WizCommerce design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07085411/wizcommerce-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07085411/wizcommerce-com-featured.webp
- On DesignMunk: https://designmunk.com/wizcommerce/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# WizCommerce: Editorial Serif Headlines Over a Monochrome System

## Overview

WizCommerce presents a focused, utility-first interface: black text on white surfaces, generous negative space, and restrained accent use. The personality is professional and operational rather than playful—built to instill trust for B2B buyers. Content runs dense but is broken into clear, scannable sections with proof metrics. Use this tone when tokens don't cover a case: serious, concise, and conversion-oriented.

## Colors

- Primary (#000000): Core text, headings, icons, and high-contrast UI elements.
- Tertiary (#fd8143): Primary action color for CTAs, highlights, and data callouts; use sparingly for emphasis.
- Neutral (#ffffff): Page background and card surfaces.
- Border (#e5e7eb): Section dividers, table rules, input strokes, and subtle separators.
- Surface ({colors.neutral}): Default container backgrounds; pair with Border for structure.
- On-surface ({colors.primary}): Default text color on white surfaces to maintain WCAG contrast.

## Typography

- Recife Text TEST (custom): Used for headline-lg 58px and headline-md 42px at weight 300 for an editorial voice. This is self-hosted; if unavailable, substitute with Source Serif 4, Libre Baskerville, or Merriweather.
- Geist Mono (Google): Used for headline-sm 30px, headline-xs 22px, and body-md 16px. Available via Google; safe for UI labels, small headings, and body where a technical tone is desired.
- Scale intent: Large serif for primary messaging; smaller mono for subheads, stats, nav, and UI copy. Maintain generous line-heights (1.5+ in body) for dense content blocks.

## Layout

- Spacing scale: 10, 20, 34, 50, 90px. Use 90px for section top/bottom padding, 50px for major internal gutters, 34px for component spacing, 20px for element groups, and 10px for micro gaps.
- Grid: A 12-column layout works well with a 6/6 split hero and 3/3/3/3 product tiles. Constrain text columns to 6–7 columns for optimal readability.
- Rhythm: Alternate full-bleed media with bordered white sections to keep long pages scannable.

## Elevation & Depth

Shadows are not used. Hierarchy is created with whitespace, 1px borders in #e5e7eb, and tonal contrast (black on white). Cards and testimonials sit on neutral surfaces with borders or spacing to separate them from the page.

## Shapes

Corners communicate function: action buttons are square (0px radius) and feel decisive; informational containers use a soft 8px radius via rounded.sm. Maintain this distinction—sharp for actions, soft for containers.

## Components

- Buttons
  - Primary: #fd8143 background, #000000 text, height 58px, padding 16px 32px, radius 0. Use for main CTAs.
  - Secondary: Text-only in #000000, height 58px, padding 16px 32px, radius 0. Pair with Primary or use for low-emphasis actions.
  - Link: Text-only, #000000, radius 0 for inline actions.
- Card: #ffffff background, #000000 text, 8px radius, 16px padding. Use for testimonials, resource items, and small feature modules.

### Announcement Bar
A slim, dismissible strip above the nav for product news. Body-md 16px, #000000 on #ffffff with a bottom border #e5e7eb and 10–20px vertical padding.

### Split Hero
Two-column layout (6/6). Left: headline-lg 58px serif, short body-md, Primary button (58px tall). Right: media/screenshot. Section padding 90px.

### Testimonial Card
Avatar + quote in a Card: 16px padding, 8px radius, optional border #e5e7eb. Quote set in body-md with bold attribution line beneath.

### KPI Stat Row
Three or more stats using headline-sm 30px for the numeral and body-md for the label. Separate items with #e5e7eb dividers and 34–50px gaps.

### Product Suite Grid
Five tiles (2–3 rows). Tile title uses headline-sm 30px; short body-md description; Link button for details. 20–34px internal spacing; no shadows.

### AI Co-Workers Feature List
Sequence of feature callouts with short headings in headline-xs 22px and supporting body-md. Include metrics (e.g., "5000+ orders/day") in headline-sm for emphasis.

### FAQ Accordion
Bordered stack on #ffffff. Question set in headline-xs 22px; answer in body-md 16px. Use 1px #e5e7eb dividers; no shadows; chevron aligned right.

### Integrations Strip
Single-column intro plus logo grid. Use 20–34px gaps and #e5e7eb borders around logo tiles to maintain alignment.

## Do's and Don'ts

- Do reserve #fd8143 for primary CTAs and key highlights so it retains authority.
- Do keep button corners at 0px and card corners at 8px to preserve the action/container contrast.
- Do rely on #e5e7eb borders and generous spacing instead of shadows for separation.
- Don't set long paragraphs in headline styles; keep body at 16px Geist Mono with 1.5 line-height for readability.
- Don't introduce additional brand colors into UI chrome; non-token color is limited to imagery.
- Don't compress vertical rhythm—respect 90px section padding on long-scrolling pages.

## Agent Prompt Guide

Quick color reference — Text: #000000; Background: #ffffff; Border: #e5e7eb; Accent/Primary: #fd8143.

1) Build a split hero
- Page background #ffffff. Left column (6/12): headline 58px, weight 300, letter-spacing -0.034em in Recife Text TEST (or Source Serif 4 if unavailable). Body copy 16px, line-height 1.5 in Geist Mono. Primary button 58px tall, 16px 32px padding, radius 0, background #fd8143, text #000000. Right column (6/12): media placeholder. Section padding 90px top/bottom, 50px sides.

2) Create a testimonial card
- Container: #ffffff, 8px radius, 16px padding, 1px border #e5e7eb. Quote set in Geist Mono 16px/1.5, attribution in Geist Mono 16px bold. Optional avatar at 50px square, left-aligned. No shadow.

3) Product suite grid (5 tiles)
- Grid: 12 columns with 20px gutters. Each tile: title in Geist Mono 30px (headline-sm), short description in 16px body, link styled as button-link (#000000 text, radius 0). Tile spacing 34px; section padding 90px.

4) KPI stat row
- Three stats in a row. Number in Geist Mono 30px, label in 16px body. Separate with 1px #e5e7eb vertical borders, 50px internal gutters, 34px top/bottom padding. Background #ffffff.

5) FAQ accordion
- Stack of items on #ffffff. Question in Geist Mono 22px (headline-xs) with 20px vertical padding; answer in 16px body. 1px #e5e7eb dividers; chevron icon in #000000. No shadows; full width up to 7 columns.

## Similar Brands

- Shopify Plus: Enterprise commerce tone with monochrome UI; unlike WizCommerce, it keeps everything sans and leans on green rather than orange for actions.
- BigCommerce: Similar enterprise ecommerce messaging and white/black structure; uses more blue accents and rounded buttons.
- Stripe: Precision spacing and border-led sections echo this system; Stripe is more animated and color-forward.
- Klaviyo: B2B focus with restrained palette and proof-driven sections; typography stays sans versus WizCommerce's serif display.
- Salesforce: Complex product grid and proof metrics; more color and heavier gradients compared to WizCommerce's minimal, editorial approach.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-tertiary: #fd8143;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 58px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.17;
  --text-headline-lg-tracking: -0.034em;
  --text-headline-md-size: 42px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.62;
  --text-headline-md-tracking: -0.029em;
  --text-headline-sm-size: 30px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: 0.033em;
  --text-headline-xs-size: 22px;
  --text-headline-xs-weight: 200;
  --text-headline-xs-leading: 1.64;
  --text-body-md-size: 16px;
  --text-body-md-weight: 200;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.063em;
  --font-recife-text-test: "Recife Text TEST";
  --font-geist-mono: "Geist Mono";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 34px;
  --spacing-lg: 50px;
  --spacing-xl: 90px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 16px 32px;
  --button-primary-height: 58px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 16px 32px;
  --button-secondary-height: 58px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-tertiary: #fd8143;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Recife Text TEST";
  --font-headline-md: "Recife Text TEST";
  --font-headline-sm: "Geist Mono";
  --font-headline-xs: "Geist Mono";
  --font-body-md: "Geist Mono";
  --text-headline-lg: 58px;
  --text-headline-md: 42px;
  --text-headline-sm: 30px;
  --text-headline-xs: 22px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.034em;
  --tracking-headline-md: -0.029em;
  --tracking-headline-sm: 0.033em;
  --tracking-body-md: 0.063em;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 200;
  --font-weight-body-md: 200;
  --radius-sm: 8px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 34px;
  --spacing-lg: 50px;
  --spacing-xl: 90px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.992,
                    0.506,
                    0.263
                ],
                "hex": "#fd8143"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 34,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 50,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 90,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Recife Text TEST",
                "fontSize": {
                    "value": 58,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.034,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Recife Text TEST",
                "fontSize": {
                    "value": 42,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.029,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Mono",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.033,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Mono",
                "fontSize": {
                    "value": 22,
                    "unit": "px"
                },
                "fontWeight": 200
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Mono",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 200,
                "letterSpacing": {
                    "value": 0.063,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as WizCommerce**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
sundayparis.com
Sunday Paris Creative
Sunday Paris
oka.com
OKA Ecommerce
OKA
primalpastures.com
Primal Pastures Ecommerce
Primal Pastures
wattspet.com
Watts Pet Ecommerce
Watts Pet