Styling Basics

Want to change up your app's appearance? That’s called “styling,” and there are several things you can do using the Honeycode Builder to make your app “pop.”

Amazon Honeycode apps default to a neutral color palette with accessibility-compliant buttons and links, and system fonts that are optimized for performance across mobile and desktop devices.

Styling toolbar

Everything you need to style your app is located in the Builder toolbar.

  1. Select the object you want to style.
  2. Go to the toolbar, and click the style option you want.
  3. See how the style looks in both your desktop and mobile apps. Changes update in real-time!

:hammer_and_wrench: Builder's tip: Only applicable styling options will be clickable. For example, because screens do not support styling, the buttons will be disabled in the toolbar.


You can change the appearance of text in a number of ways:

  • Font family
  • Size
  • Color
  • Style (bold , italic , underlined)
  • Alignment (right, center, left)

To change the appearance of text, simply select the content box or button that you’d like to change, and edit from the toolbar.

:hammer_and_wrench: Builder's tip: You can also apply styling to container objects, like lists, blocks, and segment. This will apply the style changes to all the content boxes and buttons inside.


You can easily change the background color of many objects in your app:

  • Lists
  • Blocks
  • Segments
  • Content boxes
  • Buttons

Background colors changes will only be applied to the selected object.

:hammer_and_wrench: Builder's tip: Some app objects can’t currently be changed. These include app navigation and screen headers. However, their default styling is designed to minimize any color clashes.

Vertical Space

If you want to create some visual space in your layout, you can insert a content box that will act as a spacer. There’s a bit of a trick to it though, since Honeycode will only render a content box in your app IF it contains content.

Here’s how to do it:

  1. Add a content box.
  2. Type something so Honeycode will know to display it in your app.
  3. The font size you use will determine how tall the space is, so use a large font to create a lot of space or vice versa.
  4. Change the font color to match the background color of the content box. So if there is no background color, then change the font to white.

:hammer_and_wrench: Builder's tip: Want to learn how to make a cohesive design system for your app? Check out these typography, color, and spacing tips.

Was this article helpful?
  • Yes
  • No

0 voters

1 Like