Immutable. This exact content is served forever at /api/v1/blob/cbce28d1d4cb8cc1.
---
nord_type: BLUEPRINT
nord_owner: APIClaw
nord_status: LIVE
---
# APIClaw Design System
> "If Jason Calacanis would see this, it should look like a $10M funded startup."
## Brand Identity
**APIClaw** — The API layer for AI agents. A lobster claw 🦞 represents precision, grip, and the ability to grab exactly what you need from the API ecosystem.
---
## Logo
### Files
- `public/logo.svg` — Full gradient logo with details
- `public/logo-simple.svg` — Simplified gradient mark
- `public/logo-mono.svg` — Monochrome (uses `currentColor`)
- `public/icon.svg` — App icon with background
- `public/favicon.svg` — Favicon with rounded background
### Usage
- **Primary:** `logo-simple.svg` for most applications
- **Mono:** Use `logo-mono.svg` on colored backgrounds or when single-color is needed
- **Icon:** Use `icon.svg` for app stores, social profiles
### Clear Space
Maintain minimum clear space of 25% of logo width on all sides.
---
## Color Palette
### Primary — Lobster Red
The signature color. Energetic, memorable, action-oriented.
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Red 50** | `#fef2f2` | 254, 242, 242 | Subtle backgrounds |
| **Red 100** | `#fee2e2` | 254, 226, 226 | Hover states |
| **Red 200** | `#fecaca` | 254, 202, 202 | Borders, dividers |
| **Red 300** | `#fca5a5` | 252, 165, 165 | Light accents |
| **Red 400** | `#f87171` | 248, 113, 113 | **Primary light** |
| **Red 500** | `#ef4444` | 239, 68, 68 | **Primary** ⭐ |
| **Red 600** | `#dc2626` | 220, 38, 38 | **Primary dark** |
| **Red 700** | `#b91c1c` | 185, 28, 28 | Pressed states |
| **Red 800** | `#991b1b` | 153, 27, 27 | Deep accents |
| **Red 900** | `#7f1d1d` | 127, 29, 29 | Darkest red |
### Neutrals — Refined Dark
Premium dark palette inspired by Vercel and Linear.
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Neutral 950** | `#0a0a0a` | 10, 10, 10 | **Background** (dark mode) |
| **Neutral 900** | `#171717` | 23, 23, 23 | **Surface** |
| **Neutral 800** | `#1f1f1f` | 31, 31, 31 | **Surface elevated** |
| **Neutral 700** | `#262626` | 38, 38, 38 | Cards, modals |
| **Neutral 600** | `#404040` | 64, 64, 64 | **Borders** |
| **Neutral 500** | `#525252` | 82, 82, 82 | Icons inactive |
| **Neutral 400** | `#737373` | 115, 115, 115 | **Text muted** |
| **Neutral 300** | `#a3a3a3` | 163, 163, 163 | **Text secondary** |
| **Neutral 200** | `#d4d4d4` | 212, 212, 212 | Text normal |
| **Neutral 100** | `#e5e5e5` | 229, 229, 229 | Borders (light mode) |
| **Neutral 50** | `#f5f5f5` | 245, 245, 245 | Background (light mode) |
| **White** | `#fafafa` | 250, 250, 250 | **Text primary** (dark) |
### Semantic Colors
| Name | Hex | Usage |
|------|-----|-------|
| **Success** | `#22c55e` | Confirmations, positive states |
| **Warning** | `#f59e0b` | Caution, pending states |
| **Error** | `#ef4444` | Errors (same as primary) |
| **Info** | `#3b82f6` | Informational, links |
### Gradients
```css
/* Primary gradient - for CTAs and hero elements */
background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
/* Subtle glow effect */
box-shadow: 0 0 80px rgba(239, 68, 68, 0.2);
/* Text gradient animation */
background: linear-gradient(135deg, #ef4444 0%, #f87171 50%, #fca5a5 100%);
background-size: 200% 200%;
animation: gradient 5s ease infinite;
```
---
## Typography
### Font Stack
```css
/* Headlines & Body */
font-family: 'Inter', system-ui, -apple-system, sans-serif;
/* Code & Terminal */
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
```
### Type Scale
| Element | Size | Weight | Letter Spacing | Line Height |
|---------|------|--------|----------------|-------------|
| **H1** | 4.5rem (72px) | 800 | -0.03em | 1.1 |
| **H2** | 2.25rem (36px) | 700 | -0.02em | 1.2 |
| **H3** | 1.5rem (24px) | 600 | -0.01em | 1.3 |
| **Body** | 1rem (16px) | 400 | 0 | 1.6 |
| **Body Large** | 1.25rem (20px) | 400 | 0 | 1.5 |
| **Small** | 0.875rem (14px) | 400 | 0 | 1.5 |
| **Label** | 0.75rem (12px) | 600 | 0.15em | 1.4 |
| **Code** | 0.875rem (14px) | 400 | 0 | 1.6 |
### OpenType Features
```css
font-feature-settings: "cv11", "ss01";
```
---
## Components
### Buttons
```css
/* Primary CTA */
.btn-primary {
padding: 12px 24px;
font-weight: 600;
border-radius: 12px;
background: #ef4444;
color: #0a0a0a;
transition: all 0.2s ease;
}
.btn-primary:hover {
background: #dc2626;
transform: translateY(-1px);
}
/* Secondary */
.btn-secondary {
padding: 12px 24px;
font-weight: 500;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-primary);
}
.btn-secondary:hover {
border-color: #ef4444;
}
```
### Cards
```css
.card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(239, 68, 68, 0.3);
box-shadow: 0 12px 40px rgba(239, 68, 68, 0.1);
}
```
### Terminal
```css
.terminal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.terminal-header {
display: flex;
gap: 6px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface-elevated);
}
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-dot-red { background: #ff5f57; }
.terminal-dot-yellow { background: #febc2e; }
.terminal-dot-green { background: #28c840; }
```
### Badges
```css
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
border-radius: 9999px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #ef4444;
}
```
---
## Spacing
Base unit: **4px**
| Name | Value | Usage |
|------|-------|-------|
| xs | 4px | Tight gaps |
| sm | 8px | Icon spacing |
| md | 16px | Component padding |
| lg | 24px | Section gaps |
| xl | 32px | Card padding |
| 2xl | 48px | Section margins |
| 3xl | 64px | Large sections |
| 4xl | 96px | Hero spacing |
---
## Border Radius
| Name | Value | Usage |
|------|-------|-------|
| sm | 6px | Inputs, small elements |
| md | 8px | Badges, chips |
| lg | 12px | Buttons, cards |
| xl | 16px | Modals, large cards |
| 2xl | 24px | Hero elements |
| full | 9999px | Pills, avatars |
---
## Shadows
```css
/* Subtle */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Default */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
/* Medium */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
/* Large */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Glow (accent) */
box-shadow: 0 0 80px rgba(239, 68, 68, 0.2);
/* Glow subtle */
box-shadow: 0 0 40px rgba(239, 68, 68, 0.1);
```
---
## Animation
### Timing Functions
```css
/* Default ease */
transition: all 0.2s ease;
/* Smooth bounce */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Spring */
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
```
### Keyframes
```css
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
```
---
## Assets Checklist
- [x] `public/logo.svg` — Full gradient logo
- [x] `public/logo-simple.svg` — Simplified mark
- [x] `public/logo-mono.svg` — Monochrome version
- [x] `public/icon.svg` — App icon with background
- [x] `public/favicon.svg` — SVG favicon
- [ ] `public/favicon.ico` — ICO format (generated)
- [ ] `public/favicon-16x16.png` — 16px PNG
- [ ] `public/favicon-32x32.png` — 32px PNG
- [ ] `public/apple-touch-icon.png` — 180px for iOS
- [ ] `public/og-image.png` — 1200x630 social sharing
---
## Implementation Notes
### Next.js Head
```tsx
<Head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta property="og:image" content="https://apiclaw.com/og-image.png" />
</Head>
```
### Tailwind Config
Colors are defined in `tailwind.config.ts` and CSS variables in `globals.css`.
---
## Inspiration Sources
- **Stripe** — Clean typography, professional feel
- **Vercel** — Dark mode excellence, premium polish
- **Linear** — Refined interactions, attention to detail
- **Raycast** — Developer-focused, crisp design
---
*Design System v1.0 — APIClaw by NordSym*
---
*[[03 - Products/Apiclaw/Apiclaw|APIClaw]] · [[MOC|Production Line]]*