This guide explains every design setting on the Logos, colors, app icons page and what it changes in your Apple TV app. You can adjust these any time — and preview the result instantly on a real Apple TV before your app is even submitted (see Preview your app on Apple TV at the end).
Good to know: Your Apple TV app uses a modern, streaming-service-style layout — a large hero area at the top that shows the currently highlighted video, with your content in horizontal rows below. Most colors and text adapt automatically to keep everything readable, so you only need to set a few things.
1. Top navigation
These settings control the top menu bar (Video · Live · Search · Info). They apply to your Apple TV app's navigation only.
Setting | What it does |
Logotype | Your logo, shown top-left. This logo is used across all platforms (Roku, Fire TV and Apple TV). Use a transparent PNG for best results. |
Left margin (px) | How far the logo sits from the left edge. Default: 90 — this lines the logo up with your video rows below. Leave it empty (or at 90) unless you have a specific reason to move it. |
Text Color | Color of the inactive menu items. |
Active text color | Color of the selected menu item. |
Background color | Background color of the top menu bar. |
Translucent background | When on, the menu bar is slightly see-through so content scrolls subtly underneath it. |
2. Video grid screen (your home screen)
This is the main "Videos" screen. A few important points for the new Apple TV layout:
Text color — follows your background
There is no text color to pick. Your app uses light text on a dark background and dark text on a light background, worked out from the two background colors below, so titles, menus and the search screen always stay readable. The design page shows which one your app will use, for example "Light text, because your background is dark."
So choose the look through the background: a deep near-black gradient gives the cinematic streaming feel with white titles, a light grey gradient gives a bright, clean look with dark titles.
Background gradient (Top color / Bottom color)
The home screen background is a smooth vertical gradient between these two colors.
Set Top color and Bottom color to brand your background (e.g. a light grey gradient, or a deep near-black for the cinematic look).
Change them and the text color switches with them. The preview on the design page shows the result right away.
If you leave them empty, the app uses its default background, and the page lets you choose light or dark text instead.
These same colors are also used on the secondary screens (Live, Info).
The hero area (automatic)
The large preview at the top — title, Play button and artwork — updates automatically to show whichever video is currently highlighted. There's nothing to configure; it uses your videos' thumbnails. The hero title and Play button automatically follow your text color so they stay readable.
Primary text Color / Secondary text Color
On Apple TV these act as accent / highlight colors (for example the focus highlight as you move around). Your actual titles follow the background, so you don't set title text color directly here. If one of them would be hard to see on your background, the design page says so and suggests a color.
Content offset (px)
Adds extra space at the very top of the home screen, above the hero area. Default: 0. Increase it only if you want more breathing room at the top.
Background image (Apple TV)
Note: The current Apple TV design uses the clean Background gradient described above instead of a full-screen background photo. A background image uploaded here is not shown on the Apple TV home screen — use the Top/Bottom gradient colors to brand your background.
3. Background gradient — secondary screens
The Top color and Bottom color here brand the background of the secondary Apple TV screens (such as Live and Info), and — as noted above — the home screen as well.
4. Roku & Fire TV settings are separate
The section "Video grid screen config for Roku and Fire TV" (Dynamic background image, Display video titles on grid screen, Title positions) applies to your Roku and Fire TV apps only — not Apple TV. Apple TV uses the automatic hero layout described above.
5. Preview your app on Apple TV (before it's published)
You can see your exact configuration on a real Apple TV right away, using our free Tappla TV app:
On your Apple TV, open the App Store and download the Tappla TV app.
Open Tappla TV, go to the Search screen, and type your app code in the search field:
XSFFFT(your code is shown next to your app name at the top of the dashboard).Press the Play button — the app switches to your configuration.
Important: It only works when you press Play. Pressing Enter runs a normal search and will not load your configuration.
Make a change in the dashboard → Save changes → reload your configuration in Tappla TV to see it live. Your final, published app will be a fully standalone Apple TV app branded entirely as yours — no one will know it was made with Tappla.
Quick recipes
Bright, clean look: a light Background gradient (e.g.
#FFFFFF→#E6E6E6). Titles come out dark.Cinematic / streaming look: a dark Background gradient (e.g.
#101010→#000000). Titles come out white.
Need a hand? Reply here and we'll help you dial it in.