Resources
Components
78 components, each a React port with the same names, props and gv-* classes, with a live preview in both themes.
Showcase
Public pages
DataTableRecords with titles at the top, like a spreadsheet you can't break: press a title to sort by it, press it again to flip the order.HeroThe display type for public pages: the big words at the top of the landing page (size L), and the opening of each section on it (size M).OfferCardOne thing you can buy: a plan, an add-on, a pack.PlanCardThe one Makado plan on a solid surface.SearchDialogSearch everything from anywhere: projects, brands, products, contacts, contracts, invoices and the pages and settings themselves.ShowcaseA still life of the app for public pages: real components on fixed sample data, set on layers at different depths over the Backdrop glow.SiteBarThe floating glass bar at the top of public pages (the landing page).StageTrackThe project stages in order on one line, each with its stage mark, its name and a short caption.
Brand
IllustrationMakado'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.LogoThe Makado logo: two rounded peaks that make an M, in a gradient from blue through sky and mint to sand, beside the makado wordmark.
Foundations
Actions
ActionButtonSpectrum's task button: an 8px-cornered gray button, or quiet with no fill, for toolbars and secondary tasks.ButtonSpectrum's pill button, with its label in Figtree.LinkBold accent text for navigation.SegmentedControlA row of mutually exclusive options on a gray track; the selected one lifts onto the base color with a dark outline.
Status
AccountWho is signed in: an avatar, the name and one detail line.AvatarA photo or initials in Figtree.BackdropNot used in the app since 2.2 (the page is plain).BackLinkThe way back, at the top left of a detail page: a left chevron and the name of the list it returns to ("Projects", "Brands").BadgeA small label with an icon that names a state.DrawerA panel that slides in from the right over a dimmed page (on phones, a sheet that slides up from the bottom), so someone can work on one thing (a project from the Home calendar) without leaving where they are.FileDropWhere documents and images go in: brand briefs, spec sheets, product shots, signed contracts.ImageCropperCrop a picture to a square before it's saved: a profile photo, a brand logo, the workspace logo.MeterA labeled bar that shows how far something has come: production steps, money collected.PairEditorRows of short fields that save as you go: a product's key facts (Fact and Value) and its links (Name and Address).PopoverA small glass card anchored to one spot on the page, for a quick task in place: the calendar's quick add, where a double click on a day asks for a title, a brand and which date it is, then puts the project on that day.SaveStatusA quiet word for anything that saves as you go: fields that save as you type, pickers, the board and the calendar.StatusLightSpectrum's quiet status: a colored dot followed by a word.StepperA linear flow of steps: production steps on a project (Brief, Script, Shoot, Voiceover, Edit, Thumbnail, Brand review, Publish).TagA gray label for categories and keywords.ToastA short glass note at the bottom of the window after something happened somewhere you are not looking, with one follow-up: "X6 launch video is on Wed, Oct 21.WeekProgressWhere we are in the week, at a glance: one segment per shown day, past days filled, today filled as far as the day has gone, the days named underneath.
Navigation
AccountMenuYou, at the top right of every page: your photo or initials and your first name (shortName) in a glass capsule; on phones, or with hideName, just the circle.BackdropPickerThe color theme picker: swatches that preview each theme (its backdrop with its version of the Makado mark): Makado (the default), Ocean, Mint, Sunset, Lavender, Sand and Ember.FooterThe quiet line at the bottom of a page: who makes Makado, and the legal links.NavButtonAn action in the side navigation that looks like a nav item, such as Collapse sidebar at the very bottom.NotificationCenterThe bell at the top of the app: how many things need a look, and a panel listing them, grouped, each a link to where it's resolved.PageHeaderThe top of a page: an optional eyebrow, a title in Figtree Bold, a one-sentence summary, and the page's actions on the right.SectionHeaderA section title in heading-s with an optional one-line description and a link on the right.SideNavDesktop navigation down the left edge: icon, label and an optional count per item.TabBarPhone navigation along the bottom: four or five destinations, the current one in accent blue with a bold label.TabsSwitches between sibling views of one thing.ThemeToggleThe theme control: Auto, Light and Dark as a pill of icon buttons (contrast, sun, moon).WorkspaceSwitcherWhich workspace is open, always in view, and the way to switch to another.
Containers
CardSpectrum 2's container: 10px corners on background-elevated with the emphasized shadow, lifting to the elevated shadow on hover.DividerA 1px (S) or 2px (M) rule in divider gray between rows or sections.InlineAlertA bordered or tinted block that states something important in context, with an optional action.PullRefreshThe round indicator for pull down to refresh on phones, where Makado runs as a web app saved to the home screen (no browser refresh button there).SkeletonA quiet placeholder while a page loads, so the layout shows at once and the content fills in where it will be.
Content
EmptyStateSpectrum's illustrated message for a list with nothing in it: a Makado illustration (or, in tight spaces, a large icon in a gray circle), a heading, one sentence and an optional action.ListRowOne row in a Spectrum-style list: a leading icon tile or avatar, a title in Figtree, a metadata line, and trailing content with a chevron when the row opens something.MetaOne line of supporting detail: an icon, then text in detail-m, with parts joined by a middle dot.ProjectCardA project at a glance: the brand, the title and format, a production meter, and the publish date with its status.SetupChecklistThe short list of things that make Makado yours, on Home for someone's first few visits.StatTileOne number that matters, in a card: a label with an icon, the value large in Figtree, and a short footer.WelcomePanelA short welcome on someone's very first visit: one panel, or two to three tips in sequence, each able to point at a part of the page with "Show me".WinsCardThe rewarding part of Home: a ring that fills as the month's projects get published, a short cheer that changes as you go, and a couple of wins beside it (money paid to you, brands worked with).
Planning
KanbanBoardA board of columns that people work in: drag a card between columns, check work off, and add a card at the foot of a column.KanbanColumnOne lane of a board: a title with an optional subtitle and tag, a live count, the cards, and an optional footer.MonthCalendarThe month at a glance, and the place to plan.TaskCardA card for one piece of work, in three kinds.
Forms
CheckboxSpectrum's checkbox: a 16px box with a 2px gray border and small corners that fills with the accent blue when checked.ComboFieldOne value, typed or picked: a text field with a menu under it.PickerSpectrum's picker: a filled button showing the current choice and a chevron, and a menu of options below it with a check on the chosen one.PropertyListThe facts at the top of a record, label on the left and value on the right, in Spectrum's side-label form layout.ReorderListA list you put in order, such as a workspace's stages.ReplyPanelHelp replying to a viewer's comment about a product.SwitchA setting that is on or off and takes effect right away, like "Draft as I scroll" or turning Makado Replies off.TagFieldA field you type into to choose several things, such as the brands or products on a project.TextFieldSpectrum's field: a label above, a 32px box with a 2px gray border and 8px corners, and help text below.TimeFieldA time of day in a Makado field.TimeRangeA start and an end time for one thing, such as a workday: "Monday 9:00 AM to 5:00 PM 8 hours".
Data
Other
CreditMeterAI credits used: the name with how much is used ("20% used") on top, the bar, then when they reset with the count ("60 / 300") under the bar on the right.PremiumTagMarks a feature that comes with Makado Premium, the add-on for reply drafts and Autofill (filling in products from the web, a page or a document, with their official photos).RatingOne to five stars with words beside them: "4 of 5, Great".ThemeGlyphThe Auto, Light and Dark marks, drawn to move.