Every colour Anchor Alert draws, what it means, and how well it reads. Green holds, amber asks for a look, red is the two minutes you are not asleep.
Roles
What each colour means. Every surface asks for a role, never a colour, so moving a role to another ramp step is one line in BrandPalette, and the label moves with it. Each role is a fill and the label that reads on it, fixed in both appearances.
White on #1C7B5A · 5.2:1
holdinggreen4The brand, and the state the app is in all night: holding, and the button that starts a watch.Used in: AnchorWatchStatus+AnchorAlertState, AppButtonStyles, PanelCapsuleTint, SubscriptionSheet
#1B1A18 on #F5A524 · 8.5:1
attentionamber3Something is worth a look and nothing is on fire. The Systems Check's warnings, "Checking", "Alarm off", and a button whose tap will explain rather than act.Used in: AnchorWatchStatus+AnchorAlertState, AppButtonStyles, BrandChrome, OnboardingDisclaimerView, OnboardingNotificationView, PanelCapsuleTint, RemoteView
White on #A1281B · 7.4:1
dangerred4The two minutes you are not asleep: dragging, the alarm, and the buttons that end a watch or throw work away. The sheet's darkest step rather than its headline step 3, and one line to change back.Used in: AnchorAlertMapContent, AnchorWatchStatus+AnchorAlertState, AppButtonStyles, BrandChrome, PanelCapsuleTint, SessionReplayMapView
White on #D93A2B · 4.6:1
dangerOnChromered3danger as drawn on chrome: the Systems Check pill on the bar when the watch is not working. Step 3 rather than the step danger wears, because step 4 sinks into the grey it sits on and a pill that says the alarm is not working must be the loudest thing on the bar. One line to bring it back in step with danger.Used in: BrandChrome
Black on #5B9BD5 · 7.1:1
neutralown hexonNAV's link blue: the family's colour for a control that commits you to nothing. Continue, Test alarm, the Done checkmark, and the map's scale rings. Also the app's accent, so AccentColor.colorset carries this same hex and the two must be edited together — the asset catalog is where ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME reads the tint for system controls, and it cannot read this file.Used in: AppButtonStyles, Color+App, OnboardingLocationView
White on #373340 · 12.3:1
chromeown hexMarNav's #373340, taken as it is so the two apps read as one family (#207): the bar over the map, the circle menu button, the logo badge. Single-appearance, so nothing adaptive may be drawn on it.Used in: BrandChrome
Ink
The same verdicts drawn on the page rather than on a fill: glyphs, dots, the drag ring, the alarm rows in the log. Ink has no background of its own, so it is the one part of the palette that flips with the appearance, one ramp step per side, each clearing 3:1 against its page. The app is locked dark (AppMain.swift, #207), so the dark side is what ships; the light side is drawn only on canvases.
⚠︎ holdinglight · green4 · 5.2:1
⚠︎ holdingdark · green3 · 5.7:1
holdingHolding, a passing check, the green segment of the distance bar.Used in: AnchorWatchStatus, SystemsStyle
⚠︎ attentionlight · amber4 · 3.6:1
⚠︎ attentiondark · amber3 · 8.3:1
attentionA warning, "Checking", the ring filling toward the siren.Used in: AnchorWatchStatus, SystemsStyle
⚠︎ dangerlight · red4 · 7.4:1
⚠︎ dangerdark · red3 · 3.7:1
dangerDragging, a failing check, and the alarm rows in the session log.Used in: AnchorWatchStatus, SessionEventRow, SystemsStyle
Ramp steps
Carson's ramps from the brand sheet (#236). Each hue keeps the steps that have been tried, so a role can be moved between them by looking at the app rather than at a swatch. A step no role or ink wears is marked unused.
#0FA97C · 5.1:1
green3oklch(0.66 0.13 165), "Holding Green". Sells the outcome rather than the hazard: the anchor is holding and you can sleep. Dark label, because white on this reads at 3.0:1 where the dark green manages 7.2:1.Worn by: ink holding
#1C7B5A · 5.2:1
green4oklch(0.52 0.10 165), one step darker, which takes white at 5.2:1.Worn by: holding, ink holding
#F5A524 · 8.5:1
amber3oklch(0.78 0.16 72), "Signal Amber". Reads as watch-standing and caution rather than emergency, which is what leaves red free to mean an actual drag.Worn by: attention, ink attention
#BC7800 · 5.8:1
amber4oklch(0.63 0.14 72), one step darker. Still a dark label: white on it is 3.6:1, black is 5.8:1.Worn by: ink attention
#D93A2B · 4.6:1
red3oklch(0.58 0.20 30), "Alarm Red", the value printed on the sheet.Worn by: dangerOnChrome, ink danger
#A1281B · 7.4:1
red4oklch(0.47 0.16 30), one step darker: white on it reads at 7.4:1 against step 3's 4.7:1, and a deeper red is less shouty on the surfaces that wear it all night.Worn by: danger, ink danger
#5E1B13 · 12.8:1
red5oklch(0.33 0.10 30), the darkest step on the sheet, and the one that ships. Nearly maroon: it reads as a warning rather than an emergency light, which suits a button worn all night beside a green that means everything is fine. White on it is 12.8:1.Worn by: unused
Written by Design/tools/build-palette.py from
AnchorAlertWidgets/BrandPalette.swift. Contrast is WCAG 2's ratio; the bar is 4.5:1 for text and 3:1
for a glyph, a line or large bold text. AnchorAlertTests/Views/BrandPaletteTests.swift holds the ink to
it in both appearances. The previews in BrandPalette.swift, AppButtonStyles.swift and
BrandChrome.swift draw the same set in Xcode.