Getting Started

Customization

Customize Minium CSS by changing semantic tokens in css/theme.css, adding component overrides only when needed, placing product styles in @layer project, and loading only the integrations you use.

Change semantic tokens

Start with the shared tokens in :root. These tokens control the project-wide type scale, spacing, layout, shape, shadows, fonts, and semantic colors.

:root {
  --font: "PT Sans", system-ui, sans-serif;
  --size-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --gap: var(--space-s-m);
  --content-width: 68ch;
  --color-primary: var(--orange-9);
  --color-surface: var(--sand-2);
}

Components consume semantic tokens instead of hard-coded values. Changing --color-primary updates the buttons, links, focus states, badges, and alerts mapped to that token.

Customize the theme

The following example changes the system’s fonts, dimensions, spacing, corner radii, and primary colors.

:root {
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --content-width: 72ch;
  --main-width: 80rem;
  --gap: var(--space-m-l);
  --flow-space: var(--flow-space-loose);

  --border-radius-s: 0.25rem;
  --border-radius-m: 0.5rem;
  --border-radius-l: 0.75rem;

  --color-primary: var(--blue-9);
  --color-primary-hover: var(--blue-10);
  --color-primary-focus: var(--blue-7);
  --color-primary-text: var(--blue-11);
}

Add project-specific styles and overrides

Do not modify Minium’s component styles for project-specific changes. Use semantic tokens first. If the token API cannot represent the required design, add the component override to your project.css inside @layer project.

Project-specific styles also include named blocks such as .hero, .pricing-comparison, and .product-card; reusable utility combinations; and wrappers around Minium primitives.

Minium declares @layer project between components and utilities:

@layer tokens, theme, reset, base, layout, components, project, utilities;

Rules in @layer project can override component styles without increasing selector specificity. Utility rules retain precedence when applied to the same element. Unlayered rules take precedence over all layered library rules.

Here is an example project.css that adds a hero component:

@layer project {
  .hero {
    --flow-space: var(--flow-space-loose);

    padding: var(--space-xl);
    background-color: var(--color-primary-fill);
    text-align: center;
  }
}

Load integration styles

Opt-in integration stylesheets provide styles for markup generated by third-party tools, such as Prism.js syntax tokens. Load only the integrations you use. See Integrations for available stylesheets and loading instructions.