Brand & designUpdated with every release

Our brand, in the open.

Everything you need to put WA.cr on a page: the logos as SVG, the colour and type system the product is built from, the shared component library rendered live, and how every share card is drawn for the platform it lands on.

WA.cr wordmark on white
WA.cr wordmark on ink
WA.cr brand mark
02Colour

Four colours, one accent.

The palette is lifted straight off the logo. Orange is the only colour that ever asks for attention; everything else is ground.

  • Brand orange#fe771c
    palette.brandOrange

    The chat-bubble mark and the primary accent: buttons, focus rings, the one emphasised word in a heading.

    • brandOrangeLight
      #ff924a
    • brandOrangeDark
      #d2620f
  • Brand blue#3d6792
    palette.brandBlue

    The ".cr" in the wordmark and the secondary accent. It doubles as the informational status ink, so there is never a second blue.

    • brandBlueLight
      #5a86b3
    • brandBlueDark
      #2b4a6a
  • Ink#121212
    palette.brandInk

    The "WA" of the wordmark in light mode, and the page background in dark mode.

  • Paper#ededed
    palette.brandPaper

    The "WA" of the wordmark in dark mode, and body text on ink.

Reserved

WhatsApp green is kept for WhatsApp-action UI only — a Send on WhatsApp button, a read receipt — never as a brand surface. If a surface is ours, it is orange.

  • palette.waGreen
    #25D366
  • palette.waGreenDark
    #128C7E

Semantic roles

Components never name a palette colour. They name a role, and the role resolves per theme through an HSL CSS variable.

RoleLightDarkUsed for
--background#ffffff#121212The page: white in light, brand ink in dark.
--foreground#121212#edededBody text: ink on white, paper on ink.
--primary#fe771c#fe771cBrand orange in both themes. A tenant accent overrides this one role only.
--primary-foreground#121212#121212The label painted on orange: ink (7.02:1), never paper (2.67:1).
--border#e4e4e7#27272aHairlines, tile edges, input outlines.
--muted-foreground#71717a#a1a1aaSubheads, captions, secondary copy.
--ring#fe771c#ff924aThe focus ring: orange in light, the lighter orange in dark so it clears the ink.
--raised#fafafa#1f1f23A surface one step above the card: menus, popovers, the drawer.

Contrast. The label on orange is ink, at 7.02:1 — not paper, which manages only 2.67:1 on the same orange and fails AA.

Status pairs. Success, warning, info and danger are each an ink on its own soft chip, and every pair clears AA. A mid-ramp green is legible as a dot and illegible as text, so a status is never a coloured block.

Tenant accents. A tenant’s brand accent overrides only --primary (see Pill tone="primary" below), never a brand-* colour.

Every value on this page is read from @wacr/tokens at build time, so it cannot drift from the product.

03Typography

Three voices, one page.

A display face for the headline, a workhorse for everything readable, and a mono for the technical kicker.

Clash Display

Display — headings & share-card headlines · variable 400–700 · self-hosted

Send. Sell. Serve.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

By Indian Type Foundry, via Fontshare. Loaded once with next/font and served from our own origin — no third-party font request, ever. The share cards embed the Semibold.

Inter

Body & UI — the sans stack · 400/500/600/700

Connect a WhatsApp number, send your first message, and decide once you see it land. Every action leaves a trail, every message is priced before it is sent, and the console reads the same on a phone at a shop counter as it does on a desk.

Inter heads the stack, then ui-sans-serif, system-ui, … — the system face stands in when Inter is absent, so the product never waits on a font download.

JetBrains Mono

Kickers, code & the technical voice

● 03 TYPOGRAPHY · 1200×630 · #fe771c

JetBrains Mono, then ui-monospace, SFMono-Regular, … Used for chapter eyebrows, hexes, paths and anything a developer will copy.

Type scale

  • Aaxs · 0.75rem
  • Aasm · 0.875rem
  • Aabase · 1rem
  • Aalg · 1.125rem
  • Aaxl · 1.25rem
  • Aa2xl · 1.5rem
  • Aa3xl · 1.875rem
  • Aa4xl · 2.25rem
  • Aa5xl · 3rem
  • Aa6xl · 3.75rem

Weights

  • Aanormal · 400
  • Aamedium · 500
  • Aasemibold · 600
  • Aabold · 700
  • Headings. Clash Display, tight tracking, one emphasised phrase in orange at most.
  • Body. Inter stack, never below the sm step for anything a person has to read.
  • Figures. Tabular numerals whenever numbers sit in a column, so 3,35,174 lines up under 12,004.
  • Grouping. en-IN digit grouping: 3,35,174 not 335,174. Currency as text (₹1,499), never an icon.
04Voice

Say it plainly.

