iOS 27 / iPadOS 27 design tokens — colors, typography, materials, spacing, animations, and app icon geometry, as CSS custom properties, JS/TS constants, and a Dart file.

Values are measured off Apple's official iOS 27 Figma Community UI Kit (27.0.2) and, where the kit could not answer, off the iOS simulator runtime. This package ships numbers and specifications only — no Apple design files are redistributed.

npm install @ios27_design_system/tokens

CSS

import '@ios27_design_system/tokens/css';            // colors
import '@ios27_design_system/tokens/css/typography';
import '@ios27_design_system/tokens/css/materials';
import '@ios27_design_system/tokens/css/spacing';
import '@ios27_design_system/tokens/css/animations';
import '@ios27_design_system/tokens/css/icons';

Every custom property is namespaced --ios27-:

.card {
  background: var(--ios27-color-bg-secondary);
  color: var(--ios27-color-label-primary);
  border-radius: var(--ios27-radius-card);
}

Dark mode

css emits two rules from one set of declarations:

:root[data-theme="dark"] { … }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { … }
}

Dark mode follows the system by default, and data-theme on <html> overrides it in either direction — data-theme="light" stays light even when the OS is dark.

A selector list cannot contain an at-rule. Writing :root[data-theme="dark"], @media (…) { :root { makes browsers discard the whole block and silently drop every dark value. Keep the two rules separate.

JavaScript / TypeScript

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

colors.accents.blue.dark;        // '#0091ff'
typography.styles.body.fontSize; // 17

Ships ESM, CJS, and type declarations. Exports colors, typography, materials, spacing, animations, icons.

Raw JSON

import colors from '@ios27_design_system/tokens/json/colors' with { type: 'json' };

Also available: json/typography, json/materials, json/spacing, json/animations, json/icons.

The JSON carries its own provenance. Keys with _measured were read off the kit's own layer geometry; anything without it is annotated in place, usually as carried over from the iOS 26 extraction and not attested by the iOS 27 kit. Read those notes before treating a value as authoritative.

Increased contrast

Colors carry icLight and icDark alongside light and dark. These reach you through the JSON and JS exports only — no CSS layer emits them yet, so a prefers-contrast: more stylesheet has to be wired by hand for now.

Flutter

// dist/dart/ios27_tokens.dart

Exported as @ios27_design_system/tokens/dart.

Migrating from iOS 26

css/legacy aliases the iOS 26 property names onto the current --ios27- ones, so an existing stylesheet keeps rendering while you migrate.

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

Colors did not change between iOS 26 and 27 — the kit ships identical values. Spacing, typography, and materials did.

License

MIT for this package's code and data. Apple's design resources are Apple's, licensed separately, and are not included here or in the repository.

Repository

Keywords

FAQs

What is @ios27_design_system/tokens?

Is @ios27_design_system/tokens well maintained?

Package last updated on 30 Jul 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ios27_design_system/tokens