The brand book for a Malaysian community learning Grok, Grok Bot and AI agents. The mark, the colour, the type, the voice, and the files to use them.
Everyone recognises the Grok Bot head. Here's the Malaysian brand system we built around it.
We're an independent community. Not affiliated with, endorsed by, or sponsored by xAI or X Corp. We borrowed a face people already know and gave it a Malaysian home, with rules so it stays honest.
An independent Malaysian community for learning Grok and AI agents. Not a course. Not official.
Grok and AI agents move fast, and most of the good explanations are written for someone else. Grokbot Malaysia is where Malaysians learn this in plain language, with local examples, from people who are figuring it out too.
SME operators who want to give a boring task to an agent. Builders who want to ship something. And anyone who is just curious and would like a friendly place to ask.
Practical guides, a WhatsApp community, and workshops to come. Our sister community is Claude Malaysia. Reach us at grokbotmalaysia@gmail.com or @grokbotmalaysia.
A rounded-square app icon. The glossy white head sits over the full Jalur Gemilang, so the flag and the face both stay readable down to favicon size.
x = 25% of the icon width. Nothing enters that margin: no text, edges, other logos or mascots.
Honest note. The head is the Grok Bot product mark, owned by xAI / X Corp. Here it is combined with the Jalur Gemilang to give this independent community its own identity. This is not an official xAI logo.
Our wordmark is our own typesetting in Geist ExtraBold, drawn as outlines so it looks the same everywhere. We never use the official xAI or Grok wordmark, or SpaceXAI marks.
x = 25% of the icon height, which is also the gap between the icon and the wordmark. Keep x clear on all four sides.
Jet and ivory do the work. Sunset is the spice: a button, a single emphasis, a link. If more than a tenth of a screen is sunset, remove some.
A rough guide for a typical screen: mostly jet, ivory for the words, charcoal for cards, a whisper of dove, and sunset as the spice.
Jet 62 · Charcoal 18 · Ivory 14 · Dove 3 · Sunset 3 (design guide, not a measurement)
These four live only inside the mark and flag artwork. Don't use them as UI colours.
#CC0000
Flag red
#FFFFFF
Flag white
#010066
Flag navy
#FFCC00
Flag yellow
Ratios use the WCAG 2.x formula. AAA needs 7:1 for normal text, AA needs 4.5:1. Sunset on jet is AA but not AAA, so we keep it to short phrases and links rather than paragraphs.
| Pair | Sample | Ratio | Grade | Use |
|---|---|---|---|---|
| Ivory on Jet | Aa | 18.65 : 1 | AAA | Body text, headings |
| White on Jet | Aa | 19.80 : 1 | AAA | Highlights |
| Dove on Jet | Aa | 14.00 : 1 | AAA | Secondary text |
| Dove on Charcoal | Aa | 12.31 : 1 | AAA | Secondary text in cards |
| Dawn on Jet | Aa | 13.78 : 1 | AAA | Hover, highlight text |
| Sunset on Jet | Aa | 6.64 : 1 | AA | Links, emphasis. Passes AA, short of AAA: keep it to short phrases |
| Sunset on Charcoal | Aa | 5.83 : 1 | AA | Links in cards. Passes AA only |
| Jet on Ivory | Aa | 18.65 : 1 | AAA | Text on light grounds |
| Jet on Sunset | Aa | 6.64 : 1 | AA | Button label on a sunset fill |
| Jet on Dawn | Aa | 13.78 : 1 | AAA | Button label on hover |
| Ivory on Sunset | Aa | 2.81 : 1 | Fails | Never. Do not put ivory or white text on sunset |
Geist for display and UI. Geist Mono for eyebrows, labels, hex codes and micro-copy. xAI's own display face is proprietary, so we use Geist, an open geometric sans, as our stand-in.
Direct and specific. We say what to do, what it costs and what could go wrong. No consultant-speak, no hype. Light Manglish is fine in casual captions. Keep it out of anything legal, financial or formal.
“Try it on one boring task first. Something you do every week.”
Specific, small, doable.“Here's how to get Grok to draft a supplier reply in Bahasa and English. Check it before you send.”
Local use, and the human stays in charge.“We're figuring this out together. This worked for us, this didn't.”
Honest about what we know.“We're an independent community. Free to join, no hard sell.”
Clear about who we are.“The official Grok community in Malaysia.”
We are not official. Ever.“Make RM10k a month with AI, guaranteed.”
No income promises.“Replace your whole team with agents.”
Scaring people is not teaching.“Leverage synergistic AI-driven paradigms.”
Consultant-speak. Say the plain thing.Grokbot Malaysia is an independent community. It is not affiliated with, endorsed by, or sponsored by xAI, X Corp or any of their affiliates. Grok and X are trademarks of their respective owners.
Two original characters in the same glossy white family as the head, with a Malaysian flavour. They are our own drawings. They live in stickers, IG memes and WhatsApp, and nowhere near the premium mark.
The calm explainer
“Bulat” is Malay for round. A glossy white ball of a bot with two slanted eyes and a bunga raya, the national flower, on its antenna. Patient and steady. Bulat is the one who says “okay, one step at a time.” Use it for tips, how-tos and welcome stickers.
The curious tinkerer
“Layang” comes from layang-layang, kite. A wau-shaped bot with a navy, red and yellow ribbon tail, always looking up and wondering how high a new idea can go. Layang tries things first and reports back. Use it for experiments, “I tested it so you don't have to” posts and workshop teasers.
Everything on this page, ready to download. Use these files rather than redrawing anything.
/* Grokbot Malaysia brand tokens, v1.0 */
:root {
--jet: #0A0A0A; /* page ground */
--charcoal: #1A1A1A; /* cards, elevated surfaces */
--ivory: #F9F8F6; /* primary text */
--white: #FFFFFF; /* pure highlights, reversed grounds */
--dove: #D5D9E2; /* secondary text, hairlines */
--sunset: #FF6308; /* accent only: buttons, emphasis, links */
--dawn: #FFD085; /* hover / highlight on sunset */
--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, monospace;
}
body { background: var(--jet); color: var(--ivory); font-family: var(--font-display); }
.eyebrow, .label, code { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
a { color: var(--sunset); } a:hover { color: var(--dawn); }
.button { background: var(--sunset); color: var(--jet); } /* jet on sunset = 6.6:1. Never ivory on sunset (2.8:1) */
.button:hover { background: var(--dawn); }
/* HARD RULES
1. Grokbot Malaysia is an independent community. Never write or imply that it is official,
endorsed, approved or sponsored by xAI, X Corp, Grok or Grok Bot.
2. Sunset is spice, not a fill. Buttons, one emphasis per screen, link colour. Never a page background.
3. Geist for display and UI, Geist Mono for eyebrows, labels and hex codes. No other typefaces.
4. Use the supplied files in /brand/. Do not redraw, recolour, crop or re-space the head, the flag or the lockups.
5. No invented stats, member counts, income claims or "replace your team" claims.
6. Mascots (Bulat, Layang) never appear in the logo, lockups, favicon, B2B, political or get-rich-quick content.
7. Voice: a smart Malaysian friend who figured out AI. Direct, specific, no consultant-speak.
*/Paste it into a Claude, ChatGPT or Grok chat, a project's custom instructions or a design brief before asking for anything on-brand. It carries the tokens, the type rules and the hard rules.
How the mark is built. The real files are the spec. flag.svg has the 14-stripe construction: stripes of equal height, a navy canton over the top 8 stripes and the left half, and a crescent and 14-point star drawn with the two-circle method. icon-1024.png is the head over that field, masked to a rounded square. The build script is scripts/build-brand-assets.py in the site repo, and re-running it regenerates every file here.
Want to use the brand in something you're making for the community, or not sure if a use is okay? Ask first. Email grokbotmalaysia@gmail.com or message @grokbotmalaysia on Instagram.