Get started

Brand book

Kanso (簡素) is the Japanese aesthetic principle of simplicity: leave out what isn’t needed, so what remains is clear. It is Makado’s design system, published at makado.app/kanso.

This folder is the single source of truth for how Makado looks and behaves. The app follows it; when the app needs something new, it is added here first and logged in CHANGELOG.md.

Below is the brand book. Where it mentions "asset groups", those are the folders in assets/.

Makado is the design system for a creator's partner platform: the brands you work with, the projects you make for them, and the contracts and payments behind them. Tagline: "Make more. Manage less."

It has two layers. The structure is Adobe's Spectrum 2: background layers, the gray ramp and its roles, semantic colors, the type roles and scale, spacing, t-shirt sizes, corner radii, three-layer shadows, focus rings, workflow icons and the component set all follow Spectrum's open-source packages, so components look and behave the Spectrum way. The brand on top is Makado's own: colors taken from the Makado logo, Figtree for every word in the interface, rounder corners, and a set of light object illustrations. The feel is calm and clear like a pro tool, with a little warmth from the type and the logo's colors.

Content fundamentals

Voice. Rational, human and focused, as Spectrum puts it, with Makado's warmth on top. Speak to the creator as "you" and name brands. Say what happened, what it means and what to do next. Never scold or guilt ("You still haven't..."). Smart features are framed as help with the workflow ("Drafted from your last Lumen Optics brief"), never as a machine making things for you.

• Good: "2 things are overdue. Everything else is on track this week.", "Lumen Optics pays in 6 days", "Send reminder", "You're all caught up"
• Avoid: "Oops!", "Don't forget!!", "URGENT", "Click here", "Learn more" as a link by itself.

