# Apiwiz Design System

> High-contrast technical blueprinting using deep slate foundations and electric blue precision accents.

**Source:** https://apiwiz.io | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Apiwiz utilizes a "Dark Mode by Default" hero aesthetic that transitions into a clean, structured white-canvas technical resource. The palette is anchored by a deep foundation of Slate #161a1d and Obsidian #000000, punctuated by a primary brand blue #0877c5 and a secondary electric blue #019cfd. Typography is strictly Inter 18 Pt for all functional UI and headings, paired with Jetbrainsmono for technical data points and numbering. Layouts follow a rigid 16px and 24px spacing rhythm, with components utilizing a mix of sharp 0px corners for sections and soft 16px radii for content cards.

## Signature DNA
1. **The Technical Mono-Anchor** (Jetbrainsmono used at large scales (32px) for icons and numbers to signal a developer-first environment; observed on Homepage and About pages).
2. **The Electric Gradient Stroke** (Use of high-contrast borders #019cfd against dark surfaces #2a3044 to define interactive zones; observed in hero and feature sections).
3. **Hybrid Radius Logic** (Strict 0px sharp containers for full-width sections contrasted with 16px soft-radius internal cards; creates a "nested precision" feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.slate.13}` | `#161a1d` | Primary text, dark surface background | 227 | 1 | Computed Style |
| `{color.slate.0}` | `#ffffff` | Page background, primary button text | 159 | 1 | Computed Style |
| `{color.black}` | `#000000` | Deepest surface, card borders | 106 | 1 | Computed Style |
| `{color.slate.11}` | `#303540` | Nav headings, secondary text | 58 | 1 | Computed Style |
| `{color.slate.7}` | `#cdced6` | Secondary background, borders | 35 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.blue.800}` | `#0877c5` | Primary brand blue, CTA backgrounds | 32 | 1 | Computed Style |
| `{color.blue.700}` | `#019cfd` | Secondary electric blue, hover borders | 18 | 1 | Computed Style |
| `{color.slate.blue}` | `#485585` | Deemphasized accent text | 12 | 0.8 | Computed Style |
| `{color.blue.950}` | `#0e3c5d` | Decorative dark blue (decorative_only) | 1 | 1 | Computed Style |
| `{color.blue.400}` | `#64b9e4` | Decorative light blue (decorative_only) | 1 | 1 | Computed Style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{color.success}` | `#027a48` | Success text and indicators |
| `{color.error}` | `#b42318` | Error text and validation |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter 18 Pt | 400, 500, 600, 700 | All UI, Headings, Body | Inter | Google Fonts |
| Jetbrainsmono | 400, 500 | Technical data, numbers | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 64px | 76.8px | normal | 700 | Hero H1 | `h1.heading-style-h1` |
| `{type.display.lg}` | 50px | 59.52px | normal | 700 | Section H2 | `h1.heading-style-h2` |
| `{type.heading.md}` | 32px | 38.4px | normal | 700 | Card Headings | `h2.heading-style-h3` |
| `{type.mono.md}` | 32px | 48px | normal | 400 | Tech Icons | `div.contact20_icon-wrapper` |
| `{type.mono.sm}` | 28px | 36.4px | normal | 500 | Stat Numbers | `h4.home_problem-card-text-number` |
| `{type.heading.sm}` | 20px | 30px | normal | 600 | Feature Titles | `h4.home_problem-card-heading` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Body | `header.section_header4` |
| `{type.body.sm}` | 14px | 21px | normal | 500 | Footer/Small | `p` |
| `{type.caption}` | 12px | 18px | 1.5px | 600 | Overline Tags | `div.header4_tag-wrapper` |

