Skip to content
DesignMunkDesignMunk Submit a site

Juxtapose

juxtapose.com
Doing few things and doing them well
Finance Webflow Homepage neue Montreal Reckless
Share Visit site
juxtapose.com DESKTOP · 1440
Juxtapose

AI Breakdown

Design export

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

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

# Juxtapose: Monumental Serif Headlines, Quiet Sans Everywhere Else

## Overview

Editorial, confident, and minimal. The UI prioritizes spacious layouts, large typographic statements, and quiet interaction chrome. Audience: founders, executives, and LPs evaluating the firm's philosophy and portfolio. The tone is serious with moments of warmth through imagery and an illustrated section, leaning more museum-like than app-like.

## Page Structure

- Utility Bar: thin, full-width announcement strip with a soft gradient; single centered link.
- Header/Nav: compact single row; wordmark left, concise links center, menu icon right; no background box, sits on the page surface.
- Hero: oversized centered display headline in multiple lines; asymmetrically placed image tiles around it; minimal sub-elements plus a small down-arrow "see more" link.
- Company Names Row: a loose row of portfolio company names set wide apart, functioning as a marquee of recent work.
- Firm Intro Illustration: full-width illustrated band with a centered paragraph explaining the model and a secondary text link CTA.
- Portfolio/CEO Features: vertical stack of feature panels highlighting individual CEOs; each includes name, role, multi-paragraph story, and pull-quote; global CTAs link to all CEOs and all companies.
- Foundational Beliefs: numbered list [01]–[04] with short statements and a link to deeper content.
- News/Chronicle: concise list of recent articles with source labels and "View all news" link.
- Footer: dense multi-column link area with primary nav repeats, a long portfolio company index, contact and legal links.

## Colors

