Lane C: platform guidance and global product direction (2025-2026)
Status: Reference · Date: 2026-10-08 · Evidence appendix for visual-benchmark-2026-10-08.md. Frame and crop paths refer to the session scratch directory (not committed); App Store frames are re-fetchable from the store URLs in the tables.
Date of research: 2026-10-08. Language: English. Every claim carries a URL or a frame file name. Paths below are relative to /tmp/claude-1000/-home-sungkyu08-Dev-twomore-v2/9e052da6-463b-47d5-958b-a7a7f703ba4b/scratchpad/bench/.
Reference point (ours): canvas #F8FBF9 = L* 98.3, C* 1.5; white card = L* 100; card-vs-canvas contrast 1.042:1; delta L* = 1.7 and no border or shadow.
0. The answer in six lines
- Our canvas-to-card step (delta L* 1.7, no border) is below every working system I could read. Systems that separate a white card from a canvas with tone alone use delta L* 3.0 to 5.2 (Monzo 3.0, Seed/Toss 3.9, iOS 4.4, Cash App 5.2). Systems that stay near 2 use a 1px hairline (Notion delta 2.4, Geist delta 1.7 with
gray-alphaborders). - The grey-canvas cluster is real but not the majority: 5 of 16 measured light apps open on a grey or tinted canvas with white cards (Cash App, Monzo, Notion home, Toss, Apple Store), 11 of 16 open on pure white. Per frame: 31 white-flat, 11 cards-on-grey, 3 colour-block, 0 shadow-led (45 accepted light frames).
- Apple iOS 26 kept
#F2F2F7(L* 95.6) as the grouped list canvas; I measured it in Apple's own Developer app (frames_c/appledeveloper/640199958_4.png). Liquid Glass lives only in the navigation layer; Apple says not to use it in the content layer. - Material 3 Expressive did not move to bold flat backgrounds. Its default Filled card is
surfaceContainerHighest(tone 90, no shadow) onsurface(tone 98): delta L* 8, the biggest tonal step of any platform I read. - Saturated colour in the measured light apps lives mostly in buttons (8 of 16 apps), with 4 apps using one bounded colour block (hero card or header bar), 3 using photography or 3D icons as the colour carrier and 1 (Duolingo) using colour everywhere. Median saturated-pixel share over 45 light frames is 2.9% (IQR 0.7 to 8.2).
- A mint-tinted canvas at L* 96.5 to 97 (for example
#F0F7F3L* 96.6, C* 3.2, or Monzo's#F1F8F4L* 97.0) keeps hue and gets delta L* 3.0 to 3.4. That is the cheapest change that moves us into the documented range without going grey.
1. Platform value tables
1a. Material 3 and M3 Expressive
Sources: colour tone table https://raw.githubusercontent.com/material-components/material-components-android/master/docs/theming/Color.md ; shapes https://raw.githubusercontent.com/material-components/material-components-android/master/docs/theming/Shape.md ; type https://raw.githubusercontent.com/material-components/material-components-android/master/docs/theming/Typography.md ; Compose tokens https://raw.githubusercontent.com/androidx/androidx/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/ (ShapeTokens.kt, FilledCardTokens.kt, ElevatedCardTokens.kt, ListTokens.kt). m3.material.io pages are script-rendered; WebFetch returned only the page title for /styles/color/roles and /blog/building-with-m3-expressive, so I used the Android and Compose source of truth instead.
Surface tiers (baseline scheme; "neutralNN" is the neutral palette at tone NN, and M3 tone equals CIE L*, so L* is the tone):
| Role | Light tone (L*) | Dark tone | Delta L* from surface (light) |
|---|---|---|---|
| Surface / Surface Bright | 98 | 6 / 24 | 0 |
| Surface Dim | 87 | 6 | -11 |
| Surface Container Lowest | 100 (white) | 4 | +2 |
| Surface Container Low | 96 | 10 | -2 |
| Surface Container | 94 | 12 | -4 |
| Surface Container High | 92 | 17 | -6 |
| Surface Container Highest | 90 | 22 | -8 |
| On Surface | 10 | 90 | n/a |
| Outline / Outline Variant | neutral_variant 50 / 80 | 60 / 30 | n/a |
| Primary | primary40 | primary80 | n/a |
What a card on a surface looks like (Compose token files):
- Filled card:
ContainerColor = SurfaceContainerHighest,ContainerElevation = Level0(no shadow),ContainerShape = CornerMedium(12dp). That is tone 90 on tone 98, tonal only. - Elevated card:
SurfaceContainerLow(96),Level1elevation (a shadow remains),CornerMedium12dp. - Expressive segmented list items (
ListTokens.kt):ItemSegmentedContainerColor = Surface,SegmentedGap = 2.0dp,ContainerShape = CornerLarge(16dp), one-line row height 56dp, two-line 72dp, three-line 88dp. - Our own pair, canvas 98.3 and card 100, equals M3's
surfaceandsurfaceContainerLowest(98 and 100). M3 uses that pair only as the lowest tier; its default card steps are 8 (filled) or 2 plus a shadow (elevated).
Shape scale (ShapeTokens.kt and Shape.md agree): None 0, ExtraSmall 4, Small 8, Medium 12, Large 16, LargeIncreased 20, ExtraLarge 28, ExtraLargeIncreased 32, ExtraExtraLarge 48 (new in Expressive: LargeIncreased, ExtraLargeIncreased, ExtraExtraLarge), Full 50%.
Type scale (Typography.md; sizes in sp, with the new emphasized weight in the last column):
| Role | Size | Baseline weight | Emphasized weight |
|---|---|---|---|
| Display L / M / S | 57 / 45 / 36 | Regular | Medium |
| Headline L / M / S | 32 / 28 / 24 | Regular | Medium |
| Title L | 22 | Regular | Medium |
| Title M / S | 16 / 14 | Medium | Bold |
| Body L / M / S | 16 / 14 / 12 | Regular | Medium |
| Label L / M / S | 14 / 12 / 11 | Medium | Bold |
Compose's emphasized token values are marked "TODO update with the generated tokens" in TypographyTokens.kt, so treat the exact emphasized sizes as provisional.
Expressive research claims, quoted from Google's own post https://design.google/library/expressive-material-design-google-research :
- "46 separate research studies with hundreds of designs, and more than 18,000 participants".
- "Participants were able to spot key UI elements up to four times faster in the M3 Expressive designs" (eye-tracking, email Send button example, enlarged button in a secondary colour).
- "well-applied, expressive design is strongly preferred by people of all ages"; "up to 87%" among 18 to 24 year olds; 45-plus users performed "on par with their younger counterparts".
- Counter-evidence in the same post: "a strong minority of users preferred calmer, less intense versions"; a playlist redesign that broke standard patterns "suffered" in usability; removing text labels from email actions "resulted in decreased usability".
- The post's list of expressive levers is "color, shape, size, motion, and containment"; it says nothing about typography. No retention or engagement metric is reported; the measured outcomes are attention speed, tap time, preference and emotional rating (so "engagement" in the owner's sense is not evidenced).
- The original Google blog was reportedly pulled and re-circulated through archives (https://www.androidauthority.com/google-material-3-expressive-details-3554486/ returned HTTP 403 to me); I relied on the design.google page only.
1b. Apple iOS 26 / Liquid Glass
Sources: HIG Color page https://developer.apple.com/design/human-interface-guidelines/color (the swatch tables are images, text extraction gives names only; Apple states values "may fluctuate from release to release"); HIG Materials data https://developer.apple.com/tutorials/data/design/human-interface-guidelines/materials.json ; HIG Layout data https://developer.apple.com/tutorials/data/design/human-interface-guidelines/layout.json ; UIKit-mirror values from Flutter's Cupertino port https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/cupertino/colors.dart ; WWDC25 session 356 notes https://wwdcnotes.com/documentation/wwdc25-356-get-to-know-the-new-design-system/ (official video https://developer.apple.com/videos/play/wwdc2025/356 returned only an intro).
| Role | Light | Dark | L* (light) |
|---|---|---|---|
| systemBackground | #FFFFFF | #000000 | 100 |
| secondarySystemBackground | #F2F2F7 | #1C1C1E | 95.6 |
| tertiarySystemBackground | #FFFFFF | #2C2C2E | 100 |
| systemGroupedBackground | #F2F2F7 | #000000 | 95.6 |
| secondarySystemGroupedBackground | #FFFFFF | #1C1C1E | 100 |
| tertiarySystemGroupedBackground | #F2F2F7 | #2C2C2E | 95.6 |
| separator | rgba(60,60,67, 73/255 = 28.6%) | rgba(84,84,88, 60%) | n/a |
| opaqueSeparator | #C6C6C8 | #38383A | n/a |
| label | #000000 100% | #FFFFFF | n/a |
| secondaryLabel / tertiary / quaternary | #3C3C43 at 60% / 30% / 18% | #EBEBF5 at 60% / 30% / 16% | n/a |
| systemFill | #787880 at 20% | #787880 at 36% | n/a |
| systemBlue / systemGreen | #007AFF / #34C759 | n/a | n/a |
Grouped canvas still #F2F2F7 on iOS 26, measured: Apple Developer 11.1 (updated 2026-09-22, id 640199958) Account screen has canvas #F2F2F7 at 78.5% of pixels and white rows at 17.1%, rows drawn as full capsules (frames_c/appledeveloper/640199958_4.png). Apple Store 6.9 (id 375380948) "For You" frame: #F2F2F7 58.0% plus white cards (frames_c/appstore_apple/375380948_0.png, crop crops_c/m_appstore_0.png).
Liquid Glass and surface separation (HIG Materials JSON):
- "Liquid Glass forms a distinct functional layer for controls and navigation elements — like tab bars and sidebars — that floats above the content layer."
- "Don't use Liquid Glass in the content layer ... Instead, use standard materials for elements in the content layer, such as app backgrounds."
- Regular variant for text-heavy components; clear variant only over rich media, with a 35% dark dim if the content is bright.
- Colour guidance (HIG Color): "Apply color sparingly to the Liquid Glass material"; "To emphasize primary actions, apply color to the background rather than to symbols or text"; "Refrain from adding color to the background of multiple controls."
- HIG Layout change log: "June 9, 2025: Added guidance for Liquid Glass"; "Instead of applying a solid or semi-opaque background color beneath controls, use a scroll edge effect".
- Corners (WWDC25 session 356 notes): three shapes, fixed, capsule (radius = half the height) and concentric (inner radius = outer radius minus padding); capsules recommended for controls near the screen edge on iPhone. SwiftUI
ConcentricRectanglecomputes nested radii: https://www.createwithswift.com/exploring-concentricity-in-swiftui/ and https://nilcoalescing.com/blog/ConcentricRectangleInSwiftUI . - Usability critique, expert review without participants: NN/g, "Liquid Glass Is Cracked, and Usability Suffers in iOS 26" https://www.nngroup.com/articles/liquid-glass/ ("light, airy — and often invisible"; "the contrast between the text and the background is often too low"; search bar "tends to fade into the background").
1c. Published tokens from product design systems (read from source files)
| System | Surface / canvas | Neutrals and dividers | Radius / type | URL |
|---|---|---|---|---|
| Daangn (당근) SEED v3.0.2, light | bg-layer-default #FFFFFF; bg-layer-floating #FFFFFF; bg-layer-basement #F3F4F5 (gray-200, L* 96.1); bg-neutral-muted #F7F8F9 (gray-100, L* 97.5); gray-300 #EEEFF1 | stroke-neutral-muted #00000010 (6.3% black); fg #1A1C20 | radii r1..r6 = 4, 8, 12, 16, 20, 24 px; font steps t1..t14 = 11px .. 48px (t4 14px, t5 16px, t6 18px, t7 20px, t9 24px, t13 40px, t14 48px); weights 400/500/700; brand #FF6600 (carrot-600), weak #FFF2EC | base.css in https://registry.npmjs.org/@seed-design/css/-/css-3.0.2.tgz |
| Daangn SEED, dark | basement #000000; default #16171B; floating #1D2025 (a three-step tonal ladder) | stroke #FFFFFF low alpha | n/a | same file |
| Vercel brand CSS (OKLCH, light) | background-100 #FFFFFF; background-200 #FAFAFA (L* 98.3, identical to our canvas) | gray-100 #F2F2F2 (L* 95.5); gray-200 #EBEBEB; gray-300 #E6E6E6; gray-500 #C9C9C9; gray-1000 #171717; border-subtle = black 10%, border-default = black 8%, border-strong = black 44% | --vbg-radius-small 6px, --vbg-radius 8px; type tokens 3rem display .. ; Geist Sans for text, Geist Mono for code only | https://vercel.com/geist/vercel-brand.css ; rules https://vercel.com/design.md |
| Duolingo | Snow #FFFFFF (main background), Polar #F7F7F7 (L* 97.2), Eel #4B4B4B text, Feather Green #58CC02, Mask Green #89E219, Macaw #1CB0F6 | measured card outline #E5E5E5 (frames) | n/a | https://design.duolingo.com/identity/color (now 301 to blog; hexes from the search excerpt) ; measured frames_c/duolingo/570060128_6.png |
| Linear | warm, less saturated grey after the 2026-03-12 refresh; theme from 3 variables (base, accent, contrast) in LCH instead of 98 variables; Inter Display for headings; borders softened, sidebar dimmed "a few notches" | n/a | n/a | https://linear.app/now/behind-the-latest-design-refresh ; https://linear.app/now/how-we-redesigned-the-linear-ui |
| Toss (TDS) | not published in fetched sources; third-party gallery lists #F9FAFB neutral-50 and #F2F4F6 neutral-100 "surface subtle" (unofficial) https://www.oppadu.com/tools/design-systems-site/brand/toss.html ; measured canvas #F3F4F6 (L* 96.2) and #F2F4F6 (L* 96.1) | n/a | n/a | measured crops_c/m_toss_0.png, m_toss_2.png |
| Cash App "Arcade" | no public design-system source found; third-party pages disagree on green (#00D632, #00D54B, #00E013) and on the typeface | n/a | n/a | measured only (frames_c/cashapp/), green #00E013 measured at 1.3 to 4.6% of in-app pixels |
| Spotify Encore, Notion, Stripe, Revolut, Monzo, Robinhood | no public value tables retrievable; measured from frames only | n/a | n/a | frames below |
Airbnb summer release (May 2025): newsroom says Airbnb "reimagined nearly every part of the app" and describes "a dimensional and beautifully animated interface" for Services, Experiences and Homes in one app (https://news.airbnb.com/airbnb-2025-summer-release/). Chesky's follow-up post lists typography, colour, cards, navigation, icons and layout as the new design system with no values (https://designcompass.org/en/2025/07/04/airbnb-new-design-system/). A trade writer reads it as a revival of skeuomorphism / textured visuals (https://www.hospitalitynet.org/opinion/4127228.html). The "Lava" animated alpha-channel icon format and a patent claim come from one Chinese write-up (https://www.woshipm.com/ucd/6243362.html) and are unverified. Newsroom text does not mention 3D icons or colours; the frames show 3D-rendered category icons as the colour carrier on a pure white canvas (frames_c/airbnb/401626263_1.png, _2.png).
2. Per-app measured table
Method: App Store marketing frames fetched at 1242 px width, country us (lanec_fetch.py, lookups via https://itunes.apple.com/search). Marketing chrome is cropped away to the in-phone UI (lanec_measure.py, boxes in that file; crops in crops_c/m_<app>_<n>.png); metrics use sample.py definitions (canvas = most common colour in the 4% side strips, near-white = L*>92, ink = L*<35, saturated = C*>30). Numbers are means over the listed frames, rounded. Bezel and Dynamic Island pixels inflate ink by roughly 1 to 3 points. Frames excluded for marketing-colour contamination: wise 2/4/6, klarna 3, venmo 1, teamsnap 1/5. Full per-frame values: lanec_metrics.json.
Light apps (16):
| App (App Store id; version) | In-app canvas hex / L* on hub screen | Card / section treatment | Where solid colour sits | Radius (visual) | Icons | near-white % | ink % | sat % | Frames used |
|---|---|---|---|---|---|---|---|---|---|
| Cash App (711923939; 5.72.1) | Money tab #F0F0F0 / 94.8 at 25%, detail pages #FFFFFF | white cards on grey (Money tab); white flat + hairline dividers on detail pages | black pill CTAs; green ring and chart line and icon disc (#00E013) | ~12-16, pills full | filled glyphs in grey discs | 88.6 | 6.4 | 2.3 | cashapp_0,2,4,9 |
| Monzo (1052238659; 8.4.0) | #F1F8F4 / 97.0 | white rounded sections on tinted canvas; coral hero balance card | coral #FF3831 hero block 13.8% of frame 0 | ~12-16 | filled app-icon tiles | 75.9 | 8.8 | 10.5 | monzo_0,4,5 |
| Duolingo (570060128; 7.142.0) | #FFFFFF / 100 | flat white with 2px #E5E5E5 outlined cards, selected = tint #DDF3FE | 3D-edged saturated CTA buttons, illustrations | ~12-16, buttons ~16 | illustration | 89.0 | 1.2 | 5.6 | duolingo_0,1,6 |
| Notion (1232780281; 1.7.345) | home #F8F8F7 / 97.6 at 26.6%; pages #FFFFFF | white cards with #EBEAE7 hairline on warm canvas; flat white pages | blue #2E90DE primary only | ~8-12 | emoji and line icons | 90.2 | 6.1 | 0.9 | notion_1..4 |
| Airbnb (401626263; 26.41) | #FFFFFF / 100 | flat white; photo tiles with ~12-16 radius; one Trips card with a soft shadow; chips #F2F2F2 | photography; pink-red accent small | photos ~12-16, search pill full | 3D-rendered category icons | 48.9 | 13.1 | 14.2 | airbnb_0,1,2,5 |
| Uber (368677368; 3.742) | #FFFFFF / 100; selected row #EEEEEE | flat white lists, hairlines, bottom sheet | black CTA; near-zero colour | ~8, sheet top ~16 | monochrome line | 88.5 | 4.9 | 0.2 | uber_3,4 |
| Stripe Dashboard (978516833; 2.94.0) | #FFFFFF / 100 | flat white, 1px dividers, #F5F6F8 fills | indigo tabs and + button; green status squares #D1FAB3 | ~6-8 | monochrome line | 94.2 | 1.2 | 1.3 | stripe_3,4,5 |
| Wise (612261027; 9.108) | #FFFFFF / 100 | flat white with #F1F1EE fills; dark-green promo card | dark green #163300 hero card and lime #9FE870 CTA (colour block) | ~16-20, CTA full | duotone line | 82.9 | 8.8 | 14.4 | wise_1 |
| Klarna (1115120118; 26.40) | #FFFFFF / 100 | white screen, lavender tint panels #EFECFF (L* 94.1) | pink #FFA7CD pill, black card | ~16, pills full | line icons in tinted discs | 93.8 | 4.0 | 1.4 | klarna_5 |
| Venmo (351727428; 26.22) | #FFFFFF / 100 | flat white lists, #F2F8FD tint header, gradient card | blue #018BFF/#0074DE pill CTAs, light-blue header tint | ~12, pills full | filled glyphs | 82.4 | 3.3 | 7.6 | venmo_4,5,6 |
| Playtomic (1242321076; 6.93.2) | booking #F5F6F7 / 96.8 at 19.8%; feed #FFFFFF | white controls with 1px border on grey canvas; white feed cards | navy ink + lime rating chips | ~8-12 | line + photo | 57.9 | 20.9 | 6.5 | playtomic_2,4 |
| Spond (755596884; 4.63.3) | #F3F3F3 / 95.8 at 20% (list), #FFFFFF | white tiles on grey groups; flat white lists | teal #00A1C7 links; magenta marketing only | ~8 | line | 75.0 | 12.4 | 10.6 | spond_0,1,5 |
| TeamSnap (393048976; 7.73) | #FFFFFF; section bands #F6F7FB / 97.3 | white rows with hairlines, grey section header bands | blue nav bar and segmented control (header colour block) #2C79BD | ~4-8 | line, tab bar | 83.2 | 6.9 | 5.5 | teamsnap_3 |
| Toss (839333328; 5.279.0) | home #F3F4F6 / 96.2 at 13-18%, other tabs #FFFFFF | white cards on grey canvas (home); white flat with grey #F2F4F6 tiles on white (securities) | blue CTA #4880EE (quantised sample, frames_c/toss/839333328_4.png), 3D-icon discs | ~16-20, tiles ~16 | 3D-rendered discs | 85.5 | 2.9 | 3.0 | toss_0,2,3,5 |
| Apple Developer, iOS 26 (640199958; 11.1) | Account #F2F2F7 / 95.6 at 78.5%; Discover #FFFFFF | capsule rows (full radius) on grouped canvas; flat white content | system blue links; photo/video thumbs | rows full capsule, cards ~20-24 | SF Symbols, glass tab bar | 59.3 | 22.5 | 3.3 | frames_c/appledeveloper/640199958_0,2,3,4.png |
| Apple Store, iOS 26 (375380948; 6.9) | #F2F2F7 / 95.6 at 58% (For You), #FFFFFF elsewhere | white cards on grouped canvas | blue CTA, product photography | ~16-20 | SF Symbols | 89.0 | 5.1 | 1.0 | crops_c/m_appstore_0,1,5.png |
Aggregate over 45 accepted light frames (lanec_metrics.json): median near-white 85.8% (IQR 73.8 to 92.3), median ink 4.5% (IQR 1.9 to 9.0), median saturated 2.9% (IQR 0.7 to 8.2, max 24.9).
Dark-first apps (4), tonal ladder instead of borders:
| App | Canvas hex / L* | Card step | Colour | Frames |
|---|---|---|---|---|
| Spotify (324684580; 9.1.88) | #121212 / 5.5 | #1A1A1A (L* 9.3), #242424 (L* 14.2) | green play button, album art | spotify_2,6 |
| Revolut (932493382; 10.150) | #000000 to #1A1A1A / 0 to 9.3 | #1A1A1A panels | white CTA, gradient cards | revolut_2,7 |
| Linear Mobile (1645587184; 1.103.0) | #171718 / 7.8 | #19191A (L* 8.8, about +1 L*) plus hairline borders | periwinkle #7885FE (median of saturated pixels) on the Unread chip only | linear_1,5 |
| Robinhood (938003185; 2026.40.0) | #000000 / 0 | #1E2225 (L* 12.9) | lime #CCFF00 5.9% | robinhood_1,2 |
Typography observations (low confidence, read off frames; no published scale retrieved except SEED and M3 above): money amounts are the largest element on Cash App, Wise and Robinhood frames (numerals roughly 3x the label size, heavy weight); Wise sets numerals in an ultra-bold display face (crops_c/m_wise_1.png); Airbnb and Toss headlines are medium to semibold at about 1.5x body. SEED's own scale runs 11px to 48px in 14 steps with only weights 400/500/700 (https://registry.npmjs.org/@seed-design/css/-/css-3.0.2.tgz).
3. How modern apps separate surfaces
Counts. Per app (16 light apps, hub or first-tab frame): white-flat-with-dividers 11 (Airbnb, Duolingo, Uber, Stripe, Wise, Klarna, Venmo, TeamSnap, Playtomic feed, Spond, Apple Developer Discover); white cards on grey or tinted canvas 5 (Cash App Money tab, Monzo, Notion home, Toss home, Apple Store For You). Counting any sampled frame, 8 of 16 use a grey or tinted canvas somewhere (add Apple Developer Account, Playtomic booking, Spond groups), and all 16 use pure white somewhere.
Per frame (45 accepted light frames): white flat + hairlines/outlines 31; white cards on grey or tinted canvas 11 (cashapp_0, monzo_4, monzo_5, notion_1, appledev_4, appstore_0, appstore_1, toss_0, spond_1, playtomic_4, teamsnap_3); bounded colour block as the screen's lead 3 (monzo_0, wise_1, venmo_6); shadow as the primary separator 0. Shadows appear as a secondary accent on a floating item (search pill, bottom sheet, one Trips card) in about 4 frames I could see them (airbnb_0, airbnb_5, uber_4, appledev tab bar), eyeballed.
| Pattern | Who (evidence) | Typical numbers |
|---|---|---|
| Pure-white flat canvas, dividers or hairlines | Stripe, Uber, Airbnb, Notion pages, Cash App detail pages (crops_c/m_stripe_4.png, m_cashapp_2.png) | canvas 100, hairline black 8-10% (Geist) |
| White cards on grey canvas, tonal only | Cash App, Toss, iOS grouped, SEED basement (contact/lanec_pattern_B_cards_on_grey_canvas.png) | canvas L* 94.8 to 96.1, delta L* 3.9 to 5.2, white-on-canvas contrast 1.10 to 1.14:1 |
| White cards on near-white canvas | Monzo #F1F8F4 (delta 3.0), Notion #F8F8F7 plus #EBEAE7 hairline (delta 2.4), Geist #FAFAFA plus border (delta 1.7) | tone alone fails below about 3; hairline carries it below that |
| Tinted cards on white canvas | Toss securities tiles, Klarna lavender #EFECFF, Duolingo selected #DDF3FE (contact/lanec_pattern_E_tinted_cards_on_white.png) | tint L* 93 to 97 |
| Bounded colour block (hero card or header bar) | Monzo coral balance card, Wise dark-green promo card, TeamSnap blue nav, Venmo header tint (contact/lanec_pattern_C_colour_blocks.png) | 10 to 18% saturated pixels on that screen only |
| Tonal ladder (dark mode) | Spotify, Revolut, Robinhood, SEED dark, M3 dark | canvas L* 0 to 9, card +1 to +13 (contact/lanec_pattern_D_dark_tonal_ladder.png) |
| Shadow as primary separation | none of the 16 | Geist and Apple both advise against ornamental depth (https://vercel.com/design.md "reject ornamental shadows"; HIG Materials) |
Where saturated colour lives, per app (16): buttons and links only 8 (Cash App with black CTAs, Notion, Uber, Stripe, Klarna, Toss, Apple Developer, Apple Store); one bounded colour block plus buttons 4 (Monzo, Wise, TeamSnap, Venmo); photography, illustration or 3D icons carry the colour 3 (Airbnb, Playtomic, Spond); colour everywhere 1 (Duolingo). Platform guidance agrees: Apple "Refrain from adding color to the background of multiple controls" (HIG Color); Material's eye-tracking example colours a single element (the Send button, in a secondary colour) to win attention (design.google post); Vercel uses chromatic tokens only "for meaning" (vercel-brand.css comment "Category series are monochrome by default. Reserve chromatic tokens for meaning.").
Reading for the owner's three options:
- Greyer canvas (tonal ladder): supported, but only as a step, not a repaint. The documented working range is delta L* 3.0 to 5.2 (about L* 95 to 97 for the canvas). Our 98.3 is the same canvas as M3
surfaceand Geistbackground-200, and both pair it with a visible border or a darker container tier. - Pure-white flat canvas with dividers: the most common pattern in the sample (31 of 45 frames, 11 of 16 hub screens). It is what Airbnb, Stripe, Uber and Notion pages do and what Vercel's rules prefer ("Prefer spacing, alignment, typography, and a change in density before borders or boxes").
- Bold colour blocks: used by 4 of 16 apps as one bounded block per screen, never as the page background in the app UI (full-colour backgrounds appear in the store marketing art around the phone, not in the product screens: compare the lime and dark-green frame
frames_c/wise/612261027_2.pngwith the white product UI incrops_c/m_wise_1.png). So "pronounced backgrounds" in the product UI means a darker neutral tier (95 to 96.5), not saturated paint.
4. Falsifiable observations
- Every light app that separates a white card from its canvas by tone alone uses delta L* of at least 3.0 (Monzo 3.0, Seed/Toss 3.9, iOS 4.4, Cash App 5.2); the only systems below 2.5 add a border (Notion
#EBEAE7, Geistgray-alpha8-10%). Evidence: section 1c and 2 values; falsified by finding a shipped app with a borderless card at delta L* < 2.5. - Apple's iOS 26 grouped list canvas is still
#F2F2F7(L* 95.6). Evidence:frames_c/appledeveloper/640199958_4.pngcanvas#F2F2F778.5%; Flutter mirror values. - M3's default Filled card is eight tone points darker than the surface and has no shadow; the Elevated card is two points darker and keeps a shadow. Evidence: FilledCardTokens.kt (
SurfaceContainerHighest,Level0), ElevatedCardTokens.kt (SurfaceContainerLow,Level1), Color.md (neutral90, neutral96, neutral98). - The Korean examples with published tokens are not "flat bold": Daangn SEED's light-mode layers are
#FFFFFFdefault and#F3F4F5basement (L* 96.1), its dark mode is a three-step ladder#000,#16171B,#1D2025, and the 2026-07-27 rebrand changed the logo and added a lime accent without touching surfaces (https://designcompass.org/2026/07/27/daangn-seed-design-system-rebranding/ says no change to typography, shapes or background). Toss's measured canvas is#F3F4F6(L* 96.2). - Saturated colour covers little of a typical product screen: median 2.9% of pixels across 45 light frames, and 10 to 18% only on screens that lead with a hero block (monzo_0 18.4%, wise_1 14.4%). Falsified if a broader frame set has a median above 10%.
- Expressive research does not show engagement gains from colour backgrounds: its measured outcomes are attention speed, tap time and preference, and the same post records a "strong minority" preferring calmer designs and lower scores for pattern-breaking layouts (design.google post).
- Liquid Glass is a navigation-layer material only: Apple says "Don't use Liquid Glass in the content layer", and NN/g's expert review found low contrast in text-over-glass cases (https://developer.apple.com/tutorials/data/design/human-interface-guidelines/materials.json ; https://www.nngroup.com/articles/liquid-glass/). Falsified if Apple ships a content-layer card with Liquid Glass in a first-party app; the Apple Store and Apple Developer frames show content cards as plain white on
#F2F2F7or white. - Money screens go big-numeral rather than big-colour: Cash App, Wise and Robinhood lead with the figure (balance, amount) at about three times label size, on white or black, with colour confined to one button or ring (
crops_c/m_cashapp_2.png,m_wise_1.png,m_robinhood_1.png).
5. 2025-26 trends vs a Korean amateur-tennis club app for 총무 (treasurers)
Evidence quality warning: most "2025 trend" posts are listicles; I found no controlled study for bento grids, oversized radii or tonal-replaces-shadow. The platform sources above are the only primary evidence.
Fit:
- Tonal step instead of shadow (M3 tiers, iOS grouped, SEED basement). Reason: our card has no depth cue at 1.04:1; a step of delta L* about 3 to 4.5 is the documented fix, and it costs no new components. Constraint: it must hold in dark mode via a ladder, as SEED, Spotify and M3 do.
- Hairline plus white as a second option (Notion, Geist, Stripe). Reason: money lists (dues, transfers) are dense rows; dividers read faster than cards, and it needs no canvas change.
- Big numerals for money (Cash App, Wise, Robinhood frames). Reason: 총무 tasks are "who has paid, how much is left"; the amount should be the largest element; this is typography only.
- One bounded colour block per hub screen (Monzo, Wise). Reason: a single dues-progress or "this week's pickup" hero in brand green concentrates attention the way M3's one-secondary-colour finding does, and matches our "green as thin ink" with one exception per screen.
- Concentric/capsule corners (iOS 26). Reason: it is a rule (inner = outer minus padding) not a size, so it costs nothing in Tamagui tokens and fixes nested chip-in-card looks.
- 3D-rendered icons only for category and empty-state moments (Airbnb, Toss). Reason: they carry colour without painting backgrounds; our 12px emoji fact glyphs could stay as the dense-row icon.
Do not fit:
- Liquid Glass / translucent materials: Apple limits it to navigation, NN/g reports contrast failures, and React Native + web cannot reproduce the effect consistently; skip.
- M3 Expressive shape morphing, 32 to 48 corner radii and emphasized motion: Google's own "strong minority prefers calmer" and "breaking patterns hurts usability" findings argue for caution in a utility app; keep radius 12 to 16 (SEED r3-r4, M3 Medium-Large) and reserve 24+ for sheets and hero cards.
- Bento grids: the content is lists (members, payments); sources say bento fits feature showcases, not task flows (https://www.saasframe.io/blog/designing-bento-grids-that-actually-work-a-2026-practical-guide).
- Full-bleed saturated page backgrounds (Wise, Cash App, Venmo marketing frames): the in-app screens of the same apps are white with at most one colour block; the full-colour fields exist only in the store art around the phone.
- Dark-first (Spotify, Linear, Revolut): the club audience reads dues in daylight; dark mode as a supported theme only.
- Skeuomorphic/3D everywhere: the Airbnb reading is one commentator's (hospitalitynet), tied to a travel-browsing product with photos.
6. Caveats
- App Store frames are vendor-curated marketing, 5 to 10 per app, often best-foot-forward and sometimes mock data. They show hub screens, not full hierarchies. Counts (11 vs 5, 31/11/3/0) are small-sample tallies, not prevalence estimates. Some apps are dark-first and are only used for the tonal-ladder row.
- Crops are fractional boxes of device mockups; bezels, island and neighbouring marketing text add noise (ink percentages high by 1 to 3 points; wise_4/6, teamsnap_1/5, klarna_3, venmo_1 were excluded). Radii and icon styles in section 2 are visual estimates; I could not extract radius values from frames reliably.
- Material and Apple tone/value tables come from the Android Material Components docs and Flutter's Cupertino port, not m3.material.io or the HIG swatch images (script-rendered or image-only). Apple states the values can change per release; iOS 26 canvas was confirmed by pixel on one app (Apple Developer 11.1) and one more (Apple Store 6.9).
- Toss and Cash App official token files are not public in anything I could fetch; their numbers are measured or third-party. The "Cash App Arcade" system the brief names did not surface.
- Duolingo hexes are from a search excerpt of the official page (design.duolingo.com now 301-redirects to a blog hub). The Airbnb "Lava" format claim is single-source.
- Linear's published refresh is from 2026-03-12 (the 2024 article describes LCH themes, 3 variables); I could not verify Linear Mobile's exact tokens.
- The 45 frames are all US-store frames; Korean store frames for Toss and others belong to another lane, so Korean frames are not mixed into these counts except Toss (US store listing, English UI).
- Side effect to note: my first contact-sheet loop re-rendered some
contact/<app>.pngfiles that other lanes may own at height 640 (same source frames, not deleted). My own sheets are all prefixedcontact/lanec_.
Files produced (all under the bench directory)
Contact sheets (per app, 700 px high): contact/lanec_airbnb.png, lanec_appleinvites.png, lanec_applewallet.png, lanec_calm.png, lanec_cashapp.png, lanec_duolingo.png, lanec_gmail.png, lanec_headspace.png, lanec_klarna.png, lanec_linear.png, lanec_meetup.png, lanec_monzo.png, lanec_notion.png, lanec_playtomic.png, lanec_revolut.png, lanec_robinhood.png, lanec_splitwise.png, lanec_spond.png, lanec_spotify.png, lanec_strava.png, lanec_stripe.png, lanec_teamsnap.png, lanec_toss.png, lanec_uber.png, lanec_venmo.png, lanec_wise.png, lanec_appstore_apple.png, lanec_applesupport.png, lanec_appledeveloper.png, lanec_applefitness.png, lanec_applemusic.png, lanec_appletv.png.
In-app crop sheets: contact/lanec_crops_<app>.png (first-pass boxes), contact/lanec_corner_zoom.png (card corner zoom).
Pattern sheets (the decisive ones): contact/lanec_pattern_A_white_flat_dividers.png, contact/lanec_pattern_B_cards_on_grey_canvas.png, contact/lanec_pattern_C_colour_blocks.png, contact/lanec_pattern_D_dark_tonal_ladder.png, contact/lanec_pattern_E_tinted_cards_on_white.png.
Data and scripts: lanec_metrics.json (per-frame metrics), lanec_measure.py, lanec_crops.py, lanec_fetch.py, raw sources in raw/ (colors.dart, c_vercel-brand.css, seed/package/base.css). Frames: frames_c/<app>/<id>_<n>.png.