HOOP screens v2.4 - five screens on design system v1.2

Chats

11:28 75

Chat

2

Search chats, people, groups

AllUnread GroupsChannels

Archived1

这是我们发现Bug的群11:28 AM

mike.ng: @NOVA 最近upload的app icon, ...2

T

TGC BUG ARMY · ALPHA10:57 AM

Jaster 第 1 条查清楚了，而且比「缩略图没做」...12

jeffchoongYesterday

good mike2

Li Min Chia 1491Friday

test share file from laptop directly

?

Music RoomThursday

Priya reacted to your track

G

GCallThursday

mike.ng started a call

C

ChenThursday

How are you?

Li Min Chia 1491Friday

test share file from laptop directly

The frame this file is measured from. 72pt rows, 48pt avatars, text edge at 80, hairline inset to match. Circle is a person, rounded square is a place with people in it.

Spec — Chats measured off the frame above

Type

role	px	wt	track	lead	colour
Header title	18	700	-0.2	25px^a	#141E20 text
Search placeholder	14	400	0	20px^a	#596667 text-muted
Filter chip	14	600	0	20px^a	#0F773D text-brand
Archived label	16	400	0	23px^a	#3E4A4C text-secondary
Row · name	16	600	0	23px^a	#141E20 text
Row · preview	14	400	-0.5	21.7px	#596667 text-muted
Row · time	12	400	0	17px^a	#596667 text-muted
Unread badge	12	600	0	17px^a	#FFFFFF text-on-fill
Nav badge	10.5	700	0	15px^a	#010304 text-on-brand

Rows & spacing

element	height	pad t/r/b/l	gap	radius
Chat row	74.7 min 72	12/20/12/20	12px	0px
Avatar	48	0/0/0/0	—	14px
Search field	44	0/12/0/12	8px	999px
Filter chip	39 min 36	8/16/8/16	6px	16px
Nav bar	63	0/24/0/24	—	999px
Row pitch	74 – 74.7 px · content-driven, above the min
Divider	1px · #ECEFEE · inset 80px
Gutter	20px

^a leading resolved from line-height:normal — the px value is what a Flutter build must reproduce, because "normal" is not portable across engines. Colour names are the design-system token each ink now resolves to; six inks cover the whole app.

Chat

16:30 54

1 T TGC BUG ARMY · ALPHA(7) Tap here for group info

N 1

Today

Committed and pushed. Full measurement log is in CHANGELOG.md.15:59

C

CalvinSY

@Navi why are some of the game windows being affected? Can you analyse what the matter is for me and solve it later16:26

N

Navi agent

CalvinSY 收到，这个问题问得对。它不是某一个游戏的毛病，是一整类。

我先做两件事，然后给你一份能看的分析：
1) 先把喵图 v2 和 One Line v2 部署上去
2) 然后我去把 53 个游戏挨个扫一遍，告诉你哪些中招、为什么中招

大概十几分钟。分析我会写成「你以后自己也能照着查」的样子。16:27

Testing purpose only, don't reply to my message 16:28

Message

The only screen that drops the mint canvas. Outgoing bubbles use the corrected tint gradient, never a Volt fill. The composer is a row of outline icons - attach, camera, mic - so the resting thread has no saturated green at all; the green arrives with intent, when the mic turns into the send key.

Spec — Chat thread measured off the frame above

Type

role	px	wt	lead	colour
Header name	16	600	20px	#141E20 text
Header sub	12	400	15px	#596667 text-muted
Sender name	11	600	16px^a	#C4562E sender-colour
Bubble text	14	400	20.3px	#141E20 text
Bubble time	11	400	15.95px	#596667 text-muted
Day marker	11	600	16px^a	#3E4A4C text-secondary
Composer placeholder	14	400	20px^a	#596667 text-muted

Rows & spacing

element	height	pad t/r/b/l	gap	radius
Bubble	82.5	10/14/10/14	—	16px
Turn	82.5	0/0/0/0	8px	0px
Thread pad	711	14/14/4/14	8px	0px
Composer field	44 min 44	0/12/0/12	8px	999px
Turn avatar	34	0/0/0/0	—	10px
Row pitch	90.5 – 265.9 px · taller rows carry a subtitle
Divider	—
Gutter	20px

^a leading resolved from line-height:normal — the px value is what a Flutter build must reproduce, because "normal" is not portable across engines. Colour names are the design-system token each ink now resolves to; six inks cover the whole app.

Contacts

16:29 55

Contacts

Search friends / contacts

