Ipify Brand Design System Deep-Dive

1. Brand Overview

Ipify is a developer-centric utility brand. The site is essentially an API product — it tells you your IP address and provides endpoints for applications to do the same. That’s the functional core, but the design language is surprisingly polished for such a technical tool. It’s minimal, focused, but with just enough personality to avoid looking like a raw docs page.

The vibe is utilitarian with a friendly edge. They’re not trying to look like a social network or a lifestyle brand — this is for engineers, sysadmins, and technically curious users. But they’ve avoided the trap of grey-on-grey monotony. They’re using a clean sans-serif (Raleway) for most UI, paired with monospace (Consolas) for code contexts. That pairing nails the developer feel — headings and buttons are approachable, code snippets are crisp.

Color-wise, they lean on a bright, slightly soft blue (#4a90e2) as the public-facing accent, and a warm orange/red (rgb(247, 115, 74) in buttons) for primary actions. That’s an unusual combo — blue is trust, orange is energy — together they create a "safe but active" mood. The palette has earthy browns (#a67f59), greens (#669900), and a magenta (#dd4a68) sprinkled in the code syntax highlighting. That’s a big tell: the site uses syntax highlighting colors from a code theme, making the docs feel like a real editor.

Spacing is on an 8px-ish grid, but with some odd half-steps: 6.5px shows up, clearly tuned for specific button padding. Border radius is consistent at 4px for most interactive elements — classic "flat but slightly softened" look.

This is a brand that says: "We’re technical, but we respect good UI." They’ve kept it light — no heavy shadows, no glossy gradients. Just straight, functional components with a few friendly touches.

2. Color System

2.1 Primary Colors

The main brand accent is #4a90e2 — a medium blue, slightly desaturated compared to "web blue" (#007bff). It appears in the logo and as a link color in default state. Blue here plays the trust/reliability card — appropriate for a network utility.

Buttons use a vivid orange-red (rgb(247, 115, 74)), which doesn’t appear in the extracted palette list (because it's inline in the button component data), but it works as a high-contrast CTA against white or light backgrounds. This is the "do something" color.

Competitor comparison: Many API tools stick to monochrome or pure blue. Ipify’s orange CTA is more welcoming — less corporate, more approachable.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• #4a90e2 on white has a contrast ratio well above WCAG AA for normal text.
• rgb(247, 115, 74) on white — also strong contrast.
• Syntax colors on #f5f2f0 code background are tuned for readability — none are too low contrast.

Dark mode: No evidence of a dark mode palette. This is a light-only design system.

2.4 Usage Guide

• Use #4a90e2 for links, logo, non-CTA interactive accents.
• Use rgb(247, 115, 74) for primary CTAs — buttons, hover states for links.
• Borders should be #d5d5d5.
• Code blocks: background #f5f2f0 and syntax colors from palette.
• Avoid mixing the warm coral hover shades with the magenta — they clash.
• Keep text either pure black (#000000) or white (#ffffff) depending on background — no greys for body text.

3. Typography

3.1 Font Families

• Raleway — Primary UI font (headings, links, buttons). Source: Google Fonts. No fallback specified in data, but typical fallback would be sans-serif.
• Consolas — Code/caption font. Fallbacks: Monaco, Andale Mono — all monospace.
• Ubuntu Mono appears in sources list from Google Fonts (probably for code blocks in some contexts).

3.2 Type Scale

3.3 Hierarchy

The heading scale is tight — they use multiple "heading-1" contexts with different sizes, which is unusual. This suggests they’re overriding heading styles for sub-headers rather than using H2/H3 tokens. The jump from 48px (hero titles) to 30px (section titles) is clean.

Body/link text stays in the 16-20px range — very readable. Buttons at 14px keep them compact. Code/captions at 12-13px feel right — small but not tiny.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px-ish, but the data shows some custom half-steps:

4.2 Layout

Breakpoints:

• 450px, 544px, 600px, 767px, 966px, 970px, 1040px, 1258px.

These aren’t the standard 320/768/1024 — they’re tuned to specific layout shifts. Expect component resizing to happen at these exact widths.

5. Visual Elements

• Border Radius:

  • 4px — default for buttons, divs, pre, code. Consistent soft corners.
  • 50% — used for spans, likely circular avatars or icons.

• Shadow System: Only one shadow in the data — rgba(0, 0, 0, 0.07) 0px 2px 15px 0px. Very subtle, almost imperceptible. Generally flat design.

• Borders:

  • 1px solid #d5d5d5 — standard divider.
  • Variants (1px 0px 0px, 0px 0px 1px, 1px 0px) for table rows and section dividers.
  • Inset 2px border for iframes.

6. Components

6.1 Buttons

One main style: .btn.common-btn.with-icon

• Default:
  • Background: rgb(247, 115, 74)
  • Color: #ffffff
  • Padding: 7px 15px
  • Border radius: 4px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • No box shadow
  • Outline: none
  • Font size: 14px
  • Weight: 400
• Hover:
  • Color: rgb(247, 115, 74)
  • Background: rgb(215, 107, 67)
  • Transform: translateX(3px) — unusual horizontal movement
• Active/Focus: Not explicitly defined in data.

This is a bold CTA — warm color, white text, tight padding. The hover state flips the text color to match background and darkens the background — creates a "reversal" effect.

6.2 Links

Three link color variants:

1. Blue links:
   • Default: #4a90e2
   • Hover: rgb(247, 115, 74)
   • No underline
2. White links:
   • Default: #ffffff
   • Hover: rgb(247, 115, 74)
3. Grey links:
   • Default: rgb(118, 118, 118)
   • Hover: rgb(247, 115, 74)

6.3 Forms

No input styles extracted — likely minimal or browser default.

6.4 Cards

No explicit card component in data, but the borders (#d5d5d5) and padding values suggest a simple flat card style with 4px radius, 15px padding.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-brown: #a67f59;
  --color-green: #669900;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #4a90e2;
  --color-magenta: #dd4a68;
  --color-teal: #0077aa;
  --color-light-grey: #d5d5d5;
  --color-off-white: #f5f2f0;
  --color-deep-magenta: #990055;
  --color-orange: #ee9900;
  --color-warm-coral: #c6745b;
  --color-warm-coral-2: #c0745d;
  --color-warm-coral-3: #c1745c;
  --color-mid-blue: #437fca;
  --color-mid-blue-2: #437dc8;
  --color-mid-blue-3: #437ec8;
  --color-btn-primary-bg: rgb(247, 115, 74);
  --color-btn-primary-hover-bg: rgb(215, 107, 67);

  /* Typography */
  --font-primary: 'Raleway', sans-serif;
  --font-code: 'Consolas', Monaco, 'Andale Mono';
  --font-ubuntu-mono: 'Ubuntu Mono', monospace;

  /* Type sizes */
  --type-h1-lg: 48px;
  --type-h1-md: 30px;
  --type-h1-sm-bold: 20px;
  --type-h1-sm: 20px;
  --type-link-lg: 20px;
  --type-link-sm: 16px;
  --type-btn: 14px;
  --type-caption-lg-bold: 13px;
  --type-caption-lg: 13px;
  --type-caption-sm: 12px;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-6-5: 6.5px;
  --space-7: 7px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-18: 18px;
  --space-25: 25px;
  --space-28: 28px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-70: 70px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-210: 210px;

  /* Radius */
  --radius-sm: 4px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 2px 15px 0px;
}

8. AI Coding Assistant Prompt

# Ipify Design System Specification

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

## Brand Context
Ipify is a developer tool brand with a light, minimal, code-editor-inspired aesthetic. It uses syntax highlighting colors from code themes, paired with friendly UI accents. Flat design with consistent 4px corner radius.

## Color Palette
- Brown: #a67f59 — Background accents, code tokens
- Green: #669900 — Syntax highlight keywords
- Black: #000000 — Primary text
- White: #ffffff — Text on dark, button text
- Blue: #4a90e2 — Logo, links default
- Magenta: #dd4a68 — Syntax highlight strings
- Teal: #0077aa — Syntax highlight function names
- Light Grey: #d5d5d5 — Borders, dividers
- Off-white: #f5f2f0 — Code block background
- Deep Magenta: #990055 — Syntax highlight constants
- Orange: #ee9900 — Syntax highlight numbers
- Warm Coral: #c6745b — Hover/focus variant for buttons
- Warm Coral 2: #c0745d — Hover/focus variant
- Warm Coral 3: #c1745c — Hover/focus variant
- Mid Blue: #437fca — Link hover/focus
- Mid Blue 2: #437dc8 — Link hover/focus
- Mid Blue 3: #437ec8 — Link hover/focus
- Button Primary BG: rgb(247, 115, 74) — CTAs
- Button Primary Hover BG: rgb(215, 107, 67) — CTA hover

## Typography
- Primary UI: 'Raleway', sans-serif
- Code: 'Consolas', Monaco, 'Andale Mono'
- Alternate code: 'Ubuntu Mono', monospace

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 LG | 48px | 400 | 1.10 | Main hero titles |
| H1 MD | 30px | 400 | 1.10 | Section titles |
| H1 SM Bold | 20px | 500 | 1.20 | Sub-section headings |
| H1 SM | 20px | 400 | 1.50 | Smaller headings |
| Link LG | 20px | 400 | 1.50 | Prominent links |
| Link SM | 16px | 400 | 1.50 | Standard links |
| Button | 14px | 400 | 1.43 | Buttons |
| Caption Bold | 13px | 700 | 1.50 | Code captions |
| Caption | 13px | 400 | 1.50 | Captions |
| Link Code | 13px | 400 | 1.43 | Inline code links |
| Caption SM | 12px | 400 | 1.50 | Small captions |

## Spacing & Grid
Base: 8px grid with custom values: 2, 3, 6.5, 7, 9, 10, 12, 15, 18, 25, 28, 30, 40, 50, 70, 80, 100, 120, 210px.

## Border Radius
- sm: 4px — buttons, inputs, code blocks
- full: 50% — circular icons/spans

## Shadows & Depth
Subtle only: rgba(0, 0, 0, 0.07) 0px 2px 15px 0px. Mostly flat design.

## Component Specifications

### Primary Button
Default:
- background: rgb(247, 115, 74)
- color: #ffffff
- padding: 7px 15px
- border-radius: 4px
- border: 1px solid transparent
- font-size: 14px
- font-weight: 400

Hover:
- background: rgb(215, 107, 67)
- color: rgb(247, 115, 74)
- transform: translateX(3px)

### Link (Blue)
Default: color #4a90e2, no underline  
Hover: color rgb(247, 115, 74)

### Link (White)
Default: color #ffffff, no underline  
Hover: color rgb(247, 115, 74)

### Link (Grey)
Default: color rgb(118, 118, 118), no underline  
Hover: color rgb(247, 115, 74)

### Card
- background: #ffffff
- border: 1px solid #d5d5d5
- border-radius: 4px
- padding: 15px

## Layout & Responsive Rules
Breakpoints: 450px, 544px, 600px, 767px, 966px, 970px, 1040px, 1258px.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px outline if required

## DO List
- Use ONLY colors from palette
- Maintain 8px grid (with allowed custom values)
- Use Raleway for UI, Consolas for code
- Keep border radius consistent
- Use subtle shadow only where specified

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't apply heavy shadows
- Don't underline links unless required

## Code Examples

Button:
```css
.btn-primary {
  background: rgb(247, 115, 74);
  color: #ffffff;
  padding: 7px 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: rgb(215, 107, 67);
  color: rgb(247, 115, 74);
  transform: translateX(3px);
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 15px;
}
```

Link:
```css
a {
  color: #4a90e2;
  text-decoration: none;
}
a:hover {
  color: rgb(247, 115, 74);
}
```

9. Summary

TL;DR — Ipify’s design system is a light, code-themed UI with a friendly blue-orange accent combo, consistent 4px corners, and a syntax-highlight-driven palette. Minimal shadows, precise spacing, and developer-friendly typography.

Brand Keywords: code-friendly, minimal-flat, blue-orange, syntax-highlighted, developer-centric