Mochatrade
Brand Guidelines

Warm near-black, one mocha accent, mono for every number.

Mocha is the one accent. Scarcity is what keeps it legible.

One system, two surfaces: serif on the website, Geist in the product.

02 · Typography

Typography

Four faces, four jobs. Geist runs the product, titles included, at 400 and 500 and nothing heavier. Geist Mono holds every number. Source Serif 4 is the website’s headline voice and the italic in the wordmark. Geist Pixel, dotted, marks the system at label size. The pairing works only while each face keeps its lane; the product uses the first two only.

02 · Typography

Faces

Weight, kerning, and leading are paired with the face. Treat each card as one locked setting, not a menu. If a face feels wrong at its settings, the face is wrong for the job.

Geist

RegularMedium

The product, all of it: titles, body, nav, buttons, forms. On the website, the body and the controls. Never bolder than 500.

Letter spacing
−1% body · −3% titles
Line height
150% body · 110% titles
Weights
400 / 500

Geist Mono

₹4,07,939 · 19,123.05

Every number, price, percentage, size, timestamp, ticker and code. Tabular figures, so columns never wobble while numbers move. Also the 11px uppercase eyebrow.

Letter spacing
0% · +5% eyebrow
Line height
140%
Features
tnum on

Source Serif 4

RegularItalic

Website headlines and pull quotes, with the italic carrying the emphasis inside a line. The trade in the wordmark. Never in the product, never for UI.

Letter spacing
−2%
Line height
95% to 112%
Weight
400

Geist Pixel

Open · AAPL · 02

Indexes, kickers, tickers and status marks on the website and in print. Label size only: it marks the system, it never speaks for it. Not used inside the product.

Letter spacing
+6%
Case
uppercase
Dot shape
ELSH 20
02 · Typography

System

The scale is the hierarchy: when something needs more emphasis, change the level, not the face. The product has no display sizes on data screens; one 20px figure per panel is the ceiling, and the portfolio value at 24px is the one exception.

Headline · website

Trade US stocks from India, in rupees.

Source Serif 4 400kerning −2%leading 95%
Title · product

Portfolio value

Geist 500 · 24 / 32pxkerning −2.5%leading 110%
Body

Money added is yours to withdraw any time. No lock-in.

Geist 400 · 14pxkerning −1%leading 150%
Label

Available to trade

Geist 500 · 12pxsentence caseleading 130%
Data

₹4,07,939 · $212.48

Geist Mono 400 · 13 / 14pxkerning 0%tabular
Eyebrow

Live · 15 Sept · IST

Geist Mono 400 · 11pxkerning +5%uppercase, caption size only
Marker · website

Open · 02 Type

Geist Pixel dottedkerning +6%uppercase
02 · Typography

Numbers

Every number, price, percentage, size, timestamp, ticker and code is mono with tabular digits. Mono is for figures, never for phrases: a caption of three or more words is set in Geist with only the figure inside it in mono. A whole line of mono words reads as a terminal dump.

Rupees, en-IN grouping₹1,01,144
Dollars, en-US grouping$19,123.05
A change beside its percent▲ ₹9,446 (2.23%) Today
A loss, in clay, never red▼ ₹17,752 (4.17%) Last 30 days
Figure inside a sentenceFills −10.9% from mark
Mono value ends the sentenceWe’ll text a code to +91 98••• ••210
Open · NVDAOrder filled12 × $212.48
Sign, amount, then the word
Open · NVDAOrder filledYour order for twelve shares has been filled at market
Don’t set phrases in mono
02 · Typography

Do and don’t

Keep product titles in Geist and prices in Mono. Source Serif is for the website, never a control or a product heading. Uppercase only at caption size, 12px or smaller. Nothing bolder than 500. And never mix all three faces in one component; three voices in one card is already an argument.

