Switches
Integrations
Best for
App directories and connection screens — each card turns one integration on
Anatomy
Dark header with search · 2×2 integration cards: logo, category badge, description, Configure/Connect · drawer footer
Integrations
Connect the tools your team already uses.
Email preferences
Best for
Notification and subscription settings — grouped rows that apply the moment they are flipped
Anatomy
Dark list header · labelled groups · switch rows with description · a frequency dropdown · one locked row · stepper footer
Email preferences
Fine-tune what lands in your inbox.
General
Activity
Connected accounts
Best for
Social and sync settings — a count strip that follows the switches, with a broken account to repair
Anatomy
Active/Paused/Needs-action counts · account rows with mark, handle, sync time, status pill · brand switch or Reconnect · footer
Notification settings
Best for
Per-channel delivery — one row per event, one column per channel, a switch at every crossing
Anatomy
Grey list header · Email/Push/SMS column heads · switch matrix · an Activity rule cutting the rows in two · stepper footer
Notification settings
Pick a channel for each kind of update.
Data & privacy
Best for
Consent and tracking choices — optional categories over one that cannot be turned off
Anatomy
Grey list header · consent rows with a learn-more link · a Required row · live count in the footer
Data & privacy
Control what you share. You can change this anytime.
Switch card
Best for
A choice that needs a mark and a line of explanation — one branded toggle
Anatomy
360×81 card · 28px mark · label, sub-label and badge · description · 44px track
Integration card
Best for
App directory grids — the integration stacked, so the cards tile
Anatomy
360 tile · mark and track on the top row · label, sub-label and badge · description · Manage full width under the copy
Integration row
Best for
Settings lists of connected apps — the integration on one line
Anatomy
Mark · label, sub-label and badge · description · Manage and the 44px track trailing · wraps the action under the copy on a phone
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Switches
Integrations
Best for
App directories and connection screens — each card turns one integration on
Anatomy
Dark header with search · 2×2 integration cards: logo, category badge, description, Configure/Connect · drawer footer
Integrations
Connect the tools your team already uses.
Email preferences
Best for
Notification and subscription settings — grouped rows that apply the moment they are flipped
Anatomy
Dark list header · labelled groups · switch rows with description · a frequency dropdown · one locked row · stepper footer
Email preferences
Fine-tune what lands in your inbox.
General
Activity
Connected accounts
Best for
Social and sync settings — a count strip that follows the switches, with a broken account to repair
Anatomy
Active/Paused/Needs-action counts · account rows with mark, handle, sync time, status pill · brand switch or Reconnect · footer
Notification settings
Best for
Per-channel delivery — one row per event, one column per channel, a switch at every crossing
Anatomy
Grey list header · Email/Push/SMS column heads · switch matrix · an Activity rule cutting the rows in two · stepper footer
Notification settings
Pick a channel for each kind of update.
Data & privacy
Best for
Consent and tracking choices — optional categories over one that cannot be turned off
Anatomy
Grey list header · consent rows with a learn-more link · a Required row · live count in the footer
Data & privacy
Control what you share. You can change this anytime.
Switch card
Best for
A choice that needs a mark and a line of explanation — one branded toggle
Anatomy
360×81 card · 28px mark · label, sub-label and badge · description · 44px track
Integration card
Best for
App directory grids — the integration stacked, so the cards tile
Anatomy
360 tile · mark and track on the top row · label, sub-label and badge · description · Manage full width under the copy
Integration row
Best for
Settings lists of connected apps — the integration on one line
Anatomy
Mark · label, sub-label and badge · description · Manage and the 44px track trailing · wraps the action under the copy on a phone
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.