# Apple Color Palette

> color palette, design system, UI colors, theme, CSS variables

- Skill: `parthkishan20/apple-color-palette` (Agent Skill)
- Install (CLI): `npx skillmds@latest add parthkishan20/apple-color-palette`
- Raw SKILL.md: https://api.skillmd.com/api/skills/parthkishan20/apple-color-palette/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: parthkishan20 (https://skillmd.com/u/parthkishan20)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/parthkishan20/apple-color-palette

---


## Color Palette

| Role | Hex | CSS Variable | Usage |
|------|-----|-------------|-------|
| info | #5AC8FA | `--info` | Informational states — tips, neutral notifications |
| error | #FF3B30 | `--error` | Error states — validation errors, destructive actions |
| accent | #0071E3 | `--accent` | Eye-catching highlights — badges, icons, special elements |
| border | #D2D2D7 | `--border` | Subtle dividers and container borders |
| primary | #000000 | `--primary` | Main brand color — CTAs, active states, key UI elements |
| success | #34C759 | `--success` | Positive states — confirmations, success messages |
| surface | #F5F5F7 | `--surface` | Card/container backgrounds — slightly offset from page bg |
| warning | #FF9F0A | `--warning` | Caution states — warnings, pending actions |
| secondary | #86868B | `--secondary` | Supporting brand color — secondary buttons, highlights |
| textMuted | #86868B | `--text-muted` | Captions, hints, timestamps — lower contrast |
| background | #FFFFFF | `--background` | Page background |
| textPrimary | #1D1D1F | `--text-primary` | Main body text — highest contrast |
| textSecondary | #6E6E73 | `--text-secondary` | Secondary text — subheadings, descriptions |

## CSS Variables

```css
:root {
  --info: #5AC8FA;
  --error: #FF3B30;
  --accent: #0071E3;
  --border: #D2D2D7;
  --primary: #000000;
  --success: #34C759;
  --surface: #F5F5F7;
  --warning: #FF9F0A;
  --secondary: #86868B;
  --text-muted: #86868B;
  --background: #FFFFFF;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
}
```

## Usage Rules

- Use only these colors. Never introduce colors outside this system.
- Maintain WCAG AA contrast for all text on backgrounds.
- Use primary for main actions, secondary for supporting actions.
- Reserve success/warning/error/info for their semantic purpose only.
- Use surface for elevated containers, background for the page.
- Apply border color for all dividers and container outlines.

## Verified Contrast Pairs

| Foreground | Background | Ratio | Level | Status |
|-----------|-----------|-------|-------|--------|
| textPrimary | background | 16.8:1 | AA | Pass |
| textPrimary | surface | 15.5:1 | AA | Pass |
| textSecondary | background | 5.1:1 | AA | Pass |
| textSecondary | surface | 4.7:1 | AA | Pass |
| textMuted | background | 3.6:1 | AA-large | Pass |
| textMuted | surface | 3.3:1 | AA-large | Pass |

## References

- `references/tailwind-config.md` — Tailwind theme configuration
- `references/css-variables.md` — Complete CSS custom properties
- `references/accessibility.md` — Full contrast matrix
- `references/components.md` — Component class mappings

## Anti-patterns

- Do not use raw hex values. Always reference CSS variables or design tokens.
- Do not mix semantic colors (e.g., success color for decorative elements).
- Do not override text colors without checking contrast ratios.
- Do not use background color for elevated surfaces — use surface instead.