MySQL Brand Design System Deep Dive

1. Brand Overview

MySQL’s brand presence feels exactly like what you’d expect from a core infrastructure product that has to appeal to both developers and IT decision-makers. There’s no fluff here — it’s functional, technical, and predictable. That’s a compliment. This is a brand that’s been around for decades, and its visual language reflects stability, trust, and a bit of “corporate tech” polish inherited from Oracle’s ownership.

The vibe? Professional, slightly conservative, but with a touch of approachable energy through its blues and orange accents. They’re not here to reinvent interface design — they’re here to make sure you know they’re reliable. The design system is built to accommodate a massive amount of content: documentation, product info, downloads, enterprise sales funnels. That means typography choices lean toward legibility at multiple sizes, color usage is restrained, and components are functional first.

You can see Oracle’s influence in the typography stack — OracleSans mixed in with Open Sans — and in the general sense of a corporate design system that’s been adapted for technical audiences. There’s a clear hierarchy, but no gratuitous animations or trendy UI flourishes. Shadows are minimal (three instances total), border radii are small, grid spacing is consistent, and buttons are straightforward.

This is a site for people who need to get something done, not for people browsing casually. Developers want fast scanning, sysadmins want reassurance, and procurement teams want to see consistent branding. MySQL nails that balance: steady color usage, clean type hierarchy, and components that behave predictably on hover/focus.

If you’re building UI for MySQL, you’re designing for clarity, speed, and trust. That means sticking to their restrained palette, respecting the 8px spacing grid, and keeping interactive states obvious but not flashy. This system is about longevity — it will scale with new pages, products, and languages without breaking.

2. Color System

2.1 Primary Colors

The hero color is #0074a3 (rgb(0, 116, 163)). This is the deep blue used for primary links, logos, and call-to-action emphasis. It’s saturated enough to stand out against white, but muted enough to feel professional. This isn’t neon startup blue — it’s an enterprise blue.

Psychologically, blue conveys trust, stability, and technical expertise. It’s a safe choice in the database space, where competitors (PostgreSQL, SQL Server) also lean blue-heavy. MySQL’s shade is a bit warmer than pure corporate navy, which makes it slightly friendlier.

2.2 Complete Palette

2.3 Color Relationships

