v1.0.6-0032 symbol border backplates, active symbols, and dividers

A26 Web Design System

A documentation-led reference page rebuilt from the package rules, tokens, component docs, pattern docs, and packaged symbol assets.

Documentation-led 110 local symbols Pane-owned navigation No Apple font files
Dashboard

A26 reference app

Project source of truth

Rebuilt from the package documentation

The demo page now demonstrates the documented A26 system instead of accumulated one-off examples.

Source of truth

Project identity, token architecture, split-view hierarchy, toolbar rules, and workflow standards.

Tokens

Source tokens translate into normalized, semantic, component, and pattern layers.

Components

Groups, rows, buttons, toolbars, inputs, controls, menus, and presentation surfaces share the same primitives.

Patterns

Split view, settings pages, and responsive navigation show how primitives compose into app screens.

Token architecture

Source to component implementation

01Sourceapple-ios-26-ui-kit.tokens.json
02Normalizeda26.normalized.tokens.css
03Semantica26.semantic.tokens.css
04Componentcomponent-tokens.css
05Patternssettings-page.css

Identity and assets

Interface icon set preview

Every preview icon below is loaded from assets/symbols/regular/. Grouped/list symbols may use A26 App Icon-shaped backplates; toolbar and control symbols can remain standalone.

chart.bar.xaxis
binoculars
rectangle.split.3x1
sidebar.left
sidebar.right
magnifyingglass
command
info.circle
questionmark.circle
plus.circle
minus.circle
gear
chevron.left
chevron.right
chevron.up
chevron.down

Typography

Readable hierarchy with symbol alignment

A26 keeps text styles legible and pairs meaningful interface symbols with adjacent labels.

Large Title

Large Title

Title 1

Title 1

Title 2

Title 2

Title 3

Title 3

Headline

Headline

Body

Body text for rows and readable interface copy.

Footnote

Footnote metadata and supporting labels.

Caption

Caption text for compact labels.

Materials and surfaces

Navigation material, grouped content, elevated content

Regular materialControls and navigation surfaces
Thin materialLight transient layers
Clear materialSubtle glass treatments

Layout pattern

Primary, secondary, tertiary split view

Regular widths show hierarchy across panes. Compact widths collapse into a stack with back/reveal controls.

Overview

Secondary pane

Pattern sections

Detail

Tertiary pane

Selected detail

The tertiary pane holds deeper content without losing primary and secondary context.

Toolbar framework

Pane-owned leading, center, and trailing areas

Lots

Secondary pane

Toolbar titles describe the active pane or view, not the app name. One prominent trailing action is allowed when the action is primary.

Controls

Buttons, segmented controls, toggles, sliders, steppers

Buttons

Toggle row

System appearanceUse current platform setting

Slider and stepper

Forms

Search, text fields, and token fields

Field group

Tokens

Toolbar Split view

Token fields represent discrete values, not long-form editable content.

Settings pattern

Grouped rows over dashboard cards

General

AppearanceSystem, Light, Dark System DensityCompact, regular, roomy Regular Text sizeRespect platform scaling

Settings use groups, rows, labels, toggles, pickers, and disclosures rather than unrelated cards.

Application screen example

Design-system primitives composing an app page

Dashboard

Today

12Open requests
4Due today
98%Sync ready

Build audit

v1.0.6-0032 verification targets

Version

Visible metadata updated to v1.0.6-0032 with border-only App Icon-shaped backplates, active symbol foreground matching, and inset list divider repairs.

Symbols

110 regular SVG assets retained with local demo references.

Documentation

Page structure follows project docs, including standalone symbol defaults and app-icon shape rules.

Package

Static ZIP-ready package with local path verification.