Platform catalog
Atoms, molecules, organisms, and templates. Materials are translated from MIT stylesheets. Copy the semantic HTML under each organism.
Materials
Liquid Glass
Atom states
Rest
Hover
Pressed
Focus
Disabled
Molecule states
Rest
Row
Detail
Note
Hint
Details
Body
12
Items
Hover
Row
Detail
Note
Hint
Details
Body
12
Items
Pressed
Row
Detail
Note
Hint
Details
Body
12
Items
Focus
Row
Detail
Note
Hint
Details
Body
12
Items
Disabled
Row
Detail
Note
Hint
Details
Body
12
Items
Organism states
Rest
Hover
Pressed
Focus
Disabled
Templates
List
Airplane Mode
Off
Wi-Fi
Home
Sheet
macOS template
Window
Document
Notes
Today
Organisms
Navigation bar
Settings
Large Title
<header data-bn="bn-nav-bar" data-large="true"><nav aria-label="Navigation"><a data-bn="bn-nav-back" href="/">Back</a></nav><h2 data-bn="bn-large-title">Settings</h2><p data-bn="bn-nav-subtitle">Large Title</p></header>Hero
Runtime
BaseNative
A glass window header composed from the hero organism.
<header data-bn="bn-hero"><p data-bn="bn-hero-eyebrow">Runtime</p><h2>BaseNative</h2><p data-bn="bn-hero-lede">A glass window header composed from the hero organism.</p><nav aria-label="Primary"><button data-bn="bn-button" data-variant="prominent" data-size="large" data-label="title" data-destructive="false" data-force="" type="button">Continue</button><button data-bn="bn-button" data-variant="bordered" data-size="large" data-label="title" data-destructive="false" data-force="" type="button">Cancel</button></nav></header>Inset grouped list
Settings
- W
Wi-Fi
Home
› - B
Bluetooth
On
Inset grouped list.
<section data-bn="bn-list-group"><h2 data-bn="bn-list-header">Settings</h2><ul data-bn="bn-list" data-grouped="true"><li data-bn="bn-list-row"><i data-bn="bn-symbol-tile" data-tint="blue" aria-hidden="true">W</i><p data-bn="bn-list-title">Wi-Fi</p><p data-bn="bn-list-value">Home</p><i data-bn="bn-list-chevron" aria-hidden="true">›</i></li><li data-bn="bn-list-row"><i data-bn="bn-symbol-tile" data-tint="blue" aria-hidden="true">B</i><p data-bn="bn-list-title">Bluetooth</p><p data-bn="bn-list-detail">On</p></li></ul><p data-bn="bn-list-footer">Inset grouped list.</p></section>Card grid
9.9KB
Runtime
gzip
45
Packages
public
Notes
Widget
<ul data-bn="bn-card-grid"><li><article data-bn="bn-metric"><p data-bn="bn-metric-value">9.9KB</p><h3 data-bn="bn-metric-label">Runtime</h3><p data-bn="bn-metric-detail">gzip</p></article></li><li><article data-bn="bn-metric"><p data-bn="bn-metric-value">45</p><h3 data-bn="bn-metric-label">Packages</h3><p data-bn="bn-metric-detail">public</p></article></li><li><article data-bn="bn-widget"><h2 data-bn="bn-widget-title">Notes</h2><p>Widget</p></article></li></ul>Inspector
Inspector
Type
<section data-bn="bn-inspector" aria-label="Inspector"><header><h2>Inspector</h2></header><section><h3>Type</h3><label data-bn="bn-field">Name<input data-bn="bn-field-control" type="text" id="bn-field-74" placeholder="Title"></label></section></section>Dock
<nav data-bn="bn-dock" aria-label="Dock"><ul><li><a data-bn="bn-dock-item" href="/" aria-current="page">Home</a></li><li><a data-bn="bn-dock-item" href="/docs">Docs</a></li></ul></nav>Footer
<footer data-bn="bn-footer"><nav aria-label="BaseNative"><p>BaseNative</p><ul><li><a href="/docs">Docs</a></li></ul></nav></footer>Badge and symbol
72
Degrees
Today
iOS light
Buttons
Pop-up and pull-down
Segmented
Switch, checkbox, radio
Slider and stepper
Progress
Fields
Color and date
List
Airplane Mode
Off
Wi-Fi
Home
Menu
Alert and action sheet
Sheet, popover, share
Popover corner radius is a dimension token.
Page control and tabs
Toolbar, sidebar, menu bar
Notification and empty
No Messages
New messages will appear here.
App icon, widget, accessory
Weather
72°
iOS dark
Buttons
Pop-up and pull-down
Segmented
Switch, checkbox, radio
Slider and stepper
Progress
Fields
Color and date
List
Airplane Mode
Off
Wi-Fi
Home
Menu
Alert and action sheet
Sheet, popover, share
Popover corner radius is a dimension token.
Page control and tabs
Toolbar, sidebar, menu bar
Notification and empty
No Messages
New messages will appear here.
App icon, widget, accessory
Weather
72°
iOS increased contrast
Prominent and secondary label
Secondary label
Dynamic Type xxxLarge
Large Title at xxxLarge
macOS light
Buttons
Pop-up, pull-down, combo
Segmented
Toggles
Slider, dial, stepper
Fields and search
Progress
Table
| Name | Kind |
|---|---|
| Report | |
| Notes | Text |
Menu and tooltip
Shows more detail
Alert and dialog
Disclosure, form, group
Advanced
More options.
Window, sidebar, toolbar
Document
Window background is the kit token.
Scroll, image well, notification
Scrollbar colour is Miscellaneous/Scrollbar. The track itself is native.
Sheen over the brand glow.
macOS dark
Buttons
Pop-up, pull-down, combo
Segmented
Toggles
Slider, dial, stepper
Fields and search
Progress
Table
| Name | Kind |
|---|---|
| Report | |
| Notes | Text |
Menu and tooltip
Shows more detail
Alert and dialog
Disclosure, form, group
Advanced
More options.
Window, sidebar, toolbar
Document
Window background is the kit token.
Scroll, image well, notification
Scrollbar colour is Miscellaneous/Scrollbar. The track itself is native.
Sheen over the brand glow.
macOS Large control
Capsule button
What the screenshots could not settle
- Fit-to-page screenshots. Every unread page was checked as a 1024×594 fit of the whole Figma page. Dense pages (Keyboards, Sidebars, Toolbars, Lists and Tables, Windows, Menu Bar and Dock) do not yield reliable pixel measurements. Those controls use tokens.json plus the HIG.
- macOS pressed fills. The Buttons page shows idle bordered gray and prominent blue, including capsule Large and XL. Clicked and disabled fills are not readable at this size, so pressed state is a brightness filter rather than a kit colour.
- macOS selected segment fill. The segmented-control page shows a joined control. Whether the selected cell is accent blue or a darker gray is not measurable in the fit. The catalog uses Accents/Blue.
- iOS switch pixels. The Toggles page confirms a pill, gray off and green on, with a white knob. The 51×31 size is the HIG control, not a measurement from the screenshot.
- Material blur radii. Materials pages were screenshotted, but the blur radius is not readable. macos.materials still supplies fill, opacity, and blend only. Frost-as-blur remains a mapping of the Liquid Glass frost number, not the kit GLASS effect.
- macOS Title 2 Emphasized font. The text style is "Inter Bold" in the kit file. Weight 700 is emitted. The family token is --bn-plat-font-title-2-emphasized-family and is likely a Figma fallback.
- Corner smoothing. corner-shape: squircle does not reproduce Figma smoothing 0.6. Captured controls still use the kit radii (1000 capsule, 12 and 40 borderless, 34 alert, 100 segmented track).
- Motion. Neither kit defines motion variables. No spring curves were added.
- Increased contrast. Derived. The kits have no increased-contrast mode. Labels raise alpha, fills and overlays lose transparency, non-opaque separators take Separators/Opaque, and opaque accents walk in lightness. See contrast.js.
- SF Symbols and app artwork. Not shipped. Icon slots are a text glyph or a monogram. Tab bar, toolbar, and share sheet use labels rather than Apple’s symbol set.