- Primary (#0d0400): Deep ink for headlines, body text, icons, and key UI accents.
- Secondary (#7c7c7c): Muted slate for secondary text, metadata, and hairline rules.
- Tertiary (#addee8): Gentle seafoam accent for subtle highlights or illustrative elements.
- Neutral (#f9f9f9): Soft paper background for the overall surface.
- Surface ({colors.neutral}): Alias of neutral; use for cards and section backgrounds.
- On-surface ({colors.primary}): Alias for text and icons placed on neutral surfaces.

## Typography

- Reckless (custom): Display serif for major statements. Used at headline-lg 144px and headline-md 90px, weight 300 with tight negative letter-spacing for drama. Not freely hosted; suggested substitutes: Playfair Display, Fraunces, or Cormorant from Google Fonts.
- Neue Montreal (custom): Neutral grotesque for headings below display and for all body copy, navigation, and UI. headline-sm 56px and headline-xs 35px handle section leads; body-md 21.6px at 1.48 line-height is the reading size. Not freely hosted; suggested substitutes: Inter, IBM Plex Sans, or Archivo (all Google).
- Typographic hierarchy: One oversized Reckless headline per section max; all supporting content in the sans to preserve contrast between voice and detail.

## Layout

Spacing scale drives rhythm: xs 8px for micro gaps; sm 20px for inline paddings; md 58px for inner section spacing; lg 90px for section separators and hero margins; xl 140px for major breaks and above-the-fold negative space. Content typically sits in a generous single column; media tiles float beside hero copy and become stacked on smaller viewports. Cards use 16px inner padding by component token.

## Elevation & Depth

No shadows across sizes (all tokens are none). Hierarchy comes from typographic scale, tonal contrast (primary on neutral), and generous whitespace. When separation is needed, use secondary (#7c7c7c) hairline rules or 1px borders rather than shadows.

## Shapes

Corners are quiet and modern. Cards use rounded sm at 8px. Buttons use rounded full at 9999px, producing pill CTAs. Media and illustrations can align to 8px corners for consistency.

## Components

- Buttons
  - Primary: background #0d0400, text #e8e6e5, pill radius 9999px, padding 7px 16px, fixed height 57px.
  - Secondary: visually identical to primary per token; reserve for lower-priority actions when two buttons appear.
  - Link: unboxed text link in #0d0400 with no radius.
- Card: neutral background #f9f9f9, text #0d0400, 8px radius, 16px padding; no shadow.

### Announcement Bar
- Full-width strip above the header; compact height. Set body-md 21.6px text centered; link styled as button-link. Background may use a gradient in implementation; text color #0d0400.

### Floating Image Hero Mosaic
- Centered headline-lg (144px Reckless, 300) with staggered image tiles left/right. Images use 8px corners; spacing lg–xl around the block; a small down-arrow link below.

### CEO Feature Panel
- Two-column on wide screens: left column intro (headline-xs 35px name + role), right column long-form body-md and a pull-quote block. Vertical stack on mobile with md spacing between elements; optional "View all CEOs/companies" links below.

### Foundational Beliefs List
- Numbered items [01]–[04]; each item title in headline-xs 35px and description in body-md. Use md spacing between items and lg above/below the section.

### News List Item
- Single-column list. Each item shows a small category label in secondary, bold headline as link styled with button-link, and a short source/byline line. Use a 1px secondary border or rule between items.

### Portfolio Name Row
- A horizontal row of large company names/logos arranged with ample gap; items link to company pages; use responsive wrap on small screens.

## Do's and Don'ts

- Do reserve Reckless for primary statements (h1/h2). Use Neue Montreal for all supporting headings, body, nav, and UI.
- Do keep sections generously spaced (lg or xl) and avoid stacking multiple CTAs.
- Do use secondary (#7c7c7c) for metadata and any hairline dividers.
- Don't introduce drop shadows; separation should come from spacing or 1px borders.
- Don't add new accent colors; keep any highlight work to tertiary (#addee8) sparingly.
- Don't compress the pill button height—maintain 57px for clarity and brand consistency.

## Agent Prompt Guide

Quick color reference
- Text: #0d0400 (primary)
- Background: #f9f9f9 (neutral / surface)
- Border: #7c7c7c (secondary)
- Accent: #addee8 (tertiary)

1) Hero with floating images
- Background #f9f9f9. Center a headline in Reckless 300 at 144px, line-height 1.2, letter-spacing -0.05em, color #0d0400. Surround it with 2–4 image tiles using 8px radius and lg (90px) spacing. Place a small button-link "See more" below.

2) Firm intro band
- Full-width section with xl (140px) top and bottom padding. Centered copy in Neue Montreal body-md 21.6px, 1.48 line-height, color #0d0400. Add a button-link "View our approach". Optional subtle 1px top border in #7c7c7c.

3) CEO feature panel
- Two-column layout (40/60). Left: name in Neue Montreal headline-xs 35px and role in body-md 21.6px secondary #7c7c7c. Right: narrative in body-md 21.6px. Include a pull-quote block in Neue Montreal 21.6px italic if available. Section padding lg 90px, inner gaps md 58px.

4) Foundational beliefs list
- Four items in a single column. Each number "[01]" in secondary #7c7c7c, title in Neue Montreal headline-xs 35px, description in body-md 21.6px. Use md (58px) gap between items and lg (90px) above/below.

5) News list
- Stack three items. Each headline is a link styled with color #0d0400 and no underline on rest; show category label in #7c7c7c above. Separate items with a 1px rule in #7c7c7c; outer padding md 58px.

## Similar Brands

- Sequoia Capital — similarly sparse and editorial, though it leans greener and uses heavier photography.
- Andreessen Horowitz (a16z) — shares the editorial rhythm but is denser with magazine-style modules and darker themes.
- General Catalyst — big serif moments with open white space; relies more on color fields than Juxtapose.
- Bessemer Venture Partners — modular news/portfolio blocks and restrained palette; typographic scale is less extreme than Juxtapose.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0d0400;
  --color-secondary: #7c7c7c;
  --color-tertiary: #addee8;
  --color-neutral: #f9f9f9;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 144px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 90px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.053em;
  --text-headline-sm-size: 56px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: 0.021em;
  --text-headline-xs-size: 35px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 21.6px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.48;
  --font-reckless: "Reckless";
  --font-neue-montreal: "Neue Montreal";

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

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 58px;
  --spacing-lg: 90px;
  --spacing-xl: 140px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #e8e6e5;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 7px 16px;
  --button-primary-height: 57px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: #e8e6e5;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 7px 16px;
  --button-secondary-height: 57px;
  --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: #0d0400;
  --color-secondary: #7c7c7c;
  --color-tertiary: #addee8;
  --color-neutral: #f9f9f9;
  --color-surface: #f9f9f9;
  --color-on-surface: #0d0400;
  --font-headline-lg: "Reckless";
  --font-headline-md: "Reckless";
  --font-headline-sm: "Neue Montreal";
  --font-headline-xs: "Neue Montreal";
  --font-body-md: "Neue Montreal";
  --text-headline-lg: 144px;
  --text-headline-md: 90px;
  --text-headline-sm: 56px;
  --text-headline-xs: 35px;
  --text-body-md: 21.6px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.053em;
  --tracking-headline-sm: 0.021em;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 58px;
  --spacing-lg: 90px;
  --spacing-xl: 140px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.016,
                    0
                ],
                "hex": "#0d0400"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.678,
                    0.871,
                    0.91
                ],
                "hex": "#addee8"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.976,
                    0.976,
                    0.976
                ],
                "hex": "#f9f9f9"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.976,
                    0.976,
                    0.976
                ],
                "hex": "#f9f9f9"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.016,
                    0
                ],
                "hex": "#0d0400"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 58,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 90,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 140,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Reckless",
                "fontSize": {
                    "value": 144,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.05,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Reckless",
                "fontSize": {
                    "value": 90,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.053,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Neue Montreal",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.021,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Neue Montreal",
                "fontSize": {
                    "value": 35,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Neue Montreal",
                "fontSize": {
                    "value": 21.6,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## 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 Juxtapose**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Finance →
billow.so
Billow Finance
Billow
rekordsoftware.com
Rekord Finance
Rekord
orderx.com
OrderX AI
OrderX
tilt.com
Tilt Finance
Tilt