Usage

Every page needs three stylesheets, in this order: the fonts, the tokens and the component CSS.

@import "@monk-business/brand/fonts.css"; /* Lexend Variable, JetBrains Mono Variable */
@import "@monk-business/tokens/tokens.css"; /* --mb-* variables, both themes */
@import "@monk-business/css"; /* mb- component classes */

The component CSS sits in three cascade layers, mb.base, mb.components and mb.utilities, so your own unlayered styles always win over it.

Astro

Import the styles once, in the base layout, and use the components:

src/layouts/Base.astro

---
import '@monk-business/brand/fonts.css';
import '@monk-business/tokens/tokens.css';
import '@monk-business/css';
import SiteFooter from '@monk-business/astro/SiteFooter.astro';
import SiteHeader from '@monk-business/astro/SiteHeader.astro';
---

<html lang="pt-BR">
  <body class="mb-root">
    <a class="mb-skip-link" href="#conteudo">Pular para o conteúdo</a>
    <SiteHeader
      items={[{ label: 'Serviços', href: '/servicos/', current: true }]}
      cta={{ label: 'Pedir orçamento', href: '/contato/' }}
    />
    <main id="conteudo"><slot /></main>
    <SiteFooter tagline="Integrações de telecom, software e IA para quem não pode parar." />
  </body>
</html>

src/pages/index.astro

---
import Button from '@monk-business/astro/Button.astro';
import Section from '@monk-business/astro/Section.astro';
import SectionHeading from '@monk-business/astro/SectionHeading.astro';
import Base from '../layouts/Base.astro';
---

<Base>
  <Section tone="light" aria-labelledby="servicos">
    <SectionHeading eyebrow="Serviços" title="Como trabalhamos" headingId="servicos" />
    <Button href="/contato/">Pedir orçamento</Button>
  </Section>
</Base>

Components are published as source (.astro files), so Astro compiles them with your project. Import each one from @monk-business/astro/<Name>.astro, or several from the package root: import { Button, Card } from '@monk-business/astro'. Prop types are exported too (ButtonProps, CardProps…).

Plain HTML

Use the same classes without Astro. With a bundler (Vite, esbuild, webpack), import the three stylesheets as above. Without one, copy dist/css/tokens.css from the tokens package and dist/index.css from the CSS package next to your page, and load Lexend and JetBrains Mono yourself (fonts.css imports Fontsource packages, which need a bundler to resolve).

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/css/tokens.css" />
    <link rel="stylesheet" href="/css/monk-business.css" />
  </head>
  <body class="mb-root">
    <section class="mb-section theme-light" aria-labelledby="servicos">
      <div class="mb-container">
        <div class="mb-section-heading">
          <p class="mb-eyebrow">Serviços</p>
          <h2 id="servicos">Como trabalhamos</h2>
        </div>
        <a class="mb-btn mb-btn--primary" href="/contato/">Pedir orçamento</a>
      </div>
    </section>
  </body>
</html>

Each component page shows its HTML. The class names follow BEM: a block (mb-card), elements (mb-card__link) and modifiers (mb-btn--secondary).

Tailwind CSS v4

The tokens package ships a Tailwind v4 theme that maps Tailwind’s color, font, radius, shadow and text utilities onto the --mb-* variables. Import the component CSS into Tailwind’s components layer so utilities can still override it:

src/styles/global.css

@import "tailwindcss";
@import "@monk-business/brand/fonts.css";
@import "@monk-business/tokens/tokens.css";
@import "@monk-business/tokens/theme.css";
@import "@monk-business/css" layer(components);

Then use the semantic names as utilities. They follow the theme, so the same markup works inside .theme-light:

<article class="bg-surface text-fg border border-border rounded-lg p-6">
  <h3 class="text-heading-3 font-display">Assessment de ambientes</h3>
  <p class="text-small text-muted">Diagnóstico de infraestrutura, segurança e custos.</p>
  <p class="font-mono text-mono text-eyebrow">AWS · Google Cloud · IBM Cloud</p>
</article>

Utility	Variable
bg-bg, bg-surface, text-fg, text-muted, border-border, text-link, bg-primary…	--mb-color-* (both themes)
bg-teal-700, text-neutral-400…	--mb-teal-*, --mb-neutral-* (build new semantic colors with these; do not use them directly in pages)
font-display, font-body, font-sans, font-mono	--mb-font-*
rounded-sm, rounded-md, rounded-lg, rounded-full	--mb-radius-*
shadow-float	--mb-shadow-float
text-display-xl, text-heading-2, text-lead, text-small, text-caption, text-mono…	--mb-text-* (size, line height, weight and tracking)

JavaScript and TypeScript

The tokens are also available as data, for charts, canvas, emails or tests:

import { allTokens, cssVar, tokens, variables } from '@monk-business/tokens';

tokens.theme.dark.bg; // "#272727"
tokens.theme.light.primary; // "#2f6f72"
tokens.text['display-xl'].size; // "56px"
variables.light['--mb-color-fg']; // "#272727"
cssVar('--mb-color-link'); // "var(--mb-color-link)"
allTokens.filter((t) => t.type === 'color' && t.themes); // the 19 semantic colors

@monk-business/tokens/tokens.json has the same resolved values as JSON, and @monk-business/tokens/dtcg/*.json the DTCG sources.

Themes

Dark is the default on :root. Switch any subtree with a class or an attribute; themes nest:

<section class="theme-light">…</section>
<div data-theme="light">
  <aside data-theme="dark">…</aside>
</div>

The component styles read only semantic tokens, so they need no theme-specific classes. The Section component sets the class for you: <Section tone="light">.