Status
Backdrop
Not used in the app since 2.2 (the page is plain).
Preview
Props
| Prop | Type | Description |
|---|---|---|
pattern | 'plain' | 'dots' | 'peaks' | 'glow' | |
phoneGlow | boolean | Glow only: keep the glow on phones too (public pages, where only titles, subdued lines and text on chips sit on it). The app keeps the plain page. |
as | keyof React.JSX.IntrinsicElements | |
className | string | |
children | React.ReactNode |
Guidelines
Not used in the app since 2.2 (the page is plain). Kept for marketing pages and previews.
A quiet texture behind the whole page, so Makado feels made and a little warm without getting cartoony. It wraps the main content area; cards sit on top and stay opaque, so the texture only shows in the gaps.
Provide: pattern: dots (default: a faint dot texture), peaks (the logo's two rounded peaks as faint lines at the top right, over the dots), or plain (none). Let people choose in Settings.
- Solid tokens only: dots in
gray-200at half opacity, peaks inaccent-subtleat 30%. No gradient, no sky or mint, no motion. - Keep it barely there. If it draws the eye away from the work, it is too strong.
- It is decoration: never put text or meaning on it, and keep it behind content.
- One per page, on the main area only (not inside cards, drawers or the side navigation).
- glow. Soft pools of the logo's blue, sky and sand behind the whole app, fixed while the page scrolls, so the glass navigation has color to blur. Wrap the app in it once. Keep detail-gray text off it (only titles, subdued descriptions and accent text sit on it). On phones it falls back to the plain page.
- phoneGlow. With
glow, keeps the glow on phones too. For public pages only (the landing page), where the only text on the glow is titles, heading-colored text and text on solid chips. The app keeps the plain page on phones.