AI companion · Home screen concepts

A companion you can read at a glance

Two directions for the Home screen, drawn to Apple’s iOS 26 guidelines, and the four states the companion moves through. The character is a placeholder. These sketches cover structure and behavior, not the final render.

Two directions, one set of components

Both phones run the same state machine and share every component. Play a request to watch it move through all four states and change the day, then flip the iPhone settings to see Dark Mode and the accessibility versions.

iPhone settings

In either phone, tap the mic, a suggestion or the keyboard. After a change, try Undo. In B, drag the sheet up or tap the list button.

9:41
10:30AM
Design reviewZoom · Priya, Dan
in 49 min

Tasks

3/7

done today

Inbox

4

to reply

Tonight

7:30PM

Dinner, Sam

Morning, Alex. Priya moved your 1:1 to 3, so the morning is yours.

Move dinner with Sam to 8

Move dinner with Sam to 8

AScene-first

The companion is the hero. Information sits on the regular material, so text never lands on the busy scene.

Best for larger phones and quick morning check-ins.

9:41
Here when you need me
You Morning, Alex. Priya moved your 1:1 to 3, so the morning is yours.
Today4 left · Tue, Oct 28
10:30AM
Design reviewZoom · Priya, Dan
in 49 min

Later today

12:30 PM
Lunch with DanCafe downstairs
3:00 PM
1:1 with PriyaMoved from 11:00 AM
7:30 PM
Dinner with SamRain at 6, leave by 6:50

To do

Send Q4 deck to Mark
Reply to Priya’s notes

Move dinner with Sam to 8

BClose-up + sheet

For smaller phones, or when the user wants to talk more than read. The day is one swipe away.

Best for voice-first use and compact screens.

Six decisions behind the screens

What each choice does for the person holding the phone.

Built on Apple’s iOS guidelines

Both directions follow the Human Interface Guidelines for iOS 26, so they feel native on day one and cost less to build.

Four states, each with a job

Motion tells the user what the assistant is doing. Each state changes the tone, the pose and one signature movement, and each one has a reduced-motion version.

Idle

systemOrange #FF9500

Starts when
The app opens, or a reply finishes.
Motion
Breathes on a 4 s loop, ease-in-out. Blinks every 4 to 6 s.
Reduced motion
Still pose, eyes open.

Listening

systemTeal #30B0C7

Starts when
The user taps the mic or says the wake word. Typed requests skip this state.
Motion
Leans in over 240 ms. Glow and ring follow the mic level, smoothed over 60 ms.
Reduced motion
Static ring and a Listening label.

Thinking

systemPurple #AF52DE

Starts when
700 ms of silence ends the user’s turn.
Motion
Three dots orbit every 1.6 s and a step line says what it is checking. Both wait 300 ms, so quick replies never flash.
Reduced motion
Dots hold still in an arc. The step line stays.

Speaking

systemPink #FF2D55

Starts when
The first audio chunk arrives.
Motion
Mouth follows the audio level. A ripple leaves every 470 ms and fades over 1.4 s.
Reduced motion
No ripples or mouth movement. Captions stay on screen.

Why information sits on material

10:30AM
Design reviewZoom · Priya, Dan
On the sceneContrast changes with every window and book spine.
10:30AM
Design reviewZoom · Priya, Dan
On the regular materialThe same text, readable wherever the card lands.

Body text needs 4.5:1 contrast with whatever sits behind it. Over the window and shelves that changes from pixel to pixel, so every card that carries information sits on the regular material: a 30 pt blur under a 66% fill that turns solid with Reduce Transparency. Controls use the clearer Liquid Glass because they hold one symbol or a short label. The companion stays the only thing that sits on the scene directly.

Built to hand off

Every piece maps to a native building block and every value to a token, so the spec and the build stay in step. Names are SwiftUI for iOS 26; Flutter and React Native have close equivalents.

Components

  • CompanionStageRive or Lottie view. state: idle, listening, thinking, speaking. Reads accessibilityReduceMotion.
  • NextCard.background(.regularMaterial, in: .rect(cornerRadius: 26)). Fonts .headline and .subheadline. Solid grouped fill inside the sheet.
  • StatTileSame material, radius 22. Value in .title2 bold, label and detail in .footnote.
  • SpeechBubble.thickMaterial, text in .body. Step line while thinking. Undo is a plain button in the tint color, shown for 8 s.
  • SuggestionChip.buttonStyle(.glass), 44 pt capsule. Hidden while the companion is busy.
  • DockSide buttons .buttonStyle(.glass), 50 pt. Mic .buttonStyle(.glassProminent), 64 pt, tinted by state. Turns into stop while the companion speaks.
  • DaySheet.presentationDetents([.height(276), .large]), .presentationDragIndicator(.visible), .presentationBackgroundInteraction(.enabled).
  • Haptics.sensoryFeedback(.impact(weight: .light)) on the mic, .success when a change lands.
  • SF Symbolscalendar, checklist, envelope, cloud.rain, mic.fill, keyboard, list.bullet, clock.arrow.circlepath, arrow.up, arrow.uturn.backward, stop.fill.

Tokens

font/bodySF Pro 17 / 22
font/headlineSF Pro 17 / 22 semibold
font/subheadlineSF Pro 15 / 20
font/footnoteSF Pro 13 / 18
font/title2SF Pro 22 / 28 bold
color/textlabel, secondaryLabel
color/tintsystemIndigo #5856D6
tone/idlesystemOrange #FF9500
tone/listeningsystemTeal #30B0C7
tone/thinkingsystemPurple #AF52DE
tone/speakingsystemPink #FF2D55
material/content.regularMaterial, .thickMaterial
material/controlsLiquid Glass (.glassEffect)
radius/card26 pt continuous
radius/sheet38 pt top, 47 pt floating (55 − 8)
space/margin16 pt
size/target44 pt minimum
motion/enter.spring(duration: 0.3, bounce: 0.15)
motion/think-delay300 ms
time/undo-window8 s

What I’d ask next

The answers decide how far the design goes into the character itself and which direction fits.