Review · Code Raven Mobile

The styling pass

The phone as a complement of the desktop: same tokens, same type, both registers.

2026-09-02 · simulator captures, iPhone 17 Pro Max, bundled sample data

Every color and size on the phone is now transcribed from Code Raven/DesignSystem/. The palette I improvised the first night matched the desktop on one project color out of six; that file is gone. Plus Jakarta Sans is bundled from the Mac's own font files. The app is light-only, as the desktop is, with sage as the accent and a compact 44pt bar in place of iOS large titles.

Token sheet in use

cmBgSecondaryworking page

cmBgPrimarycards, bars

cmInkCanvaseditorial page

cmInkSurfaceRaisedcode, tables

cmSageaccent, selected

cmOceanprogress, links

cmAmberidea, warnings

cmCoralpain point

cmPurplePersonal badge

cmTextPrimarybody text

Working register

Projects list — **Projects.** Cards on the warm page, decorative dot per project, Personal badge in purple, section label in the desktop's 11pt uppercase.

Project reader, Foundation segment — **Reader, Foundation.** Layer rows carry the Mac's Foundation layer colors as a left rule. Segmented control in the bar.

Project reader, Plans segment — **Reader, Plans.** Status badge and the Workbench-style thin ocean progress bar.

Compose screen — **Compose.** Preset chips with sage selection, collapsible context card, size readout, sage primary button.

Capture screen — **Capture.** Defaults to your last project. Tag chips use the Mac's note-tag colors.

Settings screen — **Settings.** Status, packs, default scope toggles in sage.

Reader, Notes segment — **Reader, Notes.** Tag badge in the Mac's note-tag color.

iCloud unavailable state — **No iCloud.** The state a fresh simulator lands on, with the sample-data escape hatch.

Editorial register

Foundation layer reader — **Foundation layer.** Cream canvas, tracked eyebrow, light 30pt title, ink rule, 16pt reading body.

Plan reader — **Plan.** Checkboxes as state (sage when done), fenced code on the raised surface. The plan's own H1 is dropped when it repeats the title.

Decisions worth a second look

Inline bars, not large titles. iOS large titles rendered blank on every tab but the first, and the desktop's bar is 44pt anyway. If you want the large title back on Projects alone, it is one modifier.
Monospace stays the system face on both platforms. Google Sans Code is bundled on the Mac but referenced nowhere; adopting it on the phone alone would create a divergence.
Reading body is 16pt, one step above the desktop's 15, because the phone is held closer. Everything else is the desktop size.
Tab bar is a custom bar mirroring the desktop's AppNavBar: white, one hairline, sage label with a 2pt rule on the active tab. The system floating bar is hidden. Swipe-between-tabs is unaffected; the bar is a plain overlay on the same TabView.

Not yet seen

Captures updated after the tab bar change. These are simulator captures on sample data. Real packs are larger and longer, and the font rendering on a physical display can differ. The keyboard-up states of Compose and Capture, the search field, and the toast are not in these captures.