MCP add-ons are responsible for finding their own visual language. Adapt yours to Alexa as much as possible. Three adaptations matter more than any single token choice: typography at a 1.6 scaling ratio relative to typical web and mobile sizes, reduced content density with fewer metadata fields per item, and a consistent bias toward simplicity over information richness. Alexa customers benefit most from clarity at a glance.
Designing for Alexa’s surface
Alexa is a low-content-density, low-resolution surface. The most important adaptations you can make to your existing visual language are:- Typography at a 1.6 scaling ratio relative to typical web and mobile sizes.
- Reduced content density. Use fewer metadata fields and less per-card information.
- Less is more. Prioritize a simple, highly readable experience over information richness.
Scaling implementation
The “1.6 scaling ratio” is a rounded headline. For an Echo Show 8 or 15, which renders at 1280×800, the exact ratio is 1.667. The base design canvas is 768×480, and 1280 ÷ 768 = 800 ÷ 480 = 1.667. Other device classes use different ratios (1.6 is the approximate headline, not a normative implementation value). Express surface adaptation as one root scale, not per-element sizing.- Author your entire UI at the 768×480 base canvas.
- For each device class, apply a single root scale to the whole UI. For Echo Show 8/15, that’s
zoom: 1.667on the root element. Type, spacing, corner radii, and touch targets will scale with it. - Derive radii and spacing from a small set of primary tokens so flipping the root scale re-sizes elements coherently. A corner radius authored as
36pxat base ships as≈60pxon an Echo Show at 1.667×.
.show8 .card { border-radius: 27px }), which is a brittle path the token layer prevents.
Build a derived token system. Rather than managing individual values per surface, define a small set of primary tokens (one base corner radius, one type scale, one spacing unit) and derive the rest mathematically. When you flip the root scale, the entire system scales coherently with no per-surface hand-tuning. A token sheet that renders from your running CSS variables rather than a static table can’t drift from your shipped code — because it is the code. Version it so your implementation can always pin to a known set.
Checklist
- Support light and dark mode natively. Design and test both.
- Use appropriate padding on all components.
- Use card backgrounds with rounded corners.
- Apply adaptive breakpoints with styling overrides for mobile, web, and Echo family devices.
- All text is readable at arm’s length (~3 feet), and essential information is legible from about 10 feet.
Token reference
Use these values as the foundation for adapting your design to Alexa.Typography
Spacing
Shape (corner radius)
Iconography
Card color
The Alexa+ design system uses the following colors prominently in its interfaces:
Primary colors are the most vibrant colors in your interface, often a brand color. Use them to highlight key actions and interactive elements: buttons, links, selected states.
Secondary colors support the primary palette. Apply them to text, containers, and backgrounds. Their chroma should be muted to maintain visual balance and keep primary elements prominent.
Use bright, bold primary colors judiciously. Reserve them for buttons that complete final actions, such as “Submit” or “Place order,” where a strong visual signal earns its weight. Avoid using bold brand colors or gradients as large fields or backgrounds. On Alexa’s low-density surfaces, a saturated background competes with content rather than supporting it. Your experience must remain usable with Color Correction and Color Inversion settings applied on a device. For more information, see Accessibility.
