Custom Template Guide

Custom Template Guide

This guide supports brand and design teams in preparing template briefs—not building templates—for the Vibe development team. While external designers don’t code directly in Vibe, your design and structure provide the critical blueprint for a compatible Vibe template.

Vibe templates serve digital signage and internal channels (large-format screens, screensavers, wallpapers)—they’re not for print, PDFs, or web navigation. Since there’s no scrolling or links, content must be instantly clear and dynamic. Want to share more info? Include QR codes for deeper engagement.

We ask that you:
  1. Create design files that are developer-ready for Vibe.
  2. Understand how editable fields and themeable elements work in our system.
  3. Include all assets and instructions our team needs to efficiently realize your concept.
Alert
Important Note: Think of your design as a blueprint — you provide the creative plan, and our team will assess it, align it with Vibe’s standards, and prepare a development brief. Because of factors like font scaling, layout rules, mandatory placement for logo, margins, and other platform requirements outlined below, your original design may need adjustments. Final templates may differ slightly from your supplied blueprint to ensure compatibility and consistency across all screens.

Core Concepts

Before starting your design, get familiar with these key articles:

Readability and Screen Orientation

  • Templates must work in both landscape 1920 x 1080 pixels and portrait 1080 x 1920 pixels regardless of your own organizations screens. Future proof for portrait now.
  • Font Scaling is used so that a template can accommodate a wide range of content lengths. Our minimum standard font size: 32px for legibility 'across a room'.
  • Line height and letter spacing are set to auto only. There is no functionality to change this in the templates as content must fit into designated spaces.
  • Consider content sources for: Web portal items, and spreadsheet and social media to test layout balance for minimums and maximums.

Themes & Branding

Templates in Vibe inherit styling from themes, where default colours, fonts, and backgrounds can be swapped dynamically.

Theme-able elements include:

Notes
Think of theme-able elements as the “skin” of your template — they keep your design on-brand across the platform.
» Explore Themes

What’s default, fall-back or Editable?

Your design should clearly show which parts you want to be editable. You don’t need to know the coding — just specify what type of variable it should be.

  • Text (Mandatory fields are)
    • Slide Title
    • Slide Subtitle
    • Item Heading
    • Item Summary
    • Item date
    • Plus any Optional extra fields
  • Elements
    • Image — One image per content item
    • Colour — Text colours, design elements and shape fills
    • Shapes
  • Show/Hide toggles — Optional elements
Notes
Mark up your design files to indicate editable areas (e.g., “Editable text”, “Secondary Font Theme colour”, “Fall-back image”). Our team will handle the technical mapping.

Which Category?

To ensure your template is both functional and future-proof, we recommend designing it to align with one of our eight core categories. These categories reflect the most common communication needs in Vibe and give you access to proven features.

You should also pick at least one closest existing template, as an example, so that our developers can use as a base for functionality. 
Info
Browse our Template Library for inspiration and to see what’s possible within each category.

Designer Handover

Alert
Designers — Please review and provide all details when preparing your Adobe XD or Figma design for Vibe development.
Template Details
- Template Name.
- Purpose.
- Use Case.
Outline the purpose for your template.
What are the goals.
What you want, or don't want.
Readability & Layout- Minimum font size = 32px.
- Avoid thin/light fonts.
- Auto line-height & letter-spacing.
- 1920×1080 (landscape).
- 1080×1920 (portrait).
Test with real content (short/long text, images, data).
Branding (Themes)- Fonts.
- Brand colours.
- Backgrounds.
- Logo images.
- Overlay images.		Mark these as “theme” elements.
Editable Variables- Title, subtitle.
- Item heading, summary, date.
- Optional text fields.
- Image fall-backs and defaults.
- Colour.
- Shape options.
- Show/hide toggles.		Clearly label as "editable", "Default", "Fall-back", “Theme colour” etc.
Template Category- Events.
- Insights.
- Media.
- Notices.
- Recognition.
- Retail.
- Social.
- Training.		Also provide the closest existing Vibe template as a functional reference.
Design Files- Adobe XD.
- Figma.
Keep layers tidy and named clearly
Example Content- Portrait + landscape mockups.
- Example content populated.		Provide a sample spreadsheet or use-case “minimum” and “maximum” content to test balance.
Annotations- Editable variables.
- Theme elements.
- Animation Plan.		Add notes directly in design file or in a handover doc.

Example Designed Templates

  1. Profiles 50/50 »









Example Animation Plans

#1 Template Name: Announcement Banner
Category: Notices
Closest Existing Template: Message (Bubbles)

Animation Goals:

  • Draw quick attention to the headline.
  • Provide subtle movement for engagement without distracting from readability.

Animation Details:

  1. Intro Animation (on load):
    • Headline text fades in (0.8s ease-in).
    • Background image scales up from 95% → 100% (1.2s ease-out).
  2. Loop Animation:
    • Supporting text scrolls upward in a continuous loop if longer than 2 lines (speed: 3s per line).
    • Decorative element (e.g., accent line) pulses opacity 100% → 70% → 100% every 4s.
  3. Exit / Transition:
    • All elements fade out together (0.5s ease-in-out) before the next slide.

Special Notes:

  • Keep headline text fixed (no scrolling).
  • Ensure animations do not exceed 5s total before settling into the static display.
  • Must run smoothly on large screens (no heavy effects).

#2 Template Name: Moment Slider
Category: Recognition
Closest Existing Template: Profiles (Classic)

Animation Goals:

  • Highlight multiple images in sequence.
  • Smooth, minimal movement to keep the focus on visuals.

Animation Details:

  1. Intro Animation (on load):
    • First item fades in (1s ease-in).
    • Title text slides in from the left (0.7s ease-out).
  2. Loop Animation:
    • Each item auto-transitions every 6s.
    • Transition style: crossfade (1s).
    • Caption text fades in with each new image (0.5s delay after image load).
  3. Exit / Transition:
    • Final image fades out (0.8s) before cycling back to the first.

Special Notes:

  • Support landscape and portrait image formats.
  • Ensure no harsh cuts; transitions must be smooth.
  • Limit summary length to 2 lines. Cut off with ellipsis.

    • Announcements

    • Available Now: Sports Tournament Infotainment

      Get ready for the Women’s Rugby World Cup! We’ve updated our Sports Tournament Infotainment slide with fixtures and live leaderboard updates. Perfect for keeping your workplace in the spirit of the game. You'll find it in the Infotainment Category when

    • Template Design Guide

      Our Template Design Guide is for external designers, we recommend reviewing it if you plan to design your own Vibe templates: 👉 Vibe Template Design Guide This guide is designed to support brand and design teams in preparing template briefs—not building

    • Coming Soon: New Look for System Settings

      Behind the scenes, our team has been busy building a new System Settings interface in the Portal. This refreshed design will make managing Vibe smoother, faster, and more intuitive. Over time, we’ll be migrating all administration features and settings

    • Vibe.fyi Achieves ISO/IEC 27001:2022 Re-Certification

      Security isn’t optional — it’s foundational. We’re proud to share that Vibe.fyi has achieved ISO/IEC 27001:2022 re-certification, proving our commitment to: ✅ Protecting client data ✅ Managing risks in a fast-changing digital landscape ✅ Keeping our security

    • Free Mini Program: AI Adoption & Compliance in your Workplace

      AI is everywhere, but knowing how to use it safely and effectively at work can be tricky. That’s why we’ve created a free mini program for all Vibe clients to use as is or adapt to their own policies. Your team will learn how to: Use AI confidently and