Bidmachine Design System Deep Dive

1. Brand Overview

Bidmachine’s design language feels like it belongs firmly in the ad tech space — functional, confident, and engineered for performance. There’s no fluffy lifestyle imagery, no ornamental flourishes. Instead, it’s clean typography, restrained color usage, and UI components that prioritize clarity over visual drama.

The vibe is “serious tech for serious business.” The site uses dark neutrals (#333333, #202126) as its foundation, with sharp injections of electric blue (#1666ef) for primary actions. That blue is aggressive enough to stand out against the dark base without drifting into “fun” territory — this is a professional tool, not a playful consumer app.

Typography leans on Rubik from Google Fonts, with occasional appearances of Outfit Variablefont Wght and Open Sans Variablefont Wdth Wght for specific contexts. Rubik’s geometric curves and slightly narrow letterforms give headlines a modern, tech-forward feel. The font stack is functional — Arial is the fallback — which is consistent with a product that likely needs to render consistently in enterprise environments.

There’s a clear preference for flat design. Shadows are non-existent. Depth cues come from borders and contrast, not drop shadows or glows. Components are mostly rectangular with moderate corner rounding (10px and 12px are common), which keeps the interface approachable without feeling soft.

Spacing follows an 8px scale — the most practical choice for responsive design. You see consistent multiples of 8 in margins, paddings, and layout gaps. This makes the system predictable for developers and easy to extend.

Bidmachine’s design philosophy:

• Function first: Every style choice serves interaction clarity.
• Low visual noise: Minimal color palette, no decorative assets.
• Grid discipline: Strict spacing scale, consistent radii.
• Tech confidence: Blue accents over dark neutrals signal “we mean business.”

If you’re designing for Bidmachine, think in terms of precision, clarity, and restraint. Components here aren’t trying to surprise the user — they’re trying to get the job done.

2. Color System

2.1 Primary Colors

The main brand color is #1666ef (RGB 22, 102, 239). This is the "main-button" blue, used for primary CTAs and interactive hotspots. It’s a strong, saturated blue — not pastel or muted — and it instantly grabs the eye against the brand’s dark gray background.

Psychologically, blue conveys trust, stability, and confidence. In tech products, especially B2B, it’s almost a default for “safe” yet assertive branding. Compared to competitors in ad tech, Bidmachine’s blue is more electric — closer to digital RGB than corporate navy. This works because their base background is already dark; a navy would fade, whereas this blue pops.

2.2 Complete Palette

Here’s the full extracted palette:

2.3 Color Relationships

The dark base (#333333, #202126) ensures the bright blue can meet WCAG contrast ratios easily on buttons — white text on #1666ef is well above 4.5:1. Text contrast against dark backgrounds is handled with pure white (#ffffff) or light gray (#f7f7f9) for softer elements.

Accessibility note: The link blue (#0000ee) is default browser blue, which is high-contrast against white but less so against dark backgrounds. For dark mode, they appear to avoid using it directly, instead relying on #1666ef.

2.4 Usage Guide

• Good combos:

  • #1666ef + #ffffff (primary buttons)
  • #333333 + #f7f7f9 (card backgrounds)
  • #202126 + #e7effd (section contrast)

• Avoid:

  • #0000ee on dark backgrounds without underline — it loses clarity.
  • Using #bdd5ff for text — it’s too low-contrast.
  • Teal #00997d next to primary blue — they clash.

3. Typography

3.1 Font Families

• Rubik — Google Fonts. Used for most headings, links, and body copy.
• Outfit Variablefont Wght — Fallback Arial. Used in some headings and buttons.
• Open Sans Variablefont Wdth Wght — Fallback Arial. Used in buttons and smaller text.
  Fallback stacks are pragmatic: Arial ensures functional rendering in environments where web fonts fail.

3.2 Type Scale

3.3 Hierarchy

The scale is wide — from 90px hero headings down to 10px captions. Large headings use heavier weights for emphasis; smaller text uses lighter weights to stay legible at reduced sizes. Line heights are tight for large headings (1.04–1.17), looser for body copy (1.38–1.50). The uppercase 20px heading is a nice touch — gives section labels authority.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Every value is a multiple or near-multiple of 8, with a few exceptions (1px borders, 7px paddings).

4.2 Layout

• Max width: 1080px container — keeps content readable.
• Breakpoint: 767px — mobile vs desktop switch.
• Grid gaps align with the 8px scale.
• Sections breathe with 40px–100px padding.

5. Visual Elements

• Border Radius:

  • 5px — rare, small cards.
  • 10px — buttons, inputs.
  • 12px — buttons, cards, groups.
  • 100% — circular buttons/dots.

• Shadows: None. Flat design. Depth via borders.

• Borders:

  • 1px solid #f5f5f5 — cards.
  • 2px solid #161d5a — cards.
  • 2px solid rgba(90, 62, 136, 0.08) — subtle dividers.
  • 3px solid #f1f2f4 — light-stroke buttons.

6. Components

6.1 Buttons

Light Stroke Button

• Default: transparent background, #f1f2f4 text, 16px × 24px padding, 10px radius, 3px solid #f1f2f4 border. Font: 20px, weight 500.
• Focus: outline none.

Main Button

• Default: #1666ef background, #f1f2f4 text, 19px × 24px padding, 12px radius, no border. Font: 20px, weight 500.
• Focus: outline none.

Slider Dots

• Variants with rgba(255,255,255,0.557), rgba(255,255,255,0.4), and rgba(255,255,255,0.843) backgrounds, 100% radius, no padding.

6.2 Links

• Dark text #333333, no underline.
• Light text #f1f2f4, no underline.
• Link blue #0000ee, underline.
• White text #ffffff, no underline.

6.3 Forms

Email Input

• Default: rgba(255,255,255,0.02) background, #333333 text, 1px solid rgba(199,202,209,0.19) border, 10px radius, padding 1px 2px 1px 10px.

Checkbox

• Transparent background, no border, no radius.

6.4 Cards

• Borders: 1px solid #f5f5f5 or 2px solid #161d5a.
• Radius: 12px.
• No shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #333333;
  --color-deep-charcoal: #202126;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-pale-blue: #e7effd;
  --color-primary-blue: #1666ef;
  --color-black: #000000;
  --color-light-sky-blue: #bdd5ff;
  --color-mid-gray: #929292;
  --color-gray: #9c9c9c;
  --color-light-gray: #e2e2e2;
  --color-teal: #00997d;
  --color-soft-gray: #d8d8d8;
  --color-dark-slate: #2c2f33;
  --color-off-white: #f7f7f9;
  --color-hover-blue: #4c7eff;

  /* Typography */
  --font-rubik: 'Rubik', sans-serif;
  --font-outfit: 'Outfit Variablefont Wght', Arial, sans-serif;
  --font-opensans: 'Opensans Variablefont Wdth Wght', Arial, sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-7: 7px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-19: 19px;
  --space-20: 20px;
  --space-21: 21px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-130: 130px;
  --space-140: 140px;
  --space-1080: 1080px;

  /* Border Radius */
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-full: 100%;
}

8. AI Coding Assistant Prompt

# Bidmachine Design System Specification

You are a Bidmachine design expert. Build UIs matching their visual language exactly.

## Brand Context
Bidmachine’s design is minimal, functional, and tech-focused. Dark neutrals form the base, with electric blue accents for primary actions. Typography is geometric and modern, spacing follows a strict 8px grid, and depth is created through borders rather than shadows.

## Color Palette
- Dark Gray: #333333 — Base text, dark UI backgrounds
- Deep Charcoal: #202126 — Section backgrounds, overlays
- White: #ffffff — Text on dark, light backgrounds
- Link Blue: #0000ee — Underlined links
- Pale Blue: #e7effd — Soft section backgrounds
- Primary Blue: #1666ef — Primary buttons, CTAs
- Black: #000000 — Icons, high-contrast text
- Light Sky Blue: #bdd5ff — Infographic accents
- Mid Gray: #929292 — Secondary text
- Gray: #9c9c9c — Neutral UI states
- Light Gray: #e2e2e2 — Borders
- Teal: #00997d — Occasional highlights
- Soft Gray: #d8d8d8 — Input backgrounds
- Dark Slate: #2c2f33 — Hover backgrounds
- Off-White: #f7f7f9 — Hover fills
- Hover Blue: #4c7eff — Hover states

## Typography
- Headings: 'Rubik', sans-serif
- Secondary Headings: 'Outfit Variablefont Wght', Arial
- Buttons: 'Open Sans Variablefont Wdth Wght', Arial
- Body: 'Rubik', Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 90px | 400 | 1.04 | Hero titles |
| H1 | 60px | 700 | 1.17 | Main headings |
| H1 | 48px | 700 | 1.33 | Section headers |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale includes 1, 7, 10, 12, 15, 16, 18, 19, 20, 21, 24, 30, 40, 50, 60, 80, 100, 130, 140, 1080px.
Use 20px for most component paddings, 40px for section gaps.

## Border Radius
- sm: 5px — small cards
- md: 10px — buttons, inputs
- lg: 12px — cards, modals
- full: 100% — slider dots, avatars

## Shadows & Depth
Flat design — use borders for depth, no shadows.

## Components

### Primary Button
```css
.btn-primary {
  background: #1666ef;
  color: #f1f2f4;
  padding: 19px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 20px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus { outline: none; }
```

### Secondary (Light Stroke) Button
```css
.btn-secondary {
  background: transparent;
  color: #f1f2f4;
  padding: 16px 24px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 20px;
  border: 3px solid #f1f2f4;
}
.btn-secondary:focus { outline: none; }
```

### Input Field
```css
.input {
  background: rgba(255,255,255,0.02);
  color: #333333;
  border: 1px solid rgba(199,202,209,0.19);
  border-radius: 10px;
  padding: 1px 2px 1px 10px;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #f5f5f5;
}
```

## Layout & Responsive Rules
- Max content width: 1080px
- Mobile breakpoint: 767px
- Section padding: 40px–100px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- No focus outlines — rely on color/border changes

## DO
- Use only palette colors
- Maintain 8px spacing multiples
- Use Rubik for headings
- Keep flat design — no shadows

## DON'T
- Mix non-palette colors
- Apply inconsistent corner radii
- Use shadows
- Reduce contrast below WCAG minimums

9. Summary

TL;DR — Bidmachine’s design system is dark, electric, and disciplined. Dark neutrals with sharp blue accents, geometric type, and an 8px grid keep the UI crisp and professional. No shadows — borders do the heavy lifting.

Brand Keywords: tech-direct, dark-minimal, grid-disciplined, performance-focused