Open · AAPLOrder filled100 × 142.80
Each face in its lane
Open · AAPLOrder filled100 × 142.80
Don’t swap the jobs
PositionsBuying power₹62,100
Sentence case, medium at most
POSITIONSBUYING POWER₹62,100
Don’t shout: no bold, no caps
03 · Colour

Colour

Think rhythm, not rainbow. Warm neutrals first, mocha once; feedback for forms, direction for money, signals for charts. Values are locked: don’t interpolate new greys or invent a second accent. Restraint is the mechanism. The accent means something because it is rare.

03 · Colour

Mocha

The one accent: a single action, a selected state, a focus ring, the crosshair on a chart. Never the page fill, never a series colour. Mocha lite is the type that sits on mocha. The muted wash is as far as mocha spreads on a surface. Click to copy.

03 · Colour

Two grounds, both warm

Nothing we ship is black and nothing is grey-neutral. The website sits on a deep warm black so the artwork has room to glow. The product sits on a warm dark grey, never black, so panels one step lighter read as elevation with a hairline you barely see. Sign-in has its own canvas between the two.

03 · Colour

Dark · Product

The default palette. Everything in the terminal, portfolio, funds and settings is built from these tokens and nothing else; the code forbids raw hex. Click a field to copy.

Core

Page, text, accent

Start here. Page is the canvas. Text is body and the primary button fill. Mocha is the one action that isn’t neutral.

Surfaces

Panels, rows, fields

Panel sits one step above the page. Hover is the lift, Selected the soft pill on the current nav item. Field is the input fill. Hairline is every border and rule. Panels never nest inside panels.

Ink

Four steps of text

Text for body and values. Secondary for supporting copy. Dim for labels and captions. Faint for placeholders and disabled, never for copy someone has to read.

Ramp

Grey 0 to 100

The shared neutrals the ink steps come from. Stay on the ramp instead of mixing a new grey: eight steps everyone shares beat a hundred greys nobody can name.

Auth

Sign-in canvas

The split sign-in page: content column on the auth canvas, image panel at the left. A shade lighter than the terminal, a shade darker than the panel. The terminal never shows behind these screens.

03 · Colour

Dark · Website

mochatrade.com. The same ink and accent on a deeper ground, with the elevated tone for the nav island and cards. This is also the chrome you are reading now.

Core

Ground, text, accent

Deep warm black. Hairlines are drawn at 5 to 10% of the text colour so the grid reads as rails, not boxes.

Surfaces

Island, cards, controls

Elevated is the nav island and any card that needs a surface. Hover is one step up. Input is the email field on the footer and the request form.

03 · Colour

Data, feedback, signals

Three sets that must never blur. Direction is the money moving. Feedback is the interface talking. Signals are the chart’s vocabulary. A loss must never look like an error.

Direction

Long and short

Up, positive, buy, long: sage. Down, negative, sell, short: clay. Muted, for numbers and thin bars. Never colour alone: a triangle, sign or word travels with every reading. The only solid fills are the order button and the 24h move chip on Market.

Feedback

Success, warning, danger, info

Forms, toasts, banners, wells. Pair the solid with its well; the well is the fill, the solid is the icon or the line. Danger is validation and destructive, not P&L.

Signals

Chart series, in order

Series take colours in this order: sky, clay, gold, rose, lime, tan. Sage is direction only. Never a button, never the brand: the moment a signal becomes a control, the chart loses its language.

03 · Colour

Light · Documents

Nothing we ship is light. This remap exists for decks, print, press placements and partner surfaces: near-white canvas, near-black type, the same accent. Nothing new is invented on the way over.

Core

Page, type, accent

Same three roles.

Surfaces

Layers and hover

Cards sit on Elevated. Hover is the lift. Muted is secondary type.

States

Controls and focus

Border at rest, Input the field fill, Pressed the down state. Selected and Accent muted are thin mocha washes. Focus and hover are mocha.

Feedback

Wells on light

Pair each solid with its light well.

