The system in nine rules

Everything below is an instance of one of these. If a decision is not covered here, it has not been made yet — do not infer it from a component.

Three grounds, and there is no fourth. White, cream, ink. A pale tint of the brand hue is the one ground that cannot earn its place — too close to white to read as a change, too close to the accent to read as a neutral.
The ink is also the type. --bg-dark and --text are one value, so a dark section is the page's own body copy enlarged into a surface rather than a new colour.
One accent hue. No second brand colour. Range comes from the eleven-step ramp, and a gradient moves along it, never between hues.
Neutrals split by job. Surfaces and rules take the paper hue; text takes the ink's. A blue-tinted card on cream is 177° of opposition and reads as a clash at any chroma.
Weight carries a headline, not colour. Reach for a heavier weight before reaching for the accent. The reference this was measured against carries more at worse contrast, because it sets body copy at 600 and display at 900.
Bands are square, objects are rounded. A band is the page's ground for a stretch and has no corners; an object sits inside the measure and rounds at --radius-sm.
Body text clears APCA 75, secondary 60. Not the WCAG ratio, which is too lenient exactly where this palette lives — it rates the accent on the ink a comfortable pass at Lc 21.
A page may lay itself out. It may not restyle the system. Grids, positioning and one-off spacing are a page's business; a selector named for a card or a section is a fork of one.
Composition flows one way. chrome and features compose bands, bands compose molecules, molecules compose atoms. A feature belongs to one page.

Bands

Three, and there is no fourth. White, cream, ink — the pale tint of the brand hue that used to sit between them is deleted: too close to white to read as a change of ground, too close to the accent to read as a neutral. --bg-dark and --text are the same value, so a dark section is the page's own type enlarged into a surface rather than a new colour.

--bg #ffffff · white

The default. Most sections.

--bg-warm #f4efe6 · cream

Paper. Long-form, logo walls, anything editorial.

--bg-dark #0f2639 · ink

The ink. Also --text — the band is the type, inverted.

--bg-dark-card #1f374c · surface

A card lifted off the ink.

--bg-dark-muted #2c465d · surface

Also the dark border.

Surfaces — not interchangeable with bands

Component fills. Reaching for one of these as a section ground is what made the page read as a single sheet: at 0.033 of lightness from white, a surface used as a band is invisible as a band.

--bg-alt #f7f4ee

Card fills, inputs, image placeholders. NOT a section ground.

--blue-faint #f4f5f7

Ramp 50. A wash inside a component.

--blue-tint #e6eaf0

Ramp 100. The deeper component wash.

The ramp

One hue, eleven steps, generated in OKLCH from a single base. Range is the mechanism — there is no second accent, and a gradient may move along the ramp but never between hues. Try another midpoint with RAMP_BASE=#RRGGBB npm run dev.

50 #f4f5f7

100 #e6eaf0

200 #cfd8e8

300 #abbde3

400 #6a8fe4

500 #315EDB

600 #1842d6

700 #1032b4

800 #0a258c

900 #051867

950 #020d46

Named roles

--blue-fg #ffffff

--blue-rule rgba(49, 94, 219, 0.3)

--blue-fg-wash rgba(255, 255, 255, 0.22)

--blue #315EDB

--blue-light #6a8fe4

--blue-faint #f4f5f7

--blue-tint #e6eaf0

--blue-text-dark #abbde3

--blue-strong #1032b4

Tokens

74 declarations, parsed from paletteToRootCss(). Adding one to projections.ts lands it here with no edit to this page.

Colour

--bg #ffffff

--bg-alt #f7f4ee

--text-inverse #f7fbfe

--text-dim-mark #929ea8

--border #e8e4dc

--blue-fg #ffffff

--success #0f7a4f

--success-dark #3fbf85

--warning #8a5f0a

--error #c02a24

--error-dark #f0736a

--error-tint rgba(192, 42, 36, 0.1)

--text-dim #4e5a66

--bg-warm #f4efe6

--text #0f2639

--text-secondary #425260

--text-muted #425260

--blue-rule rgba(49, 94, 219, 0.3)

--success-tint rgba(15, 122, 79, 0.1)

