Style

Structure of the style object and its properties.

The following tables list the style properties of each supported item type.

Card item style

Property nameProperty typeDescription
cardThemeStringDefines the color of the border of the card.
cardTheme accepts any valid hex color code.
Default card border color: #2d9bf0 (light blue)

Shape item style

Property nameProperty typeDescription
fillColorStringFill color of the item.
fillColor accepts any valid hex color code.
Default fill color: #fff9b1 (light yellow)
Note: This property is not supported for the following shapes:
- left_brace
- right_brace
fillOpacityStringOpacity level of the fill color.
Possible values: any number between 0 and 1, where 0 sets the fill color to be completely transparent or invisible; 1 sets the fill color to be completely opaque or solid.
Default: 1.0 (solid color)
fontFamilyStringDefines the type of font for the text on the shape.
Possible font families:
- Arial
- Segoe Script
- Abril Fatface
- Bangers
- EB Garamond
- Georgia
- Graduate
- Gravitas One
- Fredoka One
- Nixie One
- OpenSans
- Permanent Marker
- PT Sans
- PT Sans Narrow
- PT Serif
- Rammetto One
- Roboto
- Roboto Condensed
- Roboto Slab
- Caveat
- Times New Roman
- Titan One
- Lemon Tuesday
- Roboto Mono
- Noto Sans
- IBM Plex Sans
- IBM Plex Serif
- IBM Plex Mono
- Spoof
- Tiempos Text
Default: OpenSans
fontSizeStringDefines the font size, in dp, for the text on the shape.
Default: 14
borderColorStringDefines the color of the border of the shape.
Default: #1a1a1a (dark gray)
borderWidthStringDefines the thickness of the shape border, in dp.
borderOpacityStringDefines the opacity level of the shape border.
Possible values: any number between 0 and 1, where 0 sets the border color to be completely transparent or invisible; 1 sets the border color to be completely opaque or solid.
Default: 1.0 (solid color)
borderStyleStringDefines the style used to represent the border of the shape.
Possible values:
- dotted
- dashed
- normal
Default: normal
textAlignStringDefines how the shape text is horizontally aligned.
Possible values:
- left
- center
- right
Default: center
"style": {
        "fillColor": "#ffffffff",
        "fillOpacity": "1.0",
        "fontFamily": "OpenSans",
        "fontSize": "14",
        "borderColor": "#1a1a1a",
        "borderWidth": "2.0",
        "borderOpacity": "1.0",
        "borderStyle": "normal",
        "textAlign": "center"
    }

Sticky note item style

Property nameProperty typeDescription
fillColorStringFill color of the sticky note.
Possible color name values:
- gray
- light_yellow
- yellow
- orange
- light_green
- green
- dark_green
- cyan
- light_pink
- pink
- violet
- red
- light_blue
- blue
- dark_blue
- black
Default: light_yellow
textAlignStringDefines how the sticky note text is horizontally aligned.
Possible values:
- left
- center
- right
Default: center
textAlignVerticalStringDefines how the sticky note text is vertically aligned.
Possible values:
- top
- middle
- bottom
Default: top
"style": {
        "fillColor": "light_blue",
        "textAlign": "center",
        "textAlignVertical": "middle"
    }

Text item style

Property nameProperty typeDescription
fillColorStringFill color of the text item.
fillColor accepts any valid hex color code.
Default text fill color: #fff9b1 (light yellow)
fillOpacityStringOpacity level of the fill color.
Possible values: any number between 0 and 1, where 0 sets the fill color to be completely transparent or invisible; 1 sets the fill color to be completely opaque or solid.
Default: 1.0 (solid color)
fontFamilyStringDefines the type of font for the text on the item.
Possible font families:
- Arial
- Segoe Script
- Abril Fatface
- Bangers
- EB Garamond
- Georgia
- Graduate
- Gravitas One
- Fredoka One
- Nixie One
- OpenSans
- Permanent Marker
- PT Sans
- PT Sans Narrow
- PT Serif
- Rammetto One
- Roboto
- Roboto Condensed
- Roboto Slab
- Caveat
- Times New Roman
- Titan One
- Lemon Tuesday
- Roboto Mono
- Noto Sans
- IBM Plex Sans
- IBM Plex Serif
- IBM Plex Mono
- Spoof
- Tiempos Text
Default: OpenSans
fontSizeStringDefines the font size, in dp, for the text on the shape.
Default: 14
textAlignStringDefines how the text is horizontally aligned.
Possible values:
- left
- center
- right
Default: left
"style": {
        "fillColor": "#e6e6e6",
        "fillOpacity": "1.0",
        "fontFamily": "OpenSans",
        "fontSize": "14",
        "textAlign": "left"
    }