Button proposal

The proposed APNAA button set, independent of V3 styling.

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.

Proposal · revised

Consolidated set: 4 roles

•Colour: Threads' monochrome scheme. White, black and greys do all the work.
•Accent: APNAA crimson only where the rules above allow it (inline links first). No accent-filled buttons.
•Destructive: crimson text in action sheets; a filled destructive pill with white text only in yes/no confirms (Delete, End live).
•Shape: full pill on every boxed button (from Threads). No rounded rectangles.
•Icon buttons: bare glyph, no background, no outline, no circle.
•Back and close follow the same rule: bare glyph, no circle. Back top left, close top right.
•Action sheets: Instagram's grouped rows, destructive first in crimson, Cancel set apart.

1 · Primary (inverted pill)White fill, black label (Threads). One per area. Default / pressed / disabled / loading.

2 · Secondary (tonal pill)Neutral grey fill. Replaces outline, grey and capsule styles.

3 · Inline link (no outline)Text only. The main place the APNAA accent appears. Neutral for quiet links.

In contextSection header with an inline link, post header with an accent Follow

Your creators

meera.iyer•

4 · Icon (no background)Bare 24px glyph, 44px hit area. Back, header, feed actions. Active = filled glyph.

5 · Glass pill on mediaOnly on full-bleed photo or video (Landing). Frosted fill, white label, 44px hit area.

Navigation · back & closeBare glyphs, no circle, 44px hit area. Back top left for a screen in a path; close top right for a screen that dismisses in place.

Back · a screen in a path

Close · dismisses in place

SizesCompact 32 inline · Large 44 full-width

Toggle patternTap to try: inverted pill → tonal pill

Own profile pairTwo equal tonal pills

Action sheet (from Instagram)Grabber, grouped full-width rows, destructive in crimson, Cancel as its own group

Morning routine

Destructive confirmOnly place a filled crimson pill appears

Migration

Current 9 styles → 4 roles

Primary pill (crimson fill)→ Primary · inverted white pill

Outline pill (crimson outline)→ Secondary · tonal pill

Secondary (grey fill)→ Secondary · tonal pill

Capsule h28 (Review, New session)→ Secondary · tonal pill, compact

Text action (ALL, VIEW ALL, Mark all read)→ Inline link · crimson or neutral, no outline

Destructive (red fill)→ Text · danger tone (sheets) or Primary · danger (confirm only)

Round header icon button + badge→ Icon · bare glyph + badge

Round Back button (filled circle)→ Icon (bare arrow, no fill)

Raised Add (48px crimson circle)→ Icon in the tab bar (neither app uses a raised FAB)

Result: 4 roles × 2 sizes, pill shape only, monochrome buttons; crimson only on inline links and destructive actions. States are shared: pressed, disabled (40%), loading (spinner replaces label).