--bg-scrim rgba(255, 255, 255, 0.92)

--blue-fg-wash rgba(255, 255, 255, 0.22)

--overlay-scrim rgba(9, 9, 11, 0.45)

--bg-dark #0f2639

--bg-dark-card #1f374c

--image-wash rgba(16, 50, 180, 0.62)

--image-veil rgba(15, 38, 57, 0.35)

--bg-dark-muted #2c465d

--border-dark #2c465d

--blue-50 #f4f5f7

--blue-100 #e6eaf0

--blue-200 #cfd8e8

--blue-300 #abbde3

--blue-400 #6a8fe4

--blue-500 #315EDB

--blue-600 #1842d6

--blue-700 #1032b4

--blue-800 #0a258c

--blue-900 #051867

--blue-950 #020d46

--blue #315EDB

--blue-light #6a8fe4

--blue-faint #f4f5f7

--blue-tint #e6eaf0

--blue-text-dark #abbde3

--blue-strong #1032b4

--text-dim-dark #c1d4e4

--band-grid rgba(255, 255, 255, 0.04)

--band-bloom rgba(49, 94, 219, 0.22)

--selection rgba(49, 94, 219, 0.15)

Font stacks

--font-display: 'Hanken Grotesk', system-ui, sans-serif
--font-body: 'Hanken Grotesk', system-ui, sans-serif
--font-reading: 'Newsreader', Georgia, serif
--font-label: 'Hanken Grotesk', system-ui, sans-serif
--font-code: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, monospace

Radii

--radius-xs 0.25rem

--radius-sm 0.5rem

--radius-md 0.75rem

--radius-lg 1rem

--radius-xl 1.5rem

--radius-2xs 0.125rem

--radius-pill 9999px

Shadows

--shadow-hairline

--shadow-sm

--shadow-md

--shadow-lg

--shadow-lg-dark

--shadow-blue-focus

--shadow-blue-focus-dark

Weights

--weight-normal — 400 — Hanken Grotesk at this weight
--weight-medium — 500 — Hanken Grotesk at this weight
--weight-semibold — 600 — Hanken Grotesk at this weight
--weight-bold — 700 — Hanken Grotesk at this weight
--weight-extrabold — 800 — Hanken Grotesk at this weight
--weight-black — 900 — Hanken Grotesk at this weight

Text colours

--text-inverse #f7fbfe
--text-dim-mark #929ea8
--text-dim #4e5a66
--text #0f2639
--text-secondary #425260
--text-muted #425260
--text-dim-dark #c1d4e4

Type

A modular scale on a major third, anchored on a 16px body. Each row is set at its own token, so a value that moves shows here.

--text-label-sm The open engine for AI

--text-xs The open engine for AI

--text-label The open engine for AI

--text-sm The open engine for AI

--text-base The open engine for AI

--text-body The open engine for AI

--text-lg The open engine for AI

--text-xl The open engine for AI

--text-2xl The open engine for AI

--text-deck The open engine for AI

--text-pull The open engine for AI

--text-3xl The open engine for AI

--text-metric The open engine for AI

--text-hero The open engine for AI

Headline — `as` × `size` atoms

Hero: a claim the page is built on

Section: what this part is about

Sub: one step down

Prose — `reading` (serif, long-form) molecules

Newsreader, for writing somebody sat down to read. Posts, guides, theses, comparisons.

A two hundred word preamble on a marketing page is not that, and setting it in the serif makes the switch back to sans at the next section read as a mistake.

Prose — `ui` (sans, marketing) molecules

Hanken Grotesk, for surfaces where prose is one element among cards and labels.

Entry treatments

Four, and they are not interchangeable. PageHeader opens a content page and is the one to reach for by default — seventeen pages use it. The other three each answer a case it does not.

`PageHeader` — `measure="content"` bands

The measure MUST match the body below it, or the h1 hangs off the edge of the first paragraph.

`PageHeader` — `measure="wide"` bands

`PageHero` — `tone="warm"`, marketing bands

§ 01 — Services

A marketing page opens on twelve columns

Copy on the left, an optional aside in the right margin.

`PageHero` — `tone="plain"` bands

