Skip to content
DesignMunkDesignMunk Submit a site

Conway

conway.world
Decode digital performance in commerce for long-term growth.
Ecommerce Marketing Framer Homepage Tiempos
Share Visit site
conway.world DESKTOP · 1440
Conway

AI Breakdown

Design export

# Design brief: the Conway 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/30115127/conway-world-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/30115127/conway-world-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/conway/

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

# Conway: Ultra-Large Helvetica Headlines Over a Red Grid

## Overview

Conway is an editorial site for digital-commerce leaders. The tone is analytical, confident, and minimal—high contrast, monochrome first with a single signal red. Layouts are spacious and modular rather than dense; sections stack with clear breathing room and restrained ornament. Use Helvetica-style display for claims and a readable serif for arguments and summaries.

## Page Structure

- Header: left-aligned wordmark; right-aligned nav links and a compact Subscribe control; fixed over the hero.
- Hero: full-bleed illustration with a 3D red-grid tunnel; oversized display headline and a short serif subcopy centered; no immediate form.
- Dual rail content row: "Most popular" at left and "Recent insights" at right; each is a row of article cards.
- Featured: a wide article highlight presented as a larger text block with date and summary.
- Display interlude: a large display headline stack inviting exploration of resources; breaks the grid rhythm before the resource modules.
- AI & Technology module: section header, one-sentence blurb, a prominent resource tile with an Explore CTA, followed by a row of related articles.
- Brand Radar module: mirror of the above with a hero resource tile and a row of reports/posts.
- Webinars: compact list of two items, each with Watch and Learn More CTAs.
- Expert Interviews: multi-item list or grid with thumbnail/title and dual CTAs.
- Newsletter strip: brief opt-in pitch with a single "Read the archive" link; repeats toward the footer.
- Footer: multi-column links for Resources and Social plus legal; duplicated blocks collapse on smaller widths.

## Colors

