Following the below design specifications ensures fast load times, responsive design, and a high-quality user experience across desktop and mobile environments.
Colors
Element | Supported Formats | Notes |
Colors | HEX, RGB | Ensure a 3:1 contrast ratio for accessibility. Use the Accessibility checker to confirm contrast before launching. |
Logos
In the style guide you can configure a top logo and a bottom logo. They are uploaded and configured separately.
Element | Supported Formats | Max Size | Minimum Resolution | Notes |
Logo | .SVG, .PNG, .JPG | 1 MB (300K recommended) | 600px width or height | Use SVG for best quality. Should have a transparent background or match background colors. |
Reference image
Custom Fonts
Custom fonts are uploaded in the font selector.
Element | Supported Formats | Notes |
Custom Fonts | .OTF, .TTF | Avoid spaces in font names. |
Background media
Consider how background images/videos will interact with elements on top.
Media Type | Format | Optimal Size | Desktop Resolutions | Mobile Resolutions | Notes |
Image | .SVG, .PNG, .JPG | 300K (1 MB max) | Full: 1920x1080pxSplit: 960x1080px | Full: 750x1334pxSplit: 750x667px | For best performance without independent styling, use a desktop version—it will crop on mobile. |
Video | .MP4, .MOV, .GIF | 5 MB (10 MB max) | Same as image resolutions | Same as image resolutions | Videos are converted to .MOV to optimize performance. Use desktop version if not styling independently. |
Note: When using background and video elements, the setting "Style Independently" determines whether separate files are needed for mobile and desktop. If "Style Independently" is turned off. The desktop image will crop for mobile.
Reference image
Screen Elements
Button Elements
Element Type | Format | Optimal Size | Minimum Resolution | Notes |
Image Button | .SVG, .PNG, .JPG | 300K (1 MB max) | 600x600px | Center your content—edges may be cropped responsively. |
Video Button | .MP4, .MOV, .GIF | 5 MB (10 MB max) | 600x600px | Ensure video content is centered. May crop at edges. |
Reference image
Image Elements
Element Type | Format | Optimal Size | Minimum Resolution | Notes |
Image Button | .SVG, .PNG, .JPG | 300K (1 MB max) | 600x600px | Center your content—edges may be cropped responsively. |
Image Element | .SVG, .PNG, .JPG | 300K (1 MB max) | 600x600px | Applies to Outcome Images, Product Images, and Dynamic Product Feed Images. |
Video Button | .MP4, .MOV, .GIF | 5 MB (10 MB max) | 600x600px | Ensure video content is centered. May crop at edges. |
Video Element | .MP4, .MOV, .GIF | 5 MB (10 MB max) | 600x600px | Also applies to Outcome and Product Videos. |
Reference image
Other Screen Elements
Element | Format | Max Size | Minimum Resolution | Notes |
Progress Bar Icon | .PNG, .JPG | 1 MB (300K recommended) | 128x128px | — |
Mood Board Image | .SVG, .PNG, .JPG | 1 MB (300K recommended) | 600x600px | — |
Social media sharing
Platform | Format | Max Size | Minimum Resolution | Notes |
.PNG, .JPG, .GIF | 1 MB | 1200x628px | Used in shared posts. Can be static or personalized by outcome. | |
N/A | — | — | Twitter supports text-only posts, with a 280-character limit. |
Reference image
FAQ
Why are my images or videos cropped?
Jebbit elements are responsive. Ensure your focal content is centered.
Can I upload animated GIFs as buttons or backgrounds?
Yes, but ensure they meet resolution and size limits.
What's the maximum allowed file size?
The maximum allowed file size is 20 MB across all file types, though lower file sizes are highly recommended for performance.