The same hero on the page ground

Reach for plain when the section under it already carries a tint.

`PageHero` — `align="centre"`, the role opener bands

NimbleBrain for Marketing

Your marketing engine, built on agents you own.

Three lines and nothing else. A page that opens on what it is rather than on a claim; the aside is dropped, because there is no margin to hang one in.

`PageHeader` — `measure="full"`, the case-study opening bands

`PageHero` — `tone="dark"`, the ink opener bands

About

A band carries the headline
where white would go flat.

One page in, not one section in. Grid and bloom come with the ground.

`HeroCentered` — homepage, product underneath bands

The accent lands on the words that carry the claim

Centred, with the product directly under the buttons and proof under that.

Primary action Secondary

Your CRMYour TasksYour Company KnowledgeYour OperationsYour Apps

Contacts Organizations Opportunities

Dalia Okonkwo Meridian Health Qualified
Priya Raghunathan Lumen Freight Enriched
Tomas Beckwith Cascade Provisions Follow up
Ingrid Halvorsen Arbor & Finch New

Today

Review the Meridian renewal Created by NimbleBrain Due today
Send onboarding documents Completed by NimbleBrain Done
Investigate support escalation Avery Reyes In progress

Waiting

Customer approvalArbor & Finch 3 days
Finance reviewLumen Freight 1 day

What do we tell a customer asking to cancel an annual plan? Answered from 3 sources

Product documentation 412 pages
Customer history 1,240 accounts
Process manuals 68 documents
Meeting notes 302 transcripts
Policies 24 documents

5 sources connected · indexed continuously

ReceivedUnderstoodRoutedResolved

New customer requestMeridian Health Handled automatically
Refund above thresholdArbor & Finch Needs approval
Damaged shipment claimLumen Freight Assigned to Avery
Renewal quote requestCascade Provisions Handled automatically

Precision OutboundCustomer ResearchSupport TriageContract ReviewCompany BrainInventory Assistant + Build an app

Built on your connected tools

NimbleBrain

You Find the customers we should follow up with this week and prepare the next steps.Clear anything routine, and tell me what still needs me.What do we tell a customer asking to cancel an annual plan?Keep requests moving, and flag anything that needs a person.Build us something for tracking inventory across the warehouses.

NimbleBrain Read 24 customer records Checked recent conversations Enriched 19 contacts Identified 6 opportunities Created 4 tasks Completed 3 routine actions Drafted 2 emails Searched 8 company sources Found 3 relevant procedures Cited the current policy Processed 12 requests Resolved 9 automatically Escalated 2 for approval Connected company data Created application workspace Published to your workspace

NimbleBrain Engine · 7 systems connected · Running in your environment

Bands & sections

Full-bleed. Each carries its own ground, which is why a page reads as a sequence rather than one long white column.

WarmSection bands

Warm

On the warm ground

Editorial surfaces and the tail of a long-form page.

FeatureSplit — three grounds, alternating edge bands

Connectors

Copy one side, the running product the other

A capability claim that arrives beside the screen it happens on is checkable.

Required, not a slot
Alternates down the page

The connector directory as it renders in the product.

Skills

Reversed, on the alt ground

Alternation is the mechanism that makes six of these read as six things.

The skills surface as it renders in the product.

Dark

On the dark band

One per page. The window frame flips with the ground.

ImageStatement bands

One sentence over a full-bleed photograph. The scrim belongs to the component rather than to whoever picks the picture, because type over a photograph is a contrast failure the moment somebody swaps it. Shown Default first: neutral ink wash, one line, left. Then the accent treatment with a chip row, which blurs the frame and washes it in the brand blue for a band that is punctuation rather than a caption.

A room mid-engagement, a process flow on the board and the team working against it.

One sentence, and the scrim that keeps it readable.

The same band, washed in the accent

One short phrase
Another
A third

ReasonGrid — rule, then card bands

The container is a density decision, not a taste one. `rule` is the default and the right answer at six items. `card` is for a short set — four is the width it was drawn for — opening a page, where each item must read as a thing rather than as a column. Do not take `card` to six.

A rule between items, not six borders

Count the chrome before adding more.