### Principles
1. **Bold Technicality:** Headings above 24px almost exclusively use weight 700 to maintain authority against dark backgrounds.
2. **Monospace Hierarchy:** Jetbrainsmono is never used for long-form prose; it is reserved for "data-heavy" moments like statistics or icon labels.
3. **Wide Tagging:** Captions and overline tags use 1.5px letter spacing to differentiate from standard body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.4}` | 16px | 24 |
| `{space.6}` | 24px | 38 |
| `{space.8}` | 32px | 8 |
| `{space.12}` | 48px | 17 |
| `{space.16}` | 64px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Main sections, full-width containers | 402 occurrences |
| `{radius.sm}` | 6px | Small UI cards, input fields | 31 occurrences |
| `{radius.md}` | 8px | Interactive controls, feature cards | 29 occurrences |
| `{radius.lg}` | 16px | Content cards, pricing tiers | 27 occurrences |
| `{radius.full}` | 100px | Pill buttons, tags | 38 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.low}` | `rgba(0, 0, 0, 0.15) 0px 0px 2px 0px` | Default card state | 12 occurrences |
| `{shadow.high}` | `rgba(0, 0, 0, 0.25) 0px 0px 4px 0px` | Hovered/Active cards | 12 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** Homepage, About
**Spec:** Background `{color.blue.800}` (#0877c5) | Text `{color.white}` (#ffffff) | Radius `{radius.full}` (100px) | Typography `{type.body.sm}` (14px/500)
**States observed:** Default | Hover: captured (darkens)

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** Homepage
**Spec:** Background transparent | Border 1px `{color.blue.700}` (#019cfd) | Text `{color.blue.700}` (#019cfd) | Radius `{radius.full}` (100px)
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** Homepage, About
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.slate.7}` (#cdced6) | Radius `{radius.lg}` (16px) | Padding 24px
**States observed:** Default | Hover: `{shadow.high}`

#### Technical Stat Card
**Role:** Displaying metrics or data points
**Pages observed:** Homepage
**Spec:** Background `{color.slate.13}` (#161a1d) | Text `{color.white}` (#ffffff) | Typography `{type.mono.sm}` (28px) for numbers
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Hero Section
**Role:** Top-of-page impact
**Pages observed:** Homepage
**Spec:** Background `{color.slate.13}` (#161a1d) | Text `{color.white}` (#ffffff) | Radius `{radius.none}` (0px)
**States observed:** Default

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** Homepage, About
**Spec:** Background `{color.slate.13}` (#161a1d) | Text `{color.slate.11}` (#303540) | Height 80px (approx)
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px |
| Section Padding (Vertical) | 64px - 96px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | H1 reduces to 32px (`mobile-32`), stacked card layouts |
| Desktop | 1440px | 12-column grid, horizontal card layouts |

## Imagery & decoration
Apiwiz uses abstract technical diagrams, wireframe-style API visualizations, and high-contrast photography of hardware/textures (rope, glass). It avoids "friendly" flat illustrations or soft pastel gradients.

## Do's
- Use `#161a1d` for all primary dark backgrounds.
- Pair Jetbrainsmono with Inter 18 Pt for any data-driven UI.
- Apply `{radius.lg}` (16px) to all white content cards.
- Use `#0877c5` for the primary "Book a Demo" action.
- Maintain 24px gutters between feature cards.

## Don'ts
- **Wrong:** Using a soft blue like `#64b9e4` for a primary button. **Right:** Use `#0877c5`. **Reason:** Light blues are decorative/secondary only.
- **Wrong:** Rounding section containers. **Right:** Keep section backgrounds at 0px radius.
- **Wrong:** Using Inter for large statistical numbers. **Right:** Use Jetbrainsmono.
- **Wrong:** Mixing sub-brand colors (if they existed) with the parent primary blue.

## Similar brands
- HashiCorp
- Datadog
- Postman
- Snyk

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #0877c5;
  --color-accent: #019cfd;
  --color-foundation: #161a1d;
  --color-surface: #ffffff;
  --font-main: 'Inter 18 Pt', sans-serif;
  --font-mono: 'Jetbrainsmono', monospace;
  --radius-card: 16px;
  --radius-pill: 100px;
}
```

## Agent prompt examples
- "Create a technical feature card for Apiwiz using a white background, 16px border radius, and a 20px Inter 600 heading."
- "Generate a dark hero section with #161a1d background and a primary pill button using #0877c5."
- "Design a statistics row where the numbers are 28px Jetbrainsmono and the labels are 14px Inter."

## Known gaps
- Hover states for navigation dropdowns were not fully captured in the static trace.
- Tablet-specific breakpoints (768px-1024px) were not sampled in this run.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://apiwiz.io | 1440px | 2026-06-06 |
| About Page | https://apiwiz.io/about | 1440px | 2026-06-06 |
| Mobile Home | https://apiwiz.io | 390px | 2026-06-06 |