Layouts

Island Pulse renders four distinct layouts on the Lock Screen and Dynamic Island. Pick the one that matches the shape of your data. All layouts share the same branding fields (icon, accentColor) and the same status field.

Default

The all-purpose layout. Use it for any text-based status update where a single message is enough.

9:41

deploy-api

Island Pulse now

Deployed to production in 38s

deploy-api SUCCESS

Default layout, Lock Screen card

Fields

Field	Required	Notes
`message`	Yes	Main body text. Wraps to two lines on the Lock Screen.
`status`	No	`running` (default), `success`, or `failed`. Controls the status indicator color.
`icon`	No	SF Symbol name, e.g. `bolt.fill`, `checkmark.circle`.
`accentColor`	No	Hex code (`#00FFDD`) or CSS color name (`green`).

{
  "job_id": "deploy-api",
  "layout": "default",
  "message": "Deployed to production in 38s",
  "status": "success",
  "icon": "checkmark.circle.fill",
  "accentColor": "#00FF88"
}

Progress

Best for long-running tasks where showing progress matters, deployments, data migrations, backup jobs.

9:41

Database Migration

Island Pulse now

Database Migration Step 2/5

Migrating users table…

Progress layout, showing 40% completion

Fields

Field	Max (no scale)	Max (with scale)	Notes
`metric`	10 chars	15 chars	Status text next to the job name, e.g. `42%`, `Step 2/5`.
`message`	40 chars	80 chars	Footer text below the progress bar.
`progress`	-	-	Float `0.0`–`1.0`. Pass `0`–`100` and it auto-normalizes.

The job_id value is displayed directly on the card as the task label, so use a short slug (letters, digits, _, -) that reads well for this layout.

{
  "job_id": "database-migration",
  "layout": "progress",
  "message": "Migrating users table…",
  "metric": "Step 2/5",
  "progress": 0.4,
  "status": "running",
  "accentColor": "#00CFFF"
}

Send a final update with progress: 1.0 and status: "success" to show the bar full and the job complete:

{
  "job_id": "database-migration",
  "layout": "progress",
  "message": "Migration complete. 1.2M rows processed.",
  "metric": "Done",
  "progress": 1.0,
  "status": "success"
}

Score

A hero-metric layout. Use it when one number is the whole story, a price, a count, a load percentage.

9:41

$48,210

Island Pulse now

+4.2%

$48,210

Monthly Recurring Revenue

Score layout, hero metric with trend badge

Fields

Field	Max (no scale)	Max (with scale)	Notes
`metric`	8 chars	16 chars	Large hero text. Automatically shrinks if over 12 chars.
`message`	20 chars	45 chars	Descriptive label. Wraps to two lines.
`secondaryMetric`	10 chars	10 chars	Small badge in the top-right corner, e.g. `+12%`, `▲ 3`.

{
  "job_id": "mrr-live",
  "layout": "score",
  "metric": "$48,210",
  "message": "Monthly Recurring Revenue",
  "secondaryMetric": "+4.2%",
  "status": "running",
  "accentColor": "#00FF88"
}

Another common use, server load or error rate:

{
  "job_id": "p99-latency",
  "layout": "score",
  "metric": "142ms",
  "message": "p99 response time",
  "secondaryMetric": "HEALTHY",
  "status": "running",
  "icon": "server.rack"
}

Sports

A dual-metric layout for any head-to-head comparison, scores, A/B splits, team dashboards.

9:41

3 – 1

Island Pulse now

3 Home

FINAL

1 Away

Sports layout, dual score with status badge

Fields

Field	Max (no scale)	Max (with scale)	Notes
`metricA`	3 chars	6 chars	Left large score.
`metricB`	3 chars	6 chars	Right large score.
`subA`	6 chars	10 chars	Label under `metricA`, e.g. team name.
`subB`	6 chars	10 chars	Label under `metricB`.
`secondaryMetric`	8 chars	12 chars	Center badge, e.g. `FINAL`, `Q3`, `90+4'`.

{
  "job_id": "game-score",
  "layout": "sports",
  "metricA": "3",
  "metricB": "1",
  "subA": "Home",
  "subB": "Away",
  "secondaryMetric": "FINAL",
  "status": "success"
}

Works equally well for non-sports comparisons like A/B test results or split revenue metrics:

{
  "job_id": "ab-test",
  "layout": "sports",
  "metricA": "4.2%",
  "metricB": "3.8%",
  "subA": "Variant A",
  "subB": "Variant B",
  "secondaryMetric": "LIVE",
  "status": "running",
  "accentColor": "#AA88FF"
}

Branding fields (all layouts)

These fields work on every layout:

Field	Notes
`icon`	Any SF Symbol name. Browse the full set in Apple’s SF Symbols app.
`accentColor`	Hex (`#FF5500`) or CSS color name (`orange`, `green`, `red`). Tints the icon and accent elements.

If you omit accentColor, the app falls back to the user’s chosen default accent in Island Pulse settings.