Skip to content
DesignMunkDesignMunk Submit a site

Lev8

lev8.com
Turn the live web into people and business intelligence.
AI Marketing Next.js Tailwind Homepage Inter
Share Visit site
lev8.com DESKTOP · 1440
Lev8

AI Breakdown

Design export

# Design brief: the Lev8 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/07092038/lev8-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07092038/lev8-com-featured.webp
- On DesignMunk: https://designmunk.com/lev8/

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

# Lev8: Playful Prompt Bar Fronting Hardcore Sales Intelligence

## Overview

Lev8's interface is friendly, modern B2B: mostly white surfaces, mid-gray text, and restrained amber highlights. It should feel spacious and confident rather than dense — sections breathe with large vertical rhythm. Copy is direct and task-oriented, with examples that read like real prompts and messages. Playful micro-illustrations add warmth but shouldn't distract from the data and benchmarks driving trust.

## Colors

- **primary (#3f3f46):** Graphite text for headlines, body, icons, and default borders.
- **secondary (#fcbc14):** Amber accent for highlights, badges, and small UI flourishes.
- **tertiary (#fce667):** Light lemon accent for subtle emphasis, backgrounds of status chips, or paired with secondary for highlights.
- **neutral (#ffffff):** Paper-white base for pages, cards, and inputs.
- **brand-kenp-zome-black (#2b241c):** Deep umber brand flavor; reserve for illustrations or occasional thematic blocks.
- **brand-grass-skirt (#e2d9c1):** Warm wheat support tone for marketing swatches and backgrounds.
- **surface ({colors.neutral} → #ffffff):** Default surface color for containers and cards.
- **on-surface ({colors.primary} → #3f3f46):** Primary text on light surfaces; use for icons and controls.

## Typography

Headlines use Geist Sans at weight 500 for a firm but friendly voice: 60px/1.2 (headline-lg) for the hero, 36px/1.22 (headline-md) and 32px/1.25 (headline-sm) for section titles. Small headings and labels use Inter at 18px/1.22 (headline-xs) to bridge into body text. Body copy is Inter 16px/1.5 (body-md) for legibility on white.
- Geist Sans in tokens is self-hosted (custom). Agents should substitute freely available Geist (Google) first; Inter and Manrope are acceptable alternates with similar x-height and geometry.
- Keep headline weight at 500; avoid heavier weights that would harden the tone.

## Layout

Spacing is simple and generous: 120px (xl) sets section vertical rhythm; use it for top/bottom padding on major blocks. 24px (lg) and 20px (md) manage gaps within cards, grids, and between headings and content. 10px (sm) supports compact control spacing and chip groups; 2px (xs) is for hairlines and micro-adjustments. A 12-column responsive grid with wide gutters fits the visual language; center content and keep cards on a light, airy canvas.

## Elevation & Depth

Depth is minimal. Most containers sit directly on white with a small shadow available: rgba(0,0,0,0.1) 0 4px 6px -1px, 0 2px 4px -2px. Larger shadow tiers are unused; hierarchy relies on whitespace, headline scale, and subtle accent color. Use shadows sparingly for floating inputs and hero prompts; otherwise, keep cards flat.

## Shapes

The system speaks in soft rectangles: 20px corners for cards and panels (rounded.sm) and full-pill (9999px) for buttons, chips, and input fields. Pills suggest clickability; 20px signals a content container. Avoid mixing sharper radii — consistency carries the brand's friendly tone.

## Components

Buttons and card primitives:
- Primary Button: #1f2223 background, #ffffff text, 32px height, 8px×12px padding, full pill radius (9999px). Use for main CTAs like "Get Started".
- Secondary Button: #ffffff background, #3f3f46 text, 32px height, pill radius; place on white surfaces with a subtle outline only when necessary.
- Link Button: #3f3f46 text only, no radius.
- Card: #ffffff background, #28251e text, 20px radius, 20px×12px padding; optional small shadow.

Distinctive components on this page:
### Hero Prompt Bar
- 20px-radius card on white with small shadow. Left-aligned prompt copy in Inter 16/1.5 (#3f3f46). Right-aligned pill CTA using the Primary Button spec. Amber accents (#fcbc14 / #fce667) highlight affordances.
### Capability Icon Row
- Four compact items under the hero ("Find the right people...") set in Inter 16 with small glyphs. Spacing md between items; keep text color #3f3f46.
### Benchmark Panels
- Four equal cards comparing Quantity, Precision, Cost, Speed. Headings in Geist 32/1.25, body in Inter 16. Use secondary/tertiary for bars and markers; keep containers 20px radius with xl section padding.
### Play Selector Tabs
- Horizontal pill chips for "Find Customers / Follow Up Leads..." using full radius 9999px. Active state uses #1f2223 text on #ffffff or an amber underline; maintain 10–20px gap between chips.
### Result Table
- Company table with sticky header (Inter 16/500) and rows in Inter 16/400. Dividers can use #3f3f46 at low opacity; cells padded md.
### Intent Signal Feed
- Vertical list of market events (hiring spikes, funding). Each item is a 20px-radius card with md padding and optional sm shadow; timestamps and labels in Inter 14–16.
### Multi-Channel Composer
- Two-column panel showing Email/LinkedIn outputs. Headline in Geist 32/1.25; message body in Inter 16. Primary actions use pill buttons; keep wide whitespace around content.
### Integrations Strip
- Grid of partner logos on white tiles with 20px corners. Use lg gaps and xl vertical padding to maintain the airy feel.

## Do's and Don'ts

- Do set major section paddings to 120px to preserve the roomy rhythm.
- Do use Geist 500 for all headings (60/36/32) and Inter 16/1.5 for body.
- Do reserve #fcbc14 and #fce667 for highlights, badges, and small indicators; overuse dulls their impact.
- Don't add heavy drop shadows; stick to the provided small shadow for floating inputs only.
- Don't mix corner radii; keep cards at 20px and interactive chips/buttons as full pills.
- Don't bury the primary CTA inside dense copy — pair the hero prompt with a clear pill button using #1f2223 on #ffffff.

## Agent Prompt Guide

Quick reference — use these every time:
- Text: #3f3f46 (primary)
- Background: #ffffff (neutral/surface)
- Border/divider: #3f3f46 at low opacity (e.g., 12%)
- Accent: #fcbc14 (secondary) with #fce667 (tertiary)
- Card radius: 20px; Chip/Button radius: 9999px

1) Build the hero
- Page background #ffffff. Center container with max-width ~1200px.
- H1 set in Geist 500 at 60px line-height 1.2, color #3f3f46. Supporting line in Inter 16/1.5.
- Below, a 20px-radius card (background #ffffff, small shadow: rgba(0,0,0,0.1) 0 4px 6px -1px, rgba(0,0,0,0.1) 0 2px 4px -2px) containing an input styled text block in Inter 16.
- Primary pill CTA inside/right: background #1f2223, text #ffffff, height 32px, padding 8px 12px, radius 9999px.

2) Four-up benchmark grid
- Section padding 120px top/bottom.
- Grid of 4 cards, each #ffffff, radius 20px, md internal padding.
- Headline Geist 500 at 32px/1.25; body Inter 16/1.5.
- Use #fcbc14 and #fce667 for bars, markers, and small badges.

3) Play selector with pills
- Row of filter chips using #ffffff background, text #3f3f46, radius 9999px, horizontal gap 20px, vertical padding 8px.
- Active chip can show an underline or dot in #fcbc14; keep label in Inter 16.

4) Result table
- Header Inter 16/500, rows Inter 16/400; text #3f3f46.
- 1px dividers using #3f3f46 at ~12% opacity; row height ~56px; card container radius 20px.

5) Integrations strip
- Dense logo grid on white; each tile #ffffff with radius 20px and lg gaps; section padding 120px to keep it airy.

## Similar Brands

- Clay: Similar white canvas, pill CTAs, and sales automation narrative; Clay leans more towards utility tables, Lev8 adds stronger benchmarks and examples.
- Apollo: B2B data and outreach with a denser UI; Lev8 is more spacious and example-led.
- Clearbit: Clean marketing site with emphasis on enrichment; Lev8 mirrors the tone but drives deeper into multi-channel workflows.
- Crunchbase: Data-first brand with tables and signals; Lev8 applies a softer, more playful shell.
- Exa: Direct competitor in search; Lev8's benchmark panels and pill components feel more product-story oriented.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #3f3f46;
  --color-secondary: #fcbc14;
  --color-tertiary: #fce667;
  --color-neutral: #ffffff;
  --color-brand-kenp-zome-black: #2b241c;
  --color-brand-grass-skirt: #e2d9c1;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 60px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.22;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.25;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-geistsans-245d8d: "__GeistSans_245d8d";
  --font-inter: "Inter";

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

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: #1f2223;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 12px;
  --button-primary-height: 32px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 12px;
  --button-secondary-height: 32px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #28251e;
  --card-rounded: var(--radius-sm);
  --card-padding: 20px 12px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #3f3f46;
  --color-secondary: #fcbc14;
  --color-tertiary: #fce667;
  --color-neutral: #ffffff;
  --color-brand-kenp-zome-black: #2b241c;
  --color-brand-grass-skirt: #e2d9c1;
  --color-surface: #ffffff;
  --color-on-surface: #3f3f46;
  --font-headline-lg: "__GeistSans_245d8d";
  --font-headline-md: "__GeistSans_245d8d";
  --font-headline-sm: "__GeistSans_245d8d";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 60px;
  --text-headline-md: 36px;
  --text-headline-sm: 32px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 20px;
  --radius-full: 9999px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --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.247,
                    0.247,
                    0.275
                ],
                "hex": "#3f3f46"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.737,
                    0.078
                ],
                "hex": "#fcbc14"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.902,
                    0.404
                ],
                "hex": "#fce667"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-kenp-zome-black": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.169,
                    0.141,
                    0.11
                ],
                "hex": "#2b241c"
            }
        },
        "brand-grass-skirt": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.886,
                    0.851,
                    0.757
                ],
                "hex": "#e2d9c1"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.247,
                    0.247,
                    0.275
                ],
                "hex": "#3f3f46"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__GeistSans_245d8d",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__GeistSans_245d8d",
                "fontSize": {
                    "value": 36,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__GeistSans_245d8d",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "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 Lev8**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
workleap.com
Workleap AI
Workleap