CSS Variables
MiniKit exposes design tokens through CSS variables.
These variables control typography, spacing, sizing, layout, shadows, motion, and other foundational design properties used throughout the library. Override them in your own stylesheet to adapt MiniKit to your project without modifying library source files.
Typography
:root {
--mk-font-sans: Inter, system-ui, sans-serif;
--mk-font-mono: "SF Mono", Consolas, monospace;
}These variables define the default font families used throughout the library.
Spacing
:root {
--mk-space-0: 0rem;
--mk-space-1: 0.25rem;
--mk-space-2: 0.5rem;
--mk-space-3: 0.75rem;
--mk-space-4: 1rem;
--mk-space-5: 1.25rem;
--mk-space-6: 1.5rem;
--mk-space-8: 2rem;
--mk-space-10: 2.5rem;
--mk-space-12: 3rem;
--mk-space-14: 3.5rem;
--mk-space-16: 4rem;
--mk-space-18: 4.5rem;
}Spacing variables are used for padding, margins, gaps, and layout spacing across all components.
Radius
:root {
--mk-radius-sm: 0.125rem;
--mk-radius-md: 0.375rem;
--mk-radius-lg: 0.75rem;
--mk-radius-full: 9999px;
}Border radius variables control the shape of components and interactive elements.
Font Weights
:root {
--mk-weight-normal: 400;
--mk-weight-medium: 500;
--mk-weight-semibold: 600;
--mk-weight-bold: 700;
}Font weight variables provide consistent typography throughout the design system.
Typography Scale
:root {
--mk-text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
--mk-text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
--mk-text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
--mk-text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
--mk-text-5: 1.125rem;
--mk-text-6: 1rem;
--mk-text-7: 0.875rem;
--mk-text-8: 0.75rem;
}MiniKit uses a responsive typography scale that adapts across screen sizes.
Effects
:root {
--mk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
--mk-shadow-md: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--mk-shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--mk-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--mk-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
}These variables control shadows, elevation, and motion throughout the library.
Layout
:root {
--mk-grid-gap: var(--mk-space-4);
--mk-container-sm: 40rem;
--mk-container-md: 64rem;
--mk-container-lg: 80rem;
--mk-container-padding: var(--mk-space-4);
--mk-z-dropdown: 200;
--mk-z-modal: 400;
}Layout variables define container widths, spacing behavior, and stacking contexts used throughout MiniKit.
Next Steps
Continue to the Theme guide to learn how MiniKit's color system works and how to create custom themes.