A container earns its border

Six bordered boxes is a lot of chrome for six short paragraphs.
Prefer a rule

Reach for a border when the thing needs to read as a separate object.
Then stop

A card, a rule, a row of nodes and a line is four treatments for four words.

The card variant

Four panels off the blue ramp

Ownership

The glyph loses its chip here — the panel is already the ground.
Control

Two adjacent ramp steps, so the tint moves when the accent moves.
Visibility

Title one step larger, because the card gives it room to carry the item.
Openness

Four across, two at 900px, one at 600px.

BuildSteps — three generated figures bands

How it gets built

Connect, describe, run.

Every figure is markup on tokens, and every one holds a finished state under prefers-reduced-motion.

01
Connect

Marks drifting at three speeds behind a mask. Says many, without a number that goes stale.
02
Build

A description being written, because describing is what building is here.
03
Run

Rows arriving, the last one the thing delivered. Times relative, counts absent.

RunDemo — the product, not a diagram of it bands

What it looks like

Inbound Lead Triage, once it is built.

One script per use case, and the only figure on the site that shows the product rather than the process.

Which inbound is worth my time today?

Thirty-four came in since six. Three clear the bar you set:

Northwind Logistics — 120 seats, asked about SSO
Cassia Group — referral from an account you closed in March
Delta Mill — third request from them this quarter

The rest are queued by score and every one of them already has an acknowledgement out.

UseCaseGrid — centred header, with the demoted row bands

Processes offered as a choice

Also runs

Deal Intake

See every use case

FlowFigure molecules

A short sequence: 1. Something starts it, The step before the one that matters, so the middle reads as a middle.; 2. The step that is the point, One per figure. Marked, because the others are context for it.; 3. And what follows, The after. Three rows is the width a note can carry a sentence.. The result: What it produced, Set apart by a rule: an outcome is not another step..

SchemaToControls molecules

tool_schema.json

{
  "name": "approve_payment",
  "parameters": {
    "properties": {

"customer_id": { "type": "string" }
"amount": { "type": "number" }
"approved": { "type": "boolean" }

    }
  }
}

Customer ID Enter customer ID
Amount 0.00
Approved

Approve payment

A tool schema on the left declares three properties: a customer ID string, an amount number, and an approved boolean. On the right, the controls rendered from it are a text field, a number field and a toggle, in the same order, above the button that calls the tool.

OwnershipSplit molecules

Their side keeps: What they already decide, What they already hold, What they already log. What is added adds: Something they did not have, Something adjacent to theirs. The two meet where the two meet here. Nothing appears in both columns, which is the whole claim.

BoundaryDiagram molecules

Your infrastructure: Agent runtime, MCP app, Your database, connected to each other. NimbleBrain sits outside that boundary with no connection into it. Outside the request path. Nothing crosses this line.

PlatformStack molecules

A three-layer example stack, read top down, with the self-host / managed fork beneath it.

SecurityPromise bands

Security by design

Three promises,
each proved differently.

A list of security claims is the thing readers skim. Each card carries its own kind of evidence.

Verifiable

You can read the thing that makes the claim.
- Apache 2.0
Apache 2.0. Fork it, and keep the version you hold.
Read the source
Private

The runtime executes inside your own boundary.
- Runs on your infrastructure
- Credentials are never pooled
- Nothing is trained on your data
Isolated

A session is handed exactly one workspace.
1. 1 A session opens
2. 2 It gets one workspace’s tools
3. 3 Membership re-checked next run

ProductCallout bands

Synapse

An ink panel inside the measure, not a band.

A full-bleed dark section mid-page reads as the page ending. Held in the container it reads as an object on the page, and the closing CTA keeps the one full-width ink band.

Primary action

PillarBand bands

A claim, not an adjective

The copy carries a number, a named system or a mechanism — 33 connectors, 300+ through a gateway.
Marks come from the pack

lucide-astro, not three bespoke SVG diagrams nobody can decode at 96px.
Three, and no more

A band where every item is emphasised has emphasised nothing.

CapabilityGrid — tile, then list bands

tile — a page's primary choice

list — a page's way out

LogoMarquee — light, then dark bands

Trusted by

Runs on

LogoMarquee — two rows, counter-drifting; glyphs carry a name bands

Any model. Any cloud. No rewrite.

WorksWithGrid — dark, then light bands

What it works with

Shown before the grid expands; the rest sit behind the toggle.

Salesforce
Slack
Notion
GitHub With a note

A sample, not the whole catalogue.

WorksWithGrid — chip, with a way out bands

It runs in the systems you already have

A strip, not a screen: the marks are a precondition, not the argument.

Salesforce
Slack
Notion
GitHub

Explore every integration

SecurityBand — dark, then light bands

Security

Controls, with their real status

A status that overstates is worse than no band at all.

rls In place

Row-level isolation

Enforced in the database.

byok By architecture

Bring your own key

Planned in the architecture.

pen On request

Penetration report

Shared under NDA.

No training on your data
Deployed in your boundary

Security review Bring your reviewer Talk to us

EventLog molecules

The record, drawn, for the section that claims there is one. Markup on tokens like `IndustryMark` and `FlowRail` — a screenshot of a log dates the moment an event name changes. It carries no total, no trend and no axis: it is an example of a row, not a measurement.

conv_8f3a Workspace · Engineering

09:14:02 run.start sarah@acme.co
09:14:05 llm.response 1,204 tokens
09:14:11 run.done $0.031

CompareTable bands

Two ways of having the same thing, on the same line. A real table, so a screen reader announces the mode with the cell; under 760px the header is replaced by a per-cell label rather than hidden. Shown on `dark`, which is the ground to reach for: the panel stays white, so the table reads as a sheet laid on the band rather than as a region of it. On cream the elevation has nothing to lift away from.

Deployment

Two columns, six questions

A cell holds a phrase. The moment it holds a sentence with a clause in it the row stops being comparable.

Compared	Self-hosted Your infrastructure	Managed We operate it
Where it runs	Your cluster	A namespace on ours
Who holds the data	You. We never receive it.	You own it; we hold it
Upgrades	Your call	We upgrade

The caveat no cell has room for goes here.

CompliancePosture bands

The band that can say no. `none` is a renderable state on purpose — a row of badges that only ever reads yes is a row nobody believes — and it takes the open shield rather than a different shape, so the row still reads as one set. Two further states are not shown: `certified`, for something an outside auditor confirmed, and `architecture`, where the guarantee follows from where the runtime executes.

Where each framework stands

SOC 2 Type II

Ready

Controls operating. Audit not yet run.
GDPR

On request

A processing agreement on request.
Disclosure policy

Published

Published on the public repository.
HIPAA

Not yet

No business associate agreement today.

One line, and only where the badges leave something unsaid.

OpenSourceBand bands

Open source

The parts that are open

Where the code and the conversation live.

GitHub The runtime
Docs How to run it
Discord Where questions go

LeaderGrid — real data features

SplitHero bands

The fourth opener, and the one none of the other three do: a figure stretched to the full height of a column beside a card. `PageHeader` is a centred measure, `PageHero` puts an aside in the margin, `HeroCentered` is the homepage shape.

Wed, Aug 261:00 PM ET90 minutesFree

Webinar: A title that runs to two lines

One paragraph under it, and then whatever the aside slot holds.

Mat Goldsborough CEO & Co-Founder One line on why this person, for this audience.

HostFrame molecules

Faces, because people register for people. At one host the cell is square so the headshot shows whole; two or more share the width. Its `note` is written for the page it appears on rather than read from the person's leadership entry, which describes a whole career and lands on a themed event as credentials from another field.

Mat Goldsborough, CEO and Co-Founder of NimbleBrain — Mat Goldsborough CEO & Co-Founder

Matthew Gerard, Principal and Co-Founder of NimbleBrain — Mat Goldsborough CEO & Co-Founder

RegistrationPanel molecules

The one white object on an ink band, which is what makes it read as the thing to press. It carries its own label colour for that reason: `Label` picks a lighter blue inside `.section-dark`, correct on the band and wrong on a white card sitting in it.

Testimonials bands