All

Friends (8)

Jaster Offline

J Jen Yng Tan Offline

Li Min Chia 1491 Online

T Tash Offline

B bruce.kong Offline

C chen Offline

1 jeffchoong Online

雷雷霆大脚 Offline

Invite to HOOP (343)

+ +60 16 360 6029 In your phone book Invite

Grouped cards on the mint canvas. Presence is a dot plus a word, never colour alone, so it survives greyscale and colour-blindness.

Spec — Contacts measured off the frame above

Type

role	px	wt	track	lead	colour
Header title	18	700	-0.2	25px^a	#141E20 text
Section label	12	600	+0.1	17px^a	#3E4A4C text-secondary
Search placeholder	14	400	0	20px^a	#596667 text-muted
Row · name	16	600	0	23px^a	#141E20 text
Row · state	12	400	0	17px^a	#596667 text-muted
Invite button	12	600	0	17px^a	#010304 text-on-brand

Rows & spacing

element	height	pad t/r/b/l	gap	radius
Contact row	67 min 64	11/14/11/14	12px	0px
Avatar	44	0/0/0/0	—	999px
Card	536	0/0/0/0	—	20px
Search field	44	0/12/0/12	8px	999px
Row pitch	67 px
Divider	1px · #ECEFEE · inset 70px
Gutter	20px

^a leading resolved from line-height:normal — the px value is what a Flutter build must reproduce, because "normal" is not portable across engines. Colour names are the design-system token each ink now resolves to; six inks cover the whole app.

Me

16:29 55

Me

mike.ng

8 friends · 36 reachable

0Posts

0Following

0Followers

All Private Friends Diary

Nothing here yet

Share your first post

New post

Same grouped language, one screen up the hierarchy. The empty state carries an action instead of only an apology.

Spec — Me measured off the frame above

Type

role	px	wt	track	lead	colour
Header title	18	700	-0.2	25px^a	#141E20 text
Profile name	22	700	-0.4	31px^a	#141E20 text
Profile sub	14	400	0	20px^a	#596667 text-muted
Stat value	18	700	0	25px^a	#141E20 text
Stat label	12	400	0	17px^a	#596667 text-muted
Filter chip	14	600	0	20px^a	#FFFFFF text-on-fill
Empty title	16	600	0	23px^a	#141E20 text
Empty sub	14	400	0	20px^a	#596667 text-muted
Primary CTA	14	600	0	20px^a	#010304 text-on-brand

Rows & spacing

element	height	pad t/r/b/l	gap	radius
Identity block	194	14/20/18/20	6px	0px
Avatar	88	0/0/0/0	—	999px
Stat card	80	16/0/16/0	—	20px
Stat cell	48	0/0/0/0	3px	0px
Empty state	377	40/20/90/20	6px	0px
Row pitch	—
Divider	—
Gutter	20px

^a leading resolved from line-height:normal — the px value is what a Flutter build must reproduce, because "normal" is not portable across engines. Colour names are the design-system token each ink now resolves to; six inks cover the whole app.

Personal Center

16:29 55

Personal Center

Avatar

Nicknamemike.ng

UsernameNot set

BioNot set

PersonasDifferent circles see a different you

Starred messages 0

My Games

Game CenterMini games · circle leaderboards

Developer CenterBuild a game, plug into HOOP

Virtual AvatarCreate your game-world character

HOOP AvatarAvatar · Beta

Contribution WallYour rooms, in one grid

A sub-page, so it loses the nav bar and gains a back affordance. Three cards group eleven rows by what they are for, not by what they look like.

Spec — Personal Center measured off the frame above

Type

role	px	wt	track	lead	colour
Header title	18	700	-0.2	25px^a	#141E20 text
Row · label	16	400	0	23px^a	#141E20 text
Row · sub	12	400	0	17px^a	#596667 text-muted
Row · value	14	400	0	20px^a	#596667 text-muted

Rows & spacing

element	height	pad t/r/b/l	gap	radius
Setting row	60 min 60	13/16/13/16	14px	0px
Icon column	21	0/0/0/0	—	0px
Card	273	0/0/0/0	—	20px
Trailing avatar	30	0/0/0/0	—	999px
Row pitch	60 – 85 px · taller rows carry a subtitle
Divider	1px · #ECEFEE · inset 51px
Gutter	20px

^a leading resolved from line-height:normal — the px value is what a Flutter build must reproduce, because "normal" is not portable across engines. Colour names are the design-system token each ink now resolves to; six inks cover the whole app.