mcpField
A
apple-design-foundations

apple-design-foundations

github.com/s1gmamale1Design & UI3161 installsUpdated 22w ago
Repository

About apple-design-foundations

A design skill covering Apple’s color, typography, and layout foundations for interface and web work. It emphasizes adaptive system colors, Dynamic Type, safe areas, and grid rules, with reference files for deeper guidance.

Key features

  1. 01Semantic system colors and dark mode
  2. 02System fonts and Dynamic Type
  3. 038-point grid and safe-area rules
  4. 04Color, type, and layout references

Use cases

  1. 01Choose colors that adapt to light and dark modes
  2. 02Set type scales for apps or marketing pages
  3. 03Plan spacing, grids, and safe areas
  4. 04Design responsive layouts and bento grids

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/s1gmamale1/apple-design-skills --skill apple-design-foundations

After installing, type/apple-design-foundationsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
color-systems.md
layout-grid-spacing.md
typography.md

Details

From the project README

Apple Design — Foundations (color · typography · layout)

The visual fundamentals Apple builds every surface on. Depth lives in the three reference files; this is the map + the rules you must not get wrong.

When to use

  • Picking a color palette, dark-mode strategy, or wide-gamut color.
  • Setting a type scale (in-app Dynamic Type or apple.com marketing headlines).
  • Establishing spacing, grid, safe-area, or bento layout.

Non-negotiable rules

  • Semantic over literal color. Use system roles (label, systemBackground, systemBlue); never hardcode hex that can't adapt to light/dark/contrast.
  • Dark mode = dimming, not inverting. Elevated surfaces get lighter, not pure-inverted. True-black only where it serves OLED.
  • System font stack. font-family: -apple-system, system-ui, "SF Pro", ... — SF is not licensed as an arbitrary webfont; rely on the stack. Match optical size (SF Text < ~20pt, SF Display ≥ ~20pt).
  • Dynamic Type must reflow. Layouts grow/wrap; never truncate body text at large sizes.
  • 8-point grid (4pt half-steps for tight gaps). Min 44×44pt tap target. Respect env(safe-area-inset-*).

References

FileUse for
references/color-systems.mdSemantic/system color tables, P3, dark-mode staircase, contrast, CSS tokens
references/typography.mdSF family, optical sizes, Dynamic Type table, tracking, marketing clamp() scale
references/layout-grid-spacing.md8pt system, margins/insets, apple.com breakpoints, bento grid recipes

Common mistakes

  • Hardcoded hex instead of adaptive tokens; pure inversion for dark mode.
  • Wrong optical size / faux-bold; tracking too tight on body.
  • Off-grid spacing; ignoring safe areas; cramped bento with no hero tile.

Related: glass/vibrancy color → apple-design-materials · type-in-motion → apple-design-motion · contrast/Dynamic Type as accessibility → apple-design-tactics.

Comments

Markdown supported