Skip to content
DesignMunkDesignMunk Submit a site

Weav

weav.com
Stop circling with bots, start solving with specialists.
AI Technology Framer Homepage STK Bureau Sans
Share Visit site
weav.com DESKTOP · 1440
Weav

AI Breakdown

Design export

---
version: alpha
name: Weav
description: Stop circling with bots, start solving with specialists.
colors:
  primary: "#fadbe5"
  secondary: "#8c9cec"
  tertiary: "#0000ee"
  neutral: "#2052eb"
  border: "#374151"
  brand-yellow-groove: "#f9b92e"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: STK Bureau Sans Medium
    fontSize: 53px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.016em
  headline-md:
    fontFamily: STK Bureau Sans Medium
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.39
    letterSpacing: -0.076em
  headline-sm:
    fontFamily: STK Bureau Sans Medium
    fontSize: 33px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-xs:
    fontFamily: STK Bureau Sans Light
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: -0.011em
  body-md:
    fontFamily: STK Bureau Sans Light
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 2px
  sm: 10px
  md: 24px
  lg: 54px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Weav: Electric Blue Hero, Wavy Divider, Pink Logos Band

## Overview

A brand-first dark mode: bold electric blue surfaces with soft blush type, a playful wave motif, and minimal shadows. Target audience is B2B teams adopting AI support, so copy remains concise and direct. Spacing is generous but not loose; sections land in clear, scannable blocks. When tokens don't dictate a choice, default to serious, confident, and slightly playful through color, not motion or ornament.

## Colors

