Brand
Illustration
Makado's spot illustrations: simple rounded objects (a clipboard, a camera, a wallet, a calendar) in loose ink line, filled with the logo's blue, mint and sand, on a soft blob, with small sparkles.
Preview
Props
| Prop | Type | Description |
|---|---|---|
nameRequired | IllustrationName | |
size | number | Width in px; height is three quarters of it. Default 200. |
label | string | Accessible description. Defaults to the illustration's own label. |
decorative | boolean | Hide from assistive tech when nearby text already says it. |
className | string | |
style | React.CSSProperties |
Guidelines
Makado's spot illustrations: simple rounded objects (a clipboard, a camera, a wallet, a calendar) in loose ink line, filled with the logo's blue, mint and sand, on a soft blob, with small sparkles. No people. They recolor with the theme.
Provide: name (one of Illustration.names: welcome, caught-up, no-projects, contract-signed, payments, calendar, brands, search-empty), optional size (width in px, default 200), and decorative when nearby text already says the same thing; otherwise its built-in label describes it.
- One illustration per view, at most. They mark moments: a welcome, an empty list, a signed contract, a paid invoice. Never on a busy dashboard card or beside a warning.
- Sizes: 200px in empty states, 160 to 240px in first-run and success panels, 120px in a phone card.
- New drawings follow the same rules: objects only, 3px round-capped ink lines on a 240 by 180 canvas, one soft blob behind in
illo-*-soft, at most two ofillo-blue,illo-mintandillo-sandon the objects, sand sparkles, no people, shading, gradients or text. - For slides and documents, the Illustrations asset group has a light-theme SVG of each.