Skip to content

Choose a style

3 min read · Updated 2 Nov 2026

Choose one visual treatment for the page after selecting its layout. Reuse an existing design system or supplied reference before introducing a new style. For an open-ended App request, lead with a business story and let the subject set the look. Styles guide colour, typography, spacing and emphasis; they do not determine metric meaning or which charts the data supports.

Apps on unrelated subjects should not look alike. With no brand or design system to follow, work the look out from the app’s own subject, reader and data before writing any styles. Note three things:

  • Subject. The trade, the places and materials around it, and the documents its people already use.
  • Reader. Who opens the page, where and how often, and what they do next. A page read daily at a desk can be denser than one shown in a monthly review.
  • Data. Its size and shape: a ranked queue, a series over time, an explanation, a map or a single record.

Then decide each of these from your notes rather than from a fixed combination:

Decision Range
Ground Light, dark, tinted or a strong colour
Accent A hue with a reason in the subject
Heading voice Serif, grotesque, condensed, or one family throughout
Density How much the reader takes in at once
View separation Open space, rules, tinted bands or frames
Layout The layout that fits the data’s shape

Colours and fonts in these guides are placeholders or belong to that style. Take the token names and the mechanics from them, and choose the values for your app.

To check the result, cover the title and read the page. If it would serve an unrelated subject unchanged, change what the subject should have decided, starting with the composition rather than the hue.

The sidebar starts with general dashboard treatments and ends with more specialized editorial and scrolling styles. These are starting points you can adapt, not mandatory themes.

Style Pick it when
Astrato default A neutral app should follow the tenant palette and familiar Astrato treatment.
Storytelling with data One takeaway or action should stand out against muted context.
Information is Beautiful A vivid, spacious presentation suits the audience and data.
Explainer Charts sit within prose that explains findings and caveats.
Financial Times An editorial page uses a warm paper ground and restrained chart palette.
Economist Finding-led titles and a compact editorial treatment suit analytical reading.
Visual essay A public-facing story unfolds in full-width sections while scrolling.

Read the selected style guide, then apply its tokens through Theming. Preserve meaningful category and status colours across views, keep text legible, and make loading, empty and error states fit the same treatment. For light and dark support, check both rendered results rather than assuming a palette can be inverted.

Use Choose a chart for familiar and less common chart forms that fit the question. An expressive style does not require an unusual chart in every view.