Skip to content
DesignMunkDesignMunk Submit a site

Zing

zing.dev
Connecting Platforms and People to Create Incredible Experiences
AI Technology Webflow Homepage BDO Grotesk
Share Visit site
zing.dev DESKTOP · 1440
Zing

AI Breakdown

Design export

---
version: alpha
name: Zing
description: Connecting Platforms and People to Create Incredible Experiences
colors:
  primary: "#000000"
  secondary: "#9b7cef"
  tertiary: "#141c3c"
  neutral: "#f2f2f2"
  brand-moonlight-sonata: "#4c448c"
  brand-delicate-viola: "#d6d6dd"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: BDO Grotesk
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: BDO Grotesk
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.017em
  headline-sm:
    fontFamily: BDO Grotesk
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: BDO Grotesk
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: BDO Grotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 60px
  xl: 90px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 6px 6px 6px 18px
    height: 44px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 6px 6px 6px 18px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Zing: A Navy Pill CTA on a Dotted Canvas

## Overview

Zing's UI is focused, technical and confident: dense headlines in true black, generous neutral surfaces, and a single strong accent in lavender and deep navy. The tone is professional with a touch of playfulness from rounded pills and soft shadows. Spacing is roomy at section level, with compact internal padding to keep tools and cards efficient. When a token does not exist, prefer clarity: black on light surfaces, pill CTAs, and restrained ornament.

## Colors

- **primary (#000000):** Core text and high-emphasis elements; default link color for link-style buttons.
- **secondary (#9b7cef):** Accent lavender for icons, badges, highlights and subtle emphasis inside components.
- **tertiary (#141c3c):** Action color for primary buttons and key CTAs; also usable for active states on dark text chips.
- **neutral (#f2f2f2):** Light surface for page backgrounds, cards and strips; supports the dotted texture used in hero sections.
- **brand-moonlight-sonata (#4c448c):** Deeper brand accent for illustrations or secondary fills when secondary is too light.
- **brand-delicate-viola (#d6d6dd):** Quiet border and divider tone; use for card outlines and section separators.
- **surface ({colors.neutral}):** Alias to neutral for backgrounds.
- **on-surface ({colors.primary}):** Alias to primary for text placed on surface.

## Typography

All typographic tokens use BDO Grotesk at weights centered on 400 with tight tracking for headlines. This family is self-hosted (type: custom) and may not be freely redistributable; when BDO Grotesk is unavailable, substitute with Inter, Manrope, or Space Grotesk for similar x-height and geometry. Headline levels (lg/md/sm/xs) scale from 44px down to 23px with progressively looser line-heights (1.1–1.22) and slight negative letter-spacing at larger sizes for impact. Body text is 18px/1.5 for comfortable reading on light surfaces.

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 24 for inner component padding; lg 60 and xl 90 for section rhythm. Use lg or xl for vertical spacing between major bands; use md for card gutters and grid gaps. A standard responsive 12-column grid is appropriate; keep content widths generous with ample outer margins to preserve the airy feel on the neutral canvas. Align CTAs consistently along left edges of copy blocks to maintain scan paths.

## Elevation & Depth

Shadows are minimal: md provides soft lifts for floating UI mockups; sm and inner simulate hairline dividers using light grays instead of heavy depth. Larger elevations are disabled (lg/xl none). Where hierarchy is needed, prefer 1px borders in #d6d6dd, tonal shifts of #f2f2f2 versus white, and extra whitespace over stronger shadows.

## Shapes

Two radii define shape language: sm at 8px for cards and tiles; full at 9999px for pills and circular affordances. Primary and secondary buttons are always full-pill; chips and badges can adopt the same full radius for brand consistency. Avoid mixing square and rounded corners in a single cluster; use the 8px radius for any rectangular surface.

## Components

Buttons and cards are the foundation.
- Button Primary: background #141c3c, text #ffffff, height 44px, padding 6px 6px 6px 18px, rounded 9999px. Use for strongest CTAs.
- Button Secondary: text #000000 on transparent or neutral surface, same height and padding, rounded 9999px. Pair with a subtle #d6d6dd border if needed.
- Button Link: text #000000, no radius, inline use.
- Card: background #f2f2f2, text #000000, 8px radius, 16px padding; add a 1px #d6d6dd border or md shadow only when separation is required.

### Top Navigation
- Compact bar with left-aligned logo, text links, and a right-aligned primary CTA using #141c3c, 44px height, rounded 9999px.

### Twilio Partner Badge
- Small chip preceding hero headline; use #9b7cef icon on a light chip with 8px radius and a hairline border in #d6d6dd.

### Hero Showcase
- Left column: headline-lg (44px/1.1, -0.04em) in #000000 and a primary pill CTA.
- Right cluster: two neutral cards with md shadow and 8px radius, overlapping abstract lavender shapes.

### Client Logo Strip
- Row of brand marks inside neutral 8px-radius cards, each with 16px padding and borders in #d6d6dd to equalize weight.

### Services Tabs/Grid
- Four tiles (AI, Cloud Contact Centre, Experts on Demand, Support). Each is a card: 8px radius, 16px padding, headline-sm, link-style or secondary button.

### Testimonial Carousel
- Quotes in neutral cards with 8px radius; author block beneath. Use #d6d6dd dividers and optional md shadow for the active slide.

### News & Resources Cards
- Three-up grid of articles; each card uses 8px radius, 16px padding, a thin #d6d6dd border, and a link-style button for "View".

### Cookie Banner
- Full-width neutral bar with inner top border (inset) and a primary pill for "Accept All"; secondary pill for granular choices.

### Live Chat Widget
- Floating button using the primary pill style with a #9b7cef icon accent; expands into a neutral panel with 8px radius and md shadow.

## Do's and Don'ts

- Do reserve #141c3c for primary CTAs so the repeating pill remains the page's anchor.
- Do keep headline tracking at token values (-0.04em on lg, -0.017em on md) to match the tight visual voice.
- Do use #d6d6dd for borders and dividers; avoid dark borders that compete with text.
- Don't introduce new elevations; use md shadow sparingly and prefer borders/whitespace.
- Don't mix square corners with 8px cards; keep pills and chips consistently full-radius.
- Don't set secondary buttons too close to body text without spacing; they can read as copy if not isolated.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #f2f2f2
- Border: #d6d6dd
- Accent: #9b7cef (icons, highlights); Primary action: #141c3c

1) Build the hero header
- Background #f2f2f2, max-width container, left-aligned.
- Headline: BDO Grotesk (or Inter) 44px, line-height 1.1, letter-spacing -0.04em, color #000000.
- Primary CTA: height 44px; padding 6px 6px 6px 18px; background #141c3c; text #ffffff; border-radius 9999px.
- Add a small badge chip with 8px radius, hairline border #d6d6dd and a #9b7cef icon.

2) Create a 3-up card grid for News
- Grid gap 24px; each card background #f2f2f2; border 1px solid #d6d6dd; border-radius 8px; padding 16px.
- Card title: BDO Grotesk/Inter 28px, line-height 1.21, color #000000.
- Link-style button at bottom: color #000000, no radius.

3) Services tiles with secondary actions
- Four cards using 8px radius and 16px padding; grid gap 24px.
- Tile heading: 28px/1.21; body: 18px/1.5.
- Action: Secondary pill (transparent), text #000000, height 44px, padding 6px 6px 6px 18px, border 1px #d6d6dd, radius 9999px.

4) Testimonial card
- Container: background #f2f2f2; border-radius 8px; padding 16px; box-shadow: rgba(0,0,0,0.08) 0 20px 24px -4px, rgba(0,0,0,0.03) 0 8px 8px -4px.
- Quote: 23–28px headline token, color #000000.
- Author line: 18px body, #000000 with a top border #d6d6dd and 16px padding-top.

## Similar Brands

- Twilio: Similar neutral backgrounds with bold black type; Zing diverges by using a navy primary CTA instead of Twilio's brighter reds.
- Intercom: Shares rounded pills and soft shadows; Intercom leans blue gradients while Zing sticks to lavender accents and flat fills.
- Zendesk: Clean, low-elevation cards and calm neutrals; Zing's typography runs tighter and darker with a repeating navy CTA.
- MessageBird: Communication-first brand with purple accents; Zing is more restrained with borders and avoids heavy gradients.
- Aircall: Uses pill CTAs and muted logo strips; Aircall's green accent swaps for Zing's lavender and navy.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
humblytics.com
Humblytics AI
Humblytics
Revenue-based analytics and A/B testing with Stripe-verified results.
Homepage · 21 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 22 hours ago