# DigitalOcean

> `digitalocean@1.0.0`

DigitalOcean, LLC is the developer-cloud company providing Droplets (VMs), App Platform (PaaS), Spaces (object storage), managed databases, Kubernetes, and an opinionated developer- forward cloud experience aimed at individual builders, startups, and small teams. The brand identity is anchored on DigitalOcean Blue (#0080FF) — the fill of the waving-ocean mark — paired with a deeper Navy used in dark-mode marketing. The voice is developer-direct and tutorial-forward: the DigitalOcean Community tutorials carry a substantial portion of the brand's voice, and the marketing surfaces match — short sentences, runnable commands, and concrete pricing.


**Tags:** `tech`, `cloud`, `digitalocean`, `developer-cloud`, `infrastructure`

## Atoms

### Palette

**DigitalOcean** · `digitalocean@1.0.0` · Proprietary — All Rights Reserved

> DigitalOcean brand palette anchored on DigitalOcean Blue (#0080FF) — the signature blue of the waving-ocean mark and the principal accent across digitalocean.com and the DigitalOcean control panel. The palette pairs DigitalOcean Blue with a deeper Navy used on dark-mode marketing surfaces and a neutral ramp for body copy and UI surfaces. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `do-blue` | DigitalOcean Blue | `#0080FF` |
| `do-blue-dark` | DigitalOcean Blue Dark | `#0061C2` |
| `do-blue-light` | DigitalOcean Blue Light | `#3FA1FF` |
| `do-navy` | DigitalOcean Navy | `#031B4E` |
| `do-navy-deep` | DigitalOcean Navy Deep | `#020E2A` |
| `do-ink` | DigitalOcean Ink | `#031B4E` |
| `do-gray` | DigitalOcean Gray | `#646F87` |
| `do-gray-light` | DigitalOcean Gray Light | `#8B95A8` |
| `do-surface` | DigitalOcean Surface | `#F4F6F8` |
| `do-border` | DigitalOcean Border | `#DDE3EB` |
| `do-white` | DigitalOcean White | `#FFFFFF` |
| `do-success` | DigitalOcean Success | `#1E944A` |
| `do-warning` | DigitalOcean Warning | `#F2A33A` |
| `do-error` | DigitalOcean Error | `#D9534F` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `do-white` | `#FFFFFF` |
| `surface` | `do-surface` | `#F4F6F8` |
| `surface-elevated` | `do-white` | `#FFFFFF` |
| `text-primary` | `do-ink` | `#031B4E` |
| `text-secondary` | `do-gray` | `#646F87` |
| `text-tertiary` | `do-gray-light` | `#8B95A8` |
| `primary` | `do-blue` | `#0080FF` |
| `primary-hover` | `do-blue-dark` | `#0061C2` |
| `accent` | `do-blue-light` | `#3FA1FF` |
| `accent-hover` | `do-blue` | `#0080FF` |
| `warning` | `do-warning` | `#F2A33A` |
| `warning-hover` | `do-error` | `#D9534F` |
| `error` | `do-error` | `#D9534F` |
| `success` | `do-success` | `#1E944A` |
| `border` | `do-border` | `#DDE3EB` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `do-navy-deep` | `#020E2A` |
| `surface` | `do-navy` | `#031B4E` |
| `surface-elevated` | `do-blue-dark` | `#0061C2` |
| `text-primary` | `do-white` | `#FFFFFF` |
| `text-secondary` | `do-surface` | `#F4F6F8` |
| `text-tertiary` | `do-gray-light` | `#8B95A8` |
| `primary` | `do-blue-light` | `#3FA1FF` |
| `primary-hover` | `do-blue` | `#0080FF` |
| `accent` | `do-blue` | `#0080FF` |
| `accent-hover` | `do-blue-light` | `#3FA1FF` |
| `warning` | `do-warning` | `#F2A33A` |
| `warning-hover` | `do-error` | `#D9534F` |
| `error` | `do-error` | `#D9534F` |
| `success` | `do-success` | `#1E944A` |
| `border` | `do-blue-dark` | `#0061C2` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `do-blue` | `#0080FF` |
| `on-identity` | `do-white` | `#FFFFFF` |
| `primary` | `do-blue` | `#0080FF` |
| `primary-hover` | `do-blue-dark` | `#0061C2` |
| `accent` | `do-blue-light` | `#3FA1FF` |
| `accent-hover` | `do-blue` | `#0080FF` |
| `background` | `do-white` | `#FFFFFF` |
| `surface` | `do-surface` | `#F4F6F8` |
| `surface-elevated` | `do-white` | `#FFFFFF` |
| `text-primary` | `do-ink` | `#031B4E` |
| `text-secondary` | `do-gray` | `#646F87` |
| `text-tertiary` | `do-gray-light` | `#8B95A8` |
| `chrome` | `do-navy` | `#031B4E` |
| `chrome-deep` | `do-navy-deep` | `#020E2A` |
| `mark` | `do-blue` | `#0080FF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.wave.fill`

- **allowed:** do-blue, do-white
- **forbidden:** do-blue-dark, do-blue-light, do-navy

> The DigitalOcean waving-ocean mark renders in DigitalOcean Blue (#0080FF) or reversed white. The pressed-state dark blue, the illustration light blue, and the chrome navy are interactive-state and canvas tokens — none are valid mark fills. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, wave-detached-from-wordmark, gradient-fill

> DigitalOcean's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the waving-ocean mark. The wave must not be detached from the DigitalOcean wordmark on shared lockups, and gradient fills are not part of the published brand system. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> DigitalOcean Ink (#031B4E) on DigitalOcean White gives ~15:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on digitalocean.com. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> DigitalOcean Blue (#0080FF) on DigitalOcean White sits around 4.3:1 — it clears AA for large interactive text and approaches AA for body. The rule enforces the AA-large floor for CTA legibility on the marketing site and the control panel. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The DigitalOcean Community tutorials and the control-panel chrome both target AA as the floor for developer-documentation legibility. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** do-white, do-navy, do-surface
- **doesNotPairWith:** do-warning, do-error

> DigitalOcean Blue pairs cleanly against the white canvas and the navy chrome. Pairing the brand blue directly with the warning amber or error red on the same surface creates a status-color conflict that competes with the brand voice. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> DigitalOcean's marketing surfaces use Inter for both heading and body. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs. 

## Provenance

- **Source:** <https://www.digitalocean.com/press>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** DigitalOcean and the DigitalOcean logo are trademarks of DigitalOcean, LLC. Brand colors and identity guidance documented here are derived from the DigitalOcean press / brand resources page (digitalocean.com/press) and the visible style values across digitalocean.com and the DigitalOcean control panel. 
- **Imported:** `2026-05-18`
- **Notes:** Brand-atoms' read of DigitalOcean's publicly available brand surface. This file is not an official DigitalOcean brand- guidelines document. No asset files are bundled here — the waving-ocean mark is trademarked. 

---

*Generated by the brand-atoms converter. Source: `digitalocean@1.0.0` from the encyclopedia.*