Skip to content
DesignMunkDesignMunk Submit a site

Forethought

forethought.ai
Fully agentic AI agents for end-to-end customer support
AI Software Webflow Homepage Manrope V2 Poppins V2
Share Visit site
forethought.ai DESKTOP · 1440
Forethought

AI Breakdown

Design export

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

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

# Forethought: Dark Hero With Stacked Logo Fan Animation

## Overview

Enterprise-first, confident, and technical. The site runs in dark mode with cool, teal-accented neutrals and generous headline sizes for quick scanning. Density alternates: airy hero and feature intros, followed by tighter metric and resource bands. Audience is CX leaders, operations, and support teams evaluating AI agents at scale.

## Page Structure

- Acquisition Notice Bar: a slim top strip announcing the Zendesk acquisition with a single inline link, full-bleed.
- Global Nav: dark row with logo cluster at left, multi-item product menus center/left, and a high-contrast Request Demo pill at right.
- Hero: oversized centered headline and short qualifier on a deep surface; no form—just a large typographic claim. A fanned stack of client/logo tiles with a neon-highlighted card anchors the lower edge.
- Proof—Three Pillars: a row of feature cards ("Fully Agentic," "Trained on Your Data," "Multi-Agent System") each with a looping animation and brief copy; stacks on small screens.
- Metrics Band: compact row of KPI tiles (ROI, response time, resolution rate) with a contextual link to the benchmark report.
- Multi-Agent System + Demo: section headline followed by an embedded interactive demo/video panel framed as a card.
- From Insights to Resolution: a row of solution cards with icon animation, headline, copy, and Learn More links.
- Customer Stories: long-form case study blocks mixing pull quotes, author lines, and a column of outcome stats; repeated pattern.
- Solutions by Role & Industry: grouped topic cards under ROLE, INDUSTRY, and INTEGRATION headings; a row of cards per group.
- Press: three editorial quotes with publication names and links; presented as lightweight cards.
- Resources Teaser: a small grid of report/blog tiles with CTAs and a View More link.
- Closing CTA: centered headline, single primary button, and a short set of helper links; followed by a multi-column mega-footer with product, channels, company, resources, and compliance links.

## Colors

