Design Guide: Visual Foundations

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.667 on 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 36px at base ships as ≈60px on an Echo Show at 1.667×.

Don't hardcode per-surface pixels (.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

#	Token	Size
1	textStyleDisplay1	48px
2	textStyleDisplay2	40px
3	textStyleDisplay3	32px
4	textStyleDisplay4	28px
5	textStyleDisplay5	24px
6	textStyleHeadline1	20px
7	textStyleHeadline2	18px
8	textStyleBody1	16px
9	textStyleBody2	14px
10	textStyleBody3	12px
11	textStyleLabel1	10px
12	textStyleLabel2	8px

Spacing

#	Token	Value
1	spacing4XSmall	2px
2	spacing2XSmall	6px
3	spacingXSmall	8px
4	spacingSmall	12px
5	spacingMedium	16px
6	spacingLarge	20px
7	spacingXLarge	24px

Shape (corner radius)

#	Token	Value
1	shapeRoundedRectXSmall	4px
2	shapeRoundedRectSmall	8px
3	shapeRoundedRectMedium	12px
4	shapeRoundedRectLarge	16px
5	shapeCircle	9999px

Iconography

#	Token	Value
1	action-small-icon	16px
2	action-medium-icon	20px
3	action-large-icon	24px

Card color

The Alexa+ design system uses the following colors prominently in its interfaces:

#	Token	Value	Usage
1	default-normal	#14181E	Dark Mode card default background
2	nested-inner-normal	#1B2028	Dark Mode card default inner background
3	default-normal	#FFFFFF	Light Mode card default background
4	nested-outer-normal	#FAF9FB	Light Mode card default outer background
5	nested-inner-normal	#FFFFFF	Light Mode card default inner background
6	base color/secondary blue/270	#2D415E	Dark Mode primary button color
7	base color/secondary blue/190	#232F40	Dark Mode secondary button color

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.

Related topics

• Brand Expression
• Components and Patterns
• Layout and Rendering
• Accessibility

---

Go back to: Layout and Rendering

Next: Components and Patterns

---

---

Last updated: Jul 21, 2026