Voicely

01Colors

• Cool paper#FAFBFFBackground · 76.5% · WhitePage and section background; a barely blue white.
• White#FFFFFFSurface · WhiteHero panel, floating UI cards, toasts, icon tiles, Growth plan button.
• Hairline#EBECEFBorder · 8.2% · WhiteFrame rails, cell dividers, tab separators, card outlines.
• Ink#25262AText · 2.5% · GraySecond line of each heading, card titles, stat numerals, Starter button fill (#252726).
• Slate#5B5C5EMuted text · 3.4% · GrayFirst, lighter line of the two-tone headings.
• Fog gray#8C8D91Muted text · 1% · GrayBody copy, subheads, captions and nav links (#909398).
• Console charcoal#2A2B2DSurface · 4% · GrayDark product panels: hero console, Live calls list, chat transcript.
• Electric blue#2372FDAccent · 0.5% · BlueThe one accent: "-20%" badge, booked calendar days, progress bars, stepper dot, active tab underline, icon strokes, agent waveform avatars (#2A69F2).
• Ice blue#EFF4FFSurface · WhiteActive tab fill and the "IN PROGRESS" badge background.
• Button gray#EBEEF3CTA · WhiteLogin and Talk to sales buttons; section eyebrow chips are a neutral #ECECEC.
• Midnight navy#152951Surface · 0.1% · BlueGrowth plan card, glowing blue at the top and falling to #0D0E13 at the bottom.
• Sky#A3CFFCImage · 3.8% · BlueLight tone of the hero mountain photo; the darkest image pixels reach #196CFD.
• Live green#61D596Status · GreenLive dot, "Answering" and "HOT" labels.
• Recording red#EF616DStatus · RedRed dot in the "Recording" chip of the chat mockup.

Cool monochrome plus one blue. About 77% of the area is near-white paper with a faint blue cast, and every neutral leans cool (blue-gray borders and grays). Electric blue is the only accent: it appears in icons, progress bars, booked days, the discount badge and the active tab, and it is echoed at large scale only once, in the hero photo recolored to blue. Dark charcoal is used for product panels, not sections, so the page stays light. The navy Growth card is the single inverted block, which makes the recommended plan obvious. Green and red are kept to tiny status dots and labels; integration brand colors (HubSpot orange, Google Calendar blue) show up only as small logos.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

A single-family system. Manrope covers display, body, numbers and UI, and hierarchy comes from size, gray value and the two-tone heading trick rather than a second typeface. This keeps the product mockups and the marketing copy visually identical, which makes the UI fragments feel native. The cost is personality: nothing in the type is memorable on its own.

Hierarchy

At the 1200px capture: hero H1 about 56px medium with tight leading; section H2s about 44px; use-case H3 about 30px; stat and price numerals 44 to 48px regular; card titles about 18px; body 15 to 16px gray; eyebrows and captions 12px. Weight contrast is low (regular to medium almost everywhere); emphasis comes from the gray-to-ink color step and size jumps.

03Layout

Single-column page inside a framed canvas: two full-height hairline rails define the content column, and every section is a stack of square cells divided by hairlines. Each section repeats the same intro (gray eyebrow chip, two-tone H2, gray subhead, centered), followed by a grid. Order: navbar, hero with console mockup and toasts, logo strip, features bento, use-case tabs with split panel, stats band, pricing. The nav also links FAQ and Contact, which are not in the captured shots.

Alignment

mixed

Density

balanced

Width

framed

Corners

sharp

Depth

hairline

Grid

Content column about 1084px between rails. Navbar in three zones. Logo strip has 5 equal cells (label plus 4 logos). Features bento: row 1 is about 2/3 + 1/3, row 2 is three equal thirds. Use cases: 4 equal tabs above a 50/50 split. Stats: 4 equal cells. Pricing: 3 equal columns with the middle one inverted.

Spacing

About 80px above each section intro and about 60 to 80px from the intro to its grid. Cells pad about 24px. Eyebrow, H2 and subhead sit roughly 16 to 24px apart. Floating UI snippets carry soft, wide drop shadows; everything else is flat with hairlines.

04Sections 9

1. 01
   Navbar

   Lowercase "voicely" wordmark with waveform glyph on the left; centered links Features, Pricing, FAQ, Contact in gray; a square gray "Login" button on the right. A hairline below with crosshair marks where it meets the frame rails.

2. 02
   Hero

   Gray chip with a three-avatar stack "Trusted by fast-growing startups & teams.", centered two-tone headline, two-line gray subhead. No primary CTA button: the interactive console below acts as the call to action. Background is white with a faint square grid; a blue pixel-dithered mountain photo rises from the bottom half and fills the frame width.

3. 03
   Product mockup

   Translucent charcoal voice console centered over the photo: status bar (gray dot, Ready, 00:00, Inbound · Reschedule, dotted level meter, US flag, American English), transcript row with a blue "Luna" agent badge and "This side luna from voicely. It’s great talking to you..", prompt chips "Make a phone call" and "Tell me a joke", a voice picker "Sophie" with flag and chevron, and a white square play button. Two white toasts float off its corners: "Answered in 0.6s / Inbound · Northwind Dental" (left) and "Booked Fri, 2:15 PM / Synced to Google Calendar" (right).

4. 04
   Logo cloud

   Bordered row of five cells: "Trusted by experts at leading companies" in gray text, then Google, Microsoft, stripe and amazon logos in light gray.

5. 05
   Bento grid

   "Features" chip, H2 "One agent, every conversation covered." and subhead. Five cells, each a dotted-grid illustration panel holding a UI fragment, then an icon tile, title and two-line description: Answers every inbound call instantly (Live calls list), Qualifies leads while they’re warm (lead score card), Books and reschedules (October calendar), Resolves support end to end (Zendesk ticket stepper), Runs outbound follow-ups (dialer button with avatar orbit, "Calling 1,284 leads · 312 connected").

6. 06
   Tabs

   "Use cases" chip and H2 "Built for the calls your team dreads." Four equal tabs with icons: Sales (active, ice-blue fill and blue underline), Support, Scheduling, Collections.

7. 07
   Use cases

   Sales tab content as a 50/50 split. Left: H3 "Turn every inquiry into a qualified meeting.", gray paragraph and a two-cell bordered stat box (3.4× more meetings booked, 9s speed to lead). Right: on a dotted panel, a dark chat transcript between Marcus Reed (inbound lead · Northwind) and the agent, with a "Recording" chip and a "Demo booked · Synced to HubSpot" footer.

8. 08
   Stats

   Four cells divided by hairlines, each with a small blue icon tile, a large numeral and a gray caption: 12M+ Conversations handled, 0.8s Average response time, 68% Calls resolved end to end, 30+ Languages and accents.

9. 09
   Pricing

   "Pricing" chip, H2 "Simple plans that scale with your calls.", subhead "Every plan includes a 14-day free trial. No setup fees, cancel anytime." and a Monthly/Yearly toggle with a blue "-20%" badge. Three columns: Starter ($49 / month, 500 minutes, dark "Start free trial"), Growth (navy card with dot screen and top glow, "Most popular" chip, $199 / month, 3,000 minutes, white "Start free trial"), Enterprise (Custom, Unlimited volume, gray "Talk to sales"). Each has a hairline divider and a list of features with blue check marks.

05Components 21

