Brand Guidelines

Annoture Brand

Assets, colours, typography, and rules for representing Annoture consistently across all surfaces.

Logo

Primary — dark background

Annoture

Icon mark

On light background

Annoture

Logo don'ts

Do not stretch or distort the logo mark
Do not change the gradient colours
Do not use the wordmark without the icon mark
Do not place the logo on a busy or low-contrast background
Do not add drop shadows or outlines to the logo mark

Colours

Primary

Violet 500

#8B5CF6

Primary accent, CTAs, highlights

Blue 500

#3B82F6

Secondary accent, gradients

Pink 400

#F472B6

Gradient terminus, decorative

Neutrals

Background

#0F0F0F

Page background

Surface

#1A1A1A

Cards, panels

Border

#2C2C2C

Dividers, card borders

Muted

#666666

Placeholder text, captions

Body

#A3A3A3

Secondary body text

Foreground

#F5F5F5

Primary text

Semantic

Success

#10B981

Confirmations, active states

Warning

#F59E0B

Alerts, coming-soon badges

Error

#EF4444

Errors, destructive actions

Gradients

Brand gradient

#8B5CF6 → #3B82F6

CTAs, icon marks, accent bars

Gradient text

#a78bfa → #60a5fa → #f472b6

Hero headings, display type

Subtle glow

violet/8 → blue/8

Card backgrounds, section tints

Typography

Primary typeface

Geist Sans

by Vercel — used for all UI and marketing copy

Monospace

Geist Mono

Code snippets, hex values, technical labels

Weights in use

Normal

400

Medium

500

Semibold

600

Bold

700

Black

900

Annoture

Display

text-6xl · font-bold

Capture bugs in one click

text-5xl · font-bold

Everything captured automatically

text-4xl · font-bold

Set up in under 2 minutes

text-2xl · font-semibold

The Annoture extension sits in your toolbar.

Body lg

text-lg · font-normal

Install the extension and start capturing bugs.

Body

text-base · font-normal

Free to install · No credit card required

Caption

text-sm · font-normal

COMING SOON

Label

text-xs · font-semibold

UI Components

Buttons

Primary

Disabled

Badges

Chrome ExtensionComing soonActiveMost popularNeutral

Cards

Glass card

Feature name

Short description of the feature or content in this card goes here.

Subtle card

Alternate style

Used when glass cards would feel too heavy, e.g. inside lists.

Voice & Tone

Direct

Say exactly what the product does. No marketing fluff.

Capture bugs in one click.

DON'T

Revolutionise your QA workflow.

Technical but human

Speak to developers without being cold.

Screenshot, URL, browser, OS — all captured automatically.

DON'T

Automated metadata extraction via extension APIs.

Confident

Own the product's capabilities.

The extension works on any website.

DON'T

The extension may work on most websites.

Concise

Fewer words, more impact.

Set up in under 2 minutes.

DON'T

Getting started with Annoture is a quick and easy process.

Spacing & Radius

Border radius

rounded-lg (8px)

Buttons, input fields, small chips

rounded-xl (12px)

Cards, badges, dropdowns

rounded-2xl (16px)

Feature cards, modal panels

rounded-3xl (24px)

Hero cards, large CTA blocks

rounded-full (9999px)

Avatars, pill badges

Spacing scale

p-1

4px

Tight internal padding

p-2

8px

Icon padding, compact elements

p-4

16px

Card inner padding

p-5

20px

Default card padding

p-6

24px

Comfortable section padding

p-8

32px

Feature card padding

py-12

48px

Section vertical rhythm

py-24

96px

Major section separation

Need something not covered here?

For press assets, high-res logos, or brand partnership questions, reach out directly.