All skills
raintree-technology avatar

/hig-foundations

@5aac106

Apple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. Also use when the user says "my colors look wrong in dark mode", "what font should I use", "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", "how do I pick system colors", or "my icons don't match the system style". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.

Use this Skill: https://skilld.dev/gh/raintree-technology/hig-doctor/hig-foundations

This session only. Nothing lands on disk.

referencesicons.md

≈618 tokens on demand. Your agent reads this file only when SKILL.md points to it.

<!-- hig-doctor:attribution -->

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/icons. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Icons

Best practices

Create a recognizable, highly simplified design.

Maintain visual consistency across all interface icons in your app.

In general, match the weights of interface icons and adjacent text.

If necessary, add padding to a custom interface icon to achieve optical alignment.

Provide a selected-state version of an interface icon only if necessary.

Use inclusive images.

Include text in your design only when it’s essential for conveying meaning.

If you create a custom interface icon, use a vector format like PDF or SVG.

Provide alternative text labels for custom interface icons.

Avoid using replicas of Apple hardware products.

Platform considerations

macOS

Document icons

Design simple images that clearly communicate the document type.

Designing a single, expressive image for the background fill can be a great way to help people understand and recognize a document type.

Consider reducing complexity in the small versions of your document icon.

Avoid placing important content in the top-right corner of your background fill.

  • 512x512 px @1x, 1024x1024 px @2x

  • 256x256 px @1x, 512x512 px @2x

  • 128x128 px @1x, 256x256 px @2x

  • 32x32 px @1x, 64x64 px @2x

  • 16x16 px @1x, 32x32 px @2x

If a familiar object can convey a document’s type or its connection with your app, consider creating a center image that depicts it.

  • 256x256 px @1x, 512x512 px @2x

  • 128x128 px @1x, 256x256 px @2x

  • 32x32 px @1x, 64x64 px @2x

  • 16x16 px @1x, 32x32 px @2x

Define a margin that measures about 10% of the image canvas and keep most of the image within it.

Specify a succinct term if it helps people understand your document type.


<!-- hig-doctor:canonical-footer -->

For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/icons

Source: SKILL.md on GitHub

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill is a documentation resource providing guidance on Apple's Human Interface Guidelines. It contains no executable scripts, code, or external dependencies.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 5aac106. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 4 weeks ago.

Activeupdated 7 months ago
version
1.0.0

README badge

README badge for raintree-technology/hig-doctor/hig-foundations