• Eyebrow chip

  Square gray box (#ECECEC) with a 1px slightly darker border, 12px Manrope medium in dark gray, centered above each H2.

• Avatar-stack chip

  Same square gray chip holding three overlapping circular retro photo avatars and the trust line.

• Login button

  Square, about 44px tall, button-gray fill (#EBEEF3) with a hairline border and ink text.

• Primary button (dark)

  Full-width square bar in ink (#252726) with white 15px text and a soft drop shadow below. Starter "Start free trial".

• Inverted button

  Full-width white square bar with ink text on the navy Growth card.

• Secondary button (gray)

  Full-width #EDEEF2 bar with a hairline border and ink text. Enterprise "Talk to sales".

• Billing toggle

  Segmented control in a gray square tray: white "Monthly" tile when active, gray "Yearly" with a solid blue "-20%" badge.

• Tabs

  Four equal-width cells with a small icon and a label; the active cell gets an ice-blue fill and a 2px blue bottom border, inactive ones are gray on white.

• Icon tile

  28 to 32px white square with a hairline border and soft shadow, holding a blue outline icon. Used beside feature titles, stats and plan names (translucent on navy).

• Toast card

  White rectangle with a hairline border and wide soft shadow: round blue waveform icon or photo avatar, a dark title line and a gray metadata line.

• Voice console

  Translucent charcoal panel with about 4px radius and a backdrop blur showing the photo through; a header strip, a transcript area and a footer of bordered dark chips, a dropdown and a white play button.

• Live calls list

  Charcoal card with header "Live calls" and a green-dot "3 agents answering"; three bordered rows with avatar or phone icon, name or number, intent and either green "Answering" or a timer (0:57, 0:42).

• Lead score card

  White card: avatar, name and title, a large "87" with green "HOT", three labelled blue progress bars on gray tracks, a divider and a HubSpot "Deal created in HubSpot" row.

• Mini calendar

  Google Calendar icon, "October", "4 booked today", and a 2x7 grid of square gray day cells with booked days in solid blue and white numerals.

• Ticket stepper

  Zendesk logo, "Ticket #20417", uppercase "IN PROGRESS" badge in ice blue; vertical stepper with a filled blue first dot and hollow gray dots with faded labels for pending steps.

• Dialer orbit

  Black circular button with a white phone-outgoing icon inside two pale concentric rings, four retro cut-out avatars around it, gray caption below.

• Chat transcript

  Charcoal window: header with avatar, name, metadata and a "Recording" chip with a red dot; user bubbles light gray, right-aligned with avatars; agent bubbles dark with a hairline border and a blue waveform avatar on the left; footer row with HubSpot logo tile.

• Stat cell

  Icon tile, 44 to 48px regular numeral, 13px gray caption; hairline dividers between cells. A smaller two-cell bordered version sits in the use-case panel.

• Pricing card

  Icon tile and plan name, gray description, large price with small "/ month" and a minutes caption, full-width button, hairline divider, check list with thin blue check marks. "Most popular" is a translucent bordered chip on the navy card.

• Logo strip cell

  Equal bordered cells with centered light-gray logos; the first cell holds a two-line gray label instead.

• Frame rails and crosshairs

  Full-height 1px rails at both edges of the content column, with small plus marks where horizontal rules cross them.

06Graphics 9/14

• Dashboard / product UI

  Product UI fragments rather than a full dashboard: the hero voice console, a Live calls list, a lead-qualification card, an October booking calendar, a Zendesk ticket stepper, an outbound dialer and a chat transcript with a HubSpot sync footer.

• Charts & data viz

  Only light data viz: three horizontal blue progress bars on gray tracks in the lead card, a dotted level meter in the console header, and the calendar grid with booked days in blue. No line, area, bar or donut charts.

• Photography

  Hero photo of snowy mountain ridges recolored to a blue monotone (sky blue to cobalt) and fading to white at the top. Small retro or vintage cut-out portrait photos, some black and white, are used as avatars throughout.

• Icons

  Lucide-style outline icons with a thin stroke of about 1.5px, mostly in electric blue: phone-incoming, target, calendar-check, headphones, phone-outgoing, trending-up, calendar-clock, circle-dollar-sign, messages-square, timer, check-check, languages, sprout, rocket, building. Gray on inactive tabs and white on dark. US flag icons in the console.

• Logo cloud

  Light-gray logo strip with Google, Microsoft, Stripe and Amazon. Integration marks in context: Google Calendar, HubSpot and Zendesk.

• Avatars / people

  Retro cut-out photo portraits in circles (trust chip, toast, Live calls, lead card, dialer orbit, chat). The AI agent is shown as a blue circle with white waveform bars instead of a face.

• Gradients

  Growth pricing card goes from a blue radial glow at the top (#152951) to near-black navy (#0D0E13). The hero photo fades into white at its top edge, and the toast icon is a blue gradient disc.

• Texture, grain or pixel

  The hero photo is rendered as a pixel or halftone mosaic, with square dots clearly visible along the ridge line and around the console. A fine dot screen covers the Growth card.

• Grid lines / patterns

  Faint square grid behind the hero copy, dot-grid fills in every feature illustration panel and behind the chat mockup, full-height hairline frame rails, and crosshair (+) registration marks at rule intersections.

Not usedIllustration · 3D renders · Device or browser frames · Cursors / pointers · Maps

07Motion

ModerateFrom stills; motion is inferred from cues

• implied
  Live transcript typing

  The console shows "Ready 00:00" and a sentence trailing off with "..", which suggests streaming captions as the agent speaks.

• implied
  Audio level meter

  A dotted waveform in the console header implies a live voice level animation.

• implied
  Toast pop-ins

  "Answered in 0.6s" and "Booked Fri, 2:15 PM" float off the console corners, the usual setup for staggered entrance animations.

• implied
  Dialer ripple pulse

  Concentric pale rings around the outbound call button suggest a pulsing ring effect, with avatars possibly orbiting.

• implied
  Live call timers

  Call durations (0:57, 0:42) and an "Answering" state imply ticking timers and status changes.

• implied
  Tab switching

  Use-case tabs with an active underline swap the split panel content.

• implied
  Billing toggle

  The Monthly/Yearly segmented control implies a sliding indicator and price swap.

08Copy

Every Customer Call, Handled Perfectly.

AI voice agents that answer, qualify, book, support, and close conversations - 24/7, without hiring more people.

Tone

Plain and outcome-focused, with short benefit lines ("No hold music, no voicemail.") and concrete numbers (0.6s, 3.4×, 68%). Demo dialogue is realistic sales talk. Small slips: "This side luna from voicely" with lowercase names and a double period, and a spaced hyphen in place of a dash in the subhead.

09Style

Cool, orderly and engineered: a blueprint-like grid with one burst of electric blue, selling reliability more than personality.

Accessibility

Most body and caption text is fog gray (#8C8D91) on near-white, about 3.2:1, which fails WCAG AA for normal text; nav links and plan descriptions are similar. Pending stepper labels and the logo strip are even lighter (about #C8C9CB and #BFC0C2), which is acceptable only as decoration. On the navy card, gray captions ("3,000 minutes / month") are dim. Mockup text runs 10 to 12px. Status is paired with words ("Answering", "HOT", "Recording", "IN PROGRESS"), so it is not color-only. The hero has no visible text button for the main action, and no focus states are shown.

10Takeaways