Brand
Logo, typography and colors.
CheckMaestro Design
Maestro Design
Maestro Design is the visual language behind every Maestro product: a logo built on a grid, three typefaces, a handful of colors, a pixel icon set and a dark theme. Start with a topic below.
Design
UI Design
Components, widgets, icons and dark mode.
CheckBrandLogoTypographyColors
Brand
A star built on a strict grid, three typefaces and a small palette built around one bold red.
Logo
Our logo
A star built on a strict grid. It comes in three colorways: white on red, red on beige and white on deep grey.
Typography
-
Petrona
Titles and large display text.
-
Fragment Mono
Labels, buttons, navigation and quotes.
-
Figtree
Body text and interface.
Colors
- Orange Main#FF1A1A
- Beige#FFF2E1
- Deep-Grey#565A75
- White#FFFFFF
- Black#000000
UI DesignComponentsWidgetsIconsDark mode
UI Design
The building blocks of the interface: components, widgets, icons and a dark theme.
Components
-
Slider
A segmented slider to set a value, such as the context size. The filled part and the current value are shown in red.
-
Selector
Two variants: a segmented selector for 3 choices, and a dropdown list for 4 or more.
-
Toggle
A switch to turn a setting on or off.
-
ActionButton
Two styles: a primary button (red) and a secondary button (white).
-
IconButton
A compact button that holds a single icon, for frequent actions.
-
InputText
A single-line field to type free text or a search.
Widgets
-
Weather
Today’s forecast at a glance.
-
Calendar
Your next events, always in sight.
-
Alarm
Set a wake-up time in a sentence.
-
Shopping
Compare products before you buy.
-
Contact
Call or text anyone in one tap.
-
Calculator
Quick maths, straight from your question.
-
Map
Find your way without leaving the chat.
-
Music
Play what you love, hands-free.
-
Live score
Follow the game as it happens.
Icons
Maestro Icons
Our own pixel icon set.
-
OPERAICON
Pixel · 126 px
-
OPERAICON
Pixel · 126 px
-
OPERAICON
Pixel · 126 px
-
OPERAICON
Pixel · 126 px
-
OPERAICON
Pixel · 126 px
-
PETRONA
Pixel · 126 px
-
FIGTREE
Pixel · 126 px
-
FRAGNENT
Pixel · 126 px
-
BOT
Pixel · 126 px
-
ARROW
Pixel · 126 px
-
MORE
Pixel · 126 px
-
ADD
Pixel · 126 px
-
CANCEL
Pixel · 126 px
-
ACTIVATE
Pixel · 126 px
-
COPY
Pixel · 126 px
-
DOWNLOAD
Pixel · 126 px
-
EXPORT
Pixel · 126 px
-
PENCIL
Pixel · 126 px
-
BIN
Pixel · 126 px
-
SEARCH
Pixel · 126 px
-
RECONNECT
Pixel · 126 px
-
FILE
Pixel · 126 px
-
PHOTO
Pixel · 126 px
-
CAMERA
Pixel · 126 px
-
MICROPHONE
Pixel · 126 px
-
MESSAGE
Pixel · 126 px
-
HYPERLINK
Pixel · 126 px
-
LINK
Pixel · 126 px
-
INFORMATION
Pixel · 126 px
-
SUPPORT
Pixel · 126 px
-
CLOUD
Pixel · 126 px
-
SERVER
Pixel · 126 px
-
SETTINGS
Pixel · 126 px
-
GENERAL
Pixel · 126 px
-
TOOL
Pixel · 126 px
-
BUG
Pixel · 126 px
-
KEY
Pixel · 126 px
-
CONFIDENTIALITY
Pixel · 126 px
-
TOKEN
Pixel · 126 px
-
TIME
Pixel · 126 px
-
LOCATION
Pixel · 126 px
-
CALENDAR
Pixel · 126 px
-
PROFIL
Pixel · 126 px
-
SOCIAL
Pixel · 126 px
-
PRIORITY
Pixel · 126 px
-
LIGHT
Pixel · 126 px
-
DARK
Pixel · 126 px
-
AUTO
Pixel · 126 px
-
QUICK
Pixel · 126 px
-
LOW
Pixel · 126 px
-
HIGH
Pixel · 126 px
-
GRAINS
Pixel · 126 px
-
CHECKERBOARDS
Pixel · 126 px
-
TILES
Pixel · 126 px
-
INSTA
Pixel · 126 px
-
INSTAGRAM
Pixel · 126 px
-
TIKTOK
Pixel · 126 px
-
STOP
Pixel · 126 px
-
PIN
Pixel · 126 px
Material Symbols
Google’s open-source rounded icon library.
-
BACK
Rounded · 72 px
-
NEXT
Rounded · 72 px
-
RIGHT
Rounded · 126 px
-
RETURN
Rounded · 126 px
-
FULL
Rounded · 126 px
-
CANCEL
Rounded · 126 px
-
DELETE
Rounded · 126 px
-
EDIT
Rounded · 126 px
-
COPY
Rounded · 126 px
-
SHARE
Rounded · 126 px
-
HYPERLINK
Rounded · 126 px
-
RELOAD
Rounded · 126 px
-
VALID
Rounded · 126 px
-
LOADED
Rounded · 126 px
-
PIN
Rounded · 126 px
-
PINED
Rounded · 126 px
-
CLOUDUPLOAD
Rounded · 126 px
-
CLOUDDOWNLOAD
Rounded · 126 px
-
CLOUDREADY
Rounded · 126 px
-
DOWNLOAD
Rounded · 126 px
-
CHAT
Rounded · 126 px
-
TEXT
Rounded · 126 px
-
MICRO
Rounded · 126 px
-
SPEAKER
Rounded · 126 px
-
VIDEOCAM
Rounded · 126 px
-
VISION
Rounded · 126 px
-
INFO
Rounded · 126 px
-
ERROR
Rounded · 126 px
-
QUESTION
Rounded · 126 px
-
HISTORY
Rounded · 90 px
-
BRAIN
Rounded · 126 px
-
TOOL
Rounded · 126 px
-
WEBSITE
Rounded · 126 px
Dark mode
The dark theme of the Maestro interface, for comfortable use in low light.
