Skip to content
Monk BusinessMonk BusinessMonk Business Design System

Overview

Monk Business is a Brazilian technology services company: software development, environment assessment, technology consulting, AI agents and automation, and telecom integrations for number portability and STIR/SHAKEN. Its identity is built on geometric Lexend lettering, the orbital symbol, the detached teal K accent and a graphite-first palette.

This design system turns that identity into code. Build every Monk Business surface (the website, the chat assistant, documents and social images) from its tokens, components and logo files, so they stay consistent and accessible without restyling each one.

What is in it

Section titled “What is in it”
Package Contents Use it for
@monk-business/tokens Colors (two themes), type scale, spacing, radius, shadow and layout, written in the W3C Design Tokens format and built with Style Dictionary. Outputs CSS variables (--mb-*), a Tailwind v4 theme, typed JavaScript and resolved JSON. Every project. The other packages are built on it.
@monk-business/brand The 14 approved logo SVGs, PNG icons (favicon, Apple touch icon, manifest icons, WhatsApp avatar), the Open Graph and LinkedIn images, and fonts.css for Lexend and JetBrains Mono. Logos, favicons, social images and fonts.
@monk-business/css Component styles as plain CSS with mb- classes (mb-btn mb-btn--primary), in cascade layers and built only on the tokens. Any HTML: Astro, plain pages, emails rendered in the browser, other frameworks.
@monk-business/astro Astro components (Button, Card, Field, SiteHeader, Hero and more) with typed props and accessible markup. No client JavaScript. Astro sites, such as the Monk Business website.

The four packages are versioned together: one version number for the whole system, released with Changesets and published privately to GitHub Packages.

Principles

Section titled “Principles”
  • Dark first. Grafite (bg) with Gelo text is the brand surface. The light theme is for alternate sections and printed documents, switched with class="theme-light" or data-theme="light" on any element.
  • Tokens only. Components use only --mb-* variables, never raw colors. Text colors pass WCAG AA (4.5:1) on bg, surface and surface-2 in both themes; graphics, borders and the focus ring pass 3:1. The tests check every pair.
  • Accessible by default. Visible labels, aria-current on the current page, errors linked with aria-describedby, a 2px focus ring on every interactive element, 44px touch targets and no motion when the visitor asks for reduced motion.
  • No client JavaScript in components. The mobile menu is a native <details> element. Behavior that needs JavaScript (the chat assistant, form submission) belongs to the application.
  • Sources of truth in one place. The brand book, the tokens and the logo generator live in this repository. Change them here, release a new version and update the consumers.

Next steps

Section titled “Next steps”