Brand & Design Guidelines

Official specifications for logo usage, visual identity, typography, and technical touch icon requirements. Please follow these standards to maintain brand consistency.

● Updated v2.4 — January 2025

Brand Identity

Apple Touch Icon.png represents precision, clarity, and seamless digital craftsmanship. Our identity reflects the intersection of Apple's human interface principles and modern iconography standards.

Core Principles

Pixel Perfection: Every asset is optimized for Retina displays and standard DPI screens.
Platform Native: Respects iOS, macOS, and web ecosystem guidelines.
Accessibility First: High contrast ratios, semantic structure, and scalable vector formats.
Minimalist Elegance: Clean lines, intentional negative space, and restrained color usage.

Logo Usage

Clear Space & Minimum Size

Maintain a minimum clear space equal to the height of the "A" in the logo mark. Never scale below 32px height for digital or 8mm for print.

[ Logo Mark + Clear Space Diagram ]

Primary (Horizontal)

Use for headers, business cards, and official documentation.

Stacked (Vertical)

Use for social avatars, app icons, and constrained layouts.

Color Palette

Click any swatch to copy the HEX code. All colors meet WCAG 2.1 AA contrast standards.

Primary

Vivid Rose

#e94560

Secondary

Deep Navy

#0f3460

Accent

Indigo Glow

#667eea

Success

Mint

#10b981

Warning

Amber

#f59e0b

Background

Surface

#fafafa

Typography

We use the system font stack for optimal performance and native feel across platforms.

Display / 2.8rem / 800

Brand Headline

H2 / 1.8rem / 700

Section Heading

H3 / 1.25rem / 600

Subsection Title

Body / 1rem / 400

Standard paragraph text for body copy, descriptions, and documentation content.

Mono / 0.875rem / 400

<link rel="apple-touch-icon" href="/icon.png" />

Touch Icon Specifications

Apple requires specific resolutions and corner radii for optimal rendering across devices. All icons should be PNG, lossless compression, with transparency.

16×16
Favicon

32×32
Legacy

76×76
iPad

120

120×120
iPhone

180

180×180
iPhone @3x

Critical Requirements

Format: PNG (8-bit or 32-bit with alpha)
Color Space: sRGB
Corner Radius: iOS applies automatic rounding; design with a 15% safe zone
No Shadows/Bevels: Flat design only; system applies depth
File Naming: apple-touch-icon-180x180.png

Implementation

Place the following meta tags in the <head> of your HTML documents. Specify multiple sizes for maximum compatibility.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="manifest" href="/site.webmanifest" />

For PWA contexts, ensure display: standalone or fullscreen is set in your manifest to trigger native icon behavior.

Do's & Don'ts

✓ DO

Use official color codes and system fonts
Maintain clear space around logos
Optimize icons for Retina (2x/3x)
Test on actual iOS devices
Provide fallback SVGs

✕ DON'T

Stretch, skew, or rotate logos
Apply drop shadows or gradients to icons
Change color values or opacity
Use low-resolution (72dpi) exports
Overlap with UI elements

Download Assets

All brand files are hosted securely. Request access via the client portal or contact brand@apptouchicon.com.

📦

Brand Kit

SVG, PNG, EPS, AI source files

🎨

Figma Library

Components, variables, auto-layout

📱

Icon Generator

Web tool for platform exports

Questions? brand@apptouchicon.com