Design System

Clarity Automated Style Guide

The visual vocabulary behind our 24/7 AI consultation assistant — built to feel professional, calm, and credible for independent jewellers and watch sellers.

Foundations

Colour Palette

A restrained palette — warm near-white, cool near-black, and a muted gold accent that nods to jewellery without overplaying it.

Background #FAFAFA

Primary Text #14161A

CTA Fill #1A1A1A

Gold Accent #C9A24B

Secondary Text #6B6B6B

Success / Confirmed #2E7D5B

Foundations

Typography

Inter throughout — semibold for headings, regular for body. One technical, confident typeface, no serif pairing.

H1 / Bold Book more consultations, automatically

H2 / Semibold Your AI front desk, on WhatsApp

H3 / Semibold Instant replies, every hour of the day

Body / Regular Clarity Automated answers customer questions, checks availability, and books consultations directly in WhatsApp — so no enquiry goes cold overnight.

Small / Medium Used for labels, captions, and metadata.

Components

Buttons

Solid, rounded-medium (8px), no gradients. One clear primary action per screen.

Minimum 44px tap target on all buttons for mobile-first, DM-driven traffic.

Components

Card Components

Clean surfaces with soft elevation, used for features, testimonials, and status summaries.

Instant WhatsApp Replies

Every enquiry gets an answer within seconds, day or night, without a single missed message.

Live 24/7

Automated Booking

Consultations are checked, confirmed, and added to your calendar without any manual back-and-forth.

Synced to calendar

Simple for Your Team

No dashboards to learn — Clarity works quietly in the background of the app your staff already use.

No setup required

Sections

Call-to-Action Blocks

Every section carries one clear action — a dark hero-style block for primary conversion, and a light block for secondary invitations.

Never miss another enquiry

See how Clarity Automated books consultations on your WhatsApp, around the clock, without lifting a finger.

Book a Free Demo

Curious how it works with your shop?

Talk to our team about your current booking process and see where Clarity fits in.

Talk to Us

Imagery

Abstract Chat & UI Graphics

Simple chat-bubble mockups and line icons replace stock AI robot imagery — grounded in the real WhatsApp experience.

Hi! Thanks for reaching out to Aurelia Jewellers. Would you like to book a consultation this week?

Yes, Saturday afternoon works

Perfect — you're booked for Saturday at 2:00pm. See you then!

Chat Bubble

Represents conversation, always paired with rounded corners and soft borders.

Always-On Clock

Signals the 24/7 nature of the assistant without literal robot imagery.

Calendar Confirmation

Used wherever booking, scheduling, or confirmation is depicted.

Layout

Mobile-Responsive Layouts

Designed mobile-first for traffic arriving from Instagram DMs — single-column stacks, full-width CTAs, and generous tap targets.

Mobile — 360px

Book your consultation

Clarity replies instantly and finds you a time that works.

Get Started

Tablet — 768px

Answer every message automatically

Clarity handles enquiries across every channel your customers already use, keeping the layout airy and legible at wider widths.

See How It Works

Desktop — 1200px

One assistant, every consultation booked

On larger screens the same components simply gain breathing room — no new patterns, no redesign.

Book a Free Demo