Skip to content
DesignMunkDesignMunk Submit a site

Primefold

primefold.ai
Ask. Understand. Act.—turn signals into strategy with Primefold XI.
AI Analytics Framer Homepage Inter Stack Sans
Share Visit site
primefold.ai DESKTOP · 1440
Primefold

AI Breakdown

Design export

# Design brief: the Primefold 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/04175827/primefold-ai-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04175827/primefold-ai-featured.webp
- On DesignMunk: https://designmunk.com/primefold/

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

# Primefold: Frosted Product Pills and Apricot Calls-to-Action

## Overview

Primefold is a calm, product-first B2B AI brand: confident ink text, warm apricot accents, and white surfaces. The tone is serious but approachable, prioritizing clarity over decoration. Spacing is generous and sections breathe; copy is concise and direct. Use this system when you need to explain complex capability through cards, tags, and short prompts.

## Colors

- **primary (#1a1814):** Core ink for headlines, body text, and dark UI elements.
- **secondary (#848481):** Muted gray for metadata, captions, and subdued borders.
- **tertiary (#f99d72):** Apricot accent for primary actions, tags, and highlights.
- **neutral (#ffffff):** Base canvas for pages, cards, and inputs.
- **surface (#ffffff):** Card and panel surface; identical to neutral.
- **on-surface (#1a1814):** Standard text color on white and light surfaces.

## Typography

Headlines use Stack Sans Headline at 64/48/20/18px with weight 400 for a modern, low-contrast sans that reads large without shouting. Stack Sans Headline is freely available from Google Fonts; load directly. If a fallback is required, use the system sans stack (system-ui, Helvetica, Arial) to preserve width and x-height. Body text is Inter 16px/1.5 at 400 for UI clarity and dense information; it's also on Google Fonts. Keep weights regular; reach for 500–600 only for small UI labels and emphasis. The headline-xs level uses the default sans-serif stack for compact subheads and labels.

## Layout

Spacing follows a spacious rhythm: xs 6px for micro gaps, sm 16px for inline elements, md 24px for block spacing, lg 40px for intra-section structure, and xl 120px for section padding above and below. Build sections as stacked bands on the neutral surface. Use cards to contain content groups and maintain consistent gutters with 24–40px internal padding. Grids present as simple two- and three-column layouts that collapse cleanly to one column.

## Elevation & Depth

Depth is conveyed through a crisp ring and light outline rather than drop shadows. Use the sm measured shadow (rgba(38, 57, 90, 0.16) 0 0 0 1px, rgba(38, 57, 91, 0.1) 0 1px 1px 0) on cards, pills, and floating docks. Larger shadows are none; hierarchy comes from whitespace, scale, and the apricot accent.

## Shapes

The system is binary: cards are softly rounded at 8px, while interactive pills (buttons, status chips, product switcher) are fully rounded at 9999px. Text links remain square (0 radius). Use 9999px to indicate primary interactivity or selected state; use 8px for content containers and supportive elements.

## Components

Buttons
- Primary button: background #f99d72, text #211e1c, 40px tall with 10px 14px padding, fully rounded 9999px. Use for key calls to action.
- Secondary button: alternate text color on the same apricot background, 40px tall, 9999px radius. Reserve for secondary emphasis or when contrast on imagery requires light text.
- Link button: text-only, color #1a1814, 0 radius.

Card
- White background (#ffffff), ink text (#1a1814), 8px radius, 20px internal padding, subtle 1px ring (sm shadow) for separation.

Distinctive components on this page

### Video hero with CTA pair
- Left-aligned headline at 64px/1.13; body in Inter 16px. Two pills at 40px height: the discovery action and a sales action. Section spacing: xl (120px) to the next band.

### Product switcher dock
- A row of compact cards labeled Platform, Experience Intelligence, Real Estate Intelligence, More coming. Each is a white surface with 8px radius and the sm ring; active/hover can pick up the apricot accent.

### Intelligence cards (XI and RI)
- Two feature cards using the card token (8px radius, 20px padding) with a small status pill and an Explore link. Section heading uses headline-md at 48px.

### Testimonial carousel tiles
- Quote, name, role, and a small Explore link per tile. Each tile is a white card (8px radius) with the sm ring and 24–40px internal spacing.

### Solutions by role grid
- Compact 2–3 column list of roles (Asset manager, CX, HR, Marketing, Product). Each item is text-forward with a link; rows use md (24px) spacing.

### Trust list
- Three columns describing hosting, traceability, and workspace privacy. Minimal iconography, white cards with 8px radius and the sm ring.

### Outcomes / case studies
- Headline plus metric/story blocks in cards. Keep headings at headline-sm (20px) and body at Inter 16px for readability.

## Do's and Don'ts

- Do use #f99d72 for primary actions and status tags; keep other accents neutral.
- Do space sections with xl (120px) top/bottom and use md–lg (24–40px) inside cards.
- Do keep buttons at 40px height and fully rounded; mix only one primary CTA per section.
- Don't add heavy drop shadows; rely on the sm ring and whitespace for separation.
- Don't stack more than three card columns; prefer two on desktop for readability.
- Don't introduce new grays; use #848481 for secondary text and borders.

## Agent Prompt Guide

Quick color reference
- Text: #1a1814
- Background: #ffffff
- Border/ring: #848481 at 1px, or use sm shadow
- Accent: #f99d72

1) Build the hero
- Background: #ffffff over a video/image
- H1: "Everything answers. If you simply ask." Stack Sans Headline, 64px, weight 400, line-height 1.13, letter-spacing 0.02em, color #ffffff if over imagery or #1a1814 on white
- Body: Inter 16px/1.5, color #ffffff or #1a1814
- CTAs: Primary pill 40px tall, 10px 14px, background #f99d72, text #211e1c, radius 9999px; Secondary pill 40px, radius 9999px
- Section spacing: 120px bottom

2) Product switcher dock
- Container: horizontal stack with gap 24px; each item is a card: background #ffffff, text #1a1814, radius 8px, padding 20px, shadow "rgba(38, 57, 90, 0.16) 0px 0px 0px 1px, rgba(38, 57, 91, 0.1) 0px 1px 1px 0px"
- Active item underline or small pill accent using #f99d72

3) Intelligence cards (two-up)
- Section heading: Stack Sans Headline 48px/1.17, color #1a1814
- Each card: 8px radius, 20px padding, white background, sm shadow; subhead at 20px headline-sm, body Inter 16px; Explore link styled as button-link (color #1a1814)

4) Trust section (three columns)
- Section title: Stack Sans Headline 48px
- Columns: white cards, 8px radius, 20px padding, sm shadow; use small status pill (radius 9999px) when needed; keep internal gaps at 24px

## Similar Brands

- Stripe — spacious white surfaces, subtle rings instead of heavy shadows; diverges with a cooler accent palette.
- Linear — strict typography and generous breathing room; Primefold is warmer and more conversational.
- Notion — monochrome first strategy with unobtrusive color; Primefold adds a single apricot accent for actions.
- Retool — product cards and clear sectioning; Primefold is less developer-oriented and more narrative.
- Anthropic — large headlines and minimal UI chrome; Primefold leans more on cards and pills for structure.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1a1814;
  --color-secondary: #848481;
  --color-tertiary: #f99d72;
  --color-neutral: #ffffff;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.13;
  --text-headline-lg-tracking: 0.02em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.17;
  --text-headline-md-tracking: 0.02em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.4;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-stack-sans-headline: "Stack Sans Headline";
  --font-sans-serif: "sans-serif";
  --font-inter: "Inter";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #211e1c;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 10px 14px;
  --button-primary-height: 40px;
  --button-secondary-background-color: var(--color-tertiary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 10px 14px;
  --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-sm);
  --card-padding: 20px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1a1814;
  --color-secondary: #848481;
  --color-tertiary: #f99d72;
  --color-neutral: #ffffff;
  --color-surface: #ffffff;
  --color-on-surface: #1a1814;
  --font-headline-lg: "Stack Sans Headline";
  --font-headline-md: "Stack Sans Headline";
  --font-headline-sm: "Stack Sans Headline";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Inter";
  --text-headline-lg: 64px;
  --text-headline-md: 48px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: 0.02em;
  --tracking-headline-md: 0.02em;
  --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: 8px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 120px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.094,
                    0.078
                ],
                "hex": "#1a1814"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.518,
                    0.506
                ],
                "hex": "#848481"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.976,
                    0.616,
                    0.447
                ],
                "hex": "#f99d72"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.094,
                    0.078
                ],
                "hex": "#1a1814"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Stack Sans Headline",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Stack Sans Headline",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Stack Sans Headline",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

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

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears