Ananya Verma

@ananya_verma · 1.2k likes · 34 circle

Moment 1

Moment 2

Moment 3

Moment 4

Moment 5

Moment 6

Moment 7

Moment 8

Moment 9

Moment 10

Moment 11

Moment 12

Moment 13

Moment 14

Moment 15

Note: hero pages have no back or close button and no nav row. The sheet is the same Smoke surface as the Glass Sheet page and starts at its set height (53%); on scroll the hero text and sheet rise together, the sheet stops right below the hero text, then only the list scrolls inside it.

Rule

•No scrollbars anywhere — no vertical bar, no horizontal bar, on any screen.
•Content still scrolls and pages by touch; the bar is simply never drawn.
•Horizontal rows (chips, carousels) clip at the screen edge instead of showing a bar.
•Long glass sheets rise, then stick: the sheet slides up over the header until it meets the back/close row, which never scrolls away; then only the list scrolls inside the sheet. Short lists don't move.
•Hero sheets start at their set height so the photo shows; on scroll the hero text and sheet rise together, the sheet stops right below the hero text, then only the list scrolls inside it.
•Hero pages have a 44px top row for toolbar icons; a back arrow appears there only on barless screens (Circle).
•Back and close: the back arrow (top left) steps back in a path; the close X (top right) dismisses something opened over a screen. A two-step composer shows the X on step 1 and the back arrow on step 2, never both meanings on one control. Every pushed screen carries a section overline (TODAY, SHARE, CREATE, PROFILE, MONEY, SAFETY).
•Crimson appears only on: inline links, errors, destructive text and the destructive confirm fill, count chips at the top right of an icon or pill (white text), the filled liked heart, your own chat bubbles, the selected tab's underline in the bottom nav, the APNAA wordmark ring and dot, and the word "apnaa" on Landing with the Landing loader and Access welcome hairlines as part of the brand mark. Everything else is monochrome: success rings and checks, status labels, unread counts in lists, kickers and non-brand hairlines.
•One shared LiveTag renders every live marker: white LIVE text with a crimson dot.
•Every number, name and date comes from src/fixtures/world.ts through formatCount, rupees and the date helper, never a literal in a caption.
•Copy: sentence case for titles, buttons and chips; Studio Voice is the product-name exception. Dates use Thu 5 Nov and 5 Nov 2026; times are 12-hour; relative times use 2m, 18h and 1d. Use Q&A and Close Friends. No developer words in product copy.
•Tap size: every control has a 44 × 44 tap area (the shared hit utility, an invisible extension). Visual sizes stay as built: primary pill 40, small pills and chips 32.
•Photo and moment grids: 3 columns of 3:4 tiles, 2px gaps (--grid-gap), no radius, flush to the screen edges, also inside trays and pickers. Fan Home and Discover people tiles use 2 columns with the same 3:4 tiles and 2px gaps.
•Message box: a view with a message box never shows the bottom tab bar; a back arrow top left returns to where you came from; the message box has no Smoke and no background and rides the keyboard.
•Field type follows Threads: label 15px semibold white above the field, typed value 15px regular, placeholder the same size in grey, hint or error 13px under the field.
•Yes/no confirmations (sign out, unblock, end live) open as a centred Smoke dialog or a short tray over the screen; the destructive choice is crimson text or the destructive fill with white text, never crimson on white.
•Approval views: Review shows the request the way the fan would see it; Approve confirms before publishing. Both share the same header (close X top right), decision bar and undo window.
•Decision bar: a white Approve pill, full width; Decline as crimson text centred below it. Decline gives a 5 second undo window before it saves.
•Publishing validates: a Moment needs a title, a Circle post or Broadcast needs text, and at least one media item must be kept. Errors sit above the decision bar in crimson.
•The frosted glass pill is used only on full-bleed photo or video (Landing Sign in).
•Landing is full-bleed and carries no footer; every other page ends with the APNAA footer.