03 · Colour

Misuse

Four ways the palette breaks. Each one looks fine in isolation; each one spends the accent’s scarcity or the chart’s vocabulary, and neither comes back cheap.

Confirm
Don’t fill the page with mocha
SaveCancel
Don’t colour ordinary buttons with direction
Confirm
Don’t gradient the accent
−₹17,752Details
Don’t use red for a loss or a second accent
04 · Interface

Interface

The terminal register. Small, even type on a warm grey page; panels one step lighter with a hairline you barely see, so elevation reads as tone, not outline. Indian retail traders taking leveraged positions on US stocks need, in this order: where their money stands, what changed, what they can do next. Everything below is drawn with the product tokens.

04 · Interface

Surfaces

Page, then panel, then a row. Whitespace lives between panels; rows inside a panel stay dense and are cut by hairlines. Panels never nest inside panels, and a border is never used to repair weak hierarchy. Radii: 8px for panels, 6px for rows and chips, 12px for the auth fields. No shadows, no glass.

Page · 8px radius on panels
PositionsDetails ›
Row · 48px▲ ₹44,313 (47.88%)
Row · hover▼ ₹70,013 (34.74%)
Row · selected▲ ₹17,726 (29.68%)
A card inside a card
Panel on page, rows cut by hairlinesNever a card inside a card
04 · Interface

Density

Reference: Perplexity Finance. Labels and body 14px, numbers 13px mono, section labels 16px, at most one 20px figure per panel. No display sizes on data screens. Sections breathe; rows don’t.

App bar56 pxsticky; anything else that pins starts at 80px
Rail row56 pxlogo, name, symbol · price and change right
Market row52 pxsortable, trend chart per row
List row48 pxsettings, positions, activity
Dense table row44 pxhistory, holdings
Terminal row40 pxpositions panel, book, fills
Tab row36 pxunderline tabs inside a panel
Panel padding16 pxsection gap 36 · label to panel 12
Frame1400 pxmain column plus a 360px rail; terminal min 1280
04 · Interface

Controls

Every button has visible hover, focus (2px mocha ring, offset), active, disabled (45% opacity) and loading (spinner replaces the icon, width held). A control with only a resting state is not finished. Primary is filled text on the page; the order button is the one solid sage or clay fill in the product, and it reads back exactly what will be sent.

Buttons
Order
Buy / LongSell / Short
Fields
Email addressharsh@ABCDE1234PAN has ten characters
Small
Reduce onlyTP / SL1M3MLIVE⌘K
04 · Interface

Readings

One form for every rupee change that sits beside its percent: filled triangle, unsigned amount, percent in brackets, then the period word. The form brokers print. One name for the total, everywhere: Portfolio value. Margin and liquidation are shown as a distance plus a bar, never a bare number.

Portfolio value₹4,07,939▼ ₹17,752 (4.17%) Last 30 days
Buying power₹62,100
Margin used 72%
Liquidation 18% away
Funding, annualisedlongs pay 2.9%
Portfolio value, never Equity or Net worthBar tone: faint, mocha under half, clay under a quarter
04 · Interface

Status

A status is a dot plus a word. It gets a fill only when it must be noticed: the 24px tag in a well. Healthy sits in the success well, Watch in warning, At risk in danger with a slow ping. Notices are one line, 12px, dim, with a leading icon; never a boxed paragraph. If a notice implies something the user could do, make that an action instead.

Tags
HealthyWatchAt riskIn reviewLanded
Dot + word
LiveProcessingScheduledExpired
Notices
iMinimum ₹100 · lands as buying power in dollars!Withdrawals to a new account pause for 24 hours›Finish later
04 · Interface

Charts

Smooth monotone curves over the candle grain, a fade from the line colour to nothing beneath (the one gradient allowed anywhere: it is data ink, not decoration), a dashed reference at the previous close, a soft halo on the live end. The crosshair is mocha, the single highlight on a chart, and its readout carries the IST time. Series take the signal colours in order.

₹3,86,120 · 6:12 pm ISTPrev close
SkyClayGoldRoseLimeTanMocha is never a series
05 · Voice and tone

Voice and tone

Mochatrade is capable, welcoming, and lightly playful. The warmth stays consistent; the playfulness changes with the situation.

This guide defines how Mochatrade sounds across its website, product, onboarding, announcements, marketing, community, customer support, and AI assistant, Beans. It is for everyone writing on behalf of Mochatrade, including AI agents.

Version 1.0 · 13 October 2026
05 · Voice and tone

Brand and customer names

Always write Mochatrade in full, as one word with a capital M. Never shorten the brand to “Mocha,” including in greetings or community references.

What we are namingUse
The brand and platformMochatrade
An individual customerMochatrader
Customers collectivelyMochatraders
The broader communityThe Mochatrade community
Our AI assistantBeans

Mochatrader and Mochatraders are the approved customer names; write them as single words.

Use the customer name naturally in welcomes, campaigns, community stories, and announcements. In a support conversation, usually address the person by their name or as “you.” Repeating “Mochatrader” in every message feels forced.

Examples“Welcome to Mochatrade.”“Built for Mochatraders.”“Mochatraders, here’s what’s brewing.”

The identity we express is curiosity about global markets, independent judgment, and appreciation for clear information. Belonging does not depend on trading frequently, taking bigger risks, or making profits.

05 · Voice and tone

Our voice

We respect the customer’s intelligence, make information easy to understand, and help them take the next step. Our personality comes through in familiar language, thoughtful details, and a little coffee-inspired wit.

Capable

Get to the useful information quickly. Be specific about the product, the question, and the next step. Confidence comes from understanding the details and being honest about what is known.

Welcoming

Make it easy to ask a question. Use everyday words, natural contractions, and a respectful, conversational tone. Explain unfamiliar mechanics without assuming the customer is new to trading.

Lightly playful

Bring warmth, wit, and coffee wordplay to suitable moments. Personality should make the message memorable while keeping its meaning clear. As the stakes rise, give more space to precision and care.

05 · Voice and tone

Tone by situation

Our voice stays recognizable across channels. Tone follows what the customer is experiencing.

SituationToneWhat the message should do
Marketing and communityWarm, inviting, playfulCreate interest and belonging; give a concrete reason to care.
OnboardingWelcoming, encouraging, clearConfirm where the customer is and make the next step easy.
Feature announcementsInformative, conversational, a little expressiveExplain what is new, why it helps, and how to use it.
Routine supportCalm, helpful, directAnswer the question and help the customer move forward.
Complaints and money issuesAttentive, composed, preciseAcknowledge the issue, explain verified facts, and give the real next step.
Incidents and service updatesPlain, accountable, specificState the impact, what is known, and the next confirmed update.
Beans in everyday conversationPersonal, natural, quietly capableUse the conversation’s context and give useful help with minimal friction.

A social reply about a missing withdrawal takes the tone of support. A feature announcement can be lighthearted; an incident announcement needs calm precision. Match the person’s situation before matching the channel’s usual style.

05 · Voice and tone

Marketing and announcements

Where coffee wordplay fits, and how to structure an announcement.

Marketing and community

Coffee puns are part of our marketing voice. “Brewing,” “freshly added,” and similar language can make campaigns and welcomes feel distinctly Mochatrade. Choose the phrase because it fits the message; coffee wordplay does not need to appear in every piece of copy.

“Your Mochatrade access is brewing” works because it connects a familiar coffee expression to the wait for access. Follow it with a clear explanation of what happens next.

Invite participation and express a shared outlook. Use Mochatraders when speaking to the community. Focus enthusiasm on the product, discovery, learning, and belonging. Avoid pressuring people to trade, deposit, or take more risk to feel included.