No portrait and no monogram: we hold no photograph of the people who write these, and initials in a circle are a portrait-shaped hole announcing the portrait is missing. The cards are the exception the border rule names — each is a different person, and a rule between them would read as one voice in paragraphs.

Last session

What attendees said

Wonderful workshop. Very useful take aways.
A. Attendee
Looking forward to a continued series.
B. Attendee
Useful, and shorter than I expected.
C. Attendee

Fixture data. Real ratings carry their count and their source.

CustomerStories bands

Proof

Numbers belong to case studies

Specimen

4.2h → 18mPer cycle

A story card, with a stat that has a source

No marketing page asserts a client outcome. Proof lives here.

See the full story

LatestNews bands

Blog

Latest

Aug 1, 2026
A post the homepage points at
Jul 18, 2026
And the one before it

FAQSection — one FAQ, and it emits FAQPage schema bands

FAQ

Narrow on purpose

An answer is prose, and prose at full page width is hard to track.

Why <code><details></code> rather than a scripted accordion?

It is open before any script runs, keyboard-operable for free, findable by in-page search, and it prints expanded.

Does it emit FAQPage schema?

Yes — every FAQ on the site does now. Three pages did not before.

IntegrationDirectory bands

Platform

Integrations

It opens the page: it carries the h1, so nothing sits above it.

6 integrations

Any Remote MCP The pinned catch-all, drawn with the accent tint. Gmail Read, send, draft, thread, and label mail. Linear Page two, at a page size of four. Neon The monogram stands in where there is no mark. Notion Only in the A–Z view. Slack Messages, threads, channels, and search.

IntegrationHero bands

Use Gmail with NimbleBrain.

Two marks joined, one claim, two ways forward. No eyebrow: a label over this headline would be labelling itself.

The action The alternative

ActionGrid bands

Actions

Everything the agent can do in Gmail

One mark treatment, no descriptions. The name is a rendering of the tool's real name, so it cannot be wrong.

6 actions

Send email
Create email draft
Add label to email
Move to trash
Fetch emails
Search people

AskPanel bands

In practice

Nobody types an action name

Tabs change the ask; the chips are matched out of the connector's own action list.

Draft replies to anything from a customer sitting more than two days.

Calling 2 actions in Gmail

Fetch emails
Create email draft
Working

HowItWorks bands

How it works

Three steps, in an order

Always three. The numeral leads, the rule runs above, and there is no second row to wrap onto.

Install it

Out of the directory, in a click.
Connect the account

Under your credentials, never pooled.
Ask for the work

In plain language, or on a schedule.

PlatformShowcase features

Platform

Tabs carry the detail

One line under the headline; the tabs do the rest.

Connect what you already run

The systems stay where they are.

Credentials

Scoped per workspace.

ContactForm features

A form on the page

Under the title, inside the card head.

This form needs JavaScript to confirm it sent. Open it directly instead .

CTASection — the closing band bands

One thing to do

The action

With a way out, when the page has earned one

The action

The alternative

Long-form furniture

The layout renders these around a markdown body, driven by frontmatter. A content file cannot reach any of them — see CLAUDE.md.

TLDRBlock — three variants molecules

CalloutAccent molecules

Byline molecules

Mat Goldsborough CEO, NimbleBrain

Aug 12, 2026 · 7 min read

ArticleToc molecules

AuthorBlock — full, then compact molecules

Mat GoldsboroughFounder & CEO, NimbleBrain

Mat Goldsborough·Founder & CEO, NimbleBrain

ShareRow molecules

RelatedContent bands

DirectoryNav chrome

Figures

Generated, never exported. An exported image dates and has to be redrawn every time the palette moves. A figure must not imply a claim the page is not making.

VoiceMemo molecules

You said

The operator's side of the same exchange, in their words.

IndustryMark — deterministic from a seed atoms

ProductShot — light ground molecules

Your CRMYour TasksYour Company KnowledgeYour OperationsYour Apps

Contacts Organizations Opportunities

Dalia Okonkwo Meridian Health Qualified
Priya Raghunathan Lumen Freight Enriched
Tomas Beckwith Cascade Provisions Follow up
Ingrid Halvorsen Arbor & Finch New

Today

