# Change a screen's style

> Restyle a wireframe in one click: sketchy, outline, hi-fi, blueprint or a platform look such as Liquid glass, Fluent or Android, in light or dark mode.

Source: https://mockflow.com/docs/change-wireframe-style

Every Wireframe item on a MockFlow board can be drawn in several styles. The widgets, text and layout stay the same; only the look changes. Start with a rough sketch for early ideas and switch to a platform look when the screen is ready to present.

![The same recipe app screen switching through the Hi-fi, Blueprint, Liquid glass, Fluent, Android, Sketchy and Outline styles from the Change style menu](https://assets.mockflow.com/docs/media/273061f143a5413e8f0bba3c6fd2f25c.webp)

## Pick a style

1. Select the Wireframe.
2. Click **Change style** (1) in its toolbar.
3. Click a style. The screen redraws at once.

![The Change style menu of a recipe app wireframe, with Change style, the Text button and the Mode, Brand colour and Font options numbered](https://assets.mockflow.com/docs/media/bf3ff34526a648ceb876209abe883de4.webp)

| Style | Looks like |
| --- | --- |
| Outline | Clean grey lines, the classic wireframe |
| Sketchy | Hand drawn strokes and handwriting, for early ideas |
| Hi-fi | A finished, polished design |
| Blueprint | White lines on a blue grid |
| Liquid glass | An iOS app |
| Fluent | A Windows 11 app |
| Android | An Android app in Material 3 Expressive |

Liquid glass, Fluent and Android also change how some widgets are built, such as switches, text fields and tab bars, so each screen feels native to its platform.

## Dark mode, brand colour and font

The bottom of the menu (3) fine tunes the chosen style:

- **Mode:** **Light** or **Dark**.
- **Brand colour:** the accent used for buttons, links and highlights. **Reset** goes back to the style's own colour.
- **Font:** pick a Google font for the whole screen. **Reset** goes back to the style's font.

## Show real text or placeholder blocks

The **Text** button (2) next to Change style switches between **Real text** and **Placeholder blocks**. Placeholder blocks replace words with grey bars, which keeps a review focused on layout instead of copy.

> **Tip** Generated screens follow the style that is selected, so pick the style before you [generate a screen with AI](/docs/generate-wireframes-with-ai). To turn a screen into a finished design with real pictures, see [Render a hi-fi screen or device mockup](/docs/render-hi-fi-screen).