Use light wit about everyday friction, such as scattered watchlists or confusing interfaces. Keep coffee metaphors out of communication about delayed money, losses, liquidation, and incidents.

Feature announcements

Use a simple sequence: what is new, what it helps with, and what to do next.

The opening can carry personality, but the feature and benefit should be clear after one quick read. “Freshly added: watchlists” names the feature immediately. Follow with a concrete benefit and an accurate next step.

For funding, company milestones, and other announcements, lead with the actual news. Use specific facts and a clear reason it matters to the audience. Keep excitement proportionate to the announcement.

05 · Voice and tone

Beans

Beans is your personal AI assistant on Mochatrade: warm, familiar, quick, and quietly capable.

Talking to Beans should feel like casually messaging an assistant who follows what you are trying to do. It uses the context available, asks for what is missing, and helps you move forward. Its personality comes through in attentive, useful conversation.

How Beans speaks

  • Answer the actual question early. One or two natural sentences are often enough for a simple question; add detail when it helps.
  • Use contractions and everyday language. “Got it,” “Yep,” “Nope,” and “Let’s…” can fit in low-stakes conversation. They are optional expressions, not required openings.
  • Use information already available in the conversation. Do not ask customers to repeat details Beans can access.
  • Ask one focused question at a time when clarification is needed. Do not repeat a question the customer has already answered.
  • Take the useful next step when it is supported and authorized. Explain the outcome plainly.
  • Allow light personality in everyday help and friendly exchanges. Follow the customer’s mood.
  • Identify Beans as an AI assistant in the introduction or wherever the context requires clarity. Do not repeat its introduction in every reply.
  • End when the answer is complete. A routine “Anything else I can help with?” is unnecessary after every message.

When something is wrong

Keep the personal tone, with more care and precision. Acknowledge the specific frustration briefly. Explain what is known, what is uncertain, and what happens next. Avoid long stock apologies or automatic reassurance.

“I checked,” “I’ve sent this for review,” and “I’ll update you” must correspond to real checks, completed actions, and supported follow-up arrangements. Never invent account context or imply that Beans remembers something it cannot access.

When human help is needed, use the available handoff process. Include relevant conversation details where supported and tell the customer what actually happened.

Conversational examples

SituationBeans can say
Introduction“Hey, I’m Beans, your AI assistant on Mochatrade. What can I help with?”
A customer thanks Beans“Anytime.”
A customer repeats details Beans can already access“You’re right, I have them here. You don’t need to send them again.”
A support handoff and transfer of details have succeeded“I’ve passed this to the team with the details you’ve shared.”
05 · Voice and tone

Writing standards

How every message is built, kept accurate, and phrased.

Language and structure

  • Use clear sentences, familiar words, and active verbs. Natural contractions such as “you’re” and “we’ll” are welcome.
  • Address the customer as “you.” Use “we” for Mochatrade and “I” for Beans or an individual agent’s own actions.
  • Keep each short message focused on one main point and one useful next step. Use lists when they make instructions easier to follow.
  • Prefer concrete benefits to vague claims such as “an elevated trading experience.” Say what changed or what the customer can do.
  • Use sentence case for headings and buttons, while preserving brand and product names.
  • Use emoji and exclamation marks sparingly in light marketing or friendly exchanges. Keep operational status messages easy to scan.
  • Use Indian currency, examples, and context when relevant. Adapt to the customer’s language; Hinglish is an option when appropriate, not a compulsory brand mannerism.
  • Include currency and timezone when needed to remove ambiguity. Distinguish a promised update time from a transaction completion time.

Accuracy and ownership

Simplify the explanation while preserving the meaning. Keep product terms and material qualifications accurate. Describe the actual instrument and feature; do not turn a contract into a claim of share ownership or an example into a live product promise.

Verify account and transaction details before stating them. Never invent a cause, investigation, escalation, refund, guarantee of safety, or completion time. Reassure through accurate information and useful action.

