Acd Glass Apple Design

---
name: acd-glass-apple-design
description: Reference DESIGN.md for premium consumer software with translucent surfaces. SF Pro everywhere, system tints sparingly, vibrancy materials over solid fills. Use when building UI components, applying design tokens, or implementing visual styles for glass apple.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, glass, claude-design]
---

# Apple — Glass / Soft-Futurism Reference Design Mode

You are an expert in the Apple — Glass / Soft-Futurism Reference aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for premium consumer software with translucent surfaces. SF Pro everywhere, system tints sparingly, vibrancy materials over solid fills.

## 1. Visual Theme & Atmosphere

Soft futurism. Frosted vibrancy materials, layered translucency, SF Pro at every size, system tints used as accent rather than fill. Hardware-adjacent — every surface implies physical depth.

Mood: calm, premium, trustworthy.

## 2. Color Palette & Roles

```
/* light */
--bg:                  #ffffff
--bg-elevated:         #ffffff
--surface-grouped:     #f2f2f7
--separator:           rgba(60,60,67,0.18)
--text:                #1d1d1f
--text-secondary:      rgba(60,60,67,0.78)
--text-tertiary:       rgba(60,60,67,0.55)

/* dark */
--bg-dark:             #000000
--bg-elevated-dark:    #1c1c1e
--surface-grouped-dark:#2c2c2e
--separator-dark:      rgba(84,84,88,0.65)

/* system tints (use sparingly, one per surface) */
--system-blue:         #007aff
--system-green:        #34c759
--system-red:          #ff3b30
--system-orange:       #ff9500
--system-purple:       #af52de
--system-pink:         #ff2d55
--system-yellow:       #ffcc00

/* vibrancy materials (alpha over backdrop blur) */
--material-thin:       rgba(255,255,255,0.6)
--material-regular:    rgba(255,255,255,0.78)
--material-thick:      rgba(255,255,255,0.92)
```

Rule: pick one system tint per surface and use it for the primary action only. Materials replace solid fills on overlays, navigation bars, sidebars.

## 3. Typography Rules

- **All UI + body:** `SF Pro Text` (≤19px), `SF Pro Display` (≥20px). Fallback `system-ui`.
- **Mono / code:** `SF Mono`, fallback `Menlo`.
- Use Apple's optical sizing — never disable `font-optical-sizing`.

Scale: 11 / 12 / 13 / 15 / 17 / 22 / 28 / 34 / 44 / 56 (matches Apple HIG).

Body 17px on touch, 13px on dense desktop.

## 4. Component Stylings

**Buttons**
- Primary: `--system-blue` fill, white text, radius 12, padding 10/20, weight 600.
- Bordered: clear fill, 1px `--system-blue`, blue text.
- Plain: text-only blue, no border.

**Cards / sections**
- `--bg-elevated` fill (light) or `--bg-elevated-dark` (dark), radius 14, no border.
- Grouped lists: `--surface-grouped`, separator hairline between rows.

**Sheets / modals**
- `--material-regular` over backdrop blur 30px. Rounded top corners 16px. Detents at 50% / 100%.

**Inputs**
- `--surface-grouped` fill, no border, radius 10, padding 11/14.
- Focus: 4px outer halo using current system tint at 18% alpha.

**Navigation**
- Nav bars use `--material-thin` over content. Title type weight 600. Large-title pattern: 34px → 17px on scroll.

## 5. Layout Principles

- Touch targets ≥44pt. Desktop dense ≥28pt.
- 8pt base unit. 4 / 8 / 12 / 16 / 20 / 24 / 32 / 44 / 56 / 80 scale.
- Safe-area inset everywhere on mobile. Edge-to-edge content; chrome floats above.

## 6. Depth & Elevation

Material layering replaces shadows on iOS. macOS uses subtle `0 1px 0 rgba(0,0,0,0.04)` divider plus material backdrop. Never drop-shadow over a material — defeats the blur.

## 7. Do's and Don'ts

**Do**
- Use one system tint per screen for primary action.
- Apply `backdrop-filter: blur(30px) saturate(180%)` on translucent surfaces.
- Honor SF Pro optical sizing thresholds (Text ≤19px, Display ≥20px).

**Don't**
- Mix system tints on the same surface.
- Replace SF Pro with Inter — kills the platform feel instantly.
- Drop-shadow buttons, cards, or inputs.
- Use hard 1px borders on cards; use radius + material instead.

## 8. Responsive Behavior

- iOS: sheet detents adapt to content height. Large-title shrinks on scroll.
- macOS: sidebar uses `NSSplitViewController` ratios — 240/flex.
- iPadOS: column layouts collapse on size class transitions.
- Web/PWA: prefer `env(safe-area-inset-*)` and `@media (prefers-color-scheme)`.

## 9. Agent Prompt Guide

Bias: SF Pro everywhere with optical-size respect, system tints as accent (one per surface), vibrancy materials over solid fills, 12/14 radius, no card borders.

Reject: Inter substitution, multi-tint surfaces, shadowed cards, Material Design ripples, hard 1px borders on cards.

## When to Use This Mode

- When user references **apple** or the **glass** family as inspiration
- When building UI in the glass aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic