Ip-api Design System Deep Dive

1. Brand Overview

Ip-api is exactly what its name says: an API for IP address geolocation and related data. The product is targeted at developers, sysadmins, and anyone who needs to quickly resolve an IP into location, ISP, and other metadata. The audience is technical and impatient — they want clarity, speed, and reliability.

The design reflects that. The site is stripped down, functional, but still with enough polish to avoid looking like a raw developer doc dump. It's Bootstrap at the core, with Vuetify components sprinkled in — a hybrid approach that screams "developer-first, but we care about UX."

The vibe is utilitarian tech with a subtle friendliness. Primary blue (#50a1ff) is clean and trustworthy. Neutrals are muted grays, not glossy gradients. Typography is sans-serif, with Dosis giving headings a slightly human touch (more rounded, airy) and Open Sans keeping body copy straight and readable. This is not marketing-heavy design — it’s a UI meant to support reading, scanning, and clicking through to docs or API references.

The layout is grid-based, responsive, and predictable. No surprise breakpoints — they stick to Bootstrap defaults with minor tweaks. Spacing is disciplined: an 8px base grid, with a few oddball values (like 9.6px padding on buttons) that feel hand-tuned rather than rigidly tokenized.

Overall, Ip-api's design philosophy: give developers a clean, fast-loading interface that doesn't get in the way of the content. Colors are functional, typography is clear, and components are styled for usability first.

2. Color System

2.1 Primary Colors

The main brand color is rgb(80, 161, 255) — hex #50a1ff. This is a saturated sky blue. It’s bright enough to be clearly interactive, but not neon. Psychologically, blue is trust, security, and reliability — all things you want from an API provider. Compared to competitors, this is softer than the deep navy often used in enterprise SaaS, but more vivid than the dusty blues in developer toolchains. It pops against the gray backgrounds and white surfaces without overwhelming.

Secondary semantic color: rgb(233, 236, 240) — hex #e9ecf0. This is a pale, cool gray used for secondary buttons and passive surfaces.

2.2 Complete Palette

2.3 Color Relationships

Primary blue #50a1ff sits well against white (#ffffff) — contrast ratio ~3.9:1 for normal text, which barely passes WCAG AA for large text but fails for small text. They solve this by using white text on blue backgrounds for buttons (contrast ~4.5:1), which is safe.

Dark gray #494949 on white is ~12:1 — excellent readability. Secondary gray surfaces (#e9ecf0) with dark text are fine, but avoid putting light gray text on light gray backgrounds — contrast drops quickly.

No explicit dark mode in the extracted data. The palette is light-first, with dark backgrounds only for header/footer sections.

2.4 Usage Guide

• Primary Blue + White — for CTAs, primary buttons, active states. Works well visually.
• Dark Gray Text + White Background — for body copy.
• Secondary Gray Background + Dark Text — for secondary buttons or passive containers.
• Avoid Primary Blue Text + Secondary Gray Background — low contrast.
• Use Burnt Orange and Dark Red sparingly — for alerts/warnings, not decoration.
• Sage Green only for positive states (success messages, completed actions).

3. Typography

3.1 Font Families

Two main families:

• Dosis — for headings. No fallback stack listed, so it’s probably loaded via CSS (Google Fonts).
• Open Sans — for body, links, buttons. Again, no fallback listed (but safe to assume sans-serif fallback).
• SFMono-Regular — for code captions, with a typical mono fallback stack: "Menlo, Monaco, Consolas, Liberation Mono, Courier New".

No variable or Adobe fonts detected.

3.2 Type Scale

3.3 Hierarchy

Headings in Dosis are airy and light-weight (200–500) — not heavy slams of boldness. This makes the site feel approachable but can risk low contrast if used over light backgrounds. Open Sans for body keeps it neutral.

Letter spacing in buttons (1.7px) and uppercase treatment makes CTAs feel deliberate and structured. Code font is tight and high-contrast for legibility in examples.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

4.2 Layout

Breakpoints: 576px, 767px, 768px, 991px, 992px, 1200px. This is essentially Bootstrap’s set, with a couple near-duplicates (767/768 for Vuetify quirks).

Containers use Bootstrap’s grid — predictable 12-column layout. Vuetify components bring in material spacing logic but still adhere to the 8px base.

5. Visual Elements

• Border Radius: Tiny. 2px for buttons/inputs — almost square. 4px for forms — still minimal rounding.
• Shadows: Very light. rgba(0,0,0,0.02) blur for subtle lifts, rgba(0,0,0,0.05) for slightly deeper. No heavy drop shadows — flat aesthetic.
• Borders: 1px solid in various grays and the primary blue. Used more for structure than depth. Example: 1px solid #50a1ff on buttons, 1px solid #e9ecf0 on secondary buttons.

6. Components

6.1 Buttons

Primary (btn-primary)

Default:

• Background: #50a1ff
• Text: #ffffff
• Padding: 9.6px 32px 6px
• Radius: 2px
• Border: 1px solid #50a1ff
• Font: Open Sans, 12px, 600 weight, uppercase letter spacing 1.7px

Hover:

• Background: #50a1ff
• Text: #50a1ff (odd — changes to same as bg)
• Box shadow: rgba(80,161,255,0.4) 0px 1px 10px
• Opacity: 0.75

Active:

• Background: #50a1ff
• Text: #ffffff
• Box shadow: subtle rgba(80,161,255,0.5)

Focus:

• Color: #50a1ff
• Opacity: 0.75

Secondary (btn-secondary)

Default:

• Background: #e9ecf0
• Text: #494949
• Padding: 8px 26px 6px
• Radius: 2px
• Border: 1px solid #e9ecf0
• Font: Open Sans, 11px, 600 weight

Hover:

• Background: #50a1ff
• Text: #50a1ff (same odd behavior as primary)
• Box shadow: same as primary hover

Active/Focus: same pattern as primary.

6.2 Links

Multiple styles:

1. White text links — hover changes to primary blue.
2. Gray (#757575) — hover to blue.
3. Blue (#50a1ff) — hover stays blue.
4. Dark gray (#494949) — hover to blue.
5. Steel gray (#565c63) — hover to blue.

No underlines — color change is the only indicator.

6.3 Forms

Inputs: 1px solid #eaeff4, radius 2px. No heavy focus states — subtle.

6.4 Cards

Cards likely use #f1f2f3 background, 2px radius, light shadows (rgba(0,0,0,0.02)).

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #50a1ff;
  --color-secondary: #e9ecf0;
  --color-dark-gray: #494949;
  --color-deep-blue-gray: #0f374a;
  --color-charcoal: #262f37;
  --color-dark-red: #880000;
  --color-white: #ffffff;
  --color-light-gray: #f1f2f3;
  --color-medium-gray: #757575;
  --color-burnt-orange: #cd5c12;
  --color-sage-green: #78a960;
  --color-steel-gray: #565c63;
  --color-mid-gray: #555555;
  --color-bright-blue-hover: #3c96ff;
  --color-soft-gray-hover: #dde2e8;

  /* Typography */
  --font-heading: "Dosis";
  --font-body: "Open Sans";
  --font-code: "SFMono-Regular", Menlo, Monaco, Consolas, Liberation Mono, Courier New;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9_6: 9.6px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-30: 30px;
  --space-32: 32px;
  --space-70: 70px;
  --space-90: 90px;
  --space-112: 112px;
  --space-146: 146px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Shadows */
  --shadow-light: rgba(0,0,0,0.02) 0px 0px 15px 0px;
  --shadow-medium: rgba(0,0,0,0.05) 0px 1px 9px 0px;
}

8. AI Coding Assistant Prompt

# Ip-api Design System Specification

You are an Ip-api design expert. Build UIs matching their visual language exactly.

## Brand Context
Ip-api's design is developer-focused, functional, and minimal. It uses a clean blue-and-gray palette, tight 8px spacing grid, and typography that balances approachability (Dosis headings) with clarity (Open Sans body). Components are flat with subtle shadows and minimal corner rounding.

## Colors
- Primary Blue: #50a1ff — CTAs, primary buttons, link hovers, active states
- Secondary Gray: #e9ecf0 — secondary buttons, passive surfaces
- Dark Gray: #494949 — body text, headings
- Deep Blue-Gray: #0f374a — section backgrounds
- Charcoal Gray: #262f37 — footers, dark sections
- Dark Red: #880000 — error states
- White: #ffffff — text on dark, backgrounds
- Light Gray: #f1f2f3 — cards, code blocks
- Medium Gray: #757575 — nav links, muted labels
- Burnt Orange: #cd5c12 — warnings, accents
- Sage Green: #78a960 — success states
- Steel Gray: #565c63 — secondary text
- Mid Gray: #555555 — hover/focus states
- Bright Blue Hover: #3c96ff — hover highlights
- Soft Gray Hover: #dde2e8 — hover backgrounds

## Typography
- Headings: "Dosis"
- Body: "Open Sans"
- Code: "SFMono-Regular", Menlo, Monaco, Consolas, Liberation Mono, Courier New

| Level         | Size   | Weight | Line Height | Use For |
|---------------|--------|--------|-------------|---------|
| H1            | 48px   | 200    | 1.50        | Page titles |
| H1 alt        | 33.75px| 400    | 1.50        | Section headings |
| H1 small      | 19.6875px| 400  | 1.50        | Subheadings |
| Body Lg       | 18px   | 300    | 1.90        | Paragraph text |
| Link Lg       | 17px   | 300    | 1.90        | Navigation |
| H1 sub        | 16.875px| 500   | 1.50        | Labels |
| Body XS       | 15px   | 300    | 1.90        | Small copy |
| Link XS       | 15px   | 400/500| 1.90        | Inline links |
| Code Bold     | 13.125px| 700   | 1.68        | Code labels |
| Code Light    | 13.125px| 300   | 1.68        | Code examples |
| Link Cap      | 13.05px| 600    | 4.29        | Uppercase nav |
| Button Lg     | 12px   | 600    | 1.90        | Primary buttons |
| Button Sm     | 11px   | 600    | 1.90        | Secondary buttons |

## Spacing & Grid
Base: 8px. Scale: 2px, 4px, 6px, 7px, 8px, 9.6px, 12px, 15px, 16px, 30px, 32px, 70px, 90px, 112px, 146px.

## Border Radius
- sm: 2px — buttons, inputs
- md: 4px — forms

## Shadows & Depth
- Light: rgba(0,0,0,0.02) 0px 0px 15px 0px — cards, modals
- Medium: rgba(0,0,0,0.05) 0px 1px 9px 0px — hover lifts

## Component Specifications

### Primary Button
Default:
- background: #50a1ff
- color: #ffffff
- padding: 9.6px 32px 6px
- border-radius: 2px
- border: 1px solid #50a1ff
- font: Open Sans, 12px, 600, uppercase, letter-spacing 1.7px

Hover:
- background: #50a1ff
- color: #50a1ff
- box-shadow: rgba(80,161,255,0.4) 0px 1px 10px
- opacity: 0.75

Active:
- background: #50a1ff
- color: #ffffff
- box-shadow: rgba(80,161,255,0.5)

Focus:
- color: #50a1ff
- opacity: 0.75

### Secondary Button
Default:
- background: #e9ecf0
- color: #494949
- padding: 8px 26px 6px
- border-radius: 2px
- border: 1px solid #e9ecf0
- font: Open Sans, 11px, 600, uppercase

Hover/Active/Focus: same as primary.

### Navigation Links
- White text default, hover to #50a1ff
- Gray text default, hover to #50a1ff
- No underlines

### Input Fields
- border: 1px solid #eaeff4
- border-radius: 2px
- background: #ffffff
- focus: subtle border color change

### Cards
- background: #f1f2f3
- border-radius: 2px
- shadow: rgba(0,0,0,0.02)

## Layout & Responsive Rules
- Bootstrap grid (12 columns)
- Breakpoints: 576px, 767px, 768px, 991px, 992px, 1200px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- No underline on links
- Opacity changes for hover states

## DO List
- Use only colors from palette
- Keep spacing multiples of 8px
- Use Dosis for headings, Open Sans for body
- Keep border radius consistent (2px or 4px)
- Use subtle shadows for depth

## DON'T List
- Add new colors
- Use heavy shadows
- Mix large and small corner radiuses on same element
- Lower text contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #50a1ff;
  color: #ffffff;
  padding: 9.6px 32px 6px;
  border-radius: 2px;
  border: 1px solid #50a1ff;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #50a1ff;
  opacity: 0.75;
  box-shadow: rgba(80,161,255,0.4) 0px 1px 10px;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #e9ecf0;
  color: #494949;
  padding: 8px 26px 6px;
  border-radius: 2px;
  border: 1px solid #e9ecf0;
  font-family: "Open Sans";
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
```

### Card
```css
.card {
  background: #f1f2f3;
  border-radius: 2px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.02) 0px 0px 15px 0px;
}
```

9. Summary

TL;DR — Ip-api’s design system is developer-focused: tight blue/gray palette, 8px spacing grid, minimal shadows, and clear typography. It’s Bootstrap bones with Vuetify touches, optimized for clarity over decoration.

Brand Keywords:

• developer-minimal
• blue-trust
• api-focused
• utilitarian-clean