Alexa Styles (v1.0.0)

(This is not the most recent version of the alexa-styles package. Use the Other Versions option to see the documentation for the most recent version of the alexa-styles package)

You can develop your skill using the Alexa Styles package, thus ensuring a consistent presentation across all Alexa-enabled devices with a screen. This package provides a collection of named resources and styles designed to work well on all device types. Resources are a set of common colors, typography, and metrics that can be applied to components or combined into named styles to deliver more complex styling.

See also:

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:

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

Color resources

The Alexa color resources are defined for consistent presentation of UI colors. These can be referenced from any APL component color property using the "@" resource annotation.

Sample usage

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

Properties

Resource Name Definition Default TV    
colorText Default color used for text elements. #FAFAFA #DADADA    
colorTextReversed Used when standard text elements are displayed over elements with dramatically different color value than the background. #1E2222 Default    
colorSecondaryText Used to de-emphasize metadata text. #FFFFFF   #DADADA  
colorSecondaryReversed Used for metadata text which appears over elements with dramatically different color values than the background. #1E2222 Default    
colorDisabledText Used for any disabled text, whether primary or secondary text. #EBEDED4D Default    
colorDisabledTextReversed Used for any disabled text, when displayed over elements with dramatically different color value than the background #1E22224D Default    
colorBackground The color displayed behind content if when no other background styling is applied, that is imagery as a background. #232F3E Default    
colorBackgroundOverlay Used to cover images with a semi-opaque filter to make them easier to read. It can be a static value or dynamically generated from the imagery. #00000099 Default    
colorComponent The primary color used within components in their default state. Examples include default buttons, iconography, button borders, or unselected check boxes. #FAFAFA #DADADA    
colorRed800 Red background color. But can be used as a dark red hue. #65151E Default    
colorGreen800 Green background color. But can be used as a dark green hue. #34581B Default    
colorTeal800 Teal background color. But can be used as a dark teal hue. #0A655E Default    
colorBlue800 Blue background color. But can be used as a dark blue hue. #2E536F Default    
colorPurple800 Purple background color. But can be used as a dark purple hue. #3E3F68 Default    
colorGray800 Gray background color. But can be used as a dark gray hue. #6B7878 Default    

Text resources

The Alexa styles package includes various text resource options. These can be referenced from the corresponding property on the Text component using the "@" resource annotation.

Sample

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

Font family

The Alexa fontFamily resources can be used to apply a preset fontFamily to the APL Text component. These can be applied to the fontFamily property of the APL Text component using the "@" name syntax.

Resource Name Definition 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

Font weight

The fontWeight is applied to the font family choice you have made, as shown in the following table.

Resource Name Definition for fontFamilyRomanSans - resolves to: for fontFamilyRomanSerif - resolves to:
fontWeightLight Used for most text below Display 2 styles and any longer text. Amazon Ember Display Light Bookerly Regular
fontWeightRegular Used for karaoke text, and type set at sizes below 18dp Amazon Ember Display Regular Bookerly Regular
fontWeightMedium Used for label text for titles Amazon Ember Display Medium Bookerly Bold
fontWeightBold Used to create contrast and to highlight a number or part of a phrase. Amazon Ember Display Bold Bookerly Bold

Font size

The fontSize resources adjust automatically to the viewport on which the text is displayed. All numerical values are in px. These can be applied to the fontSize property of the APL Text component using the "@" annotation.

Resource Name Definition Hub, round, small Hub, landscape TV
fontSizeXXXLarge Used for quick, glanceable text, such as acronyms or large numbers, to show time or day of the week. 120 168 168
fontSizeXXLarge Slightly smaller display size used for quick, glanceable text, such as acronyms or large numbers to show time or day of the week. 84 128 128
fontSizeXLarge Used when displaying a small amount of text, such as list items or inline titles, that will be read at a distance. 64 84 84
fontSizeLarge Slightly smaller display size used when displaying a small amount of text, such as list items or inline titles, that will be read at a distance. 48 68 68
fontSizeMedium Used for text that is shown alongside text set in display sizes, such as a brief description to go alongside a movie title. 36 48 48
fontSizeRegular Reserved for long-form content, such as a synopsis of a book. 28 40 40
fontSizeSmall Used to accompany callout titles, such as a displaying additional metadata about a movie time. 24 32 32
fontSizeXSmall Used for navigation, page, and section headers, such as flight information in a header. 20 28 28
fontSizeXXSmall Used rarely, if ever, and is best for displaying UI elements, such as time passed in a progress bar. 18 24 28

