Tokens

The tokens are written in the W3C Design Tokens (DTCG) format in packages/tokens/src/tokens/ and built with Style Dictionary. Every table on this page is generated from the built package, so it always matches what you install.

Output	Import	Contents
CSS variables	@monk-business/tokens/tokens.css	--mb-* on :root (dark), .theme-light / [data-theme="light"] and .theme-dark / [data-theme="dark"]
Tailwind v4 theme	@monk-business/tokens/theme.css	@theme inline mapping utilities onto the variables
JavaScript	@monk-business/tokens	tokens (nested, typed), allTokens, variables, cssVar()
JSON	@monk-business/tokens/tokens.json	Resolved values, both themes
DTCG sources	@monk-business/tokens/dtcg/*.json	The source files

Color

Semantic colors

Use these in interfaces. Each switches with the theme. Text tokens are checked against the ground they are used on (4.5:1 for AA, 7:1 for AAA); graphics (borders, focus ring, symbol, accent) need 3:1; grounds show the contrast of their text.

Semantic colors · contrast against the ground they are used on

Token	Dark	Light
--mb-color-bgGroundPage background. Dark (Grafite) is the default brand surface; the light theme is for alternate sections and documents.	#272727color.neutral.900 14.1:1 fg on itAAA	#f9f9f9color.neutral.50 14.1:1 fg on itAAA
--mb-color-surfaceGroundCards, panels, inputs and the chat panel, on bg.	#303030color.neutral.800 12.5:1 fg on itAAA	#ffffffcolor.neutral.0 14.9:1 fg on itAAA
--mb-color-surface-2GroundRaised areas inside surface: assistant chat bubbles, table headers, hover fills.	#383838color.neutral.850 11.1:1 fg on itAAA	#efefefcolor.neutral.100 12.9:1 fg on itAAA
--mb-color-borderDecorativeDecorative hairlines: card outlines, dividers. Not for form controls.	#464646color.neutral.750	#dcdcdccolor.neutral.200
--mb-color-border-strongGraphicForm control borders and the secondary button outline (3:1 or more on bg and surface in both themes).	#858585color.neutral.500 4.0:1 on bg3:1	#858585color.neutral.500 3.5:1 on bg3:1
--mb-color-fgTextPrimary text and headings on bg, surface and surface-2.	#f9f9f9color.neutral.50 14.1:1 on bgAAA	#272727color.neutral.900 14.1:1 on bgAAA
--mb-color-mutedTextSecondary text, captions, helper text on bg, surface and surface-2.	#a3a3a3color.neutral.400 5.9:1 on bgAA	#6b6b6bcolor.neutral.600 5.0:1 on bgAA
--mb-color-eyebrowTextUppercase eyebrow labels above headings, on bg and surface.	#bbd4d5color.teal.200 9.5:1 on bgAAA	#2f6f72color.teal.700 5.4:1 on bgAA
--mb-color-linkTextLinks and text actions on bg, surface and surface-2.	#9cc2c3color.teal.300 7.7:1 on bgAAA	#2f6f72color.teal.700 5.4:1 on bgAA
--mb-color-primaryGroundPrimary button fill and selected states. Pair with on-primary text.	#7eafb1color.teal.400 6.1:1 on-primary on itAA	#2f6f72color.teal.700 5.7:1 on-primary on itAA
--mb-color-on-primaryTextText and icons on primary.	#272727color.neutral.900 6.1:1 on primaryAA	#ffffffcolor.neutral.0 5.7:1 on primaryAA
--mb-color-focusGraphicFocus ring: 2px solid, 2px offset, on every interactive element.	#9cc2c3color.teal.300 7.7:1 on bg3:1	#2f6f72color.teal.700 5.4:1 on bg3:1
--mb-color-symbolGraphicThe orbital symbol and orbit drawings. Graphics only.	#bbd4d5color.teal.200 9.5:1 on bg3:1	#418a8dcolor.teal.600 3.8:1 on bg3:1
--mb-color-accentGraphicThe K accent (Petróleo): the detached teal piece and small brand marks. Graphics only, never text (3.7:1 on dark, 3.8:1 on light).	#418a8dcolor.teal.600 3.7:1 on bg3:1	#418a8dcolor.teal.600 3.8:1 on bg3:1
--mb-color-bubble-userGroundThe visitor's own chat bubbles. fg text on it.	#1c4244color.teal.900 10.4:1 fg on itAAA	#e0eeeecolor.teal.100 12.5:1 fg on itAAA
--mb-color-successTextSuccess text and icons (always with a word such as 'Enviado'), on bg, surface and surface-2.	#7fcf9f 8.0:1 on bgAAA	#1f7a4d 5.0:1 on bgAA
--mb-color-warningTextWarning text and icons (always with a word), on bg, surface and surface-2.	#f0c36b 9.0:1 on bgAAA	#8a5a00 5.6:1 on bgAA
--mb-color-dangerTextError text, error borders and icons (always with a word), on bg, surface and surface-2.	#ff9580 7.0:1 on bgAAA	#b42318 6.2:1 on bgAA
--mb-color-infoTextInformational notices (always with a word), on bg, surface and surface-2.	#9cc2c3color.teal.300 7.7:1 on bgAAA	#2f6f72color.teal.700 5.4:1 on bgAA

Brand colors

• Grafite#272727--mb-brand-grafiteThe main background of the dark brand surface.
• Gelo#f9f9f9--mb-brand-geloText on dark and the light background.
• Bruma#bbd4d5--mb-brand-brumaThe symbol and labels on dark.
• Sálvia#7eafb1--mb-brand-salviaPrimary buttons on dark, with grafite text (6.2:1).
• Petróleo#418a8d--mb-brand-petroleoThe K accent and the symbol on light. Graphics and 24px+ text only.

Scales

--mb-teal-* · Teal scale, derived from the brand teals. Use through the semantic tokens.

• 50#f1f7f7
• 100#e0eeee
• 200#bbd4d5
• 300#9cc2c3
• 400#7eafb1
• 500#5f9c9f
• 600#418a8d
• 700#2f6f72
• 800#245759
• 900#1c4244
• 950#122b2c

--mb-neutral-* · Neutral scale. Use through the semantic tokens.

• 0#ffffff
• 50#f9f9f9
• 100#efefef
• 200#dcdcdc
• 300#c2c2c2
• 400#a3a3a3
• 500#858585
• 600#6b6b6b
• 700#4f4f4f
• 750#464646
• 800#303030
• 850#383838
• 900#272727
• 950#1b1b1b

Typography

Each style has a family, size, line height and weight, and some a tracking and a phone size. Variables: --mb-text-<style>-family, -size, -size-phone, -line, -weight and -tracking. Classes: mb-text-<style>.

• display-xlLexend56px (36px on phones)line 1.05weight 600tracking -0.01em.mb-text-display-xl

  Integrações de telecom, software e IA

  Home hero headline only. 36px on phones.

• displayLexend40px (30px on phones)line 1.1weight 600tracking -0.01em.mb-text-display

  Portabilidade numérica

  Page titles (h1). 30px on phones.

• heading-2Lexend30pxline 1.15weight 600.mb-text-heading-2

  Como trabalhamos

  Section headings (h2).

• heading-3Lexend22pxline 1.25weight 600.mb-text-heading-3

  Assessment de ambientes

  Card and sub-section titles (h3).

• leadLexend19pxline 1.6weight 300.mb-text-lead

  Integrações SOA e BDO para portabilidade numérica.

  The paragraph right under a page or section title.

• bodyLexend17pxline 1.6weight 300.mb-text-body

  Começamos entendendo o seu ambiente e os seus prazos.

  Running text. Keep lines near 65 characters.

• body-strongLexend17pxline 1.6weight 500.mb-text-body-strong

  Orçamento sob consulta

  Emphasis inside body text.

• smallLexend15pxline 1.5weight 400.mb-text-small

  Seg–Sex, 9h–18h (horário de Brasília)

  Helper text, card text, chat messages.

• captionLexend13pxline 1.4weight 400.mb-text-caption

  © 2026 Monk Business · CNPJ 44.205.879/0001-83

  Footer, legal lines, timestamps.

• eyebrowLexend12pxline 1.4weight 500tracking 0.16em.mb-text-eyebrow

  Telecom · Nuvem · IA

  Always uppercase, in eyebrow color, above a heading.

• buttonLexend15pxline 1.2weight 500.mb-text-button

  Pedir orçamento

  Buttons and nav links. Sentence case.

• monoJetBrains Mono14pxline 1.5weight 400.mb-text-mono

  +55 11 4000-0000 → BDR → BDO

  Phone numbers, flows, tech names (AWS, BDO), tags.

• codeJetBrains Mono13pxline 1.5weight 400.mb-text-code

  attest: A · verstat: TN-Validation-Passed

  Inline technical values and code samples.

Spacing

A 4px base. Variables: --mb-space-<n>.

• --mb-space-14pxIcon-to-text gaps, tag padding.
• --mb-space-28pxGaps inside controls and between tags.
• --mb-space-312pxButton vertical padding, list gaps.
• --mb-space-416pxField gaps, minimum page gutter on phones.
• --mb-space-520pxPage gutter on desktop, button horizontal padding.
• --mb-space-624pxCard padding, gaps between cards.
• --mb-space-832pxSpace between a heading block and its content.
• --mb-space-1248pxSection padding on phones.
• --mb-space-1664pxSection padding on desktop.
• --mb-space-2496pxHero padding on desktop.

Radius

• --mb-radius-sm · 4pxTags, code chips, small badges.
• --mb-radius-md · 8pxButtons, inputs, notices.
• --mb-radius-lg · 14pxCards, panels, the chat panel.
• --mb-radius-full · 999pxChat launcher, avatars, status dots.

Font, shadow and layout

Font, shadow and layout tokens

Token	Value
--mb-font-displayHeadings (display-xl, display, heading-2, heading-3).	"Lexend Variable", Lexend, ui-sans-serif, system-ui, sans-serif
--mb-font-bodyRunning text, UI, buttons and labels.	"Lexend Variable", Lexend, ui-sans-serif, system-ui, sans-serif
--mb-font-monoPhone numbers, flows, technology names, tags and code.	"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace
--mb-shadow-floatThe open chat panel and the chat launcher only. Borders, not shadows: this is the only shadow.	dark: 0 16px 40px rgba(0, 0, 0, 0.45) light: 0 16px 40px rgba(39, 39, 39, 0.16)
--mb-container-maxMaximum content width.	1160px
--mb-text-measureMaximum width of running text.	65ch
--mb-header-heightSite header height.	64px

Using tokens

.panel {
  padding: var(--mb-space-6);
  background: var(--mb-color-surface);
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-lg);
  font: var(--mb-text-small-weight) var(--mb-text-small-size) / var(--mb-text-small-line) var(--mb-font-body);
}

Use semantic colors (--mb-color-*) in components. The palette variables (--mb-teal-*, --mb-neutral-*, --mb-brand-*) exist to build new semantic tokens; propose a new semantic token instead of using them in a page (see Contributing).