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