iOS 27 Design System

iOS 27's Liquid Glass, turned into copy-paste code for the web.

Design tokens, 36 component specs, and 48 page recipes ship as CSS and JS —
retuned as Apple did at WWDC 2026 (transparency slider, darkened edges, layered app icons).
Drop them into React, Svelte, Rails, or Flutter.

_{This is a web implementation. There is no SwiftUI package — the repo contains no .swift files.

For SwiftUI, use it as a color and dimension spec reference.}

What changed in iOS 27 · Icon model · 한국어 · 日本語 · 中文

Why this exists

Apple retuned Liquid Glass at WWDC 2026 and shipped official iOS 27 design kits for Figma and Sketch on June 23, 2026. Those are design-tool files — they give you components to draw with, not tokens to build with. Outside the Apple toolchain you still have to translate them by hand.

This project turns the iOS 27 design language into tokens and specs you can use today, across four frameworks. It succeeds ios26-design-system and carries its component and page catalog forward.

What's new in iOS 27

Liquid Glass was not replaced — iOS 27 is a readability and control pass. Full detail in docs/whats-new-in-ios27.md.

Change	What it means	In this repo
Transparency slider	A system-wide slider from ultra clear to fully tinted replaces the binary Reduce Transparency toggle	`--ios27-glass-transparency` + 5 preset classes
Stronger diffusion	Busy backgrounds resolve to a calmer field	Raised frost radii
Darkened edge	A dark outline separates glass from the content beneath	`--ios27-glass-edge-*`
Brighter specular	The lit rim reads as light on an edge, not a sheen	`--ios27-glass-specular-*`
Uniform toolbar	One uniform bar when content scrolls under the top edge	`.ios27-toolbar-uniform`
Sidebars	Edge to edge, colored icons return	`.ios27-sidebar`
Prominent Tab	Search stays a separate capsule; the slot is generalized so any tab can take it	Component specs
Layered app icons	Multiple glass layers baked into artwork; gyroscopic shimmer removed	`tokens/src/icons.json`, `.ios27-app-icon`

The transparency slider, in practice

Wire surfaces to the scale variables instead of hard-coding opacity and blur, and they follow the setting:

@import '@ios27_design_system/tokens/css/materials';

<!-- follows the default -->
<nav class="ios27-liquid-glass-me">…</nav>

<!-- pinned to one end of the range -->
<nav class="ios27-liquid-glass-me ios27-glass-ultra-clear">…</nav>
<nav class="ios27-liquid-glass-me ios27-glass-fully-tinted">…</nav>

prefers-reduced-transparency: reduce still overrides the slider — accessibility settings sit on top of personalization, exactly as on device.

Install

# Design tokens (CSS variables, JS/TS, Dart)
npm install @ios27_design_system/tokens

# Framework packages
npm install @ios27_design_system/react           # React 18 / 19
npm install @ios27_design_system/svelte          # Svelte 5
npm install @ios27_design_system/rails           # Rails 8 + Hotwire
npm install @ios27_design_system/svelte-inertia  # Svelte 5 + Inertia.js

# Component specs and page recipes (docs / AI context)
npm install @ios27_design_system/metadata

What's inside

ios27-design-system/                 # pnpm monorepo + Turborepo
├── packages/
│   ├── tokens/                      # @ios27_design_system/tokens
│   │   ├── src/                     # Source JSON (6 files)
│   │   │   ├── colors.json          # 79 variables × 4 modes
│   │   │   ├── typography.json      # 11 styles × 4 variants + Dynamic Type
│   │   │   ├── materials.json       # Liquid Glass, transparency slider,
│   │   │   │                        #   uniform toolbar, sidebar
│   │   │   ├── icons.json           # iOS 27 layered app icon model
│   │   │   ├── spacing.json         # 8pt grid, radius, metrics, safe areas
│   │   │   └── animations.json      # Spring curves, Liquid Glass morphing
│   │   ├── dist/css/                # tokens · typography · materials · icons
│   │   │                            #   · spacing · animations · legacy-aliases
│   │   └── build.js                 # Token pipeline (plain Node, no deps)
│   │
│   ├── react/                       # 14 components + Storybook
│   ├── svelte/                      # CSS-only
│   ├── rails/                       # CSS + Stimulus + ERB partials
│   ├── svelte-inertia/              # CSS-only + Rails layouts
│   ├── flutter/                     # Dart constants
│   └── metadata/                    # 36 component specs · 5 templates
│                                    #   · 5 sections · 48 page recipes
│
├── docs/
│   ├── whats-new-in-ios27.md        # iOS 26 → 27, with sources
│   └── icon-spec.md                 # App icon model and workflow
│
└── skills/ios27-design/             # Claude Code / AI skill (9 references)

Token naming

The canonical prefix is --ios27-*:

--ios27-color-accent-blue
--ios27-font-body-size
--ios27-space-4
--ios27-radius-lg
--ios27-glass-edge-color

iOS 26 names (--color-*, --font-*, --space-*, …) still resolve through an alias layer, so components written against the old names keep working:

@import '@ios27_design_system/tokens/css/legacy';  /* --color-* → --ios27-color-* */

New code should use the canonical names. The alias file is generated, not maintained by hand.

Quick start

Tokens (any framework)

import { colors, typography, materials, icons } from '@ios27_design_system/tokens';

import '@ios27_design_system/tokens/css';              // colors
import '@ios27_design_system/tokens/css/typography';   // type scale
import '@ios27_design_system/tokens/css/materials';    // Liquid Glass + slider
import '@ios27_design_system/tokens/css/icons';        // layered app icons
import '@ios27_design_system/tokens/css/spacing';      // grid, radius, metrics
import '@ios27_design_system/tokens/css/animations';   // springs, durations

React 18 / 19

import '@ios27_design_system/react/styles.css';
import { Button, Toolbar, ListSection, ListRow, Toggle } from '@ios27_design_system/react';

export function Settings() {
  return (
    <Page toolbar={<Toolbar title="Settings" largeTitle />}>
      <ListSection header="GENERAL">
        <ListRow trailing={<Toggle defaultChecked label="Wi-Fi" />}>Wi-Fi</ListRow>
      </ListSection>
      <Button variant="filled" size="large">Done</Button>
    </Page>
  );
}

Svelte 5

<script>
  import '@ios27_design_system/svelte/tokens.css';
  import '@ios27_design_system/svelte/typography.css';
  import '@ios27_design_system/svelte/materials.css';
</script>

<button class="ios27-button ios27-liquid-glass-sm">Done</button>

Rails 8

<%= stylesheet_link_tag "ios27/tokens" %>
<%= render "shared/ios27/toolbar", title: "Settings" %>

Flutter

import 'package:ios27_design/ios27_theme.dart';

MaterialApp(
  theme: iOS27Theme.light(),
  darkTheme: iOS27Theme.dark(),
);

App icons

iOS 27 rebuilt app icons around multiple glass layers baked into the artwork. The model, authoring guidance, and workflow are in docs/icon-spec.md; the machine-readable form is packages/tokens/src/icons.json.

<div class="ios27-app-icon">
  <div class="ios27-app-icon__layer--background"></div>
  <div class="ios27-app-icon__layer--middle"></div>
  <div class="ios27-app-icon__layer--foreground"></div>
</div>

Apple's templates and Icon Composer come from developer.apple.com/design/resources under Apple's license. They are not redistributed here.

Component specs

Every spec covers dimensions (pt), variants across size × style × state × mode, token mapping, state transitions, animation curves, accessibility (44×44pt minimum target, contrast), and per-framework implementation notes.

36 components — Tab Bar, Toolbar, Button, List Row, Alert, Sheet, Notifications, Progress, Segmented Control, Toggle, Slider, Stepper, Text Field, Picker, Search Field, Disclosure, Sidebars, Menus, Context Menus, Action Sheets, Popovers, Charts, Gauges, Rating Indicators, Labels, Keyboards, Widgets, App Icons, Face ID, Windows, System UI, and more.

48 page recipes — 25 iPhone, 23 iPad, each decomposed into template plus components.

Architecture

Tokens (atoms) → Components (molecules) → Templates (organisms) → Sections → Pages

Each layer references the one below. Specs reference token values; templates compose components; pages instantiate templates.

AI / agent integration

skills/ios27-design/ is a Claude Code skill with nine reference files — tokens, components, layouts, frameworks, SF Symbols, accessibility, glass legibility, and the Liquid Glass native API mapping.

git clone https://github.com/seunghan91/ios27-design-system.git
cp -r ios27-design-system/skills/ios27-design ~/.claude/skills/

The files are plain Markdown, so they also work as Cursor rules, Windsurf context, or context for any coding agent.

Sources and licensing

