Templates / Mobile
Template
Mobile personal dashboard
A single scrolling screen for one person's day: a live core, a focus timer and quiet signals. Every control below is live, so tap through it before you build.
Good evening Aaru
07:45 PM
A
Today in flow
78 % Stay focused and make it happen.
Sat, May 24
Cloudy · H 31° L 21°
Mood Focused
Distractions Low
Focus timer
15 25 50
▶ Start
Tasks 2 of 4
UI and UX research Completed Design dashboard Completed Prototype app In progress User testing Pending
25 MAYProject meeting 10:00 to 11:00
26 MAYDesign review 14:00 to 15:30
28 MAYClient call 11:00 to 12:00
System Optimal
92% Storage 78%
Battery 82%
Network 94%
+
When to use
Personal, single user surfaces: wellbeing, focus and daily planning. For teams or many records, start from the Command template .
Build it in this order
One number in the core. Pick the single figure that matters today; text sits left, motion right.Two quiet tiles. Ambient signals only, readable in under a second.One warm accent. Give it to the focus timer and let blue carry the rest.Short lists. Three or four rows, then link out to the full view.
Canvas 390 x 844
Gutter 16 px
Targets 44 px min
● Try it: tick a task and the core rises, tap a bar to read that day.
Anatomy 02 Hero core The live glass core shows the one number that matters today. Put the headline metric left, the motion right, never under the text.
236 px min height, 64 px figure, canvas pauses offscreen
03 Glance tiles Two equal tiles for ambient signals such as weather and mood. Read in under a second; no controls inside.
Two columns, 12 px gap, 11 px captions
04 Focus timer The single warm accent on the screen. Ring for progress, segmented control for length, one primary button.
132 px ring, 44 px button, 36 px segments
05 Tasks Checkable rows with a status label. The whole row is a 44 px target and progress updates the hero instantly.
44 px rows, 24 px check, hairline dividers
06 Weekly activity Seven bars, one selected. Tap a day to read its value in the header; never show more than a week here.
130 px chart, 10 px bars, selected bar glows
07 Upcoming Next three events with a date block and a colour dot for the calendar. Link out for the full list.
44 px date block, 8 px dot
08 System A gauge plus three meters for device health. Use the blue ramp only; status word sits top right.
84 px gauge, 4 px meters
09 Tab bar Floating glass bar with four destinations and one raised action. The current tab glows; labels live in aria.
64 px bar, 44 px targets, 52 px action
Layout and type
Canvas 390 x 844, 16 px gutters
Card 20 px radius, 16 px padding
Rhythm 12 px between cards
Targets 44 px minimum
Figures Tabular numerals
Motion Paused offscreen and on reduced motion Do and avoid
Do Keep one warm accent per screen and let blue carry everything else.
Avoid Stacking two live canvases or putting text over the moving core.
