Security & developer tools

Authenticator App Screenshot Template — Code Keeper

Create a coordinated screenshot campaign for a authenticator app: monochrome precision with mint highlights, editable abstract grid and countdown ring, and five layouts for accounts, add account, code detail, organization and recovery settings.

  • 5 slides · 5 screenshot slots
  • Editable headlines, descriptions, background and 3 SVG decoration types
  • Verified: iPhone 6.9″ portrait master (1320 × 2868 px).
  • No account needed — opens in your browser; nothing is uploaded.
Code Keeper authenticator screenshot template: five slides, monochrome precision with mint highlights.

All five slides, in order

Swipe or use the slide links

  1. Code Keeper slide 1 (promise): “Keep verification codes within reach.” over a dark gradient background with a accounts screen slot and abstract grid.

    1 · Promise

    Keep verification codes within reach.

    Organize the accounts connected to your authenticator.

  2. Code Keeper slide 2 (primary feature): “Add your next account.” over a dark gradient background with a add account screen slot and abstract grid.

    2 · Primary feature

    Add your next account.

    Follow the setup method supported by your service.

  3. Code Keeper slide 3 (secondary feature): “See the code and its timing.” over a dark gradient background with a code detail screen slot and abstract grid.

    3 · Secondary feature

    See the code and its timing.

    Use a clear view of your current verification code.

  4. Code Keeper slide 4 (personalisation): “Find the right account faster.” over a dark gradient background with a organization screen slot and abstract grid.

    4 · Personalisation

    Find the right account faster.

    Add recognizable names and organize your entries.

  5. Code Keeper slide 5 (closing): “Review your recovery options.” over a dark gradient background with a recovery settings screen slot and abstract grid.

    5 · Closing

    Review your recovery options.

    Understand the backup features available in your app.

The story the slides tell

Typography-led: a huge headline and an oversized card with a fictional six-digit code, countdown ring segments, phone below.

  1. Slide one — promise: shows accounts, decorated with abstract grid and countdown ring. Example copy: “Keep verification codes within reach.” / “Organize the accounts connected to your authenticator.”
  2. Slide two — primary feature: shows add account, decorated with abstract grid and countdown ring. Example copy: “Add your next account.” / “Follow the setup method supported by your service.”
  3. Slide three — secondary feature: shows code detail, decorated with abstract grid and countdown ring. Example copy: “See the code and its timing.” / “Use a clear view of your current verification code.”
  4. Slide four — personalisation: shows organization, decorated with abstract grid and countdown ring. Example copy: “Find the right account faster.” / “Add recognizable names and organize your entries.”
  5. Slide five — closing: shows recovery settings, decorated with abstract grid and countdown ring. Example copy: “Review your recovery options.” / “Understand the backup features available in your app.”

How to use Code Keeper

  1. Open the template in Screenshot Studio. “Use this template” opens a new-project dialog in your browser; nothing is saved until you choose Create.
  2. Upload and map your app screenshots. Slots are named Accounts, Add account, Code detail, Organization, Recovery settings.
  3. Edit the headlines and supporting descriptions. Click any text on the canvas or use the copy table for every language.
  4. Apply your colours, fonts and target sizes. Brand kits and per-size adjustments keep the master layout intact.
  5. Preview, validate and export. Validation flags empty slots, overflowing text and missing fonts before the PNG export.

Advice for this template

  • Use a accounts screen for slide one, a add account screen for slide two, a code detail screen for slide three, then organization and recovery settings screens for slides four and five.
  • 1 slot is a zoomed close-up; supply a separate capture (or the same one, then pan the crop) so the detail stays sharp.
  • On this dark palette, check that small screenshot text still reads in Preview at store size.
  • Use legible editor captures and keep code examples large enough to read in the final artwork.

Questions

Which app screens work best in this template?
In order: accounts, add account, code detail, organization and recovery settings. Each slide has a named screenshot slot so captures map by position.
Can I replace the device frame?
Yes. Each screenshot slot can switch between the generic drawn frame styles (including frameless cards). Realistic manufacturer device artwork is not bundled.
Can I change the gradient colors?
Yes. The background is an ordinary editable gradient; the template also offers a matching solid colour and an alternate light/dark treatment.
Can I use this design for both platforms?
Yes. Projects can target App Store and Google Play sizes together. The master layout is 1320 × 2868; other sizes are resized proportionally, and you can adjust any size individually.
Which parts remain editable?
Every headline and description, screenshot slot, background and SVG decoration is an ordinary named layer you can edit, recolour, move, hide or delete.

Start from Code Keeper

Opens a new project in your browser with all five slides editable. Your existing projects are not changed.

Use this template