Skip to content
DesignMunkDesignMunk Submit a site

Level AI

thelevel.ai
Full stack AI agents for the entire customer experience journey
AI Software Framer Homepage Instrument Sans
Share Visit site
thelevel.ai DESKTOP · 1440
Level AI

AI Breakdown

Design export

# Design brief: the Level AI 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/07095442/levelai-1440x7866.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07095442/levelai.webp
- On DesignMunk: https://designmunk.com/level-ai/

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

# Level AI: Enterprise CX Homepage Built as a Directory

## Overview

Level AI presents as confident, enterprise-ready, and utilitarian. The interface favors clarity over ornament: dark text on white surfaces, warm accents for emphasis, and generous but not theatrical spacing. Aim for fast scanning, clear routing, and proof-driven modules rather than heavy illustration. The overall feel should be serious, efficient, and trustworthy.

## Colors

- **primary (#1b1b1b):** Core ink for headlines, body copy, and dark surfaces like the nav bar.
- **secondary (#fa4c2d):** High-energy accent for ratings, highlights, and key indicators. Use sparingly for emphasis.
- **tertiary (#027948):** Positive/operational accent for success states or healthcare/ops cues.
- **neutral (#ffffff):** Page background and card surfaces.
- **border (#e5e7eb):** Hairline dividers, card outlines, table rules.
- **brand-opal-flame (#e8614e):** Warm supporting accent for gradients, charts, or hover glows.
- **brand-caramel-cream (#f7b38f):** Soft highlight backgrounds or data viz fills paired with warm accents.
- **surface ({colors.neutral}):** Default surface colour for containers and sections.
- **on-surface ({colors.primary}):** Default text/icon colour on light surfaces.

## Typography

- Instrument Sans is the single brand family across headings and body. It is freely available from Google Fonts, so agents can load it directly. Use the provided scales: headline-lg at 64px/1 with -0.031em tracking for heroes; headline-md at 48px/1.1 for section titles; headline-sm at 24px/1.1 for card and module headers; body-md at 16px/1.4 for copy. Suggested substitutes: Inter, Manrope, or system-ui if Instrument Sans cannot be loaded.
- Headline-xs specifies generic sans-serif at 18px/1.22 for small overlines and utility labels. System-ui/Segoe UI/Arial are appropriate fallbacks when a lightweight label style is needed.

## Layout

- Spacing uses a compact-to-generous scale: xs 6px for micro gaps, sm 16px for padding inside controls, md 40px for grid gutters and block spacing, lg 54px for intra-section rhythm, xl 96px for section top/bottom padding.
- Build sections as stacked bands on a white surface. Use md (40px) gaps between cards in multi-column grids; reserve xl (96px) to separate major narrative blocks (hero, use-case finder, product proof). Keep text lines short inside cards to preserve scanability.

## Elevation & Depth

- Depth is mostly flat. Only the small shadow token is used: rgba(254, 80, 0, 0.2) 0 6px 17px for subtle, warm emphasis on hoverable cards or key panels.
- When shadows are not appropriate, use border (#e5e7eb) for separation and tonal shifts (neutral white vs on-surface ink) for hierarchy.

## Shapes

- Two radii define the language: sm 4px for interactive controls (buttons, inputs); md 8px for containers (cards, featured panels). Rounded corners are modest and utilitarian—avoid larger radii.
- Links remain square (0px) when styled as button-link to signal textual interaction.

## Components

- Buttons
  - Primary: background #1b1b1b, text #ffffff, 4px radius, 40px height, 8px×16px padding. Use for main CTAs like "Get a demo".
  - Secondary: text #1b1b1b on transparent or light backgrounds, 4px radius, 40px height. Add a 1px border #e5e7eb if a stronger affordance is needed.
  - Link: text #1b1b1b, 0px radius. Use for inline actions and tertiary links like "Read story".
- Card: white background, ink text, 8px radius, 16px padding. Add border #e5e7eb or the sm shadow on hover.

### Global Header Navigation
- Black bar using #1b1b1b with white text links, compact 40px button on the right. Keep link spacing to sm (16px); use body-md for labels.

### Hero with Rating and Dual CTAs
- Headline uses headline-lg (64px). Stack a small rating line above, then a primary button and a secondary/links row. Vertical rhythm: md (40px) between lines, lg (54px) to the next section.

### Use-Case / Industry / Role Finder Grid
- Three grouped blocks, each a grid of links. Use headline-sm (24px) for group titles and body-md (16px) for descriptors. Cards or rows get 8px radius and md (40px) gaps.

### Case Study Links Rail
- A horizontal list of "Read story" link buttons. Keep items inline with sm (16px) gaps and use link style (0px radius). Consider secondary accent (#fa4c2d) as small markers.

### Interaction Intelligence Panel
- Dense product proof module showing coverage, iCSAT, and coaching items. Build as a white card container with 8px radius, 16px inner padding, and the warm sm shadow on hover to draw attention.

### Compliance & Certifications Row
- ISO, HIPAA, SOC2, PCI, GDPR badges in a muted strip. Use border (#e5e7eb) to delineate the band; keep icons in on-surface ink for legibility.

### FAQ Accordion
- Headers in headline-xs (18px) with 1px border #e5e7eb separators. Body copy in 16px; expand/collapse areas have 16px padding and 4px radius on focus states.

### Footer Directory
- Multi-column list of links including a dedicated "Compare" column. Use body-md for items with sm (16px) line spacing and subtle separators in #e5e7eb.

## Do's and Don'ts

- Do reserve #fa4c2d and #e8614e for highlights, ratings, and key actions; overuse dilutes their punch.
- Do keep section padding generous (xl 96px) and card gaps consistent (md 40px) to maintain enterprise clarity.
- Do use only the two radii—4px for controls, 8px for containers—to keep components cohesive.
- Don't add heavy or colored shadows beyond the provided sm glow; most surfaces should remain flat with borders.
- Don't mix additional fonts; stick to Instrument Sans and system sans for small labels.
- Don't place multiple primary buttons in a single viewport unless one is clearly secondary as a link style.

## Agent Prompt Guide

Quick reference
- Text: #1b1b1b
- Background: #ffffff
- Border: #e5e7eb
- Accent: #fa4c2d (supporting: #e8614e, #f7b38f)

1) Build hero with rating and CTAs
- Canvas #ffffff. H1 in Instrument Sans 64px/1, letter-spacing -0.031em, color #1b1b1b. Subline in 16px/1.4.
- Primary button: 40px height, 8px 16px padding, 4px radius, background #1b1b1b, text #ffffff.
- Secondary link button to the right using text color #1b1b1b and 0px radius. Vertical spacing: 40px between lines, 96px to next section.

2) Create a three-block finder grid (Use Cases, Industry, Roles)
- Each block: title in Instrument Sans 24px/1.1; items in 16px/1.4.
- Use white cards with 8px radius, 16px inner padding, 1px border #e5e7eb; grid gap 40px.
- Use small accent markers in #fa4c2d for key links.

3) Product proof panel ("Turn every interaction into action")
- Single container card with background #ffffff, text #1b1b1b, radius 8px, padding 16px.
- Sub-cards inside use border #e5e7eb and headline-xs 18px labels; apply sm shadow rgba(254,80,0,0.2) 0 6px 17px on hover.

4) Footer directory with Compare links
- 4–6 columns of text links in 16px/1.4, color #1b1b1b; column gaps 40px; section padding 96px top/bottom.
- Use #e5e7eb for subtle dividers and keep all links as button-link (0px radius).

## Similar Brands

- Observe.AI — Similar enterprise CX focus and dark-on-light clarity; Level AI leans warmer with stronger orange accents.
- Cresta — Comparable AI-assist positioning and proof modules; Cresta uses more gradients where Level AI stays utilitarian.
- Zendesk — Shared enterprise tone and directory-heavy footer; Zendesk's palette is cooler and more teal-forward.
- Gong — Bold sans typography and warm accents overlap; Gong is more sales-led and high-contrast than Level AI's restrained routing approach.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1b1b1b;
  --color-secondary: #fa4c2d;
  --color-tertiary: #027948;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-opal-flame: #e8614e;
  --color-brand-caramel-cream: #f7b38f;
  --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;
  --text-headline-lg-tracking: -0.031em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: -0.031em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.1;
  --text-headline-sm-tracking: -0.042em;
  --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.4;
  --font-instrument-sans: "Instrument Sans";
  --font-sans-serif: "sans-serif";

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

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

  /* 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: #1b1b1b;
  --color-secondary: #fa4c2d;
  --color-tertiary: #027948;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-opal-flame: #e8614e;
  --color-brand-caramel-cream: #f7b38f;
  --color-surface: #ffffff;
  --color-on-surface: #1b1b1b;
  --font-headline-lg: "Instrument Sans";
  --font-headline-md: "Instrument Sans";
  --font-headline-sm: "Instrument Sans";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Instrument Sans";
  --text-headline-lg: 64px;
  --text-headline-md: 48px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.031em;
  --tracking-headline-md: -0.031em;
  --tracking-headline-sm: -0.042em;
  --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: 40px;
  --spacing-lg: 54px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.106,
                    0.106
                ],
                "hex": "#1b1b1b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.298,
                    0.176
                ],
                "hex": "#fa4c2d"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.008,
                    0.475,
                    0.282
                ],
                "hex": "#027948"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-opal-flame": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.91,
                    0.38,
                    0.306
                ],
                "hex": "#e8614e"
            }
        },
        "brand-caramel-cream": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.702,
                    0.561
                ],
                "hex": "#f7b38f"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.106,
                    0.106
                ],
                "hex": "#1b1b1b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 54,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.031,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.031,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.042,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument Sans",
                "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 Level AI**, 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