- Primary (#F7FDFC): Frosted near-white used for text on dark surfaces, light sections, and CTA fills.
- Secondary (#318FA4): Teal accent for icons, highlights, and subtle interactive states.
- Tertiary (#194B64): Deep teal for borders, dividers, and subdued headings on light backgrounds.
- Neutral (#0D212D): Midnight slate for the primary background and dark UI chrome.
- brand-armor-wash (#040404): Pitch black used sparingly for announcement strips or deepest overlays.
- surface (#0D212D): Alias of Neutral; the default canvas color for sections.
- on-surface (#F7FDFC): Alias of Primary; default text color on dark surfaces.

## Typography

- Manrope V2 (headlines, 600): Used for headline-lg 70px, headline-md 38px, headline-sm 28px, and headline-xs 18px. It is self-hosted (custom), so agents should substitute Manrope (Google), Inter, or IBM Plex Sans for comparable geometry and x-height.
- Poppins V2 (body, 400 and small headings, 600): Body-md 16px for paragraphs, labels, and minor UI text; also used for the smallest emphasized headings. It is self-hosted (custom); substitute Poppins (Google), Nunito, or Open Sans.
- Pairing intent: geometric sans for headlines with a friendlier rounded sans for body yields clear hierarchy on a dark canvas; keep headlines at 600 and body at 400 for contrast without glare.

## Layout

- Spacing scale: xs 16, sm 26, md 40, lg 50, xl 94. Use xl for section paddings, lg for intra-section blocks, md for card gutters, sm/xs for item padding and control spacing.
- Grid: single-column narrative spine with rows of cards. Use fluid widths with a max content column; within feature and metrics sections, arrange a row of cards that collapse to a vertical stack.
- Contrast rhythm: default sections on surface (#0D212D); intersperse light cards (#FFFFFF) or light bands using Primary (#F7FDFC) for contrast and rest.
- Typography spacing: maintain 1.2 line-height for headings and 1.5 for body to keep dark-mode copy legible.

## Elevation & Depth

- Shadows are minimal and cool-tinted: sm and md use rgba(35,106,145,0.12) with 4–6px blur for light lift on cards and media embeds. Larger elevations are none.
- Depth relies on tonal contrast (light cards on dark canvas), crisp borders in Tertiary (#194B64), and generous whitespace. Avoid heavy drop shadows that bloom on dark backgrounds.

## Shapes

- Rounded sm 10px: buttons, input fields, small badges, and metric tiles.
- Rounded md 24px: feature cards, demo/video frames, and larger panels. Use a consistent radius per component class; do not mix radii within one module.

## Components

- Button—Primary: light fill (#F7FDFC) on dark sections with dark text (#0D212D), 64px height, 20px × 39px padding, 10px radius. Use for primary actions like Request Demo.
- Button—Secondary: same sizing as primary; use an outline or lower-contrast treatment on dark sections while keeping legibility with #F7FDFC text; reserve for supportive actions.
- Button—Link: text-only action in #F7FDFC with no radius; pair with chevron where helpful.
- Card: #FFFFFF background, #F7FDFC is the on-dark text color but on white cards switch to #0D212D for body; 24px radius; 36px × 44px padding; apply sm/md shadow sparingly.

### Announcement Bar
- Full-width strip using brand-armor-wash (#040404) with on-surface text (#F7FDFC); single inline link. Height compact; sits above the main nav.

### Global Nav with CTA
- Dark nav row on surface (#0D212D). Menu items inline; right-aligned primary button (64px height, 10px radius) draws focus.

### Hero Logo Fan
- Centered 70px headline (Manrope substitute) over the dark canvas. A fanned row of rounded logo tiles sits along the fold; the highlighted tile can glow in Secondary (#318FA4).

### Three-Pillar Feature Row
- Three cards in a row on wide screens, each with a small Lottie animation, headline-sm, and body-md. Cards use #FFFFFF with 24px radius.

### Metrics Trio
- Compact tiles with oversized numerals and short labels. Use 10px radius, minimal md shadow, and consistent vertical rhythm.

### Inline Demo Panel
- Embedded interactive demo/video inside a 24px-radius card; centered play/controls; supporting heading and short copy above.

### Case Study Block
- Quote area at left/top and a stat column at right/bottom. Each block ends with a Learn More link; maintain white-card pattern for readability.

### Mega Footer
- Multi-column lists under labeled headings; small body type (16px) with tight 16–26px spacing; social icons and compliance links follow.

## Do's and Don'ts

- Do keep default text as on-surface #F7FDFC over surface #0D212D for WCAG contrast; switch to #0D212D text only inside white cards.
- Do use sm (10px) radii for controls and md (24px) for content cards; mixing radii inside one module breaks consistency.
- Do space sections with xl (94px) top/bottom padding, and use md (40px) gaps inside repeated card rows.
- Don't introduce warm accent colors; stick to Secondary (#318FA4) and Tertiary (#194B64) for emphasis and dividers.
- Don't rely on heavy shadows; use tonal blocks and borders to separate layers.
- Don't place multiple primary CTAs in one viewport; pair one primary with a link-style secondary.

## Agent Prompt Guide

Quick color reference — Text: #F7FDFC; Background: #0D212D; Border: #194B64; Accent: #318FA4.

1) Build the dark hero
- Canvas: background #0D212D, 94px top/bottom padding.
- Heading: 70px/1.2, weight 600, Manrope (Google) as substitute; color #F7FDFC; max-width 12–14 words.
- Subcopy: 16px/1.5, Poppins (Google) substitute; color #F7FDFC at 80% opacity.
- CTA (optional): 64px height button, 20×39px padding, radius 10px; fill #F7FDFC, text #0D212D; place right of subcopy with 26px gap.

2) Three-pillar feature row
- Section: background #0D212D; heading 38px/1.2, 600, color #F7FDFC.
- Layout: row of cards (stack on mobile) with 40px gaps; each card #FFFFFF, radius 24px, padding 36×44.
- Inside card: icon/animation top, headline 28px/1.2, body 16px/1.5 in #0D212D, link in #194B64 or #318FA4.

3) Metrics trio
- Background: stay dark (#0D212D). Create three tiles with 10px radius, md shadow rgba(35,106,145,0.12) 0 6px 6px.
- Number: 70px/1.2, 600, color #F7FDFC; label 16px/1.5.
- Equalize tile heights; 40px internal gap; 50px row spacing above/below.

4) Inline demo panel
- Heading 38px/1.2 in #F7FDFC; short body 16px.
- Wrap embed in a #FFFFFF card, radius 24px, padding 36×44, shadow sm.
- Add a link-style action beneath in #194B64 with a chevron.

5) Press quotes band
- Light cards (#FFFFFF) on the dark canvas; 24px radius, 36×44 padding; quote set in 28px, source line in 16px/600. Maintain a 40px gutter between three cards.

## Similar Brands

- Zendesk: similar enterprise tone and dark-on-light contrasts; Zendesk leans warmer and uses heavier illustration.
- Intercom: big headlines and proof-driven sections; Intercom runs lighter and more colorful with rounded modules.
- Ada: AI support focus with stat-heavy storytelling; Ada often uses brighter gradients where Forethought stays cool and restrained.
- Freshdesk: comparable nav and solutions grids; Freshdesk is lighter with more conventional stock imagery.
- HubSpot Service Hub: proof bands and resource grids align; HubSpot uses orange accents versus Forethought's teal cools.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #f7fdfc;
  --color-secondary: #318fa4;
  --color-tertiary: #194b64;
  --color-neutral: #0d212d;
  --color-brand-armor-wash: #040404;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 70px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-manrope-v2: "Manrope V2";
  --font-poppins-v2: "Poppins V2";

  /* Rounded */
  --radius-sm: 10px;
  --radius-md: 24px;

  /* Spacing */
  --spacing-xs: 16px;
  --spacing-sm: 26px;
  --spacing-md: 40px;
  --spacing-lg: 50px;
  --spacing-xl: 94px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 20px 39px;
  --button-primary-height: 64px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 20px 39px;
  --button-secondary-height: 64px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 36px 44px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #f7fdfc;
  --color-secondary: #318fa4;
  --color-tertiary: #194b64;
  --color-neutral: #0d212d;
  --color-brand-armor-wash: #040404;
  --color-surface: #0d212d;
  --color-on-surface: #f7fdfc;
  --font-headline-lg: "Manrope V2";
  --font-headline-md: "Manrope V2";
  --font-headline-sm: "Manrope V2";
  --font-headline-xs: "Poppins V2";
  --font-body-md: "Poppins V2";
  --text-headline-lg: 70px;
  --text-headline-md: 38px;
  --text-headline-sm: 28px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 10px;
  --radius-md: 24px;
  --spacing-xs: 16px;
  --spacing-sm: 26px;
  --spacing-md: 40px;
  --spacing-lg: 50px;
  --spacing-xl: 94px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.992,
                    0.988
                ],
                "hex": "#f7fdfc"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.192,
                    0.561,
                    0.643
                ],
                "hex": "#318fa4"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.098,
                    0.294,
                    0.392
                ],
                "hex": "#194b64"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.129,
                    0.176
                ],
                "hex": "#0d212d"
            }
        },
        "brand-armor-wash": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.129,
                    0.176
                ],
                "hex": "#0d212d"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.992,
                    0.988
                ],
                "hex": "#f7fdfc"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 50,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 94,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope V2",
                "fontSize": {
                    "value": 70,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope V2",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope V2",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Poppins V2",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Poppins V2",
                "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 Forethought**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery