Alexa Styles and Resources

Use the Alexa styles package to create a consistent presentation across different devices. This package provides a collection of named resources and styles designed to work well on different device types.

For details about defining your own resources and styles, see APL Resources and APL Styles.

Import the Alexa styles package

To use the Alexa styles package, and have access to all of its values, add the alexa-styles package to the import array in your document. The latest version of the alexa-styles package is 1.6.0.

Example of the imports section of a document:

Copied to clipboard.

{
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ]
}

Color resources

The Alexa color resources define a set of colors. Use the "@" resource syntax to use these values on the color property of an APL component, for example:

{
    "type": "Text",
    "color": "@colorText"
},
{
    "type": "Frame",
    "backgroundColor": "@colorBackground",
    "borderColor": "@colorRed800"
}

Basic color resources

These resources define a set of color names. Many of these colors are also used within the UI color resources shown below.

Resource Name Default

colorBlack

#000000

colorBlackTVSafe

#0F0F0F

colorBlue800

#232F3E

colorGray100

#FAFAFA

colorGray200

#EBEDED

colorGray300

#D6DBDB

colorGray400

#ABB8B8

colorGray500

#879496

colorGray600

#6B7878

colorGray700

#383D3D

colorGray800

#1E2222

colorGreen800

#34581B

colorOrange800

#652718

colorPurple800

#3E3F68

colorRed800

#65151E

colorSalmon800

#652E2C

colorTeal800

#0A655E

colorWhite

#FFFFFF

colorWhiteTVSafe

#F0F0F0

colorYellow800

#986300

The following example displays each basic color resource as defined in alexa-styles.

UI element color resources

These resources define colors recommended for specific APL document elements, such as text and backgrounds. Note that some of these use the colors defined in Basic color resources.

The Default value is used for most viewports. The TV value is used for viewports that match the tvLandscapeXLarge viewport profile.

Resource Name Description Default TV

colorAccent

Use to draw attention to a UI component.

#00C9FF

Default

colorBackground

Use for a basic background color.

@colorBlue800

Default

colorBackgroundOverlay

Color to use as an overlay over an image, to make text shown on top of the image easier to read.

@colorBlack

@colorBlackTVSafe

colorBackgroundReversed

Use for a basic background color.

colorGray200

Default

colorComponent

The primary color for a component in its default state. For example, the default color of a button.

@colorGray100

#DADADA

colorComponentReversed

The primary color for a component in its default state. For example, the default color of a button.

@colorGray800

Default

colorText

Default color for text elements.

@colorGray100

#DADADA

colorTextDisabled

Use for any disabled text, whether primary or secondary text.

@colorGray100

#DADADA

colorTextDisabledReversed

Used for any disabled text, when displayed over elements with dramatically different color value than the background

@colorGray800

Default

colorTextReversed

Use when standard text elements are displayed over elements with dramatically different color value than the background.

@colorGray800

Default

colorTextSecondary

Use to deemphasize metadata text.

@colorWhite

@colorWhiteTVSafe

colorTextSecondaryReversed

Use for metadata text which appears over elements with dramatically different color values than the background.

@colorGray800

Default

The following example displays each UI element color resource defined in alexa-styles.

Opacity resources

The opacity resources define numerical values you can use to set the opacity property of a Component. Use the "@" resource syntax to use these values on the property, for example:

{
  "type": "Text",
  "text": "This text should appear disabled.",
  "opacity": "@opacityDisabled"
}
Resource name Description Value
opacityDisabled Fade the component to appear disabled 0.3
opacityBackgroundOverlay Fade the component enough to make text shown on top of the component more readable. This level of opacity is often used with background images. 0.6
opacityNonResponse   0.5
opacitySecondary Fade the component to indicate that it is the secondary information on the page. For example, the AlexaHeader responsive component uses this opacity for the attribution image and text. 0.8

The following example displays a Frame with each opacity resource defined in alexa-styles.

Text resources

The text resources define values you can use to set properties on the Text and EditText components. Use the "@" resource syntax to set text properties to these values, for example:

{
    "type": "Text",
    "fontFamily": "@fontFamilyRomanSans",
    "fontWeight": "@fontWeightBold",
    "fontSize": "@fontSizeMedium",
    "lineHeight": "@lineHeightExpanded",
    "letterSpacing": "@letterSpacingNormal"
}

Font family

Use these string resources to set the fontFamily property of the APL Text and APL EditText components.

Resource Name Description Value

fontFamilyRomanSans

Includes sans serifs used for English and English-like languages that are written in Latin, Greek, and Cyrillic scripts.

Amazon Ember Display

fontFamilyRomanSerif

Includes serifs used for English and English-like languages that are written in Latin, Greek, and Cyrillic scripts.

Bookerly

fontFamilyCompact

Includes Chinese, Japanese, and Korean languages that are written in script languages where additional spacing may be needed for larger glyphs.

Noto Sans CJK

Font weight

Use these string resources to set the fontWeight property of the APL Text and APL EditText components.

Resource Name Description Value

fontWeightLight

Use for most smaller text and any longer text.

300

fontWeightRegular

Use for karaoke text and text set at sizes below 18dp.

400

fontWeightMedium

Use for label text for titles.

500

fontWeightBold

Use to create contrast and to highlight a number or part of a phrase.

700

fontWeightHeavy

Use to create extreme contrast.

900

Font size

Use these dimension resources to set the fontSize property of the APL Text and APL EditText components. These resources are responsive, so they adjust in size based on the viewport of the user's device. The numerical values shown here are in dp.

The Default hub value is used for viewports that match the hubRoundSmall, hubLandscapeSmall, and hubLandscapeMedium viewport profiles. The Hub landscape value is used for viewports that match the hubLandscapeLarge profile. The TV value is used for viewports that match the tvLandscapeXLarge viewport profile.

Resource name Definition Default hub Hub landscape TV
fontSize5XLarge Use for quick, glanceable text, such as acronyms or large numbers to show time or day of the week. 106 148 96
fontSize4XLarge Slightly smaller display size to use for quick, glanceable text, such as acronyms or large numbers to show time or day of the week. 80 112 64
fontSize3XLarge Use when displaying a small amount of text, such as list items or inline titles that need to be read at a distance. 66 92 48
fontSize2XLarge Slightly smaller display size to use when displaying a small amount of text, such as list items or inline titles that need to be read at a distance. 53 64 32
fontSizeXLarge   48 48 24
fontSizeLarge Use for text that is shown alongside text set in display sizes, such as a brief description to go alongside a movie title. 40 40 20
fontSizeMedium Use for long-form content, such as a synopsis of a book. 32 32 16
fontSizeSmall Use to accompany titles, such as a displaying additional metadata about a movie time. 28 28 14
fontSizeXSmall Use for navigation, page, and section headers, such as flight information in a header. 24 24 12
fontSize2XSmall   20 20 10

The following example displays each of the font size resources defined in alexa-styles.

Line height

Use these number resources to set the lineHeight property of the APL Text component. These resources are responsive, so they adjust in size based on the viewport of the user's device.

Resource name Definition Value
lineHeightNormal Standard distance between lines of text. 1.25
lineHeightExpanded Increases the space between lines of text. 1.6
lineHeightCondensed Decreases the space between lines of text. 0.9

Letter spacing

Use these number resources to set the letterSpacing property of the APL Text component. These values increase or decrease the space between characters.

Resource name Definition Value
letterSpacingCondensed Decreases the spacing between characters 0.8
letterSpacingExpanded Increases the spacing between characters 2.0
letterSpacingNormal No extra spacing between characters. 0

Spacing resources

The spacing resources define dimension values you can use to set padding and spacing properties. Use the "@" resource syntax to set:

The dimensions are expressed in dp.

For example:

{
    "type": "Container",
    "paddingLeft": "@spacingMedium",
    "paddingRight": "@spacingMedium"
}

The Hubs value is used for most for hub viewports. The Hub (large) value is used for viewports that match the hubLandscapeLarge viewport profile. The TV is used for viewports that match the tvLandscapeXLarge viewport profile.

Use marginHorizontal for left and right margins on the viewport.

Resource name Hubs Hub (large) TV
marginHorizontal 64 80 48
spacing3XSmall 8 8 4
spacing2XSmall 12 12 6
spacingXSmall 16 16 8
spacingSmall 24 24 12
spacingMedium 32 32 16
spacingLarge 48 48 24
spacingXLarge 56 56 28
spacing2XLarge 64 64 32
spacing3XLarge 72 72 36

Shadow styles

Use the shadow styles on the style property for any component. These styles set the four shadow properties on the component:

Style name Color Horizontal Offset Vertical Offset Radius
shadowMedium 00000020 0 Hub: 16, TV: 8 Hub: 32, TV: 16
shadowSmall 00000020 0 Hub: 10, TV: 5 Hub: 20, TV: 10

Shape resources

The shape resources define dimension values you can use to set the borderRadius property. Use the "@" resource syntax to use these values on the borderRadius property of these components:

This lets you clip the corners of the image or frame. For example:

{
    "type": "Image",
    "borderRadius": "@shapeRoundedRect"
}

The Default value is used for most viewports. The TV is used for viewports that match the tvLandscapeXLarge viewport profile.

Resource name Definition Default TV
shapeRoundedRect Round the corners of the image. 4dp 2dp
shapeCircle Clip the image to a circle. This is set to the full viewport width to ensure that the value is a large enough number to clip the image to a circle. 100vw 100vw

Text styles

Use the Alexa text styles to set the style property of the APL Text component. These styles combine multiple text attributes such as color, fontFamily, fontSize, and other attributes. These styles are defined to be responsive, so they work well across different devices.

Although other components also have a style property, these styles specifically control Text component properties, so it only makes sense to use them with the Text component.

To assign a style to a Text component, assign the style name to the component's style property, for example:

{
    "type": "Text",
    "style": "textStyleDisplay4",
    "text": "This text is using textStyleDisplay4."
}

The alexa-styles package defines a base style (textStyleDisplayBase) that sets all of the following Text properties:

{
  "color": "@colorText",
  "fontFamily": "@fontFamilyRomanSans",
  "fontStyle": "normal",
  "lineHeight": "@lineHeightXLarge",
  "fontWeight": "@fontWeightRegular",
  "letterSpacing": "@letterSpacingNormal",
  "opacity": 1
}

All remaining styles build off of this base.

Style Name Description

textStyleDisplayBase

Base text style, extended by the other styles.

textStyleDisplay1

Use for glanceable text, such as acronyms, or large numbers to show time or day-of-the-week.

textStyleDisplay2

Smaller than textStyleDisplay1. Use for glanceable text, such as acronyms, or large numbers to show time or day-of-the-week.

textStyleDisplay3

Use to display a small amount of text, such as list items to be read at a distance.

textStyleDisplay4

Smaller than textStyleDisplay3. Use to display a small amount of text, such as list items to be read at a distance.

textStyleDisplay5

Use for text that is shown alongside an item, such as a brief description or synopsis of a movie.

textStyleDisplay6

Use for headline text in paragraph or body copy.

textStyleKaraoke

Use to highlight text in a karaoke experience.

textStyleBody

Use for long-form content, such as the synopsis of a book.

textStyleHint

Use for hint text or action hint text.

textStyleCallout

Use for text that plays a supporting role, such as a grid view of images that each have a title.

textStyleActionHint

Used for button text that indicates that the button can be selected with the user's voice.

textStyleTitle

Use for buttons and actionable touch controls.

textStyleMetadata

Use to accompany textStyleCallout titles, such as a displaying additional metadata about a movie time.

textStyleCaption

Use for optional UI elements, such as time passed in a progress bar.

The following example shows each of the text styles defined in alexa-styles.

Was this page helpful?

Last updated: Nov 28, 2023