Your Look

Your look is how the embed dresses for your brand: your logo, the header, font, colors (including the Yes and No sides), corners, spacing, default mode, the shape of the feed, and the style of its charts. You set it once in the back office, separately for sandbox and production, and every embed of your operator opens already wearing it. There are no URL parameters to pass and no flash of the default look. Most operators need nothing more.

You edit it in the Appearance Studio, under Manage > Your operator > Appearance. Parameters in the iframe URL and Host SDK calls stay available as per-page overrides for the cases where one page should look different.

What You Can Set

Leave a setting at its default and Phoenix's own choice is used. Phoenix's look is every default at once.

Brand Mark

• Name. The header shows your operator's display name in the embed's own type. Your Admin sets the display name under Manage > Your operator > Overview; with none set, players see Phoenix's wordmark.
• Logo. An image at an https address (up to 2,048 characters, with no spaces, quotes or brackets in it). Add a Dark logo if your logo needs another version on dark surfaces; without one, the logo is used on both. Logo height is a whole number from 16 to 48 pixels. The studio shows each image on the surface it is for, and checks that it loads.

Header

The bar at the top of the embed. Full, Slim or Hidden sets how much bar there is. Under Full and Slim, a switch for each part decides what the bar carries, and Links to Activity, Leaderboard, Portfolio and Saved decides whether those links sit in the header, in a row of tabs in the page, or in your own site's menu. Search, the links and the language picker always stay reachable: what the bar does not carry moves into the page. A header that shows nothing is refused, so choose Hidden. The parts, what players see on a desktop and on a phone, and how the launch token combines with the header are on Header.

Font

• Geist is the embed's own font.
• Google is a family from Google Fonts, chosen by name, for example Inter. Search the list, or type any family name Google has.
• File is your own font file: the family name it carries, and the https address of a .woff2, .woff, .ttf or .otf file. The player's browser fetches the file from inside the embed, so serve it with CORS headers that allow https://embed.prediction.phoenixverse.io.

Colors

• Brand is the color of your main buttons and highlights.
• Second marks the line under the active tab (the category bar, and the tabs of an event page and of Portfolio) and the mark beside "Top movers today". With no second color, these use the brand color.
• Background tints the surfaces. By default they lean toward the brand color's hue. Pick a color to give the backgrounds its hue and strength instead (a very vivid pick is held to a quiet tint, and a gray means no tint). Their lightness stays the embed's own, so text stays readable.

Yes and No Colors

The colors of the Yes and No sides of a market:

• Standard is green for Yes and red for No.
• Colorblind is blue for Yes and red for No, which stay distinct for players with red-green color blindness.
• Custom is your own Yes color and your own No color. Only each color's hue is used; the embed keeps its own lightness and strength for each mode, so wins and losses always stay readable. Each color needs a hue (not a gray, black or white), and Yes and No must be clearly different hues, at least 40 degrees apart on the color wheel. The studio and the server both refuse anything else, at the field.

Corners and Default Mode

Corners sets how round cards, buttons and fields are: Sharp, Soft or Round. Default mode is the mode players open in: Dark, Light, or Device, which follows each player's phone or computer.

Spacing

Comfortable is the default. Compact tightens spacing and makes text slightly smaller throughout the embed, which suits narrow placements such as a sidebar or a sportsbook betslip column.

Layout and Card Style

Layout is the frame of the feed:

• Standard puts a strip of categories across the top, above a grid of event cards.
• Board moves the categories to a rail down the left side, with Trending first and the number of open events beside each category, and lets the feed fill the width of the embed. On phones it shows compact rows.

Card style is how one event reads in the feed:

• Outcomes lists the event's leading outcomes with their chances and buy buttons.
• Binary leads with one large chance. An event with a single market shows that chance with Yes and No buttons; an event with several markets shows its leading outcomes as a ranked list of bars, and players open the event to trade.

Charts

• Chart lines is how a chart line joins its points: Smooth, Straight or Steps.
• Chart fill is Lines only, or Filled, which adds a soft gradient under chart lines.
• Chart colors is Built in, the embed's own series colors led by your brand color, or Your own: 2 to 8 distinct colors, used in order for the line of each market on an event with several markets, and for its dot and small chart in the market list.

Colors Are Adjusted for Readability

The colors you pick are starting points, not final colors. The embed works out every shade from them with its contrast rules for each mode, so no saved look can be hard to read:

• A brand or second color that is too dark or too light for a mode is shifted to a legible shade of the same hue. The text on brand-colored buttons is chosen for contrast too.
• Chart colors get the same check: one that is too dark or too light for a mode is shifted to a legible shade of the same hue on that mode's page.
• Backgrounds, surfaces, text and borders use lightness steps tested for each mode, tinted by your background setting.
• Yes and No colors give only their hue. The embed keeps its own lightness and strength for each mode, so wins and losses always stay readable. The Colorblind choice makes Yes blue and keeps No red.

The studio shows what players see, not only what you picked. When a color is shifted, the setting lists it under Adjusted for legibility, naming the color players see on light and on dark surfaces. Yes and No colors and your own chart colors also show Players see swatches for dark and light surfaces.

What the Look Does Not Cover

The odds format is not part of the look. Your default odds format and the formats players may switch to are Betting settings, and your own page can choose any format for itself with odds or oddsFormat (see Odds and Charts). The bet slip's quick-amount buttons and its starting amount are Betting settings too, and your safer-gambling message and links are Player protection, each set beside the look in the back office and saved per environment. No URL parameter or Host SDK call changes them. Deposit and profile buttons are per player, in the launch token; the token can hide them in the header, never show one the look hides (see Player Buttons and Header). The social features (comments, leaderboard, top holders and activity) are set in Curation, not in the look (see Features). Prices, balances, fees, order limits and market rules are never appearance settings.

How Players Get a Change

Each saved look is served to the embed as a small stylesheet at one address per operator and environment, so it is in place before the first paint and cached by the browser. The colors, including Yes and No and your chart colors, and the spacing are in that stylesheet. The chart line style and fill, and the header, reach the embed with its configuration, before the first chart or bar is drawn. Either way, players do not see the default look first. Players see a change on their next load, within about a minute. Nothing is added to a repeat visit.

Neither the logo nor the font ever delays the page:

• If your logo cannot load, players see your name.
• If your font is slow or cannot load, players see Geist until it arrives, and keep Geist if it never does.
• If the look itself cannot be fetched, the embed shows Phoenix's default look until it has read yours, then applies it.

Order of Precedence

A page can still override the look, field by field, and the later of these wins:

1. Your look in the back office.
2. URL parameters on the iframe.
3. Host SDK calls (setTheme and setBranding) while the page runs.

A field a layer does not name is left to the layer before it. For example, a look with a yellow brand color and Soft corners, opened with accent=%23F97316 in the URL, shows an orange brand color and Soft corners. A later setTheme({ accent: null }) drops the page's own value, and the look's shows again.

The header is back office only. No URL parameter and no Host SDK call changes it for a page. The launch token can hide a Deposit or Account part for one player, never show one the look hides (see Header).

A page's font overrides your look's whole font: font alone is a Google Fonts family, and font with fontUrl is a font file.

A page's cb overrides the look's Colorblind choice, in either direction: cb=1 turns Yes blue, and cb=0 turns the look's Colorblind choice off for that page, so Yes shows green (or the page's yes color). cb always wins over a yes color. A page's chart colors are checked for legibility like the look's.