Brand

Logo

The Makado logo: two rounded peaks that make an M, in a gradient from blue through sky and mint to sand, beside the makado wordmark.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`src`Required	`string`
`srcDark`	`string`
`height`	`number`
`label`	`string`
`className`	`string`

Guidelines

The Makado logo: two rounded peaks that make an M, in a gradient from blue through sky and mint to sand, beside the makado wordmark. Tagline: "Make more. Manage less."

Provide: in the app, Logo with src (makado-lockup.png), srcDark (makado-lockup-white.png) and height. It swaps the two with the theme. Elsewhere, use the files in the Logos asset group as they are.

In the app frame use makado-lockup.png on light and makado-lockup-white.png on dark, 24 to 28px tall in the side navigation, 22px on phones.
Keep clear space around it equal to the height of the wordmark's "o". Never recolor, stretch, outline or shadow it, and never set "makado" in another font in its place.
The gradient belongs to the logo only. Interface color comes from the tokens: the logo's blue is accent, its sand is brand-yellow; sky and mint (brand-sky, brand-mint) are for brand moments only.
Use the mark alone where the name is already on screen (favicons, avatars for the Makado account, loading states). Use the one-color lockups (black or white) for single-color printing and embossing, and the wordmark alone where the mark is already nearby (the app icon on a home screen).