The floor for Growth is 85% of list, so 15% is the most I can offer. I drafted a reply at 15% with a two-year term option, citing the playbook. Confidence 0.74, so it is waiting in your approval queue.
pricing.tsapproval.ts
guardrailspricing.tspricingFloor
1import { rule } from"@mokanata/guardrails";
2
3// Block any discount below the tier floor.
4exportconst pricingFloor = rule({
5 id: "pricing.floor",
6 when: (deal, tier) =>
7 deal.price >= tier.floor * 0.85,
8 onFail: "route_to_human",
9 severity: "block",
10 cite: true,
11notifiy: ["#deal-desk"],
12});
Fast
Drafts land in under four seconds, with the sources the agent read pinned underneath.
Calm
No red badges and no confetti. Only the eighteen threads below 0.80 confidence wait for you.
Shared
Agents and reps work the same thread. Take over mid-draft and the agent steps aside.
Foundations
Color roles
Each role is a surface paired with its foreground, measured live. Blue is the only saturated colour outside code.
Aa
Paper--background / --foreground
Aa
Card--card / --card-foreground
Aa
Popover--popover / --popover-foreground
Aa
Primary--primary / --primary-foreground
Aa
Secondary--secondary / --secondary-foreground
Aa
Muted--muted / --muted-foreground
Aa
Accent--accent / --accent-foreground
Aa
Destructive on paper--background / --destructive
Aa
Ink on paper--background / --ink
Aa
Muted on paper--background / --muted-foreground
Aa
Muted on pane--pane / --muted-foreground
Aa
Blue text on paper--background / --primary-text
Aa
Pane--pane / --foreground
Aa
Accent deep--primary-deep / --primary-foreground
Muted foreground (#5a6170) measures about 5.6:1 on paper and 5.2:1 on pane, so it clears 4.5:1 for small text. It is for secondary text: metadata, timestamps, counts and descriptions. The lighter offgray (#727a89) only tints graph paper, lips and shadows.
Palette
Every tint is a color-mix() off one of these tokens.
Brand
Accent--primary
Accent deep--primary-deep
Wash--wash
Highlight--highlight
Surfaces
Paper--background
Paper 2--paper-2
Pane--pane
Pane 2--pane-2
Shot--shot
Text
Foreground--foreground
Ink--ink
Muted--muted-foreground
Blue text--primary-text
Lines
Border--border
Line--line
Input--input
Ring--ring
Control edge--control
Offgray (decor)--offgray
Status
Destructive--destructive
Charts
Chart 1--chart-1
Chart 2--chart-2
Chart 3--chart-3
Chart 4--chart-4
Chart 5--chart-5
Sidebar
Sidebar--sidebar
Active row--sidebar-accent
Sidebar rule--sidebar-border
Editor-only syntax
Types--syn-1
Strings--syn-2
Numbers, errors--syn-3
Keywords--syn-4
Typography
One family everywhere: Inter Variable 4.0. Six roles, each with a default and a compact step, and three weights: 400 for text, 550 for headings and selected items, 700 only for the page title. No uppercase, no letter-spacing.
Role
Default · compact
Weight
Use
Specimen
display
28/34 · 24/30
700
The page title, once per page
Revenue at resting pulse
title
16/22 · 15/20
550
Section headings; dialog, sheet, drawer and alert titles
Approval queue
subtitle
14/20 · 13/18
550 titles, 400 text
Card, popover and question titles; leads, quotes, chat bubbles
Churn Watch
body
13/20 · 12/18
400, 550 selected
Control labels, menu and nav items, body copy, dialog content
Drafted at 0.74 confidence with 3 sources.
caption
12/16 · 11/14
400
Descriptions, meta rows, errors, group labels, tooltips, chips
Needs approval · 2 min ago
micro
11/14 · 10/12
400
Keyboard caps, counters, tiny badges. One line only
⌘K · 12 new
Sizes are written as size/leading in px. In code, call typeClass(role) from @mokanata/ui/lib/type-scale, with "compact" for small and dense controls, and add weight-semibold or weight-bold. The older type-* utilities are aliases of these roles.
Running text
When an agent drafts below its confidence threshold, the reply waits in the approval queue with every source it read. The rule that held it back lives in guardrails/pricing.ts, and you can open the thread to see why. Approve it, edit it, or take the conversation over yourself.
Spacing
4px base unit. Generous air around small, dense content.
4
8
12
16
24
32
48
96
Inside a component4–8px
Between related items12–16px
Between groups24–32px
Section padding48px
Between sections, hero top96–112px
Radius
Only buttons and small chips are rounded. Cards and sections are square.
none · 0Cards, sections, plans
xs · 2pxKbd, tiles, avatars, badges
md · 4pxButtons, fields, nav links
lg · 6pxEditor window top corners
full · 9999pxStatus dots only
Elevation
Flat drafting paper. Depth is hairlines; shadows are reserved for the lip, floating layers and the editor.
FlatCanvas and bands
HairlineCards, tiles, cells
LipButtons and tiles. Hover to see it drop.
Float · shadow-mdMenus, popovers, toasts
Big · shadow-bigThe editor window only
Offset · shadow-offsetOne highlighted card per section
Motion
Quiet and fast. Nothing enters on scroll.
--dur150ms
--easecubic-bezier(0.4, 0, 0.2, 1)
AnimatesButton and tile fill + lip, nav hover fill, link opacity
NeverLayout, sections, the editor, scroll entrances
:activetranslateY(1px) scale(0.99)
PulseStatus dots, only under prefers-reduced-motion: no-preference
Churn Watch is running
Rails and graph paper
Every section is a band; the column carries its own rules.
1120px column
--gridGraph-paper pitch, 6–40px
--grid-inkGrid strength, 0–20% of offgray
--nodeDiamond size, 0 hides them
--railOuter faint rule distance
--grainPaper noise opacity
Icons
Lucide at 14px inside buttons, 16px elsewhere.
14 · foreground
14 · muted
16 · foreground
16 · muted
Components · 01
Actions
Lipped buttons, a trailing shortcut on every primary action, and toggles for filtering the approval queue. The blue stays on one button per group.
Button
Triggers an action. Primary carries a trailing Kbd hint and a 2px inset lip that drops on hover.
TypicalVariants, in priority order
default · The one action per view that moves work forward.
outline · Secondary action next to a primary one.
secondary · Quiet actions in toolbars and card footers.
tinted · Brand moment that shouldn't outrank the primary.
ghost · Low-emphasis actions in dense rows and menus.
destructive · Opens the confirmation for an irreversible action. Pair it with its icon. On headers and cards it lives in ActionBar’s menu instead.
danger · The confirm button inside that dialog (ConfirmDialog). Only there.
link · Navigation inside running text. Ends in a chevron.
Sizes · xs → lgIcon sizes
With icon · leading, trailing, icon-only
States
default
hover
focus
active
disabled
loading
default
outline
secondary
tinted
ghost
destructive
danger
link
Edge case · long label in a fixed width
ActionBar
Header, panel and card actions: one visible primary, the rest behind More actions. Destructive items sit last in red and always confirm.
Page header
Card footer · sm
ButtonGroup
Joins related actions into one control: split actions, paging, steppers.
Split action
Paging with text
12 of 18
Vertical
Toggle
A single on/off control, like pinning a guardrail or muting an agent.
Default and outline
States
default
hover
focus
pressed
disabled
default
outline
ToggleGroup
Picks one of 2–5 options, like filtering the inbox.
Inbox filter
Sizes
Badge
Short status and metadata on threads, agents and records.
Copies a value and says so for two seconds, visibly and to screen readers.
With a label and icon-only
app.mokanata.com/invite/welcome-sam
BrandIcon
Identity-provider marks for sign-in buttons. Channels use ChannelIcon instead.
Continue with a provider
Components · 02
Inputs
36px fields on paper, a 4px radius to match the buttons, and labels in mono. Errors use the deepened red; the blue is reserved for focus and the submit.
Field
Wraps one control with its label, description and error. Every form row is a Field.
Typical
Shown to customers on every channel the agent replies from.
Floor must be at least 0.85 of the tier price.
Locked while the agent is live. Pause it to change.
Input
Single-line text. Pair it with a Label, or put it in a Field.
With label
States
default
hover
focus
disabled
invalid
input
File
InputGroup
An input with addons: icons, prefixes, shortcut hints or inline actions.
Search with shortcut
⌘ ⇧ P
https://
Composer
WhatsApp0 / 4096
Textarea
Multi-line text, like a system prompt or an internal note.
System prompt
Becomes the system prompt. Keep it under 2,000 characters.
Invalid and disabled
Select
Picks one value from a list of 5–15. Base Select needs items for its value label.
ModelNativeSelect
Combobox
Searchable pick from a long list, like assigning an agent.
Assign agent
Type “Legal” to see the empty state.
Checkbox
Independent options. Group them in a FieldSet with a legend.
Escalation rules
RadioGroup
One choice from 2–5 options that need a sentence each.
On guardrail failure
Switch
Settings that take effect immediately, like autonomy per account.
Autonomy
Drafts above 0.90 confidence go out without review.
The agent drafts but never sends.
Always requires approval.
Slider
Tunes a value inside a known range, with the number always visible.
Retrieval
0.78
0.3
InputOTP
One-time codes, like verifying a WhatsApp Business number.
Verification code
2
8
4
Sent by SMS to +44 20 7946 0958.
PasswordInput + PasswordStrengthMeter
New and current passwords. The toggle keeps one name and reports aria-pressed; the meter rates as you type.
New password
Strong
Calendar
Picks a date inline, like booking a meeting from a thread.
Book a meeting
October 2026
Su
Mo
Tu
We
Th
Fr
Sa
Date range picker
Sets the period for reports: presets apply at once, a drawn range applies with Apply.
Report range
Direction
RTL layouts flip with DirectionProvider plus dir on the wrapper.
RTL
يظهر للعملاء في كل قناة.
Autonomy settings
A complete form: FieldGroup rows, one primary submit with its shortcut.
Navigation
Ways through the inbox
Tabs switch queues, breadcrumbs anchor a record, the sidebar holds the product. Active states use the pane fill, never the blue.
Tabs
Switch between views of the same object. Counts sit in the trigger.
Default
Drafts waiting on a human before they go out. Oldest first.
Line
Vertical
3 flows · v12 published
Breadcrumb
Where a record sits. The last crumb is the page, not a link.
TypicalCollapsed + long label
Pagination
Long lists of contacts or runs. Keep the current page outlined.
With ellipsis
Navigation menu
The marketing nav: Product ▾ Resources ▾ then plain links.
Site nav
Menubar
App-level commands in the flow builder. Shortcuts sit right in muted mono.
Flow builder
Sidebar
The product shell. One active row in pane-2; counts right-aligned.
Mokanata
Work
18
Automation
8
Inbox · Needs you
18 threads need your sign-off
WhatsApp 9Email 6Legal terms 3
Data display
Records, ruled into cells
Cards are square, flat and hairlined. Tables are dense mono. The only lift is the flat blue offset on a card you want read first.
Card
A record you can act on. Full composition: header, content, footer.
Card · small and highlighted
Small for side panels. Highlight with a flat offset and graph paper, once per view.
Table
Contacts and runs. Mono cells, hairline rows, stage as a badge.
4 of 1,920 contacts · sorted by last touch
Channels
Agent
Amara Osei
Northwind Traders
WhatsAppEmail
Negotiation
$184,000
Closer
4m ago
Jonas Lindqvist
Fjord Logistics
LinkedIn
Qualified
$42,500
Triage
1h ago
Priya Raman
Kestrel Health
EmailTelegram
Proposal
$96,000
Meeting
Yesterday
Mateo Alvarez
Solano Foods International Holdings
Instagram
Closed won
$12,800
Onboarding
3d ago
Empty result
Name
Stage
Value
No contacts in Closed lost this quarter
Clear the stage filter to see all 1,920 contacts.
Chart
Inbound volume and agent trends. Blue ramp only; syntax colours stay in the editor.
Inbound by channel · today
Auto-send rate · 24h
StatTabs
Stat tiles that choose what the panel below shows, like an agent's trends. Use inside Tabs.
The chart for the chosen metric goes here: auto sent, last 14 days.
Item
Rows in a list: media, title, one line of detail, actions on the right.
CloserRunning
Enterprise renewals · Claude Opus
Churn WatchNeeds you
Usage dips on paid accounts
BillingPaused
Invoices and failed cards
Small, outline
Pricing & tiers FY27.pdf
Knowledge · synced 4m ago
Avatar
People only. 2px framed squares with serif initials; the dot is the one circle.
Sizes · status · fallback
AOJLPR
Group with count
DKMASO
+5
8 people on Northwind
Accordion
FAQ rows and settings that fold. One open at a time.
New agents draft every reply but send nothing. You review the drafts, then turn on autonomy per channel when the numbers hold.
Collapsible
Reasoning you can open on demand, like “Why this draft?”.
01Read the last 6 messages on WhatsApp and the open deal.
02Pulled the FY27 tier table from Pricing & tiers.pdf, p. 4.
03Checked deal.price ≥ tier.floor × 0.85. Passed.
Carousel
Browse a short set side by side: agent templates in the wizard.
Scroll area
A fixed-height stream that scrolls on its own, like live agent activity.
09:42Closer drafted a reply to Northwind on WhatsApp · 0.94
09:40Triage routed 6 Instagram DMs to Support
09:37Enrichment added title and LinkedIn to Priya Raman
09:31Guardrail blocked a discount below tier floor on Kestrel
09:28Meeting booked a demo with Fjord Logistics for Thu 14:00
09:22Churn Watch flagged Solano Foods: seats down 40% in 14d
09:19Closer auto-sent pricing follow-up to Amara Osei
09:11Triage merged two identities for Jonas Lindqvist
09:04Billing retried a failed card for Brightline · succeeded
08:58Onboarding sent day-3 checklist to Mateo Alvarez
Resizable
Split panes the user can drag: thread list beside the open thread.
Amara OseiCloser drafted a reply · 0.94
Jonas LindqvistCloser drafted a reply · 0.94
Priya RamanCloser drafted a reply · 0.94
WhatsApp · Northwind
“Can you do 15% if we sign this week?” Closer proposes 12% with a two-year term.
Aspect ratio
Screenshot placeholders. Dark shot inside a dashed frame 6px out.
Separator
Hairlines in the line colour, between groups or inline between metadata.
Northwind TradersEnterprise · 1,200 seats
Closer running3 tasksDana
Feedback
What the system tells you
Status speaks in ink and hairlines. Red is kept for things that will fail; the blue marks progress, not alarm.
Alert
A standing condition on the page. One action at most: top-right, or under the text when narrow.
WhatsApp token expires in 3 days
Reconnect +44 20 7946 0958 or agents stop replying on Friday.
Instagram is rate limited
Meta paused sends for 42 minutes. 17 drafts are queued and will retry on their own.
Toast
A short confirmation after an action. Base UI toast, mounted at the root.
Unknown-length work. Inside a button, it replaces the icon and disables it.
SizesSweepIn a button
Skeleton
Hold the layout while a record loads. Same shapes as the real thing.
SaveBar
Settings forms with unsaved edits. Appears only while the form differs from what's saved.
Dirty form
Saved value: Northwind Labs
You have unsaved changes
Empty
Nothing to show is good news here. Say so, then offer the next step.
No threads need you
Agents handled the last 212 conversations. Anything under 0.70 confidence will land here.
Overlays
Layers that float over the paper
Every overlay sits on bg-2 with a hairline ring and the one soft shadow the system allows. Each trigger below is real; its caption says what it opens.
Dialog
A focused edit that must finish or cancel, like editing an agent's draft.
Opens an edit form with the primary action pinned right.
AlertDialog
Confirm an action that changes what agents are allowed to do.
Opens a destructive confirmation.
Sheet
Context that sits beside the thread: the contact record, autonomy settings.
Opens the contact side panel from the right.
Drawer
The mobile composer. Swipe down to dismiss.
Opens a bottom quick-reply composer.
Popover
Explain a number in place without leaving the queue.
Opens the confidence breakdown.
HoverCard
Preview an agent or contact named inline.
Drafted by @closer 2 min agoOpens the agent profile on hover.
Tooltip
Name an icon-only action and its shortcut.
Opens a label with its keyboard hint on hover or focus.
DropdownMenu
Thread actions: grouped items, toggles, a submenu, and the destructive action last.
Opens thread actions.
ContextMenu
The same actions on right-click, for power users triaging fast.
Lumen Freight · pricing for 12 seatsRight-click this thread rowDraft ready
Command
Jump anywhere by name. Inline here; ⌘K opens it as a dialog.
Opens the command palette dialog.
No matches. Try a contact, agent or view.
Views
Needs youG N
Approval queueG A
Agents
CloserG C
Churn Watch
Contacts
Amara Okafor · Lumen Freight
Conversation
Threads across every channel
Customer, agent and human share one thread. MessageScroller owns the scrolling, Bubble owns the surface, and Marker records every handoff.
Channels
One mark per channel, in brand colour. ChannelLabel in text and table cells, ChannelBadge on records, ChannelIcon alone only with an aria-label. Pass mono on filled surfaces.
One WhatsApp conversation: the agent quotes, a guardrail holds a discount, a human takes over. Scroll up for history; the button jumps back to the latest.
Hi! We're moving our dispatch team off spreadsheets. What would 12 seats cost on Growth?
16:04
Closer · agent
Hi Amara, Growth is $40 per seat each month, so $480/mo for 12. Annual billing takes it to $5,760/yr with two months free.
16:04 · auto-sent · 0.94
Amara Okafor
Can you send that as a quote? Our finance lead needs a PDF.
16:11
Closer · agent
Here it is, valid for 14 days.
👍
lumen-freight-quote.pdfPDF · 184 KB
16:12 · auto-sent · 0.94
Today
Amara Okafor
Finance is asking for 25% off if we sign this week. Possible?
10:38
Closer held a draft: 25% is below the tier floor (15%). Routed to Priya.
Priya took over · 10:42
Priya Raman
Hi Amara, Priya here. I can do 15% on annual if you sign by Friday. I'll send a revised quote today.
10:44
Amara Okafor
That works. Send it over and I'll get it signed.
10:51
WhatsApp preview
A template or campaign as the customer gets it, in WhatsApp's own colours. Compose the parts; mark filled-in variables so they stay findable. For previews only, never for Mokanata's own threads.
NLNorthwind LabsBusiness account
Today
This business uses a secure service from Meta to manage this chat.
autumn-pilot.jpg
Hi Nadia, following up on the pilot for Larkspur. Would a 20-minute call help?
Reply STOP to opt out10:02
Book a call
See pilot pricing
Message
Trace
What an agent did before it wrote: one line per tool call, folded into a run. It sits apart from the reply bubble. Say the status in the title too (Searching, Couldn’t), because colour and pulse alone don’t carry it.
Searched the web for Larkspur’s vendor policy2.1 sPricing 40 seats on the pilot tierCouldn’t read Priya’s calendar
Questionnaire
An agent asks a human for a decision it isn't allowed to make alone.
Closer · needs a decision
Pending draft
A tinted bubble with its countdown and the shortcut to approve.
Closer · draft
Revised quote attached: 15% off annual, $4,896/yr for 12 seats. Valid until Friday.
Auto-sends in 0:42 · confidence 0.91
Agent reply
Agent text is Markdown with core syntax only: no raw HTML, no callouts, no heading IDs. While it streams, each update reparses the whole reply, and dangling blocks stay hidden until they have content.
Closer · agent
Writing…
Bubble variants
Each variant has one job. Keep them consistent across channels.
default
The human operator. Blue, so it stays rare.
secondary
Agent replies that already went out.
outline
The customer.
tinted
A pending agent draft.
muted
Internal notes.
destructive
A message a guardrail blocked.
ghost
Long agent reasoning with no surface.
Message sides
Customers sit at the start; your team, human or agent, at the end. Group consecutive rows.
Amara Okafor
Is onboarding included?
We have 3 regional depots.
09:12
Closer · agent
Yes. Growth includes a guided setup for every depot.
09:12 · auto-sent
Markers
System notes, handoffs and day dividers. Never a Separator with a label.
Today
Priya took over · 10:42
Guardrail: price below tier floor. Draft held.
Attachment states
Wire state to the real upload status. Errors say what went wrong and offer a retry.
lumen-freight-quote.pdfPDF · ready to attach
lumen-freight-quote.pdfUploading · 62%
lumen-freight-quote.pdfChecking against pricing sheet…
lumen-freight-quote.pdfUpload failed · file over 16 MB
lumen-freight-quote.pdfPDF · 184 KB
msa-v3.pdfsm · 92 KB
w9.pdf
depot-map.pdfvertical
Do & Don't
Rules that break first
Each pair renders a rule from zedative.DESIGN.md. The right-hand frames are deliberate counter-examples.
One primary action per group
Do
One blue button, with its shortcut hint. Everything else is outline or ghost.
Don't
Two blue buttons compete, and neither says which key fires it.
Three weights
Do
Inbox at resting pulseApproval queue18 drafts wait under your approval threshold.
400 for text, 550 for headings and selected items, 700 only for the display page title.
Don't
Inbox at resting pulseApproval queue18 drafts wait under your approval threshold.
A bold section heading competes with the page title, and a 15px label sits off the six-role scale.
No uppercase or letter-spacing
Do
Needs approvalRenewal follow-up for Lumen Freight
Hierarchy comes from size and weight. An eyebrow is a plain caption in sentence case.
Don't
Needs approvalRenewal follow-up for Lumen Freight
Capitals and wide tracking shout, read slower, and add a seventh style the scale does not have.
Body is ink-coloured
Do
The Closer agent drafted 42 replies overnight. 18 sit under your approval threshold and wait in the queue.
Inter in --ink. Black is for headings and labels.
Don't
The Closer agent drafted 42 replies overnight. 18 sit under your approval threshold and wait in the queue.
A paragraph in pure black reads like a different product.
Square cards, depth from hairlines
Do
Closer · v12Renewal follow-up94% auto-sent this week
0 radius, a 1px border, no shadow. A highlighted card gets a flat offset.
Don't
Closer · v12Renewal follow-up94% auto-sent this week
Rounded corners, a soft drop shadow and a gradient fill: all three are banned.
Keep the blue scarce
Do
WhatsApp0.94Closer drafted a reply
At most two blue moments per viewport above the footer.
Don't
WhatsApp0.94Closer drafted a reply
Blue icons, badges, links and buttons all at once: nothing stands out.
Recipes
Named components, rebuilt
The DESIGN.md's recipes assembled from shadcn components and tokens only. If one needed a raw value, the token map would be incomplete.
Testimonials
We stopped triaging WhatsApp by hand in week one. The queue only shows what actually needs a human, and it cites where every number came from.
AO
Amara OkaforHead of Sales · Lumen Freight
Our Closer agent drafts renewals at 2am, and nothing over $100k leaves without my sign-off. That guardrail is why legal said yes.
TR
Tomás ReyesRevOps Lead · Northwind
Nine channels, one thread per customer. Handoff time dropped from hours to four minutes, and I can see why each draft was written.
Revenue teams spend their mornings copying the same answer into nine different apps. We built Mokanata so that work happens overnight, by agents, and lands in front of you as a short queue of decisions.
The rule we never bend: an agent that isn't sure asks. Every draft shows its confidence and its sources, and anything risky waits for a human. Autonomy is something you grant, account by account.
Noor HaddadCo-founder, Mokanata
R
Example screen
Command Center
One realistic screen built only from the tokens and components above.
Command Center
Approval queue
1,284 actions in the last 24h · 18 need your sign-off
MS
Mei Sato· Kinto LogisticsWhatsApp
Hi Mei, the 12-seat Team plan comes to $588/month. I've attached the quote with the annual discount applied.
0.94Closercites pricing.md §3, deal #4821
JB
Jonas Berg· Halvard ABEmail
Jonas, your renewal is on 14 Nov. Usage is up 40%, so I'd suggest moving to Fleet before then.