Portal Hero image
1900x700px. As PNG. No Text, max of 300kB.
The hero image is the main visual point of the portal. From a design perspective we request that any graphics are located on the right size of the image. This will allow a better visibility of the login area.
The hero images should never include text. The title and subtitle will be added in the hero section at a later stage.
✅ Recommended
❌ Not compliant
Portal Hero image - Mobile
900x300px. As PNG. No Text, max of 300kB.
The Mobile Hero Image makes sure that the hero image is centralized for screen sizes below 600px. If no mobile image is provided, the main hero image will be used as default.
The hero images should never include text or small stickers
✅ Recommended
❌ Not compliant
CRM Hero image
580x150px. As PNG.
The hero image is the main visual of each transactional email. Please do not provide any image that is smaller as this will look pixelated. Please add the brand logo on the CRM banner or send us a ready-to-use image.
✅ Recommended
❌ Not compliant
Logo
Transparent high resolution SVG. or PNG.
The company logo is always required throughout the entire integration. The file should be as good resolution as possible. SVG or PNG would be the best files.
300X300px square Logo
A square logo is needed for some specific pages on our Admin and Backoffice.
✅ Recommended
❌ Not compliant
Fonts
Typeface Source or Google Fonts. (Files : EOT, OTF or WOFF formats are accepted)
Fonts are the basis of a brand. For the integration we will need your font files. We require at least one of the following formats: TTF, OTF, EOT, WOFF.
Product Images
300x300px High Resolution. Max. 300kB, best as PNG.
They are a visual representation of what you are offering. The minimum size should be 300x300px. In case you don’t offer any products, we can always design a banner or something similar to promote the brand. The image should be always be provided by the partner.
The product image should not contain any text or CTA
✅ Recommended
✅ Recommended
HIW icons (optional. PNG or SVG file)
Standalone widget background (optional) 1600 x 1200px
Standalone widgets are used for product recommendations or in-app referral programs. They consist of only the sharing UX being triggered from a partners touchpoint. If you require a standalone widget for your partner, please let us know.
Keep in mind that the styling will be the same as in the portal. To develop a standalone widget we would need the background image as well as the products (and product ID’s). We also need the content for a reward table and a HIW section for the widget.
Style guide
PDF or web portal from your design or brand teams
Your branding or marketing team probably developed a style guide to show how to use your brand. If you have an online platform or a design system, please invite us using the following email address:
integration@aklamio.com
Viewports
The viewport is the user's visible area of a web page. The viewport varies with the user's device, and will be smaller on a mobile phone than on a computer screen.
To ensure web content is properly scaled and responsive across different devices and screen sizes, we use the following standard viewports:
-
XS - 375px
-
S - 600px
-
M - 900px
-
L - 1200px
-
XL - 1536px
The 5 standard breakpoints above are customizable if needed.
Requirements for Hosted Portals
Logo (as in the partner’s website, rectangular proportions) with transparent background in .png or .svg
✅ Recommended
❌ Not compliant
Favicon (as in the partner’s website) preferably in .png, .svg or .ico
Social Media preview image minimum size 600 x 315 pixels, Ideal size 1200 x 630pixels
This is the image used for the Open Graph and Twitter Card tags below, and is what shows when the portal URL is shared on social media or messaging apps. Can be a logo only, an image only, or a logo + image composition.
✅ Logo only
✅ Image only
✅ Logo + image
Meta Information
-
Meta Title and Meta Description: shown in search engine results and used to populate social sharing tags
-
Canonical URL: the preferred/authoritative URL for the page, to avoid duplicate-content issues
Optional - if not provided, will be duplicated from the above
-
Open Graph tags: og:title, og:description, og:image, og:url, generated from the info above and used by Facebook, LinkedIn, WhatsApp, etc.
-
Twitter Card tags: twitter:card, twitter:title, twitter:description, twitter:image, used when the link is shared on X/Twitter
Website
The URL desired to be linked when clicking the logo. Recommended: partner website
Vanity URL:
the desired final URL. E.g. “http://PARTNER.aklamio.com”
Search Engines / Robots directive
Should the page be indexed by search engines or not, and should links be followed (index/noindex, follow/nofollow)?