Review the Meridian renewal Created by NimbleBrain Due today
Send onboarding documents Completed by NimbleBrain Done
Investigate support escalation Avery Reyes In progress

Waiting

Customer approvalArbor & Finch 3 days
Finance reviewLumen Freight 1 day

What do we tell a customer asking to cancel an annual plan? Answered from 3 sources

Product documentation 412 pages
Customer history 1,240 accounts
Process manuals 68 documents
Meeting notes 302 transcripts
Policies 24 documents

5 sources connected · indexed continuously

ReceivedUnderstoodRoutedResolved

New customer requestMeridian Health Handled automatically
Refund above thresholdArbor & Finch Needs approval
Damaged shipment claimLumen Freight Assigned to Avery
Renewal quote requestCascade Provisions Handled automatically

Precision OutboundCustomer ResearchSupport TriageContract ReviewCompany BrainInventory Assistant + Build an app

Built on your connected tools

NimbleBrain

You Find the customers we should follow up with this week and prepare the next steps.Clear anything routine, and tell me what still needs me.What do we tell a customer asking to cancel an annual plan?Keep requests moving, and flag anything that needs a person.Build us something for tracking inventory across the warehouses.

NimbleBrain Read 24 customer records Checked recent conversations Enriched 19 contacts Identified 6 opportunities Created 4 tasks Completed 3 routine actions Drafted 2 emails Searched 8 company sources Found 3 relevant procedures Cited the current policy Processed 12 requests Resolved 9 automatically Escalated 2 for approval Connected company data Created application workspace Published to your workspace

NimbleBrain Engine · 7 systems connected · Running in your environment

ProductShot — ink ground molecules

Your CRMYour TasksYour Company KnowledgeYour OperationsYour Apps

Contacts Organizations Opportunities

Dalia Okonkwo Meridian Health Qualified
Priya Raghunathan Lumen Freight Enriched
Tomas Beckwith Cascade Provisions Follow up
Ingrid Halvorsen Arbor & Finch New

Today

Review the Meridian renewal Created by NimbleBrain Due today
Send onboarding documents Completed by NimbleBrain Done
Investigate support escalation Avery Reyes In progress

Waiting

Customer approvalArbor & Finch 3 days
Finance reviewLumen Freight 1 day

What do we tell a customer asking to cancel an annual plan? Answered from 3 sources

Product documentation 412 pages
Customer history 1,240 accounts
Process manuals 68 documents
Meeting notes 302 transcripts
Policies 24 documents

5 sources connected · indexed continuously

ReceivedUnderstoodRoutedResolved

New customer requestMeridian Health Handled automatically
Refund above thresholdArbor & Finch Needs approval
Damaged shipment claimLumen Freight Assigned to Avery
Renewal quote requestCascade Provisions Handled automatically

Precision OutboundCustomer ResearchSupport TriageContract ReviewCompany BrainInventory Assistant + Build an app

Built on your connected tools

NimbleBrain

You Find the customers we should follow up with this week and prepare the next steps.Clear anything routine, and tell me what still needs me.What do we tell a customer asking to cancel an annual plan?Keep requests moving, and flag anything that needs a person.Build us something for tracking inventory across the warehouses.

NimbleBrain Read 24 customer records Checked recent conversations Enriched 19 contacts Identified 6 opportunities Created 4 tasks Completed 3 routine actions Drafted 2 emails Searched 8 company sources Found 3 relevant procedures Cited the current policy Processed 12 requests Resolved 9 automatically Escalated 2 for approval Connected company data Created application workspace Published to your workspace

NimbleBrain Engine · 7 systems connected · Running in your environment

Blog

FeaturedPost molecules

Featured

The post at the top of the index

August 5, 2026

One card, wider than the rest, carrying a description the others do not get.

Read the piece

BlogCard molecules

Jul 30, 2026 · 6 min

A post in the grid

Jul 12, 2026 · 11 min

And another, with a longer title that has to wrap

IntegrationCard molecules

Gmail Read, send, draft, thread, and label mail. Notion Read and write workspace pages. Neon Serverless Postgres branches and queries — the monogram stands in where there is no mark. Any Remote MCP The pinned catch-all, held at the front of the grid.