This is an independent, MIT-licensed reimplementation. It references Apple's published values and guidance; it does not redistribute Apple's assets, symbols, templates, or kit files.

iOS 27 changes — WWDC 2026 keynote and Platforms State of the Union (2026-06-08), Apple Developer documentation, developer beta reporting. Sources listed in docs/whats-new-in-ios27.md.
Inherited values — carried from ios26-design-system, derived from the official iOS & iPadOS 26 Figma Community Kit.
Apple's iOS 27 kit — Figma and Sketch, released 2026-06-23, updated 2026-07-24. Reconciling this repo against it is open work, tracked in the roadmap.
Apple Design Resources (icon templates, Icon Composer demo project) are covered by Apple's own license, which permits building mock-ups for Apple platforms but not extraction or redistribution. They are not in this repository.

Partially reconciled with Apple's official iOS 27 kit. Apple shipped iOS 27 design kits for Figma and Sketch on 2026-06-23. This repo has been measured against kit 27.0.2 (Figma 1651309003795292092) on 2026-07-29 via the Figma REST API:

Area Status

Liquid Glass regular / clear, scroll edge effects, uniform toolbar Measured

App icon canvas, grid, safe areas, squircle curvature, layer slots Measured

Spacing, radii, component metrics Measured — 31 values changed, 74 keys added

Typography Measured — Dynamic Type corrected, AX title sizes added

Colors Measured — identical to iOS 26. fills unverified: the kit's Fills grid is bound to label variables

Tab bar, sidebar, toolbar specs Measured

Remaining component specs and page recipes Still iOS 26

Figma's GLASS effect does not expose its blur radius through the REST API, so backdropBlur remains a web approximation; everything else in materials.json is transcribed from the kit. Apple publishes no numeric spec for the material itself — on Apple platforms use the SwiftUI glassEffect API.

Light/Dark parity is mandatory. Every token and component ships in both modes; single-mode contributions are rejected — see CONTRIBUTING.md.

Note that Apple removed the increased-contrast appearance mode from the iOS 27 Colors page (kit change log 27.0.0: "limited subcomponent support interfering with light and dark appearance mode switching"). The four-mode contract inherited from iOS 26 therefore no longer matches Apple's own kit for colors. Increased Contrast remains an accessibility setting to honor at runtime — it is simply no longer a separate authoring mode.

Roadmap

Contributing

Help is welcome on: new frameworks (React Native, SwiftUI, Jetpack Compose), Increased Contrast validation, WCAG audits, live glass demos, and additional page recipes. Open an issue before large PRs.

License

MIT — see LICENSE.

Apple, iOS, iPadOS, watchOS, Liquid Glass, and SF Symbols are trademarks of Apple Inc. This project is not affiliated with or endorsed by Apple.

Built by Dcode Labs
_{If this saved you time, a star helps others find it too.}

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
docs		docs
packages		packages
scripts		scripts
skills		skills
tools		tools
.gitignore		.gitignore
.npmrc		.npmrc
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.ja.md		README.ja.md
README.ko.md		README.ko.md
README.md		README.md
README.zh.md		README.zh.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Navigation Menu

Repository files navigation

iOS 27 Design System

Why this exists

What's new in iOS 27

The transparency slider, in practice

Install

What's inside

Token naming

Quick start

Tokens (any framework)

React 18 / 19

Svelte 5

Rails 8

Flutter

App icons

Component specs

Architecture

AI / agent integration

Sources and licensing

Roadmap

Contributing

License

About

Releases

Packages

Contributors

Languages

Area	Status
Liquid Glass regular / clear, scroll edge effects, uniform toolbar	Measured
App icon canvas, grid, safe areas, squircle curvature, layer slots	Measured
Spacing, radii, component metrics	Measured — 31 values changed, 74 keys added
Typography	Measured — Dynamic Type corrected, AX title sizes added
Colors	Measured — identical to iOS 26. `fills` unverified: the kit's Fills grid is bound to label variables
Tab bar, sidebar, toolbar specs	Measured
Remaining component specs and page recipes	Still iOS 26

Latest commit

History

Folders and files

Repository files navigation

iOS 27 Design System

Why this exists

What's new in iOS 27

The transparency slider, in practice

Install

What's inside

Token naming

Quick start

Tokens (any framework)

React 18 / 19

Svelte 5

Rails 8

Flutter

App icons

Component specs

Architecture

AI / agent integration

Sources and licensing

Roadmap

Contributing

License

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages