Brand guidelines

Do’s and don’ts for the AtDoor brand

How to write the name, use the logo, pick colours and type, and sound like AtDoor. For our team, partners and anyone building an AtDoor product page.

Logo

The logo is the gradient mark next to the AtDoor wordmark, set in Bebas Neue. Use the files as supplied.

AtDoor

Do: on white or Mist, with clear space of at least half the mark’s height on every side.

AtDoor

Do: on Navy, with the wordmark in white. The mark keeps its gradient.

AtDoor

Don’t stretch or squash it

AtDoor

Don’t rotate it

AtDoor

Don’t recolour the mark

AtDoor

Don’t add shadows or effects

Minimum size: the mark is at least 24px tall on screen.
The mark alone is fine for favicons and app icons. Get the file at /assets/img/atdoor.svg.
Don’t place the logo on photos or busy patterns, and don’t redraw or retype the wordmark.

Product icons

Each AtDoor product has its own icon: a rounded square in one brand colour with a simple white or Navy symbol. It sits next to the full product name.

AtDoor QR Code

AtDoor Content Studio

AtDoor Delivery Challan

AtDoor Gift Store

AtDoor Bunk & Bite

AtDoor Family Tree

AtDoor Email Validator

AtDoor Profiles

AtDoor TT Heroes

AtDoor Certificate Studio

AtDoor Template Store

AtDoor Chat

AtDoor Onboarding

AtDoor Restaurant Ordering

DoDon’t

Show the icon with the full name: “AtDoor QR Code”The icon alone where people don’t know the product yet

Keep the rounded square and its colour as suppliedRecolour, crop to a circle or swap the symbol

One colour per product, so each is easy to spotReuse another product’s colour for a new one

Name

AtDoor is one word with two capitals. Products are always “AtDoor” followed by the product name in title case.

DoDon’t

AtDoor (one word, capital A and D)Atdoor, At Door, AT DOOR, atdoor

AtDoor QR Code, AtDoor Content StudioAtdoor qr-code, AtDoor content studio, QR by AtDoor

AtDoor’s productsAtDoors products, At-Door’s products

The all-caps “ATDOOR” appears only inside the logo, where Bebas Neue sets it. In text, write AtDoor.

Colour

Blue leads, Navy carries the text, and Red is saved for the one action that matters most on a page.

AtDoor Blue

#165df5

Primary buttons, links, highlights.

Navy

#0b2238

Headings and body text.

Slate

#6c7a87

Secondary text, captions, hints.

Signal Red

#f93542

One high-priority action per page, e.g. “Get a Quote”.

Mist

#f7f8fa

Section and card backgrounds.

Logo gradient

#ff4fc2 → #ffce2a

The mark only. Never for text, buttons or backgrounds.

DoDon’t

One Signal Red button per pageSeveral red buttons competing

Navy or Slate text on white and MistSlate text on Blue, or any low-contrast pair

Gradient on the mark onlyGradient text, buttons or backgrounds

Type

Circular Std for everything you read. Bebas Neue for the wordmark only.

Circular Std

Headings, body, buttons and forms. Medium for headings, Book for body text.

Bebas Neue

The AtDoor wordmark only. Don’t use it for headings or body text.

Voice

Friendly, plain and direct. Say what happens and what the customer can do next.

DoDon’t

Sentence case: “Get an API key”Title Case Everywhere: “Get An API Key”

Name the consequence: “Apps using this key will stop working.”Vague warnings: “Are you sure?”

Curly quotes and apostrophes: ’ “ ”Straight quotes: ' "

Plain, short sentences a customer can act onJargon and hype: “revolutionary synergy”

Need logo files or approval?

Ask us before using the AtDoor name or logo for partnerships, press or co-branding.