The Monk Business identity comes from Cloud Monk: the orbital symbol in place of the O, the teal piece on the K and the same five colors. The letters are drawn from the Lexend typeface, the same one used on the website and in documents.
Logo
Use the horizontal version whenever there is room. The stacked version is for square spaces. On dark backgrounds use the “on-dark” files; on light backgrounds, the “on-light” files.
Symbol
16px24px32px48px
64px+The symbol is a central node with three satellites on an open orbit. Below 64 px, use the simplified drawing (favicon.svg), with heavier strokes and solid satellites.
Colors
- Grafite#272727Main background
- Gelo#F9F9F9Text on dark, light background
- Bruma#BBD4D5Symbol and labels on dark
- Sálvia#7EAFB1Buttons on dark
- Petróleo#418A8DK accent, symbol on light
Teal scale
- 50#F1F7F7
- 100#E0EEEE
- 200#BBD4D5
- 300#9CC2C3
- 400#7EAFB1
- 500#5F9C9F
- 600#418A8D
- 700#2F6F72
- 800#245759
- 900#1C4244
- 950#122B2C
Neutral scale
- 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
Dark theme (default)
| Background | #272727 | --mb-color-bg | |
|---|---|---|---|
| Surface | #303030 | --mb-color-surface | |
| Surface 2 | #383838 | --mb-color-surface-2 | |
| Border | #464646 | --mb-color-border | |
| Strong border (fields) | #858585 | --mb-color-border-strong | |
| Text | #F9F9F9 | --mb-color-fg | |
| Secondary text | #A3A3A3 | --mb-color-muted | |
| Eyebrow label | #BBD4D5 | --mb-color-eyebrow | |
| Link | #9CC2C3 | --mb-color-link | |
| Primary button | #7EAFB1 | --mb-color-primary | |
| Text on primary | #272727 | --mb-color-on-primary | |
| Focus ring | #9CC2C3 | --mb-color-focus | |
| Symbol | #BBD4D5 | --mb-color-symbol | |
| Accent | #418A8D | --mb-color-accent | |
| Visitor chat bubble | #1C4244 | --mb-color-bubble-user | |
| Success | #7FCF9F | --mb-color-success | |
| Warning | #F0C36B | --mb-color-warning | |
| Error | #FF9580 | --mb-color-danger | |
| Info | #9CC2C3 | --mb-color-info |
Light theme
| Background | #F9F9F9 | --mb-color-bg | |
|---|---|---|---|
| Surface | #FFFFFF | --mb-color-surface | |
| Surface 2 | #EFEFEF | --mb-color-surface-2 | |
| Border | #DCDCDC | --mb-color-border | |
| Strong border (fields) | #858585 | --mb-color-border-strong | |
| Text | #272727 | --mb-color-fg | |
| Secondary text | #6B6B6B | --mb-color-muted | |
| Eyebrow label | #2F6F72 | --mb-color-eyebrow | |
| Link | #2F6F72 | --mb-color-link | |
| Primary button | #2F6F72 | --mb-color-primary | |
| Text on primary | #FFFFFF | --mb-color-on-primary | |
| Focus ring | #2F6F72 | --mb-color-focus | |
| Symbol | #418A8D | --mb-color-symbol | |
| Accent | #418A8D | --mb-color-accent | |
| Visitor chat bubble | #E0EEEE | --mb-color-bubble-user | |
| Success | #1F7A4D | --mb-color-success | |
| Warning | #8A5A00 | --mb-color-warning | |
| Error | #B42318 | --mb-color-danger | |
| Info | #2F6F72 | --mb-color-info |
Grafite (graphite) is the main background and Gelo (off-white) is the text on it. Bruma marks the symbol and labels, Sálvia the buttons and Petróleo the K accent. Two extra shades from the teal scale keep links and buttons readable on light backgrounds.
Typography
Lexend · display and text
Integrações de telecom, software e IA para quem não pode parar.
Headings use weight 600 in sentence case. Body text uses 300 to 400 at about 17 px with a 1.6 line height. Labels are uppercase with wide letter spacing.
- Light 300
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
JetBrains Mono · technical
+55 11 0000-0000
BDR → BDO → recipient carrier
AWS · Google Cloud · IBM Cloud
For phone numbers, code, cloud and model names, and technical labels.
Clear space and minimum sizes
- Logo, minimum width
- 120 px
- Symbol, minimum size
- 24 px
- Symbol below 64 px
- favicon.svg
- Keep free space around the logo equal to the height of the teal K accent.
- Horizontal logo: at least 120 px wide.
- Symbol: at least 24 px. Below 64 px, use favicon.svg.
Correct use
Do Original logo on graphite
Do Light version on off-white
Don't Do not stretch or distort
Don't Do not rotate
Don't Do not change the colors
Don't Do not add shadows or effects
Don't Do not place on busy backgrounds
- Do not change the colors of the logo or the symbol.
- Do not stretch, distort or rotate.
- Do not add shadows, outlines, glows or other effects.
- Do not place on busy or low-contrast backgrounds.
- Do not separate the teal K accent or move it.
Downloads
- Logo, for dark backgroundslogo-on-dark.svg
- Logo, for light backgroundslogo-on-light.svg
- Alternative logo, dark backgroundslogo-alt-on-dark.svg
- Alternative logo, light backgroundslogo-alt-on-light.svg
- Stacked logo, dark backgroundslogo-stacked-on-dark.svg
- Stacked logo, light backgroundslogo-stacked-on-light.svg
- Single-color logo, whitelogo-mono-white.svg
- Single-color logo, graphitelogo-mono-graphite.svg
- Single-color logo (currentColor, for code)logo-mono.svg
- Symbol, dark backgroundssymbol-on-dark.svg
- Symbol, light backgroundssymbol-on-light.svg
- Single-color symbolsymbol-mono.svg
- App iconapp-icon.svg
- Favicon (below 64 px)favicon.svg
