# Hig Foundations > Cimientos de las HIG de Apple: color, tipografía, SF Symbols, dark mode, accesibilidad, layout, motion, privacidad y estilo de escritura. Fuente: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-foundations Markdown: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-foundations.md Repositorio: https://github.com/raintree-technology/hig-doctor Autor: raintree-technology Licencia: MIT Actualizado: hace 3 meses Coste de contexto: 207 tok instalada, 1.8k tok al activarse, 14.7k tok con todos los archivos del bundle Bundle: 19 archivos, 58 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent claude-code # Cursor npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent cursor # Codex npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent codex # Gemini CLI npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent gemini # Windsurf npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent windsurf # Cline npx -y skills add raintree-technology/hig-doctor --skill hig-foundations --agent cline ``` ## Qué hace - Aplica los cimientos HIG: color, tipografía, SF Symbols, materiales, motion, privacidad, RTL e icono de app. - Prioriza contenido sobre chrome; colores y fuentes de sistema; accesibilidad (VoiceOver, Dynamic Type, Reduce Motion) desde el día uno. - Motion con propósito; honra Reduce Motion; pide permisos solo cuando hacen falta. ## Cuándo usarla - El usuario pregunta por color HIG, tipografía Apple, SF Symbols, dark mode, Dynamic Type o contraste. - Los colores fallan en dark mode, los iconos no coinciden con el sistema, o hay que elegir fuentes. ## Qué la activa - "¿Qué fuente debo usar en iOS?" - "Mis colores se ven mal en dark mode" - "¿Qué ratio de contraste necesito?" - "Cómo apoyar Dynamic Type" ## Archivos - SKILL.md — 7 KB - references/accessibility.md — 5 KB - references/app-icons.md — 2 KB - references/branding.md — 1 KB - references/color.md — 3 KB - references/dark-mode.md — 2 KB - references/icons.md — 2 KB - references/images.md — 2 KB - references/immersive-experiences.md — 5 KB - references/inclusion.md — 4 KB - references/layout.md — 4 KB - references/materials.md — 4 KB - references/motion.md — 2 KB - references/privacy.md — 3 KB - references/right-to-left.md — 2 KB - references/sf-symbols.md — 3 KB - references/spatial-layout.md — 2 KB - references/typography.md — 3 KB - references/writing.md — 1 KB ## SKILL.md Reproducido tal cual desde raintree-technology/hig-doctor bajo MIT. Esta sección es el documento original y está en inglés. # Apple HIG: Design Foundations Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. ## Key Principles 1. **Prioritize content over chrome.** Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds. 2. **Build in accessibility from the start.** Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label. 3. **Use system colors and materials.** System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (`label`, `secondaryLabel`, `systemBackground`) over hard-coded values. 4. **Use platform fonts and icons.** SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography. 5. **Match platform conventions.** Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action. 6. **Respect privacy.** Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection. 7. **Support internationalization.** Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing. 8. **Use motion purposefully.** Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives. ## Reference Index | Reference | Topic | Key content | |---|---|---| | [accessibility.md](references/accessibility.md) | Accessibility | VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions | | [app-icons.md](references/app-icons.md) | App Icons | Icon grid, platform-specific sizes, single focal point, no transparency | | [branding.md](references/branding.md) | Branding | Integrating brand identity within Apple's design language, subtle branding, custom tints | | [color.md](references/color.md) | Color | System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios | | [dark-mode.md](references/dark-mode.md) | Dark Mode | Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes | | [icons.md](references/icons.md) | Icons | Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment | | [images.md](references/images.md) | Images | Image resolution, @2x/@3x assets, vector assets, image accessibility | | [immersive-experiences.md](references/immersive-experiences.md) | Immersive Experiences | AR/VR design, spatial immersion, comfort zones, progressive immersion levels | | [inclusion.md](references/inclusion.md) | Inclusion | Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults | | [layout.md](references/layout.md) | Layout | Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides | | [materials.md](references/materials.md) | Materials | Vibrancy, blur, translucency, system materials, material thickness | | [motion.md](references/motion.md) | Motion | Animation curves, transitions, continuity, Reduce Motion support, physics-based motion | | [privacy.md](references/privacy.md) | Privacy | Permission requests, usage descriptions, privacy nutrition labels, minimal data collection | | [right-to-left.md](references/right-to-left.md) | Right-to-Left | RTL layout mirroring, bidirectional text, icons that flip, exceptions | | [sf-symbols.md](references/sf-symbols.md) | SF Symbols | Symbol categories, rendering modes, variable color, custom symbols, weight matching | | [spatial-layout.md](references/spatial-layout.md) | Spatial Layout | visionOS window placement, depth, ergonomic zones, Z-axis design | | [typography.md](references/typography.md) | Typography | SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing | | [writing.md](references/writing.md) | Writing | UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness | ## Applying Foundations Together Consider how principles interact: 1. **Color + Dark Mode + Accessibility** -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors. 2. **Typography + Accessibility + Layout** -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes. 3. **Icons + Branding + SF Symbols** -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions. 4. **Motion + Accessibility + Feedback** -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate. 5. **Privacy + Writing + Onboarding** -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit. ## Output Format 1. **Cite the specific HIG foundation** with file and section. 2. **Note platform differences** for the user's target platforms. 3. **Provide concrete code patterns** (SwiftUI/UIKit/AppKit). 4. **Explain accessibility impact** (contrast ratios, Dynamic Type scaling, VoiceOver behavior). ## Questions to Ask 1. Which platforms are you targeting? 2. Do you have existing brand guidelines? 3. What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?) 4. System colors or custom? ## Related Skills - **hig-platforms** -- How foundations apply per platform (e.g., type scale differences on watchOS vs macOS) - **hig-patterns** -- Interaction patterns where foundations like writing and accessibility are critical - **hig-components-layout** -- Structural components implementing layout principles - **hig-components-content** -- Content display using color, typography, and images --- *Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [raintree-technology](https://skillsagentes.com/creators/raintree-technology.md) — 14 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Hig Components System](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-system.md): HIG de Apple para experiencias de sistema: widgets, Live Activities, notificaciones, complications, App Clips y shortcuts. - [Hig Components Controls](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-controls.md): HIG de Apple para controles de selección y entrada: pickers, toggles, sliders, steppers, segmented controls, campos de texto y teclados virtuales. - [Hig Components Dialogs](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-dialogs.md): HIG de Apple para presentación: alerts, action sheets, popovers, sheets y digit entry. Cuándo interrumpir y cómo confirmar acciones destructivas. - [Hig Components Layout](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-layout.md): HIG de Apple para layout y navegación: sidebars, split views, tab bars, lists, tables y windows, adaptados a cada tamaño de pantalla. - [Hig Components Content](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content.md): HIG de Apple para componentes de contenido: charts, collection views, imágenes, web views, lockups y visualización de datos. ## Skills relacionadas - [Hig Components Content](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content.md): HIG de Apple para componentes de contenido: charts, collection views, imágenes, web views, lockups y visualización de datos. - [Hig Components System](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-system.md): HIG de Apple para experiencias de sistema: widgets, Live Activities, notificaciones, complications, App Clips y shortcuts. - [Hig Components Controls](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-controls.md): HIG de Apple para controles de selección y entrada: pickers, toggles, sliders, steppers, segmented controls, campos de texto y teclados virtuales. - [Hig Components Dialogs](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-dialogs.md): HIG de Apple para presentación: alerts, action sheets, popovers, sheets y digit entry. Cuándo interrumpir y cómo confirmar acciones destructivas. - [Hig Components Layout](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-layout.md): HIG de Apple para layout y navegación: sidebars, split views, tab bars, lists, tables y windows, adaptados a cada tamaño de pantalla. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)