{% for child_template in custom_elements_files %} {% include child_template.replace('./app/templates/', '') %} {% endfor %}
Tiny Pilot

Style Guide

This style guide is an ongoing collection of all things visual that make up the brand, such as colours, fonts, patterns or UI components.

Text

Typeface

We use “Overpass” for regular text. Technical text (e.g. logs or error messages) is set in the monospace variant “Overpass Mono”.

Text style

To make subsidiary elements look less prominent (e.g., hints or labels), the font size and/or darkness of the text can be slightly reduced.

Colors





Buttons

Default Button

For harmless operations like “close” or “cancel”.

Action Button

For operations that do or apply something. (Don’t use for the primary call-to-action.)

Success Button (Primary Action)

For the main (and non-destructive) call-to-action.

Danger Button (Primary Action)

For destructive call-to-actions like “delete” or “shutdown”.

Dropdown Button

A button that groups multiple related actions.

  • Action 1
  • Action 2
  • Action 3
  • Action 1
  • Action 2
  • Action 3
  • Toggle Button

    A button representing a binary state that can be toggled on and off. In contrast to a checkbox, the toggle button is used outside of forms and the click-action is carried out immediately.

    Text Button

    A button that is just regular text. Only use this for minor actions, and in a context where the default button would look too prominent. The text button doesn’t have a disabled state; instead, it should be hidden.

    Click Me

    Button for External Links

    If a button opens an external website, then it should be an “Action”-type button with an “External Link” icon on the right-hand side. External links should open in a new tab by default.

    Open Link

    Input

    Example:
    Your Website:

    Font Usage

    Use the default font for input fields that expect “free” or regular text. Use the monospace font for “technical” values, to help the user examine the input copy character by character (e.g., IP addresses).

    Inline Message

    When we want to display a feedback message (error or warning), we can use the inline-message component:

    Error: We use inline errors for “minor” issues that the user can fix right away. For example, validation errors of input fields.
    Warning: We use warnings to raise attention about potential problems. In contrast to errors, these don’t necessarily require fixing for the user to proceed.

    Some notes about usage:

    Headlines

    Use “Title Case” in all headlines.

    Overlay Dialogs

    Design

    Click on the buttons to learn how a dialog inside an overlay is supposed to be designed.

    Overlay with Primary Action

    This overlay style is used for linear and straightforward flows that have a single purpose or end state, like a prompt or confirmation.

    In the bottom row, the overlay should contain a call-to-action button, and a button for aborting the flow.
    The button for aborting the flow should be labelled “Close”, and it should be the rightmost one. We deliberately don’t say “Cancel”, to be transparent that clicking the button will terminate the overlay.

    Overlay with Feature Panel

    This overlay style is used for more comprehensive, non-linear features.

    In the bottom row, the overlay should contain a single button, which is labelled “Close” and terminates the dialog.

    The overlay may contain “secondary” actions that advance the overlay into a different state. The corresponding buttons shouldn’t be primary ones, and they shouldn’t appear in the bottom row.

    Secondary State

    The secondary state should have buttons in the bottom row, which follow the same rules as in the “Overlay with Primary Action”, except that …:

    • The buttons take the user back to the initial overlay state instead of terminating the overlay.
    • The rightmost button is labelled “Back” instead of “Close”. We deliberately don’t say “Cancel”, as that would make it unclear whether the button terminates the overlay.

    Loading States

    When the overlay is in a loading state, we generally do not want the user to close it. Therefore, we don’t show any close button, and we also disable the overlay’s `x` close button (see the Contributing Guidelines for details).

    Primary Actions

    The buttons for primary actions should be located at the bottom of the dialog. These primary actions should either advance the dialog into a different state, or they should terminate the dialog altogether.

    Progress Indicator

    The spinner is used to indicate that an operation is in progress. The styling can be adjusted through CSS variables.