- Primary (#000000): Core text, headlines, and icons.
- Secondary (#e63e29): Accent for calls to attention, artwork highlights, and selective emphasis.
- Neutral (#ffffff): Primary surface and card backgrounds.
- Border (#e5e7eb): Hairline dividers and card outlines.
- brand-attitude-grey (#7c7c74): Muted utility tone for metadata or secondary labels.
- brand-really-light-green (#e9eada): Occasional soft highlight background.
- surface ({colors.neutral}): Default page and card surface.
- on-surface ({colors.primary}): Default text on light surfaces.

## Typography

- Helvetica Neue Medium (custom): Used for display headlines (headline-lg 120px, headline-md 85px, headline-sm 60px). Not freely hosted; substitutes: Inter, IBM Plex Sans, or system Helvetica/Arial. Keep letter-spacing as specified (e.g., -0.03em on lg).
- Tiempos Text Regular (custom): Body copy (body-md 30px, 1.4 line-height). Not freely hosted; substitutes: Source Serif 4, Spectral, or Georgia.
- Helvetica Neue LT Pro Regular (custom): Secondary UI sans where regular weight is needed (navigation and small UI text). Not freely hosted; substitutes: Inter Regular, IBM Plex Sans, or Arial.
- sans-serif (generic) for headline-xs 42px: Use the platform default if the brand sans is unavailable; recommended stack: Inter, Helvetica, Arial, sans-serif. Keep 1.19 line-height.

## Layout

- Spacing scale: xs 6px for micro-gaps; sm 16px for button paddings and card insets; md 42px as the primary vertical rhythm between blocks; lg 80px for section padding; xl 110px for hero and display interludes.
- Grid: content stacks in single-column flow with rows of cards; dual-rail sections place two rows side by side on wide viewports. Generous outer gutters preserve white space; cards align to equal widths per row.
- Type scale drives layout: oversize headlines require ample top/bottom spacing (lg/xl) to avoid collisions with adjacent modules.

## Elevation & Depth

- Shadows are minimal: sm shadow (rgba(0,0,0,0.25) 0 4px 4px) is available for floating elements over imagery; otherwise md/lg/xl are none.
- Hierarchy relies on contrast, size, and spacing; borders in #e5e7eb separate lists and card grids.
- Inner inset highlight (rgb(246,247,242) 0 0 0 2px inset) can be used for focus states on inputs or cards.

## Shapes

- Radii: sm 4px for buttons and small pills; md 8px for cards and larger tiles.
- Corners are generally crisp; keep shapes consistent—avoid mixing radii within the same component cluster.

## Components

- Buttons
  - Primary: 40px height; 8px × 16px padding; 4px radius; background #000000; text #ffffff.
  - Secondary: 40px height; 8px × 16px padding; 4px radius; text #000000; no fill by default.
  - Link: text-only, 0px radius; color #000000.
- Card
  - Background #ffffff; text #000000; 8px radius; 16px internal padding; optional border #e5e7eb or sm shadow over imagery.

- Distinctive modules
  - Navigation Bar: left wordmark, right compact menu and Subscribe action; items set in the UI sans; maintain 16px horizontal link spacing and 4px-radius Subscribe if styled as a button.
  - Hero Banner: full-bleed artwork with centered stack—headline in headline-lg 120px, then body-md 30px intro; overlay text can invert to #ffffff as needed over dark imagery.
  - Dual Rail Posts: two adjacent rows—Most popular and Recent insights—each a row of article cards; keep equal image heights and 42px gaps between cards.
  - Featured Story Strip: single wide card with larger summary; use body-md for the blurb and a clear date label in brand-attitude-grey.
  - Resource Category Block: section header, one-line description, then a prominent tile (card component) with an Explore button and supporting articles beneath.
  - Webinars List: two items stacked or inline; each item pairs title/summary with Watch and Learn More actions (button-link or secondary style).
  - Expert Interviews Grid: a row of interview items with thumbnail, title, short line, and dual CTAs; keep consistent 8px card radii.
  - Newsletter Strip: short sentence plus one link (Read the archive); generous 80–110px vertical padding and no form field.
  - Footer: multi-column link lists separated by #e5e7eb dividers; repeat resource and social columns; small text set in the UI sans.

## Do's and Don'ts

- Do reserve #e63e29 for true accents (artwork, key links, or highlights); most UI should remain black on white.
- Do use headline-lg/-md sparingly—one display headline per section; scale spacing to lg/xl around them.
- Do keep button radii at 4px and cards at 8px; mixing within a row weakens the language.
- Don't introduce heavy shadows; use borders (#e5e7eb) or spacing for separation.
- Don't switch the serif into navigation or buttons; keep Tiempos Text for article text and summaries.
- Don't overfill the header illustration with text; maintain legibility with adequate overlay contrast.

## Agent Prompt Guide

Quick references:
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #e63e29

1) Build the hero
- Container background: full-bleed image; overlay a centered stack.
- H1: "Helvetica Neue Medium, Inter, Helvetica, Arial, sans-serif"; size 120px; line-height 1.2; letter-spacing -0.03em; color #ffffff if over dark, else #000000.
- Subcopy: "Tiempos Text Regular, Source Serif 4, Spectral, Georgia, serif"; size 30px; line-height 1.4; color #ffffff or #000000 to match contrast.
- Spacing: 110px top/bottom.
- Optional CTA: button-secondary (text #000000) or button-primary (bg #000000, text #ffffff), 4px radius.

2) Dual rail article rows
- Section container: max-width wide; padding-top 80px; bottom 80px; border-top #e5e7eb 1px optional.
- Left: "Most popular" header in Helvetica stack at 42px; Right: "Recent insights" same size.
- Each row: 3–4 cards using card component (bg #ffffff, text #000000, 8px radius, 16px padding). Gap between cards: 42px.

3) Resource category block
- Header: Helvetica stack at 60px; blurb in Tiempos Text 30px.
- Feature tile: card with 8px radius, 16px padding; include an Explore button (button-primary or secondary).
- Below: a row of smaller cards; use border #e5e7eb between items.

4) Webinar list
- Two items stacked with 42px vertical gap.
- Titles: Helvetica stack 42px; summaries: Tiempos Text 30px.
- Actions: "Watch" and "Learn More" as button-link (text #000000) or secondary.

5) Footer
- Background #ffffff; text #000000.
- Multi-column lists separated with 1px #e5e7eb borders; link style button-link; small gaps 16px; outer padding 80px.

## Similar Brands

- Stripe Press: similarly high-contrast editorial layouts; uses softer serif sizes and more generous margins, with fewer bright accents.
- MIT Technology Review: black/white with assertive accent color; denser typographic system and more complex category navigation.
- a16z Future: modern grotesk + serif pairing and modular article blocks; lighter use of oversized display compared to Conway.
- WIRED: bold headlines and monochrome grids with sparing color hits; more aggressive illustration and tighter card density than Conway.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #e63e29;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-attitude-grey: #7c7c74;
  --color-brand-really-light-green: #e9eada;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 120px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 85px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.014em;
  --text-headline-sm-size: 60px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.015em;
  --text-headline-xs-size: 42px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 30px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: -0.03em;
  --font-helvetica-neue-medium: "Helvetica Neue Medium";
  --font-sans-serif: "sans-serif";
  --font-tiempos-text-regular: "Tiempos Text Regular";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 42px;
  --spacing-lg: 80px;
  --spacing-xl: 110px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --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-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #e63e29;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-attitude-grey: #7c7c74;
  --color-brand-really-light-green: #e9eada;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Helvetica Neue Medium";
  --font-headline-md: "Helvetica Neue Medium";
  --font-headline-sm: "Helvetica Neue Medium";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Tiempos Text Regular";
  --text-headline-lg: 120px;
  --text-headline-md: 85px;
  --text-headline-sm: 60px;
  --text-headline-xs: 42px;
  --text-body-md: 30px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.014em;
  --tracking-headline-sm: -0.015em;
  --tracking-body-md: -0.03em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 42px;
  --spacing-lg: 80px;
  --spacing-xl: 110px;
}
```

### 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"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.902,
                    0.243,
                    0.161
                ],
                "hex": "#e63e29"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-attitude-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.455
                ],
                "hex": "#7c7c74"
            }
        },
        "brand-really-light-green": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.914,
                    0.918,
                    0.855
                ],
                "hex": "#e9eada"
            }
        },
        "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": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 42,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 110,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Helvetica Neue Medium",
                "fontSize": {
                    "value": 120,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Helvetica Neue Medium",
                "fontSize": {
                    "value": 85,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.014,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Helvetica Neue Medium",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.015,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 42,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Tiempos Text Regular",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "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 Conway**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Ecommerce →
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