Shape, type and motion
How your own theme is shaped: its sidebar, corners, icons, depth, fonts and motion.
Sidebar and app
The Sidebar and app tab colours the app’s own chrome. Each field has a default that follows the theme until you set it.
| Field | What it colours | Until you set it |
|---|---|---|
| Sidebar | Its background, a colour or a gradient. | The tiles’ colour, partly see-through. |
| Sidebar text | Text and icons in the sidebar. | The muted text. |
| The page you’re on | The highlight behind the current page. | A light wash of the accent. |
| Its text | Text of the current page. | The text. |
| Under the pointer | An item you hover over. | The track colour. |
| Its text | Text of the item under the pointer. | The current page’s text. |
| Sidebar border | The line between sidebar and page. | The borders. |
| Menus and dialogs | The same colour as in All colours. | Made from the tiles. |
On small screens the sidebar slides over the page as a drawer, and without a background of its own it takes the Menus and dialogs colour, so the page does not show through it.
Below the colours are the sidebar’s shape and type:
| Setting | What it does |
|---|---|
| Floating sidebar | Sets the sidebar off the window’s edge by the gap between tiles, with the tiles’ corners and the theme’s shadow. On phones the top bar and the drawer float too. |
| Distance to edge | With a floating sidebar: how far it sits from the window’s edges, 0 to 32 px. The gap between tiles when you leave it. |
| Corners | With a floating sidebar: how round its corners are, 0 to 48 px. The tiles’ large corners when you leave them. |
| Sidebar font | Which of the theme’s fonts the sidebar’s items are in: Everyday, Display or Mono. |
| Item size | Small (the usual), Medium or Large. |
| Item weight | How bold the items are, from 300 to 800. |
| Section titles | The colour of titles such as Dashboards, and of the counts beside items. |
| Sidebar foot | A colour or gradient for the foot: the tools, the dock and your account. |
The sidebar’s icons rest at the theme’s icon weight, set under Icons. Its width and the logo stay as they are.
With a dashboard open, the sidebar wears that dashboard’s theme; everywhere else it follows the theme chosen under This device…. Your theme’s own CSS never reaches the sidebar, the top bar or the logo.
Shape
Shape sets how tiles and controls are cut. Every slider shows its value.
| Setting | What it does | Range |
|---|---|---|
| Corners of tiles | The rounding of tiles. | 0 to 48 px |
| Corners of buttons | The rounding of buttons and fields. | 0 to 32 px |
| Small corners | Chips and small buttons. | 0 to 24 px |
| Room inside tiles | The padding between a tile’s edge and its content. | 8 to 40 px |
| Between tiles | The gap between tiles on the grid. | 0 to 40 px |
A dashboard’s own spacing, set in its settings, still wins over the theme’s.
Below them are the tiles’ shape beyond their corners:
| Setting | What it does |
|---|---|
| A radius per corner | Gives each corner of the tiles its own rounding, such as round at the top and square at the bottom. |
| Corner shape | Round, Squircle (a smoother, continuous curve) or Cut (corners cut off in a straight line). |
| Border | Which sides of a tile have the border: All, only the Bottom, Left or Top, or None. |
| Tiles | Filled tiles have their own colour; Outlined tiles have only their border, and the background shows through them. |
A tile’s own style still wins over these. Squircle and cut corners show in browsers that can draw them; others draw them round.
A frame puts bars round tiles, as LCARS panels have them: a width for each side (0 to 48 px), a Frame colour, and a Cap colour for the start of the left bar and the whole top bar, with a Cap length for how far down the left it reaches. The tiles’ corners join the bars into an elbow that curves outside and in; with a cap, the left corners stay within the left bar’s width so the bars always meet. Widgets that fill their tile stay inside the frame. For an LCARS console, start from Bridge, set Shadows to None so its own bar doesn’t double the frame’s, give the tiles big corners on the left and none on the right, and try a 34 px left bar with 8 px bars along the top and bottom.
Controls gives the switches, sliders, round buttons, pills and badges in tiles a shape: Pill (the usual), Rounded or Square. Slider track sets how thick a slider is, and Slider handle makes its handle Round or a Bar.
Sharp corners and a small gap look dense and technical, and large corners with more room look softer.
Icons
Icons sets how the icons in tiles are drawn.
- Icons: Regular, Bold or Two-tone. Tiles still fill an icon in while what it shows is on.
- Behind the icon: Nothing, a Circle, a Squircle or a Square behind the icon at the top of a tile, in a tint of the accent, and in the lights-on colour while the tile is on.
Depth
Depth decides how much a tile lifts off the page.
| Setting | What it does |
|---|---|
| Shadows | None, Soft or Lifted. Soft is a gentle shadow under the tile, Lifted a deeper, wider one. |
| Frosted glass | How much the page behind a tile is blurred, from 0 to 40 px. It reads Off at 0. It only shows when the tiles are see-through. |
| Border width | The thickness of borders, from None to 4 px. |
| Border colour | The same colour as Borders in All colours. |
| Texture | A fine texture over tiles: Noise, Grain, Paper, Linen, Scanlines or Halftone, with a Strength. It is drawn white on a dark theme and black on a light one. |
Frosted glass is the most demanding effect for a screen to draw. It suits a laptop, but a slow wall tablet can struggle with it, which is why Midnight has none. If a screen feels slow, try the theme with Frosted glass off.
Type
Type has two font pickers, one weight slider, one fill and one switch.
- Big numbers and titles: the font of the large numbers and headings, the display font.
- Everything else: the font of labels and running text.
- Big numbers: their colour, or a gradient through the letters.
- Weight of numbers: how bold big numbers are, from 200 to 900 in steps of 100.
- Labels in capitals: small labels in capitals, or as they are written.
- Content size: how big everything in the tiles is, text, icons and controls together, from 85 to 125 %. A tile’s own content size still wins.
- Weight of titles: how bold dashboard titles are, apart from the big numbers.
- Line height of titles: give dashboard titles a taller line when a tall or narrow font, like Antonio, cuts off the bottoms of g and y.
- Number spacing: the letter spacing of big numbers, tighter or looser.
- Digits of one width: every digit as wide as the others, so a number that changes doesn’t shift sideways.
Choosing a font
Each picker has two sources. With Tiledash holds the fonts that come with the app, in a list you can scroll: Space Grotesk, Unbounded, Albert Sans, Roboto, Inter, Figtree, Manrope, Barlow, Young Serif and more, with some monospaced fonts among them. Google Fonts searches the whole Google Fonts catalogue. Type at least two letters, such as “Fraunces” or “Lexend”, and pick a result. The list shows the first few matches, each in its own letters.
Tiledash copies a Google font to its own servers the first time anyone picks it, which takes about a second. Meanwhile the row says Getting it… and a note under the preview says it will switch in a moment. Everybody who looks at your dashboards then loads the font from Tiledash, so your screens never ask Google for anything.
You can add up to 20 new Google font families a day. A family that is already copied never counts, including one you picked before. Past the limit the row says Too many new fonts today, and you try again later. If Google does not hand a font over, the row says Couldn’t get it, pick it again, and picking it again tries once more.
Two things the editor does not offer: the monospaced font of small labels stays the one of the theme you started from, and the width and letter spacing of numbers and labels come from the theme you started from. Your own CSS can still change them.
A font with a wide range of weights, such as a variable font, makes Weight of numbers worth using. A font with only a regular and a bold has fewer steps, and the browser picks the nearest. The font you pick also falls back to a generic one while it loads: sans-serif, serif, monospace or cursive, depending on the kind of font.
Motion
Motion has two settings for how much moves, and three for how tiles answer you.
- Movement: Full or Calm. Full lets numbers count and tiles slide. Calm keeps the fades and drops the movement and the counting.
- Speed: how long a change takes, from 80 to 800 ms. The quicker and slower changes are set from it.
Three more decide how tiles answer you:
- A press: Shrink (the usual), Sink (moves down a little, as if pushed in) or Nothing.
- Under the pointer: Nothing, Lift or Glow, on screens with a mouse.
- Turning on: Fade (the glow fades in) or Pop (the tile swells briefly).
Lifts and pops only show where everything may move.
The theme sets what moves, and the screen has the last word. This device’s Motion setting, Like the device, Full, Calm or None, can only turn motion down from what the theme asks for. A theme set to Calm stays calm even on a screen set to Full.
E-ink screens never move. The editor has no None level, because that belongs to Paper and to the screen.