Instories: AI Photo & Video

Colors

• #121117Background Deep Black · Screen background fill · App banner background fill
• #ffffffPrimary Text White · Page title · Section title · Selected body text · Banner title · Browser controls
• #b4b6c3Body Text Grey · Introductory text · Subtext in banner · General legal paragraph body
• #0a84ffAccent Cyan Blue · Open app store action button fill
• #b338ccLogo Accent Magenta-Purple · App icon and logo ring gradient

Type

• Banner TitleSF Pro Text · 29px · 600 · #ffffff
• Banner SubtextSF Pro Text · 25px · 400 · #b4b6c3
• Banner ActionSF Pro Text · 31px · 700 · #ffffff
• Page HeaderSF Pro Display · 92px · 600 · #ffffff
• Lead ParagraphSF Pro Text · 39px · 400 · #b4b6c3
• Section HeadingSF Pro Text · 35px · 600 · #ffffff
• Body TextSF Pro Text · 37px · 400 · #ffffff

Elements

• Smart App Banner · banner

  Top anchored beneath browser status bar, full width, height approx 140px, containing logo, text stack, and CTA · Dark background with thumbnail icon on left, two-line text group in middle, and cyan pill button on right

• App Open Button · button

  Right side of smart banner, width approx 195px, height approx 68px · Vibrant blue filled rounded capsule button with bold white uppercase text

• Brand Logo Header · header_brand

  Left aligned below smart banner with 60px left padding, height approx 60px · Gradient neon circle ring icon paired with lowercase bold white 'instories' logotype

• Browser Bottom Bar · navigation_bar

  Fixed to bottom of screen, height approx 160px with centered address pill and navigation action icons · Translucent dark glass effect with rounded address capsule and light grey navigation glyphs

Layout

Long-form text document web layout with fixed app install banner on top, brand mark, large display page title, spaced body paragraphs, and iOS Safari bottom navigation bar.

Notes

Viewed within Safari web browser. System typography reflects default sans-serif font stack.