Apple Touch Icon.png Style Guide

1. Introduction & Purpose

This style guide serves as the single source of truth for all design and development work related to Apple Touch Icon.png. It ensures consistency across web, mobile, and native applications while maintaining the brand's signature minimalist aesthetic and pixel-perfect precision.

Adherence to these guidelines is mandatory for all designers, developers, and partners creating official or co-branded materials.

2. Color Palette

Our color system is built on a foundation of neutrality, with strategic use of accent colors for interactive states and emphasis. All colors meet WCAG 2.1 AA contrast requirements.

#1D1D1FPrimary Text

#0071E3Accent / Links

#34C759Success

#FF9500Warning

#FF3B30Error / Danger

#F5F5F7Background Secondary

:root {\n  --c-black: #1d1d1f;\n  --c-accent: #0071e3;\n  --c-success: #34c759;\n  /* Use CSS variables for all color references */\n}

3. Typography

We use the system font stack for optimal performance and native rendering. Font weights are restrained to maintain hierarchy without visual noise.

Display
2.5rem / 700

Apple Touch Icon

H1
2rem / 700

Section Heading

H2
1.75rem / 600

Subsection Title

H3
1.25rem / 600

Component Header

Body
1rem / 400

Body text uses regular weight for extended reading comfort and clear hierarchy.

Small
0.85rem / 400

Captions, metadata, and helper text.

4. Iconography System

Icons must be vector-based, optically aligned, and consistent in stroke weight (1.5px default). All icons are delivered in SVG format with PNG fallbacks at 1x, 2x, and 3x resolutions.

🔍

📁

⚙️

🔔

👤

📊

🔒

📤

✓ Do

Maintain 4px clear space around all icons
Use consistent 1.5px stroke weight
Align optical center, not geometric center
Use system colors or brand accent
Include aria-label for accessibility

✗ Don't

Scale icons below 16px without custom treatment
Apply gradients or drop shadows to icons
Mix line and filled styles in the same UI
Rotate or distort original vectors
Use icons as decorative bullets

<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-label=\"Search\">\n  <path d=\"M11 19...\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/\>\n</svg>

5. Spacing & Layout

All spacing, padding, and margins follow a strict 4px baseline grid. This ensures rhythm, consistency, and easy scaling across breakpoints.

Use --space-4 through --space-64 CSS variables. Never hardcode pixel values for layout spacing.

6. UI Components

Standardized interactive elements with consistent behavior and visual language.

Buttons

Inputs

Cards

Content Card

Used for grouping related content, displaying metadata, or creating modular layout blocks.

7. Accessibility & Best Practices

All interfaces must meet WCAG 2.1 AA standards. Key requirements include:

Minimum contrast ratio of 4.5:1 for body text
Focus states visible on all interactive elements
ARIA labels for icons and decorative elements
Semantic HTML structure (headings, landmarks, lists)
Keyboard navigation support for all components
Reduced motion preference respected via @media (prefers-reduced-motion)

.btn:focus-visible {\n  outline: 2px solid var(--c-accent);\n  outline-offset: 2px;\n}