Line height

The Alexa lineHeight resources increase or decrease the space between lines of text. These can be applied to the lineHeight property of the APL Text component using the "@" name syntax.

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

Letter spacing

The Alexa letterSpacing resources increase or decrease the space between characters in text. These can be applied to the 'letterSpacing' property of the APL Text component using the "@" name syntax.

Resource Definition Value
letterSpacingNormal No extra space between characters. This is the default. 0
letterSpacingExpanded Increases the space between characters. 2
letterSpacingCondensed Decreases the space between characters. 0.8

Spacing resources

The Alexa spacing resources can be applied to APL padding and spacing properties using the "@" name syntax. The numerical values are expressed in dp.

Sample

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

Properties

Resource Name Hub, round, small Hub, landscape, medium Hub, landscape, large TV
spacingXXXLarge 72 72 72 72
spacingXXLarge 64 64 64 64
spacingXLarge 56 56 56 56
spacingLarge 48 48 48 48
spacingMedium 40 40 40 40
spacingRegular 32 32 32 32
spacingSmall 24 24 24 24
spacingXSmall 16 16 16 16
spacingXXSmall 8 8 8 8

Image border radius resources

The Alexa Image borderRadius resources can be applied to the borderRadius property of the APL Image component using the "@" name syntax.

Sample

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

Properties

Resource Name Definition
imageShapeRoundedRect Standard rounded corners
imageShapeCircle Clips image to a circle

Text styles

The Alexa text styles are designed for maximum legibility and flexibility across devices. These styles are flexible for a range of needs and skill developers should use these whenever possible, to ensure that type scales appropriately across devices. These styles can be applied to the style property of the APL Text component.

Sample

{
    "type": "Text",
    "style": "textStyleDisplay4"
}

Properties

Named Style Definition
textStyleDisplay1 Used for glanceable text, such as acronyms, or large numbers to show the time or day of the week.
textStyleDisplay1Alt Used for creating contrast with textStyleDisplay1.
textStyleDisplay2 Smaller than textStyleDisplay1. Used for glanceable text, such as acronyms, or large numbers to show the time or day of the week.
textStyleDisplay2Alt Used for creating contrast with textStyleDisplay2.
textStyleDisplay3 Used for displaying a small amount of text, such as list items to be read at a distance.
textStyleDisplay3Alt Used for creating contrast with textStyleDisplay3.
textStyleDisplay4 Smaller than textStyleDisplay3. Used for displaying a small amount of text, such as list items to be read at a distance.
textStyleDisplay4Alt Used for creating contrast with textStyleDisplay4.
textStyleHeadline Used for text that is shown alongside an item, such as a brief description or synopsis of a movie.
textStyleHeadlineAlt Used for creating contrast with textStyleHeadline.
textStyleKaraoke Used for highlighting text in a karaoke experience.
textStyleKaraokeAlt Used for creating contrast with textStyleKaraoke by pushing back the text in the experience.
textStyleBody Used for long-form content, such as the synopsis of a book.
textStyleBodyAlt Used for creating contrast with textStyleBody.
textStyleCallout Used for text that is playing a supporting role, such as a grid view of images that each have a title.
textStyleCalloutAlt Used for creating contrast with textStyleCallout.
textStyleHint Used for Hint text or Action Hint text.
textStyleDetail Used to accompany textStyleCallout titles, such as a displaying additional metadata about a movie time.
textStyleDetailAlt Used for creating contrast with textStyleDetail.
textStyleLabel Used for buttons and actionable touch controls.
textStyleCaption Used rarely, and only for displaying optional UI elements, such as time passed in a progress bar.
Was this page helpful?

Last updated: Nov 28, 2023