Visual design system

Both apps implement one token set. The normative extract lives in mobile/design/tokens.json and is mirrored in ui/theme/Color.kt, Type.kt, Spacing.kt, Shapes.kt, Sizes.kt and Theme/IncicoColors.swift, IncicoTypography.swift, IncicoTokens.swift. A golden test on each platform pins the hex values to the JSON, and tools/tokens-check.mjs fails on drift.

The look is circle-first (A101), chosen by the product owner on 2026-10-29 over five rounds of mocks (mobile/design/redesign/). It takes Saybook’s calm shell (warm neutrals, one accent, no decoration) and lets the circles carry the colour: a circle’s name appears in its colour wherever a circle matters, and nothing else on the screen competes with it. It supersedes the v2 look of A100 (palette, system font, lit cards); the logo and the circle palette are unchanged.

Rules the look follows

Taken from Saybook and Saymail, and binding on every screen:

A control carries its verb in words beside the icon. “Find”, “Add”, “Answer”, “Review and sync”, “Accept into Family”. A bare icon is allowed only for the bell, the gear, the overflow and back.
Dimmed, not gone, and it says why. An action that cannot run now stays in place at 45 % opacity with a one-line reason: “Edit · offline”, “Send reminder · from 3 November”, “Invited”.
Every card’s second line is its status. “8 people”, “In sync · 10 min ago”, “3 waiting · yesterday”, “Follows the system”.
The next step comes first and is the primary button. A request to answer or a sync to review leads the screen, with the one action it needs.
No blank screens. Every empty list has one sentence and one action; a filter that hides everything says so and offers to widen it (Saymail).
Circles are named, not only coloured. Rows and details show the circle’s name in its colour; a dot alone is never the only carrier.

Colour

Warm neutrals and a single cyan accent, derived from the logo’s cyan #009fc5; the logo keeps its own navy and cyan and is never recoloured (see Brand and assets). primary fills buttons and the active state; primaryText is the accent used as text and icons on surface (links, text buttons, the active tab icon), because primary itself is too light for small text in dark mode. tint is the accent at low strength: selected rows, the active tab pill, changed rows, info boxes. accent is gold, for the favourite star only.

Light

Token	Hex	Use
`bg`	`#fafaf8`	screen background
`surface`	`#ffffff`	headers, tab bar, sheets
`card`	`#ffffff`	list boxes and cards
`fill`	`#f0efec`	segmented-control track, skeletons, icon tiles, neutral avatars
`line`	`#e5e3de`	hairlines and card borders
`ink`	`#1c1b19`	primary text; the selected filter chip
`ink2`	`#3f3d39`	secondary text on controls, circle labels
`muted`	`#6b6862`	detail lines, section labels (4.5:1 on `card`)
`primary`	`#007a99`	primary buttons, switches, radios, checkboxes
`primaryText`	`#006a85`	links, text buttons, active tab icon
`onPrimary`	`#ffffff`	text on `primary`
`tint`	`#e3f3f7`	selection, changed rows, active tab pill
`accent`	`#9a7a22`	favourite star
`success`	`#2f7a4b`	verified badge
`warning`	`#8a5a00`	“not verified”, “only you”, relation warnings
`danger`	`#b23b3b`	delete, cancel invitation, sync errors, the bell count
`inputBg`	`#fafaf8`	text fields at rest (focused fields switch to `surface` with a 1.5 dp `primary` border)

Dark

Token	Hex
`bg`	`#161616`
`surface`	`#212121`
`card`	`#212121`
`fill`	`#2f2f2f`
`line`	`#3b3b3b`
`ink`	`#ececea`
`ink2`	`#c3c1bc`
`muted`	`#9a978f`
`primary`	`#18a6c8`
`primaryText`	`#7fd8ee`
`onPrimary`	`#06161b` (dark text on the cyan)
`tint`	`#16343d`
`accent`	`#d8b14d`
`success`	`#6cc48e`
`warning`	`#e9bb62`
`danger`	`#ea7a70`
`inputBg`	`#161616`

The scrim behind sheets is rgba(20,20,18,.42) in light and rgba(0,0,0,.6) in dark. The default appearance follows the system (A101); see Settings.

Circle colours

Circles are user-coloured from a fixed palette of ten: #cd416c pink (Family default), #009fc5 cyan (Friends default), #f4a958 orange (Work default), #a2db7a green, #7c5cff violet, #e8618c, #2a9d8f, #e76f51, #8ab17d, #6d597a. The first three come from the v1 logo. Several are too light for white text, so a circle colour is never a background for text: it is a dot, the colour of a circle’s name, or a tint.

Circle labels and chips

Circle label (A107): an 8 dp dot in the circle’s colour followed by the circle’s name in ink2, 11.5 sp semibold. It is the only circle marker on contact rows, service rows and detail rows, replacing the v2 dot and the trailing row of visibility dots. A detail shared with no circle shows “Only you” with an empty ring, in warning. A detail shared with part of a circle’s view says so after the label: “Friends (city only)”, “Friends (no year)”.
Filter chip (Contacts, View as): 32 dp tall pill, surface with a line border; selected is filled with ink and its text in bg. A count follows the name in a lighter weight (“Family 8”).
Selectable circle chip (the circle sheet, Put … in): 34 dp pill with dot and name; selected is the circle colour at 22 % over surface, a 1.5 dp border in the circle colour and a check, the text stays ink (white on the light circle colours fails contrast).
Who-sees-what cell: a 14 dp dot in the circle colour when the circle sees the detail, a half-filled dot when it sees part of it, an empty ring in line when not.

Typography

Manrope, bundled with both apps (variable font, SIL Open Font License, weights 400 to 800), replaces the system font. Sizes are sp and scale with the OS; the floor is 11 sp.

