Apple-Style Demo

Apple-Style skill set · live preview

Liquid Glass

A digital meta-material that bends and shapes light.

About this demo

skills/Apple-Style/SKILL.md

Two layers

cheatsheets/design-principles.md

✓Correct

Yosemite

California · National Park

Content layer
Control layer

.card { background: var(--as-bg-grouped-2) }

✗Wrong

Yosemite

California · National Park

.card.as-glass /* 不要这样做 */

Materials

cheatsheets/materials-and-liquid-glass.md

Over dark content

Over light content

Clear · over media

as-glass as-glass-clear as-glass-dimmed

Large · big surfaces

Yosemite National Park

California · National Park

as-glass as-glass-large

Standard materials

Ultra thin
Thin
Regular
Thick

✗Glass on glass

✓One glass per group

as-glass as-glass-group > .as-item

Color

cheatsheets/color.md

System colors

Semantic colors

Tint rule

Typography

cheatsheets/typography.md

Shapes

cheatsheets/layout-and-shapes.md

Capsule

border-radius: var(--as-radius-capsule)

Fixed

border-radius: var(--as-radius-l)

Concentric

as-container / as-concentric

Concentric radius playground

Computed inner radius: 14px ·

Controls

cheatsheets/components-quickref.md

Buttons

Segmented control

Toggle

Slider

Search field

Inset grouped list

Appearance

  • Text SizeLarge
  • Bold Text
  • Liquid Glass lookClear

Navigation and presentation

cheatsheets/components-quickref.md

Toolbar

Sidebar

Library

All Landmarks
Favorites
Recently Viewed
Shared with Me

Content extends beneath the sidebar

Menu

Sheet

Alert

Floating tab bar

Motion

cheatsheets/motion-and-interaction.md

Morph

Materialize

Press feedback

Scrubbing

Accessibility

cheatsheets/accessibility-and-inclusion.md

Simulate

  • Reduce Transparency
  • Increase Contrast
  • Reduce Motion
  • Largest Dynamic Type

Common mistakes

skills/Apple-Style/SKILL.md

Checklist

skills/Apple-Style-Review/SKILL.md

0/12 done