Ipinfo Design System Deep Dive

By a senior brand designer who spends too much time reverse‑engineering production CSS.

1. Brand Overview

Ipinfo’s design language feels unapologetically functional. It’s not a "look‑at‑me" brand—it’s a data API company, and that clarity bleeds through every design decision. White backgrounds. Clean edges. Surgical spacing. Blue as its handshake color. The brand's primary color, #0095e5, cuts through a neutral environment of whites, grays, and graphite blacks. It feels reliable—technical without being sterile.

This site is built for velocity. Developers land, scan, and decide. The typography and color hierarchy push speed: bold Proxima Nova headlines anchor every section, while micro‑spacing and bright blue accents direct the eye. Every pixel behaves.

Ipinfo opts for Tailwind CSS (detected via utility classes like top-[117px] and responsive modifiers). That’s not just a framework; that’s a design philosophy. Tailwind builds systems where every rule has a token, every token compounds predictably, and designers talk in code values. Ipinfo’s UI doesn’t chase trends—it uses practical, testable values designed for speed and consistency.

Border radiuses stop shy of softness—3px, 4px, 6px are the workhorses. Rounded enough to look current, but not playful. The result: a professional tone that says “API pricing tables, not Instagram filters.”

Typography runs on Proxima Nova, an Adobe‑served workhorse sans‑serif that balances mechanical efficiency with just enough warmth to stay human. Body and caption scaling stay tight—12px to 16px for everyday UI text, 62px headline bursts for hero zones. The 8px spacing grid keeps it engineering‑friendly.

In short: Ipinfo’s brand design operates like its product—precise, fast, and built to handle scale. Minimal emotion, maximum clarity.

2. Color System

2.1 Primary Colors

The hero is Ipinfo Blue: rgb(0,149,229) or #0095e5. This color drives every interactive decision—links, primary buttons, CTAs. It’s that classic SaaS blue, close to Slack’s or Twilio’s brand‑tech shades but brighter and less purplish. Blue here communicates reliability and precision—core values for a data platform that helps developers verify and locate IPs.

Secondary context comes from neutral grays ranging from #e5e7eb (light containers) to #676e7a (dead text, UI chrome). These help the blue pop without fighting for contrast.

The tertiary punch comes from Success Green: #58c332. It’s rare and tactical—used for confirmation states or “get started” buttons. You can tell the blue does most of the heavy lifting.

2.2 Complete Palette

2.3 Color Relationships

The entire palette sits in the blue→gray→white spectrum, with green as a controlled accent. Contrast between #0095e5 (blue) and #ffffff (white) is strong—over 8.5:1—which passes WCAG AAA for normal text. Same for black text on light gray backgrounds. Their neutral design ensures maximum readability even for fast scans.

There’s no evidence of dark mode implementation. Everything orbits a bright, high‑contrast palette. Because backgrounds are often #ffffff or #e5e7eb, text contrast stays consistent even when components layer. You could easily apply their palette in a high‑contrast dark scheme by flipping brightness, but that’s not their focus yet.

2.4 Usage Guide

• Primary Actions:
  #0095e5 background + white text. Use sparingly, one per view.

• Secondary Elements:
  Gray outlines (#afb3b9 or #e5e7eb), black or gray text. Use for tertiary UI.

• Success States:
  #58c332 background—confirmation banners, activated toggles.

• Hover/Focus:
  Either darken the primary blue slightly to #005fcc or add rgba(0,0,0,0.1) overlays.

Avoid:

• Stacking bright blue and green together—it breaks focus hierarchy.
• Using gray text below #676e7a on light backgrounds—it kills contrast.
• Adding brand reds or oranges—Ipinfo intentionally blocks emotional tones.

The color system nails an engineering‑first neutrality. There’s never visual distraction; every color earns its job.

3. Typography

3.1 Font Families

Everything runs through Proxima Nova, backed by system fallbacks:

font-family: proxima-nova, -apple-system, blinkmacsystemfont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;

You can tell they’re licensing it via Adobe Fonts (confirmed in the data). No variable fonts—strict weights instead.

Typefaces fall into two groups:

• Proxima Nova for everything UI/brand.
• Source Code Pro for monospace elements like IP code blocks.

That’s a strong pairing. Humanist sans for interface, monospaced for data. Classic developer‑brand combo.

3.2 Type Scale

3.3 Hierarchy

This system is clean and predictable. Every step divides roughly by 1.25–1.33. That consistency creates modular rhythm—you could use clamp() to fluently scale across breakpoints.

The bold weights (600/700) carry key messaging—section headers, callouts, buttons. Body stays mostly at 400, keeping tone conversational yet confident. Uppercase transformations are applied sparingly (labels, smaller headings). This is smart: uppercase with a geometric sans like Proxima Nova stays legible even at small sizes.

Readability: high. Color contrast and tight line‑height make it efficient. The absence of serif or decorative type reinforces focus—nothing slows scanning.

4. Spacing & Layout

4.1 Spacing Scale

Ipinfo uses an 8px base grid, the cleanest possible system for developers.

This 8px‑based system scales sanely. You can design any component on this grid and it’ll lock perfectly across breakpoints.

4.2 Layout

They use a single breakpoint—768px. That’s a strict tablet cutoff. Below 768px, stacked mobile layouts. Above, flexible grids.

Tailwind CSS runs the layout logic, meaning their spacing tokens align to tailwind margins, paddings, and flex gaps. Very developer‑friendly. You could reconstruct the layout grid without flex tools—just use 8px increments, align text to an optical 4px baseline, and you’d be close to pixel‑perfect.

5. Visual Elements

Border Radius

Rounded corners balance hardness and friendliness.

The 9999px pill shape appears surprisingly often—20+ uses. This gives interactive components that "modern‑soft" feel. It shows they mix rectangles and pills intentionally, using the latter to highlight CTAs or chips. A nice contrast.

Shadows

Mostly flat—shadows are subtle when used. The strongest is:

rgba(0, 0, 0, 0.25) 0px 4px 80px 0px

That’s a massive blur radius. Used on modals or hero sections—only for depth emphasis.

Smaller ones like:

rgba(30,40,58,0.15) 0px 16px 25px 0px

add structured softness. Shadows don’t act as default elevation—they’re event‑based, not constant UI decoration.

Borders and Dividers

Borders use the same neutral gray (rgb(224,226,228)). They do a lot of side or bottom dividers like 0px 1px 0px 0px or 0px 0px 1px. This gives the design structure without heavy framing. For forms and buttons, the border looks always 1px, solid, gray or theme blue.

This combination—subtle shadows plus precision borders—keeps things tactile but not skeuomorphic.

6. Components

6.1 Buttons

Ipinfo runs multiple button archetypes.

a. Primary Button (Blue)

• Background: #0095e5
• Text: #ffffff
• Border: 1px solid #0095e5
• Radius: 3px
• Font: 12px, weight 700

Hover/Active/Focus: Not explicitly defined, but expect darker blue (#005fcc).
Use: CTAs, pricing buttons.

b. Secondary Button (Black outline)

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Radius: 3px
• Font: 12px, 700

Use: Minimal actions like dismiss dialogs.

c. Success Button (Green)

• Background: #58c332
• Text: #ffffff
• Border: 0px
• Padding: 0 20px
• Radius: 3px
• Font: 16px, 600

This one says “Go.” Used in onboarding or form confirmations.

d. Dark Button

• Background: rgb(26,26,26)
• Text: white
• Border: 1px solid #000
• Radius: 3px
  Useful for dark sections or footers.

e. Neutral Control Button (gray text, no border)

• Background: rgba(0,0,0,0)
• Color: #4e5664 equivalent
• Font: 16px
• For in‑context menus or tab controls. Flat, text‑based.

6.2 Link Styles

They all ditch underlines. That’s fine since color contrast is clear enough. Hover is implicit or class‑driven with slight tint shift.

6.3 Input Fields

Simple, utilitarian.

Focus states aren’t documented but would fit Tailwind’s pattern: visible blue (#0095e5) outline or ring. They’re intentionally non‑intrusive. Again—developer efficiency over UI drama.

6.4 Cards

No explicit card object in extracted components, but from visual context:
They use 10px radius and sometimes soft shadows like rgba(30,40,58,0.15) 0px 16px 25px. Paddings align with 24px or 32px spacing tokens. Usually bordered in light gray.

This yields minimal, content‑first containers. It’s flat modernism, not "neumorphism."

7. Design Tokens (as CSS custom properties)

:root {
  /* Colors */
  --color-primary: #0095e5;
  --color-primary-hover: #005fcc;
  --color-accent-blue: #2b64e2;
  --color-gray-light: #e5e7eb;
  --color-gray-medium: #afb3b9;
  --color-gray-dark: #676e7a;
  --color-gray-deep: #4b5361;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-success: #58c332;

  /* Typography */
  --font-primary: "proxima-nova", -apple-system, blinkmacsystemfont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue";
  --font-code: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New";

  /* Type sizes */
  --text-h1-xl: 62px;
  --text-h1-l: 54px;
  --text-h1-m: 42px;
  --text-h1-s: 34px;
  --text-h2: 24px;
  --text-subhead: 20px;
  --text-body: 16px;
  --text-caption: 14px;
  --text-small: 12px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-regular: 1.4;
  --lh-loose: 1.56;

  /* Spacing (8px scale) */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.25) 0px 4px 80px 0px;
  --shadow-md: rgba(30,40,58,0.15) 0px 16px 25px 0px;
  --shadow-sm: rgba(30,40,58,0.15) 0px 3px 40px 0px;

  /* Breakpoints */
  --breakpoint-md: 768px;
}

8. AI Coding Assistant Prompt

# Ipinfo Design System Specification

You are an **Ipinfo design expert**. Build UIs matching their visual language exactly.

## Brand Context
Ipinfo’s brand is strictly functional—data-first, precise, modern. The UI favors clarity and developer readability. Blue signals primary interaction; gray and white control structure. Everything rests on an 8px grid and sharp typography.

## Color Palette
- Primary Blue: #0095e5 — primary CTAs, links, brand highlights
- Hover Blue: #005fcc — hover & focus states on blue actions
- Accent Blue: #2b64e2 — secondary emphasis or charts
- Gray Light: #e5e7eb — page background, dividers
- Gray Medium: #afb3b9 — text helpers, neutral borders
- Gray Dark: #676e7a — body text
- Gray Deep: #4b5361 — subtext, captions
- Success Green: #58c332 — success states, confirmation buttons
- Black: #000000 — strong text, iconography
- White: #ffffff — surface backgrounds

## Typography
- Headings & UI: "Proxima Nova", -apple-system, blinkmacsystemfont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue"
- Code: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|--------|
| H1 XL | 62px | 700 | 1.25 | Hero titles |
| H2 | 24px | 700 | 1.33 | Section headers |
| Subhead | 20px | 700 | 1.4 | Supporting headings |
| Body | 16px | 400 | 1.5 | Core text |
| Caption | 14px | 400–600 | 1.43 | Labels, details |
| Code | 14px | 400–700 | 1.43 | IP or data display |

## Spacing & Grid
Base: 8px scale  
Values: 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 48, 64, 96  
Use 8px multiples for all paddings, gaps, margins.  
Examples:
- Button padding: 0 20px
- Card padding: 24px
- Section gap: 48–96px

## Border Radius
- none: 0 — dividers, hard edges
- sm: 3px — buttons
- md: 5–6px — inputs, media
- lg: 10px — cards, panels
- full: 9999px — pills, avatar badges

## Shadows & Depth
Use minimal shadows:
- Large: rgba(0,0,0,0.25) 0px 4px 80px 0px
- Medium: rgba(30,40,58,0.15) 0px 16px 25px 0px
Flat UI by default. Borders (`#e5e7eb`) define structure.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #0095e5;
  color: #ffffff;
  border: 1px solid #0095e5;
  border-radius: 3px;
  padding: 0 20px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.56;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #005fcc; }
.btn-primary:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #000;
  border: 1px solid #000;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  padding: 0 20px;
  transition: opacity 150ms ease;
}
.btn-secondary:hover { opacity: 0.8; }
```

### Success Button
```css
.btn-success {
  background: #58c332;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 16px;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: #1e283a;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  outline: 2px solid transparent;
}
.input:focus {
  outline-color: #0095e5;
  outline-offset: 1px;
}
```

### Link
```css
a.primary-link {
  color: #0095e5;
  font-weight: 600;
  text-decoration: none;
}
a.primary-link:hover {
  color: #005fcc;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  box-shadow: var(--shadow-md);
}
```

## Layout & Responsive Rules
- Container max width: flexible (Tailwind container defaults)
- Padding: 16px mobile, 32px tablet+, 48px desktop
- Breakpoints:  
  - `md`: 768px up—use grid/flex layouts
  - below 768px—stack

## Interaction Rules
- Transitions: 150ms ease on hover/focus
- Focus indicators: 2px outline in brand blue
- Avoid animation bloat—UI should feel immediate.

## DO List
- Use only colors from the palette
- Maintain 8px grid consistency
- Use blue strictly for interactive elements
- Keep text legibility above contrast level AAA
- Use pill radius (9999px) only for chips or round buttons
- Keep typography weights under control—400/600/700 only

## DON'T List
- Don’t create new shades of blue
- Don’t overuse green—it’s contextual
- Don’t add drop shadows to every container
- Don’t mix full‑radius pills with square containers randomly
- Don’t underline links (omit unless accessibility requires)
- Don’t break the 8px spacing rhythm

## Code Examples

### Primary Button Example (Tailwind)
```html
<button class="bg-[#0095e5] text-white font-bold text-[12px] rounded-[3px] px-[20px] py-[8px] hover:bg-[#005fcc]">
  Get Started
</button>
```

### Card Example
```html
<div class="bg-white rounded-[10px] border border-[#e5e7eb] shadow-[0_16px_25px_rgba(30,40,58,0.15)] p-[24px]">
  <h2 class="text-[24px] font-bold">Plan Details</h2>
  <p class="text-[#676e7a] mt-[8px]">View your current IP allocations.</p>
</div>
```

### Input Example
```html
<input class="text-[#1e283a] border-0 outline outline-2 outline-transparent focus:outline-[#0095e5] px-[12px] py-[8px]" placeholder="Enter IP address" />
```

9. Summary

Ipinfo’s design system is a study in precise restraint. Everything exists for clarity—no visual noise, no excess motion. The colors are methodical, the type scale tight, the radius small but deliberate. It’s designed like a command line with taste.

Brand Keywords:

• data‑driven‑minimalism
• tech‑clarity
• blue‑precision
• developer‑centric
• modern‑functional

The takeaway: Ipinfo’s UI doesn’t show off—it proves reliability pixel by pixel.