Mechanics. Sentence case everywhere. No periods in headings or buttons, no exclamation points (Spectrum's rule, and it keeps the tone steady), no ampersands, no emoji. Use contractions except in legal, payment and security text. Do not use em or en dashes; use a period, comma, colon or parentheses. For an empty table cell use a quiet middle dot.

Buttons and links. One or two words, four at most, starting with a verb: "Send invoice", "Review and sign". Links say where they go: "See all due", "Open calendar".

Numbers. "$18,400" (cents only when they matter), "Oct 24" this year and "Oct 24, 2026" otherwise, "10:00 AM". Join facts in a line with a middle dot. Right-align numbers in tables and set them with tabular figures.

Status words. The fixed set in Badge: Draft, Sent, Negotiating, Signed, Briefing, In production, In review, Delivered, Scheduled, Live, Unpaid, Paid, Overdue, Declined. To-dos on the calendar use a short set, each with a shaped mark so it reads without color: To do (ring), In progress (half), Brand review (dot in a ring), Scheduled (solid), Overdue (alert, red) and Done (check, green). Done shows when a to-do is checked, and anything still open on a past day shows Overdue on its own. A project's status is its stage, in order: To do, Pre-production, Filming, Editing, In review, Published, shown with a mark that fills like a pie (an empty ring that fills a fifth more at each stage, then a green check).

Logo

The mark is two rounded peaks that make an M, in a gradient that runs from a deep blue through sky blue and mint to a warm sand; the wordmark is "makado" in a heavy round geometric face with a single-story a. Files are in the Logos asset group: makado-lockup.png and makado-lockup-white.png (horizontal, on light and on dark), makado-lockup-stacked.png and makado-lockup-stacked-white.png (with the tagline), makado-mark.png, makado-wordmark.png and makado-wordmark-white.png, makado-lockup-mono.png and makado-lockup-mono-white.png (one color), and the light and dark app icons.

• In the app frame the lockup sits at the top of the side navigation, 24 to 28px tall; 22px on phones. Swap to the white lockup in the dark theme.
• Keep clear space equal to the height of the wordmark's "o". Never recolor, stretch, outline, shadow or rebuild it, and never type "makado" in place of the logo.
• The logo's gradient (blue through sky and mint to sand) lives only in the logo. The interface takes single colors from it instead (see Color); the one exception is progress-bar fills, which use same-hue gradients. The app backdrop (Backdrop glow) borrows the logo's blue, sky and sand as soft, blurred pools behind the glass.
• The current files were cut from the brand board, so they are good up to about 2x their natural size. Replace them with the master SVG or large PNG exports when available.

Visual foundations

Background layers. Desktop pages put content on background-layer-1 inside an app frame of background-base (the side navigation and top bar). Cards sit on background-elevated with shadow-emphasized. Use background-layer-2 for a panel that groups content without a shadow. On phones the page itself is background-base. Spectrum separates containers by background first, then a border without a fill, then space; a shadow means emphasis.

Color. Spectrum's roles, Makado's hues. Neutral grays carry the interface and lean very slightly cool, toward the logo's ink (#080D15); color is kept for meaning and for a little delight.

• accent is the logo's blue (#174AF2). It is the one focal action per screen and the current item on phones. Text and icons in blue use accent-content; marks like meter fills and dots use accent-visual (the logo's second blue, #2570F4).
• brand-yellow is the logo's sand (#FCDD82). It is a small brand note in the interface: the Today tag, a streak, a highlight. It never signals status; text on it is on-brand-yellow. yellow-subtle is its soft tint, used for brand initials.
• brand-sky (#3FABF6) and brand-mint (#40D6AA) complete the logo's palette. They belong to brand moments (the cover, marketing, illustrations) and never appear on buttons, status or navigation. Inside the app they appear only in the WinsCard's check-off burst.
• neutral fills the primary button; neutral-subtle fills secondary and action buttons, tags and the current side-nav item.
• Semantic pairs: negative red for overdue and destructive, notice orange for waiting and due soon, positive green only for paid and live, informative blue for sent and in production. Each has a fill, a -subtle background (text on it is gray-1000) and a -visual mark color. Notice fills always take black text.
• Categorical cyan-subtle, orange-subtle, yellow-subtle give brands a recognizable initials tile. Keep one per brand.
• No purple. No gradients in the interface except progress-bar fills (Meter, WeekProgress), which use the gradient-* tokens: one hue, deeper to lighter, left to right (gradient-informative blue, gradient-positive green, gradient-notice orange, gradient-negative red, gradient-neutral gray). A bar split by stage (Meter with blend) may fade each stage color into the next, using the *-visual colors. Never on cards, buttons, backgrounds or text, and never sky or mint.

One selected style. Whatever is current or chosen (the nav item, a segment, a tab, the phone tab, the theme) is a raised thumb, the way Apple draws a chosen segment: selected-fill (white in light, a lighter tint in dark) lifted by selected-shadow, with bold heading text. Counts in the side navigation are small circles: raised white, or red when something is overdue. Calls to action are black (primary).

Breathing room. Pages give their parts space: 40px between sections, 32px inside panels, 24px between tiles and between the calendar and its day list, and room at the top of the page. When a page feels busy, add space before adding lines or boxes.

Color themes. Each version of the Makado mark is a theme: Makado (blue, sky and sand; the default), Ocean (blue to cyan), Mint (teal to green), Sunset (magenta to orange), Lavender (indigo to violet), Sand (warm tan) and Ember (crimson to amber). Picking one recolors the whole accent family (buttons that use accent, links, today on the calendar, focus rings, tints, informative bars), the backdrop glow and the logo mark in the side navigation. Status colors never change with the theme, so stages and lateness read the same everywhere. Every theme keeps white on its accent and its accent text on cards and on the page at 4.5:1 or better, in light and dark. Lavender is the one place purple appears, by Roger's choice.

The backdrop. Behind the whole app on desktop sits Backdrop glow: very soft pools of the logo's blue, sky and sand (glow-blue, glow-sky, glow-sand) on the frame, fixed while the page scrolls, like a wallpaper under Apple's glass. Its colors come from the color theme Roger picks in Profile (BackdropPicker, each swatch showing that theme's mark): Makado, Ocean, Mint, Sunset, Lavender, Sand or Ember. Only the page title, its subdued description and accent text sit directly on it, never the detail gray. Phones keep the plain page.

Glass, the Apple way. Glass is only for the navigation layer that floats above content: the side navigation, the toolbar that appears once the page header scrolls away, the floating phone tab bar, the drawer (an inset sheet) and menus. Content (cards, panels, the calendar, the board) stays on solid surfaces with a barely there edge and a soft shadow (surface-edge, surface-shadow), so it stays easy to read and the glass has something to blur as it slides beneath. A glass surface is a translucent fill (glass-surface, or glass-surface-strong for sheets and menus) with glass-blur, and glass-elevation for its edge: a dark hairline outside, a bright inner rim, a specular line along the top and a soft deep shadow. It is not a gradient. With prefers-reduced-transparency the glass turns solid.

Dark theme. Spectrum's dark structure on a near-black close to the logo's dark background: base #0D0F13, layer-1 #15181C, elevated #1C1F24, text in cool light grays, and accent text in the logo's sky blue (#74B2F8). Shadows are a little stronger, still soft. Both themes hold 4.5:1 for every text pair named in the token notes.

Type. One family for the whole interface, chosen to feel professional and still inviting.

• Figtree (display and text): a friendly geometric sans with clean, open shapes and a little warmth. Professional and very legible at small sizes. Headings and big numbers at Bold (700); titles, button labels and avatar initials at SemiBold (600); body at 400 with a 1.5 line height; details and metadata at 500 in the detail gray. A touch of negative letter spacing on page titles. The logo keeps its own lettering.
• Source Code Pro only for codes such as invoice IDs.

Spectrum's roles and sizes are kept: heading-* (one heading-xl per screen), title-* for names of things, body-*, detail-*, ui. Use tabular figures for numbers that line up.

Shape. Rounder than Spectrum's defaults, so the app feels inviting without going soft. radius-full for buttons, the search field, avatars, status dots, meter tracks and counts. radius-default (10px) for fields, action buttons, the segmented control, badges, nav items, task cards and board columns (badges and tags use 7px at size S). radius-lg (14px) for cards and in-line alerts. radius-xl (20px) for the page, dialogs, drawers and big panels. radius-sm (6px) for checkboxes, thumbnails, small tags and calendar chips. Brand tiles are squares with radius-default corners.

Spacing and size. Spectrum's spacing scale (spacing-100 is 8px). Controls follow t-shirt sizes: S 24, M 32 (desktop default), L 40, XL 48. On phones use L for controls and 16px text in fields, which is Spectrum's mobile scale. Cards pad spacing-300 (16px) or spacing-400 (24px); sections sit spacing-500 (32px) apart.

Shadows. Spectrum's three-layer shadows at Spectrum's values: a soft ambient layer, a short transition layer and a faint key line, heavier in dark. shadow-emphasized at rest, shadow-elevated on hover and for popovers, shadow-dragged while dragging a card.

Borders. 2px is the default (fields, outline buttons, alerts); 1px for table and list dividers. Fields use the light gray-300 Spectrum uses, so a field always has a visible label or icon. Never put a colored stripe down one side of a card or nav item: the current nav item is marked with fill and weight only.

Focus. Every control shows a 2px focus-indicator outline with a 2px gap, on keyboard focus only.

States. Hover darkens a fill one step (accent-hover, neutral-hover, neutral-subtle-hover) or adds gray-75 behind a quiet row. Cards lift from shadow-emphasized to shadow-elevated. Disabled controls use gray-100 with gray-400 text.

Motion. Short and calm, from the motion-* tokens: 120ms on color, shadow and presses, 160ms for menus and the sliding selected thumb, 220ms for a page entering or a drawer. Things ease out as they arrive; nothing bounces. Buttons press in a little, the selected thumb slides between tabs and segments, and each page fades in with a 6px rise. All of it is skipped under reduced motion. The one exception is a reward: when a project is published, the WinsCard count pops, its ring fills and a small burst plays (skipped with reduced motion).

Illustration. Light spot illustrations of simple, rounded objects (a clipboard, a camera, a wallet, a calendar, puzzle pieces) drawn in loose 3px round-capped ink lines, filled with the logo's blue, mint and sand (illo-blue, illo-mint, illo-sand), sitting on one soft blob (illo-*-soft) with a few sparkles. No people. They recolor with the theme through the illo-* tokens. Use Makado.Illustration (or the EmptyState illustration prop) for empty lists, first-run screens and moments worth a small celebration (a signed contract, a paid invoice), one per view at most. Keep them out of page headers, busy dashboard cards and anything next to a warning. Light-theme SVGs of each are in the Illustrations asset group for slides and documents.

Imagery. Real thumbnails from the actual shoot or product, in card previews. Until there is one, a card shows its gray preview well with an image icon. No stock photography.

Layout. Desktop: a gray frame (background-frame) holds everything. The logo and side-nav-width (240px) side navigation sit directly on the frame; the current item is filled with background-elevated and set in bold. Beside it, the page (background-page) runs to the window edges, separated from the frame by a 1px divider line, with 40px (spacing-600) margins inside and a max width around 1240px. No texture behind it. Panels and cards on the page carry a hairline divider ring with their shadow, so they read on white. Phone: the logo or a page header, cards stacked in one column with a 20px gutter, and the TabBar at the bottom.

Keep screens easy to scan. Not bare, but no more than a screen needs. The home screen fits the window: the greeting, a row of tiles (the month's wins, the week, what is on track, revenue) and the Projects board (one column per project status, To do through Published; higher on the board means more important). The month of projects lives on its own Calendar page (drag a project to another day to reschedule it, like a Notion calendar; the chosen day's projects sit beside it). New project is always in the navigation. A to-do carries a title, its status and one line of detail; a calendar chip carries only the title and its status mark. A project carries four facts and no more: brand, status, content type (Long form, Short form) and revenue, plus the working date that places it on the calendar. Its to-dos and notes live on its own page. The calendar, the board and the wins ring read one list of projects, so a change in one shows in all three. Color shows up only where something needs you (overdue in red). Lists that are not about today, like invoices and messages, live on their own pages.

Iconography

Spectrum 2 workflow icons, taken from the open-source @react-spectrum/s2 package (Apache License 2.0; see Licenses). They are drawn on a 20px grid with a 1.5px stroke weight, rounded, and shipped as filled shapes in currentColor, which suits Makado's rounded look. Use 20px at M, 16px in small controls and meta, 22px at L, 26px at XL, 24px in the phone tab bar. Do not rescale or redraw them, and do not mix in another set; if something is missing, take it from the same S2 package. Spectrum has no plain arrow, so "see all" links and row navigation use chevron-right. Icons are for the interface; illustrations are for moments. No emoji.

Using the components

The components ship in components/bundle.js, one classic script that assigns window.Makado and expects React 18 on the page (window.React, window.ReactDOM). Load the tokens' CSS variables first, then components/bundle.css, then the bundle. Each component is Makado.<Name>; components/index.d.ts lists every prop. Icons come from Makado.Icon by name (Makado.Icon.names), illustrations from Makado.Illustration (Makado.Illustration.names). Fonts are the files in fonts/, named in tokens.json. Logos are uploads in the Logos asset group; place them with an <img>.

Makado additions for this product: WinsCard (the rewarding part of Home: a ring of the month's published projects, a cheer and a couple of wins), MonthCalendar (the month of to-dos with a day list beside it, drag or Alt with an arrow key to reschedule), KanbanBoard, KanbanColumn and TaskCard (the project board, one column per project status; built from Spectrum's card and drag-and-drop patterns, with keyboard moves), Illustration (the spot illustration set), PageHeader and SectionHeader (Spectrum's heading styles as page and section tops), TabBar for phones, Meta for metadata lines, StatTile for the numbers that matter, and ProjectCard for a project at a glance.

Accessibility

Text holds 4.5:1 on the backgrounds its token note names, in both themes; the focus outline holds at least 3:1. Status is never color alone: badges and status lights always carry words, badges also carry icons, and to-do statuses use shaped marks with a legend wherever the word does not fit. Icon-only action buttons need a label, which also shows as a tooltip. Fields always have a visible label or a search icon. Illustrations carry a description unless they are decorative next to text that says the same thing. Keep touch targets at 40px (L) or larger on phones.