Skip to content
KansoMakado design system 1.1
makado.app

Public pages

PlanCard

The one Makado plan on a solid surface.

Preview

Live, in this page’s themeOpen on its own

Props

PropTypeDescription
titleReact.ReactNode
priceRequiredReact.ReactNode
periodReact.ReactNode
altReact.ReactNode
pointsReact.ReactNode[]
headingLevelnumber
labelstring
classNamestring
childrenReact.ReactNode

Guidelines

The one Makado plan on a solid surface. It is a single card, never a table of tiers.

Provide: title (the plan name), price ("$15"), period ("a month"), alt (the other way to pay, "or $100 a year"), points (what is included, one line each) and the calls to action as children.

  • The price is the biggest thing on the card. The included lines are checked in the accent tint.
  • Actions along the bottom: the black primary Button to start, and a Link for people who already have an account.
  • Money reads like the app: $15, $100, no cents.
  • Copy: "14 days free, no card needed", "Every workspace you own, with up to 5 people in each". Plain, no exclamation points.