@ios27_design_system/svelte

iOS 27 Design System for Svelte 5

Design tokens, typography, materials, and component patterns extracted from the Apple iOS & iPadOS 26 Figma Community Kit, adapted for pure Svelte 5 (runes mode).

Files

File	Purpose
tokens.css	CSS custom properties for colors, typography, spacing, materials
typography.css	11 text style classes with emphasized, italic, and loose modifiers
materials.css	Liquid Glass effects and background material blur classes
components.svelte.md	Component mapping guide with Svelte 5 $props() signatures

Setup

1. Import tokens into your app entry point

In your root layout or app.css:

@import './path-to/tokens.css';
@import './path-to/typography.css';
@import './path-to/materials.css';

Or in +layout.svelte:

<script>
  import './path-to/tokens.css';
  import './path-to/typography.css';
  import './path-to/materials.css';
</script>

2. Framework requirements

• Svelte 5 with runes mode enabled (default in Svelte 5)
• SvelteKit with @sveltejs/adapter-static for Tauri integration
• No external CSS framework required -- all styles are vanilla CSS custom properties

Usage Examples

Basic screen with tokens

<script>
  let count = $state(0);
</script>

<div class="screen">
  <header class="toolbar liquid-glass-large">
    <h1 class="text-headline">Settings</h1>
  </header>

  <main class="content">
    <section class="card">
      <h2 class="text-title3 emphasized">Account</h2>
      <p class="text-body text-secondary">Manage your profile and preferences.</p>
    </section>

    <button
      class="action-button"
      onclick={() => count++}
    >
      Tapped {count} times
    </button>
  </main>
</div>

<style>
  .screen {
    min-height: 100vh;
    background-color: var(--bg-grouped-primary);
    color: var(--label-primary);
    font-family: var(--font-family);
  }

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--toolbar-height);
    padding: 0 var(--space-4);
  }

  .content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .card {
    background-color: var(--bg-grouped-secondary);
    border-radius: 10px;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .action-button {
    background-color: var(--color-blue);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .action-button:active {
    opacity: 0.7;
  }
</style>

Grouped list with sections

<div class="list">
  <div class="list-header text-footnote text-secondary">GENERAL</div>
  <div class="list-group">
    <div class="list-row">
      <span class="text-body">Notifications</span>
      <span class="text-body text-secondary">On</span>
    </div>
    <div class="list-separator"></div>
    <div class="list-row">
      <span class="text-body">Sounds</span>
      <span class="text-body text-secondary">Default</span>
    </div>
  </div>
</div>

<style>
  .list {
    padding: 0 var(--space-4);
  }

  .list-header {
    padding: var(--space-2) var(--space-4) var(--space-1);
    text-transform: uppercase;
  }

  .list-group {
    background-color: var(--bg-grouped-secondary);
    border-radius: 10px;
    overflow: hidden;
  }

  .list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--list-row-height);
    padding: 0 var(--space-4);
  }

  .list-separator {
    height: var(--separator-height);
    background-color: var(--separator-opaque);
    margin-left: var(--space-4);
  }
</style>

Liquid Glass toolbar

<nav class="bottom-bar liquid-glass-large">
  <button class="bar-item active">
    <span>Home</span>
  </button>
  <button class="bar-item">
    <span>Search</span>
  </button>
  <button class="bar-item">
    <span>Profile</span>
  </button>
</nav>

<style>
  .bottom-bar {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-6);
  }

  .bar-item {
    background: none;
    border: none;
    color: var(--label-secondary);
    font-size: var(--text-caption2);
    cursor: pointer;
  }

  .bar-item.active {
    color: var(--color-blue);
  }
</style>

Dark Mode

Dark mode works automatically via @media (prefers-color-scheme: dark) overrides defined in tokens.css. All CSS variables update without any JavaScript. Components using these variables will adapt seamlessly.

To test dark mode in development, toggle your OS appearance or use browser DevTools to emulate prefers-color-scheme: dark.

Design Tokens Quick Reference

Category	Variables	Count
System Colors	--color-red through --color-brown	12
Labels	--label-primary through --label-quaternary	4
Backgrounds	--bg-primary, --bg-grouped-*	6
Fills	--fill-primary through --fill-quaternary	4
Grays	--black, --gray through --gray-6, --white	8
Typography sizes	--text-large-title through --text-caption2	11
Spacing	--space-0 through --space-16	12
Materials	--blur-*, --glass-*	20+