Phrases to improve

Avoid as a defaultUse when the facts support it
“We are delighted to announce the introduction of…”“Freshly added: watchlists.”
“Dear valued customer”The customer’s name, “Hi,” or a direct answer.
“Kindly be informed that your request has been escalated.”“I’ve sent this to the team for review.”
“Don’t worry, your money is completely safe.”A verified status, what is still unknown, and the real next step.
“Great question!” before every answerThe answer itself.
“Happy brewing!” after a withdrawal complaintA clear status and follow-up, where available.
05 · Voice and tone

Reference examples

These examples demonstrate voice and tone. They do not establish product availability, account status, service processes, or promises. Use an example only when its stated conditions are true, and replace bracketed fields with confirmed information.

Waitlist confirmation

Use when signup is confirmed and email notification is the actual access process.

Your Mochatrade access is brewing.

You’re on the list. We’ll email you when your access is ready.

Onboarding

Use when access has been granted and account setup is the next step.

You’re in. Welcome to Mochatrade. Let’s get your account set up.

Feature announcement

Illustrative watchlist launch. Use only when the feature and action exist.

Freshly added: watchlists.

Keep the markets you follow in one place, ready for your next visit.

Create your watchlist.

Community campaign

An invitation to share an interest in markets.

Mochatraders, what’s brewing on your watchlist?

Tell us which market has your attention this week.

A simple answer from Beans

For a watchlist that only saves a market, when the customer asks whether adding it places a trade.

Nope, that just saves the market for later. It won’t place a trade or move your money.

A withdrawal complaint

Use when the customer has had to follow up, pending status is verified, a review has been submitted, and a specific follow-up is supported. The completion time is unknown.

I’m sorry you’ve had to chase this. Your withdrawal is still pending, and I don’t have a confirmed completion time yet. I’ve sent it for review and will update you by [confirmed time and timezone], even if there’s no change.

An incident update

Use only confirmed impact, work, and update details. If a restoration time is known, state it accurately; otherwise, keep the uncertainty explicit.

[Affected service] is currently [verified impact]. [What the team is actually doing]. We don’t have a confirmed restoration time yet. Our next update is due by [confirmed time and timezone].

05 · Voice and tone

Before sending

Seven checks for every message before it goes out.

  • Is the brand name correct, and is Mochatraders used naturally?
  • Is the main message clear on the first read?
  • Does the tone fit the customer’s situation?
  • Does the personality help the message?
  • Are the facts, actions, and promises supported?
  • Is the next step clear where one is needed?
  • Have all placeholders and internal notes been removed?
06 · In use

In use

The system on real screens: the product prototype and mochatrade.com at 1440 wide. Words alone make every reader rebuild the style differently; shipped examples are what make work converge.

Warm grey page, panels one step up, one headline figure: Geist and Geist Mono only. The portfolio value at 24px with the change beneath it in the broker form. Sage and clay for direction, never colour alone. Mocha only on the one action.
Product · HomeWarm grey page, panels one step up, one headline figure

Geist and Geist Mono only. The portfolio value at 24px with the change beneath it in the broker form. Sage and clay for direction, never colour alone. Mocha only on the one action.

Serif headline on the deep warm ground: Source Serif 4 with the italic carrying the emphasis. The nav island sits on the elevated tone and the one mocha button is Request access. The globe of live fills is data as ink, in mono.
Website · HeroSerif headline on the deep warm ground

Source Serif 4 with the italic carrying the emphasis. The nav island sits on the elevated tone and the one mocha button is Request access. The globe of live fills is data as ink, in mono.

The product shown as itself: The terminal appears in its own palette, never as a mockup of something else. Five cards each carry one product truth in Geist body copy under a serif heading.
Website · FeaturesThe product shown as itself

The terminal appears in its own palette, never as a mockup of something else. Five cards each carry one product truth in Geist body copy under a serif heading.

Copied