Brand
The looot brand, in the product's own parts
Green and white. Three rings, one hatch, one curve. Nothing on this page is a screenshot: the swatches read the live tokens and the components are the ones the dashboard renders.
01
Mark, wordmark and clear space
Three rings, the middle one barred. Keep one ring of empty space on every side. On a dark ground, use the white mark alone.
Mark on white
Brand green rings.
Mark on deep emerald
The white mark alone.
Wordmark
White or pale grounds only.
App tile
Workspace avatar.
Clear space
Clear space equals the height of one ring. Nothing enters it: no text, no card edge, no second logo.
- The shaded squares are one ring tall: 25px at this size.
- The mark never goes under 16px. The wordmark never goes under 18px.
- The middle ring keeps its bars. It is never a flat fill.
Wrong uses
Use the files in the download list below. Never retype or recolour the wordmark.
02
Colour
Thirteen tokens, one hue. Click a swatch to copy its hex. The values come from the CSS variables the product uses.
White text sits only on emerald or darker. No red, orange, yellow, blue or purple anywhere.
03
Type
Geist for the interface, Geist Mono for anything you count or copy, and a display face for the big numbers. Nine sizes, nothing under 12px.
Aa
Geist
Interface and body. Weights 400, 500, 600, 700.
178 requests in the last 30 days
Aa
Geist Mono
Money, ids, keys, code. Tabular numbers. Weights 400, 500.
$0.897555 and cs_ms_••••0c10
96px, hero number
$26.94
56px, big number
178
40px, page number
2,352
28px, page title
Usage and balance
20px, card title
Top up your balance
16px, lead
Connect a tool to run it from your agent.
14px, body
Paid per call from a prepaid balance.
13px, label
Last 30 days
12px, smallest
cs_ms_••••0c10
Body line height 1.45. Display line height 1.05 with -0.02em tracking. Labels are sentence case, never capitals. Nothing goes below 12px.
04
Shape
One radius family, one white sheet on a dark shell, and the scoop that joins a selected tab to the sheet.
Radii
One family. The pill is 999.
8
Inputs and logo squares
12
Buttons and rows
20
Cards and tiles
28 to 32
Sheets and shells
999
Pills and segments
Spacing
Steps in px. Hit targets are 40px on desktop and 44px on a phone.
4
8
12
16
24
32
48
80
Shadows
Soft and green-tinted. Each one reads its value from globals.css.
lift
--brand-shadow-lift
Cards that rise on hover, menus on a sheet.
bar
--brand-shadow-bar
The floating top bar over the sheet.
drawer
--brand-shadow-drawer
The detail drawer sliding in from the right.
menu
--menu-shadow
Select and dropdown menus.
- Overview
- Usage
- Catalog
- Settings
Sheet over shell
The window is deep emerald and one white sheet floats on it, so the navigation reads as sitting underneath. Sheets use radius 32.
The curve
One white sheet with a 32px radius sits on the deep window. A floating pill bar sits over it. Cards inside the sheet use 20.The scoop
The selected tab is white and flows into the sheet through two concave corners. Each corner is a 26 by 18 box with a radial gradient: transparent inside 17.5px, white from 18px.Tinted tile
Mint 50 with radius 20. One solid green tile per page at most, one emerald feature card.
05
Components in every state
These are the dashboard's shared components, rendered live. Try them: the segments switch, the chips remove, the key field reveals and copies.
Buttons
Pills, never squares. Emerald is the one primary action on a page.
Status, the ring language
Status is a shape with a word beside it, never colour alone. Solid ring worked, barred ring is in motion, hollow ring stopped.
Segmented control
Every either-or choice. Three tones for three grounds.
Fields, tags and chips
Search, select chips, filter chips, badges.
Inputs and toggles
Default, filled, focus, disabled, invalid. Switches and checkboxes on and off.
Default
Filled
Disabled
Invalid
Switch, off and on
Checkbox, off, on, disabled
Stat tile
Four tones: mint tile, quiet white, the one solid green tile, the emerald feature card. The number is in the display face.
Balance
LiveAvailable to spend
Requests
Last 30 days
Busiest day
Requests on Sep 24
Average per request
Last 30 days
The active tab turns mint and flows into this body through two concave corners.
API key row
A 60px row: icon tile, name, masked key in mono, status ring, actions. A stored hint only, never a full key.
Secret field
The one moment a full key exists: reveal and copy. Sample value, not a real key.
New API key
npx looot initCode block
Tabbed code with a copy button. The base URL is real.
curl https://api.looot.ai/v1/runs \
-H "Authorization: Bearer $LOOOT_API_KEY"States
Empty, error, no access, and the hatch skeletons. No red: a hollow ring for what is missing, the mark coming apart for what failed.
No requests yet
Run a tool from your agent and it shows up here.
We could not load your usage
The request timed out. Your balance is safe.
HTTP 503You do not have access to this
Ask an owner or admin of this organization for access.
06
Charts
Green bars, a hatched second series, ringed selection. No red, no blue, no purple, even for errors.
These charts use sample numbers, not a live account. Series use emerald, brand green, ring, mint and mint 200, plus the hatch for the second series.
Bar chart
Green bars, a hatch for the second series, the selected bar in dark emerald.
- Succeeded
- Still working
- Selected
Area chart
A 2.5px line over a soft gradient. A running total reads best here.
- Spend, running total
- Selected day
Ring chart
Slices in emerald, green, ring, mint and pale mint. The last slice is the hatch.
- Largest slice first.
- The total sits in the centre.
- Other tools share the hatch.
Meter and sparkline
The solid part is what is left. The hatched end is what was spent.
Balance left
Balance left, on emerald
Requests, last 20 days
Ranked bars
One row per entry on a mint tile. The bar is the row against the largest row.
- 1
Serper62 requests at $0.0010 a call$0.06235.4% - 2
Icypeas41 requests at $0.0050 a call$0.20523.4% - 3
Firecrawl30 requests at $0.0040 a call$0.12017.1%
Heatmap
Seven rows by 24 hours. Five green steps and white for none.
07
Visuals and logos
Twelve generated visuals in one house style, and the provider and agent logos on white rounded squares.
rings
White ground. Overview hero tile, onboarding.
rings-dark
Deep emerald. Dark emerald tiles and shells.
key
Pale mint. Settings, create your first key.
plug
Pale grey white. Connections, connect an agent.
coins
White ground. Usage and balance, top up.
tray
Mint. Empty states, no requests yet.
tiles
Mid emerald. Catalog, the tool library.
console
Pale grey white. Run a tool, the CLI.
shield
Pale grey white. Audit log, organization roles.
orbit
White ground, 16:9. Operations, routing across providers.
waves
Full bleed pale mint, 16:9. A header band or one quiet tile.
waves-dark
Full bleed deep emerald, 16:9. A dark tile or the shell footer.
- House style. Soft matte 3D, rounded forms, deep emerald and mint with white, studio softbox light, front view.
- Four rules. Keep the object whole. Keep the proportions. Match the ground: dark tiles take the dark version. One meaning per tile, two visuals a page at most.
Provider logo wall
29 logos in their real colours, always on a white rounded square. A provider with no logo shows its initials, never an invented one.
Apify
Bright Data
DataForSEO
Hunter- Icypeas
- Firecrawl
Exa
Tavily
Replicate
OpenRouter
ElevenLabs
Deepgram- Serper
Linkup
People Data Labs
Prospeo
LeadMagic
Findymail
ZeroBounce
Jina
TikHub
ScrapeCreators
PredictLeads
GitHub
HubSpot
Notion
Slack
Google Sheets
Lusha- No logo yet
Agent logo row
Ten clients, the same square, the same order everywhere.
Claude
Cursor
ChatGPT
Codex
Gemini
Windsurf
VS Code
Cline
GitHub Copilot
Devin
Logos in context
Two patterns every page reuses.
In a table row: 28px square, radius 8, before the tool name
- find_work_email$0.0050
- google_search_results$0.0010
- read_web_page$0.0040
Stacked on a tile: 40px squares, overlapped, count last
+6808
Voice
Short, plain, specific. Money is always exact. No hype words.
- Short. One idea per sentence. Active voice.
- Specific. Money is always exact, to the digits the ledger holds. A count is a count.
- Calm. No exclamation marks, no em dashes, no curly quotes. An error says what failed and what to do.
Plain words
Do: Your agent ran 178 requests this month.
Do not: Leverage seamless agentic workflows at scale.
Sentence case
Do: Top up your balance
Do not: Top Up Your Balance
Real numbers
Do: $0.005042 average per request
Do not: Incredibly low cost per request
Say what it does
Do: Reads the price before any money moves.
Do not: Smart cost control.
No hype
Do: 178 requests in 30 days, $0.897555 spent.
Do not: The ultimate platform for every tool.
09
Download the logo files
Each file is generated from the same ring geometry the product renders. Use the files. Never retype or recolour the wordmark.
looot-mark.svg
32x32 - 514 B
Green mark, vector. Slack/Discord emoji, print, anywhere you can drop an SVG.
looot-mark-ink.svg
32x32 - 496 B
Ink mark, vector. One-colour print, watermarks, dark-on-light contexts that should not read as brand-green.
looot-mark-white.svg
32x32 - 496 B
White mark, vector. Overlays on photos or the brand green itself.
looot-mark-256.png
256x256 - 4.8 KB
Green mark, 256px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.
looot-mark-512.png
512x512 - 17.4 KB
Green mark, 512px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.
looot-mark-1024.png
1024x1024 - 39.4 KB
Green mark, 1024px transparent PNG. GitHub org avatar candidate, app icons that composite their own background.
looot-mark-on-green-1024.png
1024x1024 - 43.9 KB
White rings on a solid green square, 1024px, square corners. Use where the platform itself rounds the corner (Slack, most app-icon slots).
looot-app-icon-1024.png
1024x1024 - 33.4 KB
Green mark at ~60% width on off-white, square. Slack app icon (512-2000px accepted), GitHub org avatar, Google OAuth consent-screen logo.
looot-wordmark.svg
540x140 - 547.7 KB
Ink text + green rings, vector, transparent. Docs, decks, anywhere the background is already off-white or white.
looot-wordmark-white.svg
540x140 - 547.7 KB
All-white wordmark, vector, transparent. Dark backgrounds, photos, the brand green fill.
looot-wordmark-1024.png
1024x358 - 12.0 KB
Ink wordmark, 1024px wide, transparent PNG, real Inter 600 letterforms.
looot-wordmark-2048.png
2048x717 - 29.1 KB
Ink wordmark, 2048px wide, transparent PNG, real Inter 600 letterforms.
looot-wordmark-on-offwhite-2048.png
2048x717 - 53.1 KB
Wordmark on the brand off-white plate, 2048px. Cover slides, doc headers.
looot-og-2400x1260.png
2400x1260 - 93.2 KB
2x of the site's og-image.tsx composition. Slack/Discord/iMessage link unfurls at retina density.
looot-x-header-1500x500.png
1500x500 - 24.6 KB
X (Twitter) profile header, 1500x500.
looot-linkedin-banner-1584x396.png
1584x396 - 29.5 KB
LinkedIn company-page banner, 1584x396.
looot-linkedin-logo-400.png
400x400 - 16.3 KB
LinkedIn company-page square logo, 400x400.
looot-avatar-800.png
800x800 - 29.1 KB
Square avatar, mark centred on off-white, 800px. Slack workspace icon, X/LinkedIn personal or bot avatar.
looot-slack-cover-1600x800.png
1600x800 - 44.5 KB
Slack workspace/channel cover image, 1600x800, wordmark left-aligned with the tagline underneath.
apple-touch-icon-180.png
180x180 - 2.8 KB
apple-touch-icon, 180x180, off-white background (iOS never applies its own backing).
favicon-32.png
32x32 - 678 B
Favicon, 32x32, transparent (matches app/icon.svg's own 32px raster fallback for browsers that need a PNG).
favicon-16.png
16x16 - 332 B
Favicon, 16x16, transparent (matches app/icon.svg's own 32px raster fallback for browsers that need a PNG).
looot-maskable-512.png
512x512 - 17.8 KB
PWA maskable icon, 512x512, mark kept inside the 80% safe circle Android/iOS may crop to.
looot-reveal.gif
800x300 - 136.7 KB
looot -> toool -> oOo -> looot, one full loop, 30fps. Slack/showcase use.
looot-reveal.webm
800x300 - 31.0 KB
Same loop as looot-reveal.gif, VP9/alpha, smaller file for web embeds.