- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Typography
The Mako typeface, the three font variables components read, and the type scale — including the 2px bump.
Mako ships one typeface — the Mako variable font, weights 200–900, with a matching italic. Headings, body text and code all use it; there is no second family to load.
Components never name a font family. They read three CSS custom properties, and whatever you expose under those names is what renders.
The variable contract
| Variable | Used by | Utility |
|---|---|---|
--font-sans | Body text, buttons, labels, most UI | font-sans |
--font-mono | <code>, <kbd>, <samp>, <pre>, code blocks | font-mono |
--font-heading | DialogTitle, AlertDialogTitle, SheetTitle, DrawerTitle, EmptyTitle | font-heading |
All three default to --mako-font-family-default (Mako plus a full system fallback stack), so components render in Mako as soon as a "Mako" face is loaded.
The default only says "Mako". With no @font-face declaring that family,
text silently falls back to system UI. If Mako text looks like your OS font,
check for a loaded face before suspecting the variables.
Loading the font
In Next.js, import the three next/font/local exports and put all three variable classes on the same element, with font-sans alongside:
import { fontHeading, fontMono, fontSans } from "mako-ui/fonts";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}
>
{children}
</body>
</html>
);
}Outside Next.js, @import "mako-ui/fonts.css" declares the same @font-face rules and sets the same three variables on :root. mako-ui/fonts pulls in next/font/local and will not resolve elsewhere — that is why next is an optional peer dependency.
The type scale
Mako runs a larger effective scale than stock Tailwind. Every --text-* step adds --mako-text-bump, so text-sm renders at 16px rather than 14px:
:root {
--mako-text-bump: 2px;
}
/* every step, from --text-xs through --text-9xl: */
--text-sm: calc(0.875rem + var(--mako-text-bump));Dropping to text-xs because a label wraps is the wrong fix — give the
container more room. Setting --mako-text-bump: 0px works, but it changes
the layout of every dense component, so treat it as an app-wide decision
rather than a local patch.
Weights
The variable font covers 200–900 in one file. Mako's own components only ever use font-medium and font-semibold.
| Weight | Brand token | Utility | Sample |
|---|---|---|---|
| 200 | --mako-font-weight-extra-light | no utility | Rubix Mako UI |
| 300 | --mako-font-weight-light | font-light | Rubix Mako UI |
| 400 | --mako-font-weight-regular | font-normal | Rubix Mako UI |
| 500 | --mako-font-weight-medium | font-medium | Rubix Mako UI |
| 600 | --mako-font-weight-semi-bold | font-semibold | Rubix Mako UI |
| 700 | --mako-font-weight-bold | font-bold | Rubix Mako UI |
| 800 | --mako-font-weight-extra-bold | no utility | Rubix Mako UI |
| 900 | --mako-font-weight-black | no utility | Rubix Mako UI |
Metric overrides
Each font export carries three metric overrides:
declarations: [
{ prop: "ascent-override", value: "88%" },
{ prop: "descent-override", value: "27%" },
{ prop: "line-gap-override", value: "0%" },
]Mako's native vertical metrics are asymmetric, which pushes text off-centre inside flex-centred boxes — buttons, badges, inputs, menu items. These overrides rebalance the line box globally. 88% + 27% = 115% matches the font's original total, so line heights and layout are unchanged.
Dropping them, or rounding them to friendlier numbers, re-breaks optical centring across every control. If you ship your own @font-face for Mako, carry all three over.
Brand typography tokens
globals.css also exposes the raw Rubix scale. These are plain custom properties — they generate no Tailwind utilities, and no Mako component uses them. Prefer text-*, font-* and leading-*; reach for these only when a design calls for a value the semantic scale does not cover.
Line heights
| Token | Value |
|---|---|
| --mako-line-height-small | 110% |
| --mako-line-height-medium | 120% |
| --mako-line-height-large | 140% |
Font sizes
| Token | Value |
|---|---|
| --mako-font-size-60 | 0.625rem |
| --mako-font-size-70 | 0.75rem |
| --mako-font-size-80 | 0.875rem |
| --mako-font-size-100 | 1rem |
| --mako-font-size-120 | 1.25rem |
| --mako-font-size-140 | 1.5rem |
| --mako-font-size-170 | 1.75rem |
| --mako-font-size-200 | 2.125rem |
| --mako-font-size-240 | 2.5rem |
| --mako-font-size-300 | 3rem |
| --mako-font-size-400 | 3.625rem |
| --mako-font-size-500 | 4.375rem |
| --mako-font-size-600 | 6.125rem |
| --mako-font-size-700 | 8.625rem |
| --mako-font-size-800 | 12.125rem |
| --mako-font-size-900 | 17rem |
Using a different typeface
Supported — expose it under the same three names:
const fontSans = Inter({ subsets: ["latin"], variable: "--font-sans" });
const fontHeading = Inter({ subsets: ["latin"], variable: "--font-heading" });
const fontMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono" });Expect to re-check vertical centring: the metric overrides above are tuned for Mako, and another face has its own metrics.
A common trap: Next.js starters define --font-geist-sans and --font-geist-mono, which Mako never reads. The components stay on the Mako stack and the intended font never appears — rename the variables or remap them.