What is ios26-design?

A design system for building interfaces inspired by Apple’s iOS 26 Liquid Glass style on websites and cross-platform apps. It includes design tokens, typography guidance, and packages for Svelte, Rails, Hotwire, Inertia.js, and Dart.

Use it to build web or cross-platform interfaces with the specified Liquid Glass look, typography, spacing, and platform packages.

It gives developers shared visual rules and ready-made package options instead of defining the interface style from scratch.

ios26-design — Skill for Claude Code and Codex by seunghan91

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add seunghan91/ios26-design-system --skill ios26-design

Clone the repo

git clone --depth 1 https://github.com/seunghan91/ios26-design-system

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/seunghan91/ios26-design-system/ios26-design/github.svg)](https://agentmods.dev/skills/seunghan91/ios26-design-system/ios26-design)

Your own site

<a href="https://agentmods.dev/skills/seunghan91/ios26-design-system/ios26-design"><img src="https://agentmods.dev/badge/skills/seunghan91/ios26-design-system/ios26-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/seunghan91/ios26-design-system/ios26-design"><img src="https://agentmods.dev/badge/skills/seunghan91/ios26-design-system/ios26-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 187 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,919 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00187	$0.01919
Opus 5.5	$0.00075	$0.00768
Sonnet 5.5	$0.00037	$0.00384
Haiku 4.5	$0.00019	$0.00192

Measured 2mo ago against content hash c99de0c2b6dd, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

ios26-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/ios26-design/SKILL.md · 127 lines

How it starts

The opening of the file, as written. The whole thing — 127 lines — stays where its author put it; the contents beside it link to each section on GitHub.

iOS 26 Design System

Build iOS 26 Liquid Glass interfaces on web and cross-platform. Source: Apple Figma Community Kit

Packages

npm install @ios26_design_system/tokens          # CSS/JS/Dart tokens
npm install @ios26_design_system/svelte           # Svelte 5
npm install @ios26_design_system/rails            # Rails 8 + Hotwire
npm install @ios26_design_system/svelte-inertia   # Svelte 5 + Inertia.js
npm install @ios26_design_system/metadata         # 36 specs + 48 pages

Typography (SF Pro)

Style	Size	Line Height	Weight	Spacing
Large Title	34	41	Regular/Bold	0.4
Title 1	28	34	Regular/Bold	0.38
Title 2	22	28	Regular/Bold	-0.26
Title 3	20	25	Regular/Semibold	-0.45
Headline	17	22	Semibold	-0.43
Body	17	22	Regular/Semibold	-0.43
Callout	16	21	Regular/Semibold	-0.31
Subheadline	15	20	Regular/Semibold	-0.23
Footnote	13	18	Regular/Semibold	-0.08
Caption 1	12	16	Regular/Medium	0
Caption 2	11	13	Regular/Semibold	0.06

Font stack: "SF Pro", -apple-system, system-ui, sans-serif Dynamic Type: 7 standard sizes (xSmall–xxxLarge) + 5 accessibility sizes (AX1–AX5) per style — never hardcode px. Weights: 9-step SF ramp (ultraLight 100 → black 900). SF Pro Text < 20pt, Display ≥ 20pt (auto).

Spacing (8pt grid)

Scale:  0=0, 1=4, 2=8, 3=12, 4=16, 5=20, 6=24, 8=32, 10=40
Inset:  xs=8, sm=12, md=16, lg=20, xl=24, xxl=32
Margin: iPhone=16px, iPad=20px
Radius: none=0, xs=4, sm=8, md=10, lg=12, xl=16, xxl=20, full=9999

Liquid Glass

frostRadius: small=7px, medium=12px, large=14px
depth: 16, splay: 6, lightAngle: -45°
shadowBlur: layer=40px, background=80px

Light: large=#fafafa/0.7, medium=#f5f5f5/0.6
Dark:  large=#000/0.8, medium=#000/0.6 (+tint #fff/0.06)
Pill:  small=9999px, medium=20px, large=24px

Read the full file on GitHub · 127 lines

Files

What ships with it

8 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 127 lines · 187 tokens per session scan A c99de0c2b6dd

Subscribe to this mod's changes

ios26-design is a skill published in the GitHub repository seunghan91/ios26-design-system (26 stars, last pushed 3mo ago), licensed MIT. It adds 187 tokens to every session and 1,919 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX Mobile

ios26-design next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
ios26-designseunghan91/ios26-design-system	Skill	26	3mo ago	MIT	A	187	Claude Code, Codex
display-glasses-with-jetpack-compose-glimmerandroid/skills	Skill	10k	yesterday	Apache-2.0	A	112	Claude Code
glance-canonical-layoutsandroid/skills	Skill	10k	yesterday	Apache-2.0	A	56	Claude Code
expo-design-systemexpo/skills	Skill	4.1k	yesterday	MIT	A	197	Claude Code, Codex
flutter-build-responsive-layoutflutter/agent-plugins	Skill	3.2k	2d ago	BSD-3-Clause	A	51	Claude Code
omh-apple-designrlaope/oh-my-hermes	Skill	5.2k	yesterday	MIT	A	83	Claude Code, Codex
axiom-audit-liquid-glassCharlesWiltgen/Axiom	Skill	1.3k	yesterday	MIT	A	32	Codex