The canonical geometry for NotchBay's island in its three states: synthesized from Apple's Live Activities HIG, measured MacBook hardware, and the constants inside every serious notch app (Boring Notch, DynamicNotchKit, Notchmeister). Every number here is either Apple-official, hardware-measured, or ecosystem-converged. This page renders the reference implementation; the app and the marketing site both conform to it.
The island is the notch grown outward. Top edge flush with the screen edge, horizontally centered on the camera, pure #000 fill so glass and pixels are indistinguishable. Never floats, never offsets.
The central NOTCH_W × NOTCH_H region is the camera housing. Content hugs it with zero decorative padding (Apple: "don't add padding between content and the camera") but never enters it.
Top corners flare outward (concave, small) to merge with the bezel; bottom corners round inward (convex, ≈2× the top). Hardware itself: 4/8. Closed: 9/18. Open: 16/42, 42 is Apple's 44pt island radius, Mac-tuned.
Apple's nesting law: inner radius = outer radius − margin. A tile inset 24pt inside the open island's 42pt corner gets radius 18. Blur the shape: if the glow isn't concentric, the radius is wrong.
Geometry animates on springs, never eases. Open: response .42 / damping .80 (one soft bounce). Close: .45 / 1.0 (fully damped, collapsing UI must never wobble). State swap: .40 / .74. Content cross-fades; it is never torn down and rebuilt. Hard cap 2s.
Closed states cast no shadow, hardware doesn't glow. The shadow appears only when the island opens (0 24 48 black/50%) or hovers, marking the moment it becomes software.
The island never has an arbitrary width. Closed: NOTCH_W + 2 × shoulder, where each shoulder is its content's natural width plus insets, floored at 48. Open: the card's designed width, floored at NOTCH_W + 2 × r-top-open. Symmetry is mandatory, both shoulders always match.
Closed islands overhang the hardware notch by +2pt per side so no bezel seam ever shows. On screens without a notch the same shapes render, anchored to the menu-bar edge.
The resting state. It is the hardware notch plus 2pt of seam, with the subtlest signs of life: a battery dot on the leading edge, a chevron on the trailing edge, both inside a 10pt inset. Radii 5/12: barely softer than the raw cutout's 4/8, so it reads as hardware.
A live activity grows two symmetric shoulders out of the notch. Leading shoulder = identity (who), trailing = live state (what). Width is derived, never designed: each shoulder is its content's natural width plus the 14pt outer inset, floored at 48. Content sits vertically centered, hugs the safe zone with at most an 8pt working gap, and keeps 14pt from the outer edge. Radii 9/18.
Press, and the chip inflates into a card on the open spring. The top 38pt remain the sensor band: content wraps around it, never under it (Apple: "no forehead"). Horizontal padding is 24pt; by the concentric law, any tile that approaches the 42pt bottom corners gets radius 42 − 24 = 18. The shadow appears here and only here.
Every glyph in the island is an Apple SF Symbol, rendered by the OS in the app. Identifiers below are the canonical symbol names; the swatches are the OS's own renders of each symbol: official Apple artwork at the exact weight and color, not redrawn approximations. Each specimen shows the glyph at 3× inside its true point box, with its size · weight · color token and the padding rule that binds it to its neighbors.
Six sizes only: 9pt idle whispers · 10–11pt buttons, badges, footers · 12pt chip identity · 13pt beside timers · 16pt card buttons · 20pt+ card heroes. A glyph matches the text it sits beside, never larger.
Default semibold; bold inside tinted buttons. Color is always a semantic token: systemRed for live/leave, systemGreen for success/charge, #FF9429 timer, app ambient tints for skins, white opacities (.32/.35/.38/.55/.85) for chrome. Never decorative.
Glyph→label gaps by context: 5 strip metrics · 6 compact labels · 7 transcribe · 8 call timer · 10–12 card headers. Buttons center their glyph: 26×22 r7 pills, 44pt circles, 30×20 ellipsis frame, 24×24 hit frames.
Everything the island can become, from the app's own enums. Four families: transient peek HUDs (seconds, then gone), persistent closed chips (compact accessories with their per-side shoulder widths), expanded cards, and app skins (the frontmost app takes the island over). Priority resolves conflicts, a call always beats a volume flash.
| Kind | Apps | Ambient tint | Status |
|---|---|---|---|
| Browser | Safari · Safari TP · Chrome · Chrome Canary · Brave · Comet · Arc-class Chromium | #298CFF · #4285F5 · #FA7338 · #24B8B8 (curated per app) | Shipped |
| AI agent | Claude / Claude Code · Codex · Antigravity | Claude #D9784D | Shipped |
| Meeting | Zoom · Google Meet (browser bridge) | provider blue / green | Shipped |
| Meeting | Microsoft Teams | #4B53BC | Soon |
| Canvas | Figma-class design apps | sampled from icon | Detection shipped |
| Generic | any other app (app.dashed fallback) | sampled from icon, floor-saturated | Shipped |
call 100 → meeting 88 → notification 85 → volume / brightness / airdrop 80 → connectivity 75 → battery 70 → transcribe 65 → skins & ambient states below. A higher activity always interrupts a lower one; equal-priority flashes queue. Nothing fights, the island shows exactly one thing at a time.
Every constant, with provenance. NOTCH_W/H are measured live per machine (this one: 220×38, a 16" at 1800×1169; a 14" at default scaling is 185×32). Points, not pixels.
| Token | S1 · Notch | S2 · Closed | S3 · Expanded |
|---|---|---|---|
| width | NOTCH_W + 4ecosystem: +2/side seam overhang |
NOTCH_W + 2×shouldershoulder = content + insets, min 48 · Apple compact grammar |
max(card, NOTCH_W + 32)floor = notch + 2×r-top · DynamicNotchKit |
| height | NOTCH_H (38)safeAreaInsets.top, measured |
clamp(NOTCH_H, 34, 44)app accessoryHeight |
card (184–376)Mac cards exceed iPhone's 160 cap deliberately |
| radius top / bottom | 5 / 12hardware is 4/8 (Notchmeister); +1 softness |
9 / 181:2 grammar · verified vs live app capture |
16 / 4242 ≈ Apple's 44pt island radius |
| content padding | 3 / 10 |
3 / 4 shell · 14 outer inset · ≤8 notch hug |
24 horizontal · 44 sensor band · 14 bottom |
| safe zone | central NOTCH_W × NOTCH_H: content hugs with zero decorative padding, never enters. Camera is the fixed center of the universe; the island grows symmetrically around it. | ||
| shadow | none |
none |
0 24 48 rgba(0,0,0,.5)shadow = software; Boring/DNK convention |
| motion | open spring(.42, .80) · close spring(.45, 1.0) · swap spring(.40, .74) · content cross-fades (never rebuilt) · hover-open delay 300ms, hover-out 100ms · cap 2s | ||
| hover (S1/S2) | width +14 · height → menubar · pull-handle 17×2 white/24% at bottom−1 · haptic tick |
, | |