Style	Spec
screenTitle	26 sp, 700, tracking −0.02 em
sheetTitle	18 sp, 700
sectionLabel	12 sp, 600, `muted`, sentence case (no uppercase)
rowName	15 sp, 600
rowDetail	13 sp, 500
body	15 sp, 500, line height 22 sp
circleLabel	11.5 sp, 600
chip	12.5 sp, 600
button	13.5 sp, 700
headerAction	13 sp, 600
tabLabel	11.5 sp, 600

Phone numbers and dates use the same face as text.

Spacing and shape

Spacing scale xs 4, sm 8, md 12, lg 16, xl 20, xxl 24; screen gutter 18 dp for titles and section labels, 14 dp for boxes.

Radius	dp	Used by
`control`	10	buttons, header actions, segmented segments
`card`	12	list boxes, cards, text fields, the segmented track
`large`	16	profile cards in the switcher, empty-state icon tile (20)
`sheetTop`	26	bottom sheets
`pill`	circular	chips, avatars, dots, the tab pill

Depth is flat. Cards and list boxes are card with a 1 dp line border and no shadow, gradient or highlight; rows inside a box are separated by 1 dp line hairlines and run edge to edge. Only sheets (and the tablet’s side sheet) cast a shadow. The lit edge, radial gradient and shadows of A100 are gone.

Bottom tab bar 64 dp; header 46 dp plus status inset, with no title in it (the screen title sits under the header in screenTitle); rows 58 to 62 dp (they grow with the text); row and list avatars 40 dp; circle dots 8 dp in labels and filter chips, 10 dp in the circleDot token for the sheet rows. avatar and circleDot stay in tokens.json (A97).

Components

Component	Notes
TopBar	Left: on a tab root the active profile’s avatar and first name with a chevron (opens the profile switcher); on a pushed screen a back chevron with the parent’s name (”‹ Contacts”) in `primaryText`. Right: header actions. No title in the bar.
HeaderAction	Icon plus word in a 1 dp `line` outlined pill on `surface` (“Add”, “Connect”, “Edit”); the primary one (“Find”) is filled `primary`. The bell and the gear may be icon-only. A count sits on the bell as a `danger` badge.
ScreenTitle	`screenTitle` under the top bar, 18 dp gutter.
BottomTabBar	Four items on `surface`, hairline top border, no shadow. Icon over label; the active item has a 56 × 30 dp pill in `tint` behind its icon, icon in `primaryText`, label in `ink`; inactive items `muted`.
SectionLabel	`sectionLabel` on the left, an optional count or text action on the right (“A–Z”, “Mark all read”, “Select none”).
ListBox	`card`, 12 dp radius, 1 dp `line` border, rows separated by hairlines.
ContactRow	40 dp avatar (photo or initials on the deterministic colour), name, one detail line, trailing circle label; a favourite has a small `accent` star after the name. Swipe: favourite, move, remove.
ChangedRow	A row in “Changed this week” and a changed line on the contact card: 3 dp `primary` bar on the leading edge, `tint` background, the detail line in `primaryText` saying what changed (“New mobile number · today”).
DetailRow	Type label (12 sp `muted`), value, circle labels underneath; tapping the row opens that detail’s sheet (A105).
PrimaryButton	`primary` fill, `onPrimary` label, 10 dp radius, no shadow.
SecondaryButton	`surface` fill, 1 dp `line` border, `ink2` label.
TextButton	`primaryText`, 13 sp bold, optional leading icon (“Preview”, “Move”, “Change”).
Switch, Radio, Checkbox	Off: `fill` track / `muted` ring; on: `primary`.
SegmentedControl	`fill` track, 12 dp radius; the selected segment `surface` with a faint shadow.
FilterChip / CircleChip / CircleLabel	See above.
Sheet	Bottom sheet, 26 dp top corners, grabber, scrim, drag to dismiss.
Banner	`fill` box with a leading icon and one sentence (offline).
InfoBox / WarnBox / ErrorBox	`tint` box with a text action; warning and error boxes are `warning` or `danger` at 13 % over `surface` with a 40 % border, text in `ink`.
EmptyState	A 64 dp rounded tile in `tint` with a 32 dp icon, one sentence in `rowName` at 17 sp, one line of `muted` explanation, one primary action and at most one text action.
Skeleton	`fill` bars in place of rows while the first read is in flight.
ProgressScreen	Title, determinate bar, step text, Cancel.
Toast	`ink` box with `bg` text and an underlined action (“Undo”), above the tab bar.

There is no FAB: “Find”, “Add” and “Connect” are header actions with words.

Motion

Sheets slide up with scrim; pushes slide horizontally; tab content cross-fades in 150 ms; durations 150 to 300 ms ease-out; the active tab pill fades in. Reduce motion drops all of it. A changed row on a contact card (A94) fades the tint in and out over 300 ms beside the static bar; with reduce motion only the bar shows, for the same three seconds.

Iconography

Material Symbols Rounded (Android) and SF Symbols (iOS) at a 1.8 dp stroke-like weight, outlined everywhere; the active tab differs by its pill, not by a filled glyph. Required glyphs: contacts, circles (three overlapping rings), services (sync arrows), profile, search, add, person-add (Find), edit, delete, favourite (star), block, verified (check badge), unverified (dashed badge), phone, message, mail, route (map pin), home, cake, camera, eye (Preview), refresh, back, more, settings, notifications, link, cloud-off, warning, lock, send.

Logo

The original v1 mark and outlined wordmark, unchanged (sources in mobile/design/brand/). The sign-in screen shows the app icon (incico-appicon.svg), the word Incico in screenTitle weight 800 and the tagline; the welcome step shows the bare mark. The splash screen is incico-splash.svg on white, or the same artwork on bg in dark mode with the wordmark in white. See Brand and assets.