Subscribe — inline, section, dark bands

Atoms

Button — four variants atoms

Primary Accent Outline Ghost

Label — five colours atoms

Muted Blue Error Dark

Inverse — on the dark ground

StagePips atoms

G2Badge atoms

4.8/5

Tag atoms

Two variants, because there were two objects. A label stands on its own in a row of its kind and is the content. A value states a fact about the thing beside it and is a note on it, so it sits lower in the type scale and takes a pill, which reads as a marker where a square-ish block reads as content.

Neither outlines. The border this replaces measured 1.27:1 on white, and four bordered rectangles is a lot of chrome for four short phrases. `value` on ink is a descendant rule rather than a prop, the way `Label` works: a prop asking an author to name their ground is a question the stylesheet can answer.

TEDx Speaker 4 Patents MIT Sloan Live from here Six weeks

Consultants and agencies Soon

h to 1:1 that the tag disappears.

TEDx Speaker 4 Patents MIT Sloan

Consultants and agencies Teams stuck after a pilot

StarRating atoms

The accent, where G2's marks above are G2's amber: a third party's badge carries their colour, a rating our own attendees gave us carries ours. The partial row is the honesty rule — marks fill to the rounded score, so a 3.4 cannot present as four.

IntegrationMark — three sizes, then the monogram atoms

Breadcrumb atoms

Chrome

Navigation and Footer are on every page, including this one. They are rendered at the top and bottom of this document rather than duplicated here — a second nav would emit duplicate ids and a second sticky bar.

The system in nine rules

Bands

Surfaces — not interchangeable with bands

The ramp

Named roles

Tokens

Colour

Font stacks

Radii

Shadows

Weights

Text colours

Type

Headline — as × size atoms

Hero: a claim the page is built on

Section: what this part is about

Sub: one step down

Prose — reading (serif, long-form) molecules

Prose — ui (sans, marketing) molecules

Entry treatments

PageHeader — measure="content" bands

PageHeader — measure="wide" bands

PageHero — tone="warm", marketing bands

PageHero — tone="plain" bands

PageHero — align="centre", the role opener bands

PageHeader — measure="full", the case-study opening bands

PageHero — tone="dark", the ink opener bands

HeroCentered — homepage, product underneath bands

The accent lands on the words that carry the claim

Bands & sections

WarmSection bands

On the warm ground

FeatureSplit — three grounds, alternating edge bands

Copy one side, the running product the other

Reversed, on the alt ground

On the dark band

ImageStatement bands

ReasonGrid — rule, then card bands

A rule between items, not six borders

A container earns its border

Prefer a rule

Then stop

Four panels off the blue ramp

Ownership

Control

Visibility

Openness

BuildSteps — three generated figures bands

Connect, describe, run.

Connect

Build

Run

RunDemo — the product, not a diagram of it bands

Inbound Lead Triage, once it is built.

UseCaseGrid — centred header, with the demoted row bands

Processes offered as a choice

Inbound Lead Triage

Proposal Generation

FlowFigure molecules

SchemaToControls molecules

OwnershipSplit molecules

BoundaryDiagram molecules

PlatformStack molecules

SecurityPromise bands

Three promises,each proved differently.

Verifiable

Private

Isolated

ProductCallout bands

An ink panel inside the measure, not a band.

PillarBand bands

A claim, not an adjective

Marks come from the pack

Three, and no more

CapabilityGrid — tile, then list bands

tile — a page's primary choice

Workflow automation

Integrations

Security

list — a page's way out

Headline — `as` × `size` atoms

Prose — `reading` (serif, long-form) molecules

Prose — `ui` (sans, marketing) molecules

`PageHeader` — `measure="content"` bands

`PageHeader` — `measure="wide"` bands

`PageHero` — `tone="warm"`, marketing bands

`PageHero` — `tone="plain"` bands

`PageHero` — `align="centre"`, the role opener bands

`PageHeader` — `measure="full"`, the case-study opening bands

`PageHero` — `tone="dark"`, the ink opener bands

`HeroCentered` — homepage, product underneath bands

Three promises,
each proved differently.