Contrast: Primary blue on white is excellent — ratio well above WCAG AA. Dark gray (#444444) on white is also safe. The orange accent (#e97b00) pops without clashing. The grays cover the entire spectrum from #333333 to #aaaaaa, giving flexibility for text hierarchy.

Accessibility: They’re careful with text colors — no low-contrast light gray on white for primary copy. The lightest grays are used for borders or background only.

Dark mode: No explicit dark mode here. Palette is clearly optimized for light backgrounds. If they ever go dark mode, they’ll need to invert the blues and oranges and bump grays toward lighter tones.

2.4 Usage Guide

Works well:

• Primary blue (#0074a3) + white background for CTA buttons and links.
• Orange (#e97b00) as a secondary highlight in charts or special links.
• Dark gray (#444444) for body text to reduce glare compared to pure black.

Avoid:

• Using light gray (#aaaaaa) for body text — it’s too low contrast.
• Pairing orange (#e97b00) with light beige (#f7c891) — insufficient contrast.
• Mixing multiple grays in one text block — stick to one tone per hierarchy level.

3. Typography

3.1 Font Families

Two main families: Open Sans and OracleSans. Open Sans is the workhorse — headings, links, body copy. OracleSans appears in headings and certain links, likely for brand alignment with Oracle corporate sites.

Fallback stacks:

• Open Sans: Arial, Helvetica
• OracleSans: Arial, Helvetica
• Verdana appears in captions in one context (Verdana, Geneva).

No Google Fonts or Adobe Fonts loaded — likely self-hosted.

3.2 Type Scale

Here’s every recorded type style:

3.3 Hierarchy

They use a wide range of heading sizes, but most are tightly spaced vertically (low line heights like 0.64 and 0.78). That compresses headings visually, making pages feel dense — which fits the audience. Body text sits in the 16–18px range, comfortable for long reading. Link styles are varied — some uppercase with high line height (2.00), some low and tight — probably to signal different navigation contexts.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

No explicit container widths or breakpoints in extracted data, but the spacing scale suggests consistent multiple-of-5/8px approach. Likely a standard desktop-first layout with responsive adjustments.

5. Visual Elements

Border Radius

Small radii dominate — 4px on buttons, occasional 25px for pill-like links.

Shadows

Three shadows:

• rgb(238, 238, 238) -2px 0px 5px 0px, rgb(238, 238, 238) 2px 0px 5px 0px
• rgba(50, 75, 92, 0.15) 0px 0px 10px 4px
• rgba(0, 0, 0, 0.3) 0px 0px 30px 0px

Minimal usage — mostly for subtle depth.

Borders

Mix of solid grays and white:

• 1px solid #808080 on div/button
• 0px 0px 7px solid #444444 on li
• 1px solid #ffffff on input

6. Components

6.1 Buttons

Primary (nav-button-3):

• Default: bg rgb(95, 149, 196), text white, padding 6px 13px 6px 10px, radius 4px, no border/shadow.
• Hover: text color rgb(29, 78, 216) — interesting, changes text color rather than background.
• Focus: double outline — 1px white + 4px #3699f1.

Font: Open Sans, 15.6px, weight 300.

Secondary (chatcta):

• Transparent background, text rgb(26, 24, 22), padding 0px 56px 0px 0px, no radius.
• Hover: text color rgb(29, 78, 216).
• Focus: same double outline as primary.

Font: Open Sans, 16px, weight 400.

6.2 Links

Multiple styles:

• Primary link: #0074a3, weight 400.
• Dark gray link: #444444, weight 200 — subtle.
• White link: #ffffff, weight 300 — footer/nav over dark bg.
• Orange link: #e97b00, weight 400 — accents.
• Light gray link: #eaeaea, weight 400 — disabled/light context.
• Secondary blue: #006a94, weight 400 — variants.
• Medium gray: #555555, weight 600 — bold.
• Mid neutral gray: #717171, weight 400.

No underline by default.

6.3 Forms

Search input:

• bg white, text transparent (weird — probably placeholder styling), border 1px solid white, radius 0px, padding 1px 10px 1px 24px.

6.4 Cards

Not explicitly extracted, but shadows and border usage suggest minimal depth, relying on background color differences.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-transparent: rgba(255,255,255,0);
  --color-gray-444: #444444;
  --color-gray-555: #555555;
  --color-blue-primary: #0074a3;
  --color-gray-666: #666666;
  --color-gray-717: #717171;
  --color-gray-aaa: #aaaaaa;
  --color-gray-333: #333333;
  --color-orange-accent: #e97b00;
  --color-gray-eae: #eaeaea;
  --color-gray-808: #808080;
  --color-black: #000000;
  --color-gray-949: #949494;
  --color-beige: #f7c891;
  --color-blue-light: #9cc6ef;
  --color-gray-555-alpha29: rgba(85,85,85,0.29);
  --color-gray-f0f: #f0f0f0;

  /* Typography */
  --font-open-sans: 'Open Sans', Arial, Helvetica;
  --font-oracle-sans: 'OracleSans', Arial, Helvetica;
  --font-verdana: Verdana, Geneva;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-28: 28px;
  --space-30: 30px;
  --space-33: 33px;
  --space-40: 40px;
  --space-45: 45px;
  --space-63_39: 63.3906px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-25: 25px;

  /* Shadows */
  --shadow-light-sides: rgb(238,238,238) -2px 0px 5px 0px, rgb(238,238,238) 2px 0px 5px 0px;
  --shadow-soft-blue: rgba(50,75,92,0.15) 0px 0px 10px 4px;
  --shadow-strong-black: rgba(0,0,0,0.3) 0px 0px 30px 0px;
}

8. AI Coding Assistant Prompt

# MySQL Design System Specification

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

## Brand Context
MySQL’s design language is professional, restrained, and functional. It values clarity, trust, and predictable component behavior. Visuals are built on a restrained blue-gray palette with occasional orange accents.

## Color Palette
- Transparent: rgba(255,255,255,0) — icon backgrounds, unfilled buttons
- Dark Gray: #444444 — body text, headers
- Medium Gray: #555555 — logo text, secondary elements
- Primary Blue: #0074a3 — CTAs, primary links, interactive highlights
- Neutral Gray: #666666 — footer links, secondary text
- Mid Neutral Gray: #717171 — minor text
- Light Gray: #aaaaaa — disabled states, dividers
- Very Dark Gray: #333333 — high-contrast text
- Accent Orange: #e97b00 — highlights, special links
- Pale Gray: #eaeaea — backgrounds, dividers
- Mid Gray: #808080 — icons, borders
- Black: #000000 — rare, strong contrast
- Light Neutral Gray: #949494 — icon details
- Warm Beige: #f7c891 — rare accent backgrounds
- Light Blue: #9cc6ef — infographics
- Semi-transparent Dark Gray: rgba(85,85,85,0.29) — hover overlays
- Very Light Gray: #f0f0f0 — hover backgrounds

## Typography
- Headings: 'Open Sans', Arial, Helvetica
- Secondary Headings/Brand: 'OracleSans', Arial, Helvetica
- Captions: 'Open Sans' or Verdana, Geneva

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 large | Open Sans | 35.84px | 400 | 0.64 | Page titles |
| H1 medium | Open Sans | 31.2px | 300 | 1.00 | Section titles |
| ... (include all from data) |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2px, 3px, 5px, 6px, 7px, 10px, 12px, 14px, 15px, 20px, 24px, 25px, 28px, 30px, 33px, 40px, 45px, 63.39px.

## Border Radius
- sm: 2px — iframes
- md: 4px — buttons
- lg: 5px — div containers
- pill: 25px — links

## Shadows & Depth
- Light side glow: rgb(238,238,238) ±2px 0px 5px
- Soft blue: rgba(50,75,92,0.15) 0px 0px 10px 4px
- Strong black: rgba(0,0,0,0.3) 0px 0px 30px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: rgb(95,149,196);
  color: #ffffff;
  padding: 6px 13px 6px 10px;
  border-radius: 4px;
  border: none;
  font-family: 'Open Sans', Arial, Helvetica;
  font-size: 15.6px;
  font-weight: 300;
}
.btn-primary:hover { color: rgb(29,78,216); }
.btn-primary:focus {
  box-shadow: #ffffff 0 0 0 1px, #3699f1 0 0 0 4px;
  outline: none;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: rgb(26,24,22);
  padding: 0 56px 0 0;
  border: none;
  font-family: 'Open Sans', Arial, Helvetica;
  font-size: 16px;
  font-weight: 400;
}
.btn-secondary:hover { color: rgb(29,78,216); }
.btn-secondary:focus {
  box-shadow: #ffffff 0 0 0 1px, #3699f1 0 0 0 4px;
  outline: none;
}
```

### Input Field
```css
.input-search {
  background: #ffffff;
  color: rgba(255,255,255,0);
  border: 1px solid #ffffff;
  border-radius: 0;
  padding: 1px 10px 1px 24px;
}
```

## Layout & Responsive Rules
- Use 8px grid for spacing
- Max widths and breakpoints not extracted — follow Oracle corporate responsive patterns

## Interaction Rules
- Hover: color changes for buttons/links
- Focus: dual ring outline
- Transition: ~150ms ease for hover/focus

## DO
- Use ONLY palette colors
- Maintain 8px grid
- Keep border radii small except pill links
- Ensure contrast meets WCAG AA
- Keep link underline off by default

## DON'T
- Invent new colors
- Use large shadows
- Mix rounded and sharp corners in same component
- Reduce contrast for body text

## Code Examples

Primary Button:
```css
.btn-primary { /* as above */ }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: var(--shadow-soft-blue);
}
```

Form Input:
```css
.input {
  border: 1px solid #808080;
  padding: 5px 10px;
}
```

9. Summary

TL;DR — MySQL’s design system is corporate-tech minimalism: blue-gray palette with orange accents, Open Sans + OracleSans typography, 8px grid spacing, small radii, minimal shadows. Components are functional, with clear hover/focus states.

Brand Keywords:

• enterprise-functional
• tech-trust
• restrained-color
• clarity-first