- **primary (#fadbe5):** Blush highlight for primary buttons, hero text, and light surfaces like the logo strip.
- **secondary (#8c9cec):** Soft lavender for subtle accents, badges, and hover states.
- **tertiary (#0000ee):** Hyperlink blue reserved for inline links and small interactive text.
- **neutral (#2052eb):** Electric royal blue for page surfaces, hero backgrounds, and cards.
- **border (#374151):** Graphite edge for 1px dividers, input outlines, and card delineation.
- **brand-yellow-groove (#f9b92e):** High-energy micro-accent for icons or small markers; use sparingly.
- **surface ({colors.neutral}):** Default dark surface — same electric royal blue.
- **on-surface ({colors.primary}):** Default text on dark surfaces — blush for strong contrast.

## Typography

Headlines use STK Bureau Sans Medium (custom, self-hosted) at four sizes. Body and lighter headings use STK Bureau Sans Light (custom, self-hosted). These files are not Google-hosted; when an agent cannot load them, substitute with obtainable families that share a geometric, modern tone:
- Inter (Google) — primary fallback; use 500 for Medium, 300 for Light.
- Manrope (Google) — similar x-height and clean terminals.
- Plus Jakarta Sans (Google) — balanced geometric forms suitable for UI.
Roles:
- headline-lg: 53px/1.21, weight 500 — page/hero H1.
- headline-md: 42px/1.39, weight 500 — top section headers.
- headline-sm: 33px/1.10, weight 500 — sub-section leads and CTA headers.
- headline-xs: 26px/1.4, weight 300 — tertiary headings or card titles.
- body-md: 20px/1.4, weight 300 — all body copy and captions.

## Layout

Spacing scale is compact-to-generous: 2, 10, 24, 54, 80px. Use xs/sm for intracomponent gaps, md (24) for card padding and grid gutters, lg (54) for section padding, and xl (80) for hero/top/bottom breathing room. A standard 12-column grid suits these steps; align content blocks and feature tiles to 3 or 4-column spans with md gutters. Section transitions often use the wave divider to reset contrast between blue and pink surfaces.

## Elevation & Depth

Shadows are intentionally sparse. Only the 'sm' shadow is in play — a deep, soft drop used for hero device imagery or rare overlays. Most hierarchy relies on tonal contrast (neutral surface vs. blush type), scale (53/42/33px headings), and crisp 1px borders in #374151. Cards typically sit flat; use borders or the pink surface to differentiate regions instead of additional shadows.

## Shapes

Two radii define the language: sm 4px and md 8px. Buttons use 4px for a crisp, tool-like feel. Cards and prominent panels use 8px. Links are square-edged (0px) to read as text, not buttons. Avoid any larger rounding to preserve the system's sturdy, professional tone.

## Components

Buttons and Card
- Primary button: 40px tall, 8px/16px padding, 4px radius. Background #fadbe5, label #2052eb.
- Secondary button: 40px tall, 8px/16px padding, 4px radius. Text in #fadbe5 on blue surfaces; keep backgrounds transparent.
- Link button: text-only, 0px radius; color #fadbe5 or #0000ee for inline links.
- Card: background #2052eb, text #fadbe5, 16px padding, 8px radius. Add a 1px #374151 border for separation when the card sits on a blue surface.

### Hero with Phone Mockup
- Surface #2052eb with on-surface text #fadbe5.
- H1 uses headline-lg (53px/500). Subcopy body-md (20px/300).
- Primary CTA left of secondary; both 40px tall. Phone image may use the sm shadow for depth.

### Wavy Separator
- Full-width SVG between sections. Use #fadbe5 fill against #2052eb to transition into the logo strip. Height aligns to xl spacing; allow ~80px amplitude.

### Brand Logos Strip
- Background #fadbe5, text and logo tint #2052eb. Use md (24px) vertical padding and equal logo sizing with 24–32px gaps.

### Feature Index Grid
- Three or six tiles linking to AI Agents, Inbox, Chatbots, Ask Weav, Training, Reporting.
- Each tile: 8px radius card with 16px padding, 26–33px headings, 20px body. Add 1px #374151 border to separate from the blue page background.

### "Problem solved" Split
- Left copy stack (headline-md 42px) and right visual. Maintain lg (54px) outer padding and md gutters.

### Unified Workspace Section
- Dark surface with three stacked capability callouts ("Generate replies...", etc.). Use headline-sm (33px) for the section lead and 20px body for bullets.

### Blog Teaser List
- Two or three posts with titles in headline-xs (26px) and metadata in body-md (20px, 300). Use #0000ee for post links.

### Developer API Promo
- Compact panel featuring a headline-sm and a single link to docs. Keep it on blue with #fadbe5 text; avoid additional backgrounds.

## Do's and Don'ts

- Do keep on-surface text in #fadbe5 over #2052eb; this contrast defines the brand in dark mode.
- Do reserve #0000ee for inline links; use #fadbe5 for button labels.
- Do add a 1px #374151 border to cards or tiles placed on blue; otherwise they visually merge with the surface.
- Don't round corners beyond 8px; the system uses only 4px and 8px.
- Don't introduce extra shadows; use only the provided sm shadow for key imagery.
- Don't place the wave divider on the same color on both sides; it needs the blue→pink contrast to read.

## Agent Prompt Guide

Quick color reference — text: #fadbe5, background: #2052eb, border: #374151, accent: #8c9cec.

1) Build the hero
- Section background: #2052eb. H1: 53px/1.21, weight 500, font-family: "STK Bureau Sans Medium", Inter, system-ui; color: #fadbe5.
- Body: 20px/1.4, weight 300, font-family: "STK Bureau Sans Light", Inter, system-ui; color: #fadbe5 at 90% opacity.
- Primary button: 40px height, 8px 16px padding, 4px radius; background #fadbe5; text #2052eb.
- Secondary button: 40px; transparent background; text #fadbe5.
- Add an SVG wave at the bottom with fill #fadbe5 transitioning to a next section on #fadbe5.

2) Three-up feature grid
- Container on #2052eb; create 3 columns with 24px gutters.
- Each tile: 8px radius, 16px padding, 1px border #374151; title 33px/500, copy 20px/300; link color #0000ee.

3) Logo marquee section
- Full-width band: background #fadbe5; heading color #2052eb.
- Place logos in #2052eb (or 60% tint) with 24–32px spacing. Section padding: 54px top/bottom.

4) Final CTA bar
- Blue panel (#2052eb) with headline 33px/500 in #fadbe5; body 20px/300.
- Primary button as above; optional link button (0px radius) in #fadbe5.

## Similar Brands

- Intercom — bold blue, product-first hero; Weav's wave and blush text feel more playful.
- Zendesk — calm, editorial surfaces; Weav skews darker with higher color contrast.
- Ada — AI support visuals; Weav's palette is brighter and more saturated.
- Help Scout — friendly support tone with simple UI blocks; Weav uses stronger dark-mode color and a distinctive wave motif.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 23 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 23 minutes ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 3 hours ago