Click2Send Brand Guidelines

Logo

Our logo consists of the wordmark "Click2Send" with the "2" stylised as a distinctive brand element. The mark uses two tonal groups: "Click" and "2" form one group, "Send" forms the second.

Primary Logo - Light Background

"Click" in Charcoal, "2Send" in Orange. Default usage on white/light surfaces.

Logo-1.svg

Primary Logo - Dark Background

"Click" in White, "2Send" in Orange. Use on dark surfaces and overlays.

Logo-2.svg

Reversed Logo - Brand Background

"Click" in Dark, "2Send" in White. Use on orange brand surfaces.

Logo-3.svg

Mono Logo - Dark

Single-colour dark version. Use for print, fax, or when colour is unavailable.

Logo-4.svg

Mono Logo - White

Single-colour white version. Use on dark or photographic backgrounds.

Logo-5.svg

Colour Palette

Our brand palette is built around a vibrant orange primary colour, supported by a dark neutral tone and a range of functional UI colours.

Primary Brand Colours

Click2Send Orange

#FF7C2A

Primary brand colour. Buttons, accents, highlights, CTA elements.

Orange Dark

#E86A1A

Hover states, pressed buttons, gradient endpoints.

Orange Light

#FFF0E6

Soft backgrounds, badges, notification highlights.

Neutral Colours

Ink Black

#191919

Headings, primary text, dark backgrounds, footer.

Charcoal

#353333

Logo text "Click", secondary dark elements.

Gray 700

#374151

Body text, paragraphs, descriptions.

Gray 500

#6B7280

Secondary text, labels, placeholders.

Gray 400

#9CA3AF

Muted text, timestamps, metadata.

Gray 200

#E5E7EB

Borders, dividers, input outlines.

Gray 100

#F3F4F6

Table row stripes, card backgrounds, subtle fills.

White

#FFFFFF

Page backgrounds, cards, input fields, reversed text.

Functional / UI Colours

Success Green

#22C55E

Delivered status, success alerts, positive indicators.

Error Red

#EF4444

Errors, destructive actions, overdue balances, failed status.

Warning Amber

#F59E0B

Warnings, pending states, attention-needed indicators.

Info Blue

#3B82F6

Links, informational alerts, in-transit status.

Purple

#8B5CF6

Premium features, subscription badges, special indicators.

Typography

Inter is our primary typeface across all digital touchpoints. It provides excellent readability at all sizes and a clean, modern aesthetic.

Display

48px / 800

Click2Send

Heading 1

32px / 700

Ship Smarter, Globally

Heading 2

24px / 600

Parcel Management

Heading 3

18px / 600

Rate Card Overview

Body

14px / 400

Our platform streamlines global shipping by integrating with major carriers, customs authorities, and e-commerce platforms to manage the entire parcel lifecycle.

Small / Caption

12px / 500

Last updated 24 Feb 2026 at 12:55

Monospace

13px / 400

TRK-2026022412345

Font Source

Google Fonts: Inter
fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800

Weights Used

300 Light — decorative subheadings
400 Regular — body text
500 Medium — labels, captions
600 Semi-Bold — subheadings, nav
700 Bold — headings, emphasis
800 Extra-Bold — hero, display

Fallback Stack

'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

UI Components

Standard button styles and interactive element treatments used throughout the platform.

Buttons

Border Radius

Buttons: 8px
Cards: 12px
Inputs: 6px
Badges: 9999px (pill)

Shadows

Cards: 0 1px 3px rgba(0,0,0,0.08)
Elevated: 0 4px 12px rgba(0,0,0,0.12)
Modals: 0 20px 60px rgba(0,0,0,0.2)

Spacing Scale

Based on 4px increments:
4px · 8px · 12px · 16px · 24px · 32px · 40px · 48px · 64px

Logo Usage Rules

Follow these guidelines to ensure consistent and respectful use of the Click2Send brand.

Do

Use the full-colour logo on light backgrounds as the default
Use the reversed logo (white) on dark or busy backgrounds
Maintain clear space around the logo (minimum equal to the height of the "2")
Use SVG format for digital and PDF for print
Scale proportionally - never stretch or distort
Use the mono version when colour printing is unavailable

Don't

Alter the logo colours outside approved palette
Add drop shadows, outlines, or effects to the logo
Place the logo on busy or low-contrast backgrounds
Rotate, skew, or reposition elements of the logo
Use the logo smaller than 100px wide on screen
Re-create or modify the "2" character

Brand Voice

How we communicate across all channels.

Professional

We speak with authority on logistics. Our language is clear, precise, and knowledgeable without being overly technical.

Approachable

We make complex shipping simple. Our tone is warm, helpful, and encouraging - never condescending.

Efficient

We respect our users' time. Messaging is concise, action-oriented, and gets straight to the point.

Global

We serve an international audience. Language is inclusive, culturally sensitive, and avoids regional idioms.