Oxylabs Brand Design System Deep-Dive

1. Brand Overview

Oxylabs is a B2B tech brand in the data-gathering and proxy infrastructure space. Their customers are developers, data engineers, and enterprises needing large-scale web scraping and proxy solutions. The design language reflects this audience: sharp, clean, tech-forward, but with a hint of friendliness so it doesn’t feel like an intimidating enterprise SaaS.

The vibe is modern tech minimalism with splashes of neon-like energy. The primary green (#23e6a8) is a bold choice — it’s saturated, bright, and screams “we’re fast and cutting-edge.” It’s paired with a deep navy (#130f35) that grounds the interface and creates strong contrast. The overall feel: confident, professional, and slightly futuristic.

Typography choices indicate a desire to be distinctive without sacrificing readability. They use Anek Latin — a humanist sans with a bit of personality — for most headings, links, and buttons. Supporting text sometimes drops into a generic sans-serif, probably for system UI elements or embedded widgets. They’re not afraid of heavier weights (550, 600) for emphasis, even at small sizes.

Spacings are consistent with an 8px grid system, but with occasional fractional values like 7.5px and 3.75px — these are interesting and suggest fine-tuned adjustments for visual balance. Rounded corners are everywhere, but not excessively pill-shaped unless it’s intentional (e.g., avatars or pill buttons).

The tone of the design says: “We’re engineered for scale, but human enough for you to trust.” It’s clearly aimed at a tech-savvy audience, but with enough polish to feel premium.

2. Color System

2.1 Primary Colors

• Primary: #23e6a8 — Used for CTAs, primary buttons, and highlight elements. It’s bright, high-contrast, almost fluorescent. In psychological terms, green often signals growth, trust, and safety, but this specific hue leans toward “energy” and “innovation” due to its high saturation. Compared to competitors in the proxy/data scraping industry (many use muted blues or grays), this is far more vibrant.
• Secondary: #130f35 — Anchors the palette. Deep navy with a hint of purple, giving a tech and premium feel.

2.2 Complete Palette

(Note: Many of these are from CSS variables for product-specific themes: scrapi, rp, dc, featured.)

2.3 Color Relationships

Primary green and deep navy form a high-contrast pair. WCAG-wise, #23e6a8 on #130f35 has excellent legibility. The design often uses white text on navy, navy text on white, and green accents on both dark and light backgrounds.

Accessibility is generally strong: high saturation ensures interactive elements are visible. Some product-specific colors (lavender, magenta) may have lower contrast against light backgrounds — these should be checked if used for text.

Dark mode isn’t explicitly implemented — but the palette leans toward being flexible enough for inversion.

2.4 Usage Guide

Works well:

• Primary green with deep navy text — instant brand recognition.
• White backgrounds with deep navy text and green CTAs.
• Product-specific accents (magenta, violet) used sparingly for differentiation.

Avoid:

• Large blocks of primary green as text backgrounds — it’s too intense.
• Lavender on white for small text — contrast may fail WCAG AA.
• Mixing too many product-specific colors in one view — can look chaotic.

3. Typography

3.1 Font Families

• Primary: Anek Latin (custom Google font), fallback Anek Latin Fallback.
• Secondary/System: sans-serif — used for generic UI, embedded widgets, or fallback scenarios.
• Monospace for code: Roboto Mono, fallback Roboto Mono Fallback.

No variable fonts detected.

3.2 Type Scale

3.3 Hierarchy

The scale is tight — multiple heading-1 contexts at different sizes suggest responsive scaling or flexible heading styles. The heavy weights (550, 600) give emphasis without going full bold (700). This keeps text looking modern and less chunky. Captions drop down to 8px in some cases — extremely small, so must be used carefully.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with fractional values.

4.2 Layout

Breakpoints:

0px, 95px, 480px, 481px, 513px, 600px, 601px, 768px, 960px, 1086px, 1172px, 1280px, 1373px, 1510px, 1920px.

They use Tailwind CSS with arbitrary values and responsive modifiers. Breakpoints are fine-grained — more than typical — likely to handle specific component breakpoints.

5. Visual Elements

Border Radius Values:
From subtle (2px) to extreme (9999px for pills).

Shadows: Minimal use. Strongest: rgba(0,0,0,0.15) 0px 14px 14px -7px. Most UI is flat with occasional subtle depth.

Borders: Whites and navies dominate. 1px solid borders for separation. Occasional 2px for emphasis.

6. Components

6.1 Buttons

Primary CTA (#23e6a8):

• Default: bg #23e6a8, text #130f35, padding 15px, radius 3.75px, border 2px solid #23e6a8
• Hover: bg var(--bg-button-disabled), text var(--text-inline-button-neutral), opacity 0.85

Secondary CTA (white bg):

• Default: bg white, text navy, border 2px solid #463d85
• Hover: same hover behavior

Utility Buttons:

• Dark bg: bg #130f35, text #f7f7fd, padding 4px 8px, radius 4px
• Outline: bg transparent, text navy, border 1px solid navy
• Rounded pills: bg rgba(255,255,255,0.05), text white, radius 16px

Special:

• Large side button: bg #e6f6ff, padding 32px, radius 24px 0 0 24px
• Icon circle: bg #2e2e2e, radius 50%

6.2 Links

Variants:

• Navy underline (#130f35)
• Teal no underline (#19c59f)
• Black no underline
• Alert pink underline (#dc1957)
• White no underline (nav)
• Lavender no underline (#9f98d7)

Hover: underline for all.

6.3 Forms

Select-one:

• bg navy, text white, border none, radius 0px.

6.4 Cards

Radius: 8px or 16px. Borders: 1px solid rgba(19,15,53,0.1) for separation. Hover states: subtle bg changes (rgba(35,230,168,0.15) for primary cards).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #23e6a8;
  --color-secondary: #130f35;
  --color-light-gray: #e5e7eb;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-teal: #19c59f;
  --color-lavender: #9f98d7;
  --color-dark-blue: #0074f4;
  --color-magenta: #d31de8;
  --color-violet: #7e0ea7;
  --color-alert-pink: #dc1957;
  --color-featured-gold: #ffbc0e;
  --color-success-green: #d2fddf;
  --color-neutral-text: #646d90;

  /* Typography */
  --font-primary: "Anek Latin", "Anek Latin Fallback";
  --font-secondary: sans-serif;
  --font-mono: "Roboto Mono", "Roboto Mono Fallback";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3-75: 3.75px;
  --space-4: 4px;
  --space-5-625: 5.625px;
  --space-7-5: 7.5px;
  --space-8: 8px;
  --space-15: 15px;
  --space-16: 16px;
  --space-22-5: 22.5px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56-25: 56.25px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 3.75px;
  --radius-4: 4px;
  --radius-7-5: 7.5px;
  --radius-8: 8px;
  --radius-15: 15px;
  --radius-16: 16px;
  --radius-pill: 9999px;
}

8. AI Coding Assistant Prompt

# Oxylabs Design System Specification

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

## Brand Context
Oxylabs designs for a tech-savvy B2B audience. The style is modern, minimal, and bold. Colors are high-contrast and saturated. Typography is distinctive but readable. Layout uses an 8px grid with consistent spacing.

## Color Palette
- Primary Green: #23e6a8 — CTAs, primary buttons
- Secondary Navy: #130f35 — Backgrounds, text
- Light Gray: #e5e7eb — Neutral backgrounds
- Black: #000000 — Text, overlays
- White: #ffffff — Cards, page background
- Teal: #19c59f — Accent links
- Lavender: #9f98d7 — Accent text
- Dark Blue: #0074f4 — Product "dc" highlights
- Magenta: #d31de8 — Scrapi product highlights
- Violet: #7e0ea7 — RP product accents
- Alert Pink: #dc1957 — Error states
- Featured Gold: #ffbc0e — Featured product highlights
- Success Green: #d2fddf — Success notifications
- Neutral Text: #646d90 — Secondary text

### Color Rules
- Use primary green only for interactive elements.
- Maintain high contrast for text.
- Product-specific colors are used only in their contexts.

## Typography
- Headings: "Anek Latin", "Anek Latin Fallback"
- Body: "Anek Latin", fallback sans-serif
- Monospace: "Roboto Mono", "Roboto Mono Fallback"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 48px | 550 | 1.30 | Page titles |
| H1-sm | 42px | 550 | 1.30 | Titles |
| H2 | 32px | 550 | 1.30 | Section headings |
| Body-lg | 20px | 400 | 1.50 | Body text |
| Body-md | 16px | 400 | 1.15 | UI text |
| Caption | 14px | 400–550 | 1.50 | Labels |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2px, 3px, 3.75px, 4px, 5.625px, 7.5px, 8px, 15px, 16px, 22.5px, 24px, 30px, 32px, 40px, 48px, 56.25px, 80px.

## Border Radius
- none: 0px — tables
- sm: 3.75px — small buttons
- base: 4px — inputs, buttons
- md: 8px — cards
- lg: 16px — larger containers
- full: 9999px — pills, avatars

## Shadows & Depth
Minimal shadows. Most UI is flat. Use subtle shadow: rgba(0,0,0,0.15) 0px 14px 14px -7px for cards.

## Component Specifications

### Primary Button
Default: bg #23e6a8, color #130f35, padding 15px, radius 3.75px, border 2px solid #23e6a8, font-weight 600, font-size 15px.  
Hover: bg var(--bg-button-disabled), color var(--text-inline-button-neutral), opacity 0.85.

### Secondary Button
Default: bg #ffffff, color #130f35, border 2px solid #463d85. Hover same as primary.

### Outline Button
bg transparent, color #130f35, border 1px solid #130f35, radius 4px.

### Input Fields
Select: bg #130f35, color #ffffff, border none, radius 0px.

### Card
bg #ffffff, border-radius 8px, border 1px solid rgba(19,15,53,0.1), hover bg rgba(35,230,168,0.15).

## Layout & Responsive Rules
Breakpoints: 0, 95, 480, 481, 513, 600, 601, 768, 960, 1086, 1172, 1280, 1373, 1510, 1920px.

## Interaction Rules
Transitions: 150ms ease. Hover states change bg and text color. Focus states use outlines or bg change.

## DO
- Use only colors from palette.
- Maintain 8px grid.
- Use Anek Latin for headings.
- Keep shadows subtle.
- Use correct border radius per component.

## DON'T
- Mix product-specific colors.
- Use low-contrast text colors.
- Apply primary green to large text blocks.
- Add heavy shadows.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #23e6a8;
  color: #130f35;
  padding: 15px;
  border-radius: 3.75px;
  border: 2px solid #23e6a8;
  font-weight: 600;
  font-size: 15px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--bg-button-disabled);
  color: var(--text-inline-button-neutral);
  opacity: 0.85;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(19,15,53,0.1);
  padding: 16px;
}
.card:hover {
  background: rgba(35,230,168,0.15);
}
```

### Input
```css
.select {
  background: #130f35;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  padding: 8px;
}
```

9. Summary

TL;DR — Oxylabs uses a bold, high-contrast design language with a bright primary green and deep navy core. Typography is modern sans with tight hierarchy. Layout follows an 8px grid with precise fractional adjustments. Components are flat with subtle depth, relying on color and spacing for emphasis.

Brand Keywords:

• bold-tech
• minimal-precision
• high-contrast
• developer-friendly
• premium-data