🎨 Theme Guidelines

Welcome to the Theme Design Manual for the Tokeo App. This guide outlines how to implement and design themes that deliver an immersive and cohesive user experience, that elevates your brand in Tokeo.

Themes consist of four core elements:

• Primary Color (used for buttons and highlights)

• Background Color (serves as the top color in a background gradient that fades into black at the bottom)

• Background Image (used as background in summary tab)

• Thumbnail Image (used as thumbnail for when selectng theme)

---

🧹 Theme Structure

Each theme is composed of:

Element	Description
primaryColor	Used for primary buttons (Receive, Send) and call-to-actions.
backgroundColor	The base color used for the background gradient. Blends into black.
backgroundImage	A foreground image that adds personality to the wallet. Anchored visually for best fit.
thumbnailImage	Square preview icon used in the theme selector

---

🎨 Color Guidelines

• Primary Color

  • Should contrast well against the background.

  • Used for key interaction buttons (e.g. Send, Receive, CTA alerts).

  • Avoid overly saturated neons unless purposefully on-brand.

• Background Color

  • Use dark or rich hues that transition smoothly into black at the bottom.

  • Ensure good contrast with the image’s outer edges to allow clean blending.

  • Gradient direction: Top (backgroundColor) → Bottom (Black)

---

🖼 Background Image Design

Designing a background image that works across devices requires thoughtful placement and sizing.

📀 Dimensions & Format

Parameter	Recommendation
Resolution	1080 x 2400 px (Portrait)
Aspect Ratio	9:20
Format	PNG (preferred) with transparent areas if needed
File Size	Recommended: ≤ 500 KB, Max: 1 MB

💡 Optimization Tips

• Use PNG only if transparency is required

• Otherwise, export as compressed JPEG (80–90% quality)

• Use tools like TinyPNG, ImageOptim, or Squoosh for compression

• Avoid unnecessary layers or oversized graphics

📍 Placement Guidelines

• Flexible Placement: Images may float in the center, rise from the bottom, or hang from the top—as long as they look visually balanced with the gradient and device frame.

• Safe Area Awareness:

  • Leave the bottom ~120dp clear for:

    • App bottom nav bar

    • Device software nav bar (on some Androids)

• Avoid placing key visual elements too close to screen edges unless part of the design intention.

🌈 Edge Blending

• Your image should fade or blend visually into the theme's background gradient.

• Avoid harsh outlines or solid color backgrounds behind characters unless the edge is part of the design.

• Use shadow or soft feathering at the base and sides for a smooth gradient transition.

---

✅ Best Practices

Do	Don't
Use floating characters or illustrated objects	Avoid full-bleed rectangular photos
Align visuals to the bottom center or off-center	Avoid top-heavy compositions
Test on both light and dark variants	Avoid backgrounds that clash with gradient color
Keep content above the navigation bar	Avoid placing heads or logos at the very bottom

---

📸 Example Designs

Example	Notes
	Character rises from the bottom with clear separation and smooth gradient. Primary color contrasts well.
	Floating themed background color and supporting characters visually integrated. Sufficient top spacing.

---

🧪 Preview with Template (Optional but Recommended)

To help you visualize your theme in context, use our semi-transparent overlay template (Theme_Template.png) as a guide.

How to use:

1. Open your background in Figma, Photoshop, or any editor.

2. Place Theme_Template.png as a top layer.

3. Align your artwork beneath it, making sure elements don’t collide with UI components.

4. Hide or remove the overlay before exporting.

📥 Download the template:

---

🞼 Theme Thumbnail (Icon) Guidelines

Each theme must include a square thumbnail image for use in the theme selector UI.

📀 Thumbnail Requirements

Property	Recommendation
Resolution	512×512 px (minimum), up to 1024×1024
Aspect Ratio	1:1 (square)
Format	PNG (preferred), JPEG optional
Background Style	Solid, gradient, or blurred theme preview
File Size	≤ 200 KB

---

🧑‍🎨 For Designers Submitting New Themes

1. Prepare a folder with:

   • background.png (1080x2400)

   • thumbnail.png (512x512)

   • theme.json with:

     {
       "primaryColor": "#8F5AFD",
       "backgroundColor": "#1B102A"
     }

2. Submit for review via Tokeo's Discord.

---

💬 Questions?

Reach out to the Tokeo Design Team on Discord for feedback and iterations.