The product is written in Indian English for people running a business, not for people evaluating a platform.

  • Casing

    Do: WA.cr, in every sentence — copy, comments, commit messages, changelog.

    Don’t: Any other case in prose. Lowercase only inside a hostname such as app.wa.cr.

  • Spelling

    Do: en-IN: colour, finalise, centre, organisation, licence.

    Don’t: color, finalize, center — or mixing the two on one screen.

  • Plain, benefit-led

    Do: "Send your first message in five minutes." Say what happens for the reader.

    Don’t: "Leverage our omnichannel engagement layer." Platform jargon and empty superlatives.

  • Partner

    Do: "Partner" for anyone who sells WA.cr onward — it is a relationship, not a channel.

    Don’t: "Reseller", "affiliate" or "agent" in anything a customer reads.

  • Currency

    Do: ₹1,499 as text, with en-IN grouping, next to a neutral glyph if one is needed.

    Don’t: A currency-symbol icon standing in for the amount, or a receipt icon meaning "money".

  • The sign-off

    Do: "WA.cr by qTap is a KDC keeda" — the lockup, verbatim, wherever the maker is named.

    Don’t: "Powered by", "Made with love by", or any rewording of the lockup.

05The design system

One package, every surface.

The console, the storefront, this site, the help centre and the blog all render from the same components — so the brand is a dependency, not a document.

Tokens first. @wacr/tokens holds colour, type, radius and spacing as plain data — the same values this page reads. Nothing downstream types a hex.

Then the sheet. The tokens feed @wacr/ui/tailwind-preset and a shared globals.css, where every role becomes an HSL CSS variable. Dark mode is one attribute, [data-theme="dark"], and every role swaps under it.

Then the parts. @wacr/ui components name roles, never colours. Icons are Lucide only, through one barrel. When a tenant sets a brand accent, --primary flips and every component follows without a rebuild.

06Share cards

One page, nine share cards.

The picture a link turns into when it is pasted into a chat — drawn once per page, per platform, at build time.

Every public page on this site has a 1200×630 share card. None is rendered on demand: at build time the site draws one card per page per platform — about fifty pages × nine platforms, roughly 450 PNGs — so a crawler’s fetch is always an instant hit rather than the cold render that used to make WhatsApp and LinkedIn give up.

When a link is pasted, the platform’s crawler fetches the page. shareMeta reads that crawler’s User-Agent — WhatsApp, TelegramBot, LinkedInBot, Slackbot, Discordbot, Twitterbot, Instagram, facebookexternalhit; anything else is “generic” — and points og:image at the matching /share/<page>-<platform> file.

The platform changes only two things: the accent rule across the top and the “Shared on X” tag. The card reads native where it lands without a recolour, and brand orange stays the constant hero colour on every one of them.

There are two grammars. The billboard is type-led: a mono kicker, a Clash Display headline with one orange word, three pillars, the wordmark and the keeda bleeding off the right. The console miniature reflows that copy into a column and draws the real console in the light theme on the right, running off the edge. Fonts are embedded, nothing is fetched at render, and the whole system is CSP-safe.

Platform
Page
This page share card as it appears when shared on Generic
Tag
No platform tag — the generic card
Accent
#FE771C
URL
/share/brand-generic

The three with a window

  • Shared inbox share card, generic variant

    The inbox — thread list, a beige WhatsApp-style conversation, an amber internal note, the contact drawer.

  • Broadcasts share card, generic variant

    A broadcast's report — recipients, the delivery funnel, spend, replies.

  • Auto Flows share card, generic variant

    The Auto Flows builder — a trigger, a template send, a Split with three branches, an End node.

Try it yourself

The crawler’s User-Agent picks the variant — send a different one and the og:image changes with it.

The blog goes one step further for WhatsApp, which drops images much over 300 KB: it picks the smallest featured-image variant that fits a byte budget before it points the card at it.

# WhatsApp's crawler gets the WhatsApp card
curl -s https://wa.cr/about -A "WhatsApp/2.24.1" | grep -o '<meta property="og:image"[^>]*>'

# Slack's crawler gets the Slack card
curl -s https://wa.cr/about -A Slackbot | grep -o '<meta property="og:image"[^>]*>'
07The family

Three marks, one maker.

WA.cr sits in a family. Each mark is its own; none is a variant of another.

  • WA.cr brand mark

    WA.cr

    The product. The keeda in its chat bubble is the only mark that ever stands for WA.cr.

  • qTap mark

    qTap

    The commerce family WA.cr belongs to, alongside the payments and storefront work it leans on. Never recolour.

  • KDC mark

    KDC

    KDC Tek Private Limited, the company that builds and runs it. Its orange, #F37521, is reserved for KDC and is never used as a WA.cr surface.

The lockup

The attribution line, as the footer sets it: mono, the KDC mark at 16 px, verbatim.

WA.cr by qTap is a KDC keedaKDC

Using the sister marks

The WA.cr kit is free to take. The qTap and KDC marks are available for co-marketing only with KDC’s say-so — ask before you place one, and we will send the right file for the surface.

Ask about co-marketing

Building with the WA.cr brand?

Partners, press and integrators: take the kit, follow the rules, and ask us when in doubt.

We use a few cookies to improve WA.cr. How we use cookies