Brand Kit
Guidelines for representing Intertool consistently across interfaces, documentation, and communications.
Logo
The Intertool mark is the Package icon paired with the wordmark. Use the full lockup where space allows; the icon alone for compact contexts.
Primary — on dark backgrounds
Inverse — on light backgrounds
Icon dark
Icon light
Icon accent
Icon muted
Clear space
Maintain a minimum clear space equal to the height of the icon on all sides. Never place the logo closer than this to other elements, edges, or content.
Colors
The palette uses oklch for perceptual uniformity. Dark mode applies a warm slate surface ladder with high-contrast muted text for long reading sessions.
Core
Background
--background
oklch(0.19 0.009 78)
Foreground
--foreground
oklch(0.94 0.006 78)
Primary
--primary
oklch(0.74 0.13 252)
Muted
--muted
oklch(0.3 0.011 78)
Surfaces
Card
--card
oklch(0.235 0.01 78)
Border
--border
oklch(0.39 0.01 78)
Input
--input
oklch(0.345 0.011 78)
Accent
--accent
oklch(0.32 0.012 78)
Semantic
Success
--success
oklch(0.74 0.12 164)
Destructive
--destructive
oklch(0.72 0.16 28)
Muted Foreground
--muted-foreground
oklch(0.76 0.012 78)
Ring / Focus
--ring
oklch(0.74 0.13 252)
Usage notes
- Use
--primarysparingly — links, focus rings, and active states only. Filled buttons stay neutral. - Use
--muted-foregroundfor secondary text, labels, and descriptions. - Never place gray text on colored backgrounds. Use transparency or a tinted shade instead.
- All colors include a warm chroma of
0.005at hue75to avoid clinical pure-black neutrals.
Typography
Newsreader Regular gives public landing-page display headings an editorial voice. Geist Sans remains the interface and body face with zero negative tracking and a looser dark-mode reading rhythm. Product headings use text-lg at medium weight; Geist Mono is reserved for code, commands, versions, and identifiers.
Page title
Dashboard
text-lg / font-medium / tracking-tight
Section heading
Shared memories
text-base / font-medium / tracking-tight
Card title
Repository warning
text-sm / font-medium
Body text
Reviewed engineering context shared with every authorised Claude Code session.
text-sm / leading-5 / text-muted-foreground
Label
Confidence
text-xs / text-muted-foreground
Monospace
acme/payments-service · confirmed
font-mono / text-sm
Code / command
https://api.intertool.sh/mcp
font-mono / text-xs / bg-muted
Badge / tag
v0.1.0
font-mono / text-[10px] / bg-muted
Sans — Geist Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Mono — Geist Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Iconography
Icons are from Lucide at 14px (h-3.5 w-3.5) for inline use, 16px (h-4 w-4) for standalone, and 20px (h-5 w-5) for hero contexts. Always monochrome in text-muted-foreground.
Package
Zap
Terminal
Bot
FileText
Upload
Search
ArrowRight
Components
Key UI patterns used across the application.
Buttons
Badges & tags
Cards
Refund tests require ledger events
acme/payments-service
Run Redis and enable ledger events before refund integration tests.
Empty state
Action link
MCP endpoint
https://api.intertool.sh/mcpVoice & Tone
How Intertool communicates.
Do
- Be direct and concise
- Use technical terms your audience knows
- Lead with the action, not the explanation
- Use sentence case for headings
- Say "memory" for reviewed, durable context
Don't
- Use marketing superlatives ("amazing", "powerful")
- Add emojis to interface text
- Use Title Case For Every Heading
- Over-explain obvious actions
- Use "please" in button labels
Spacing & Layout
Consistent spacing scale and layout rules.
Spacing scale (Tailwind)
1
1.5
2
3
4
5
6
8
10
16
Layout rules
- Max content width:
max-w-5xl(1024px) - Page padding:
px-4(16px horizontal) - Section spacing:
mb-8(32px between sections) - Card padding:
p-4orp-5 - Border radius:
rounded-lg(8px) for cards,rounded-md(6px) for inputs/buttons - Header height:
h-12(48px)