W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
DigitalOcean
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.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/digitalocean/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/digitalocean/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
DigitalOcean
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by DigitalOcean
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
DigitalOcean
A clear hierarchy in DigitalOcean's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
DigitalOcean
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ do-blue-light #3FA1FF accent-hover
→ do-blue #0080FF background
→ do-white #FFFFFF chrome
→ do-navy #031B4E chrome-deep
→ do-navy-deep #020E2A identity
→ do-blue #0080FF mark
→ do-blue #0080FF on-identity
→ do-white #FFFFFF primary
→ do-blue #0080FF primary-hover
→ do-blue-dark #0061C2 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 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from digitalocean)
Light mode (15 roles)
accent
→ do-blue-light accent-hover
→ do-blue background
→ do-white border
→ do-border error
→ do-error primary
→ do-blue primary-hover
→ do-blue-dark success
→ do-success surface
→ do-surface surface-elevated
→ do-white text-primary
→ do-ink text-secondary
→ do-gray text-tertiary
→ do-gray-light warning
→ do-warning warning-hover
→ do-error Dark mode (15 roles)
accent
→ do-blue accent-hover
→ do-blue-light background
→ do-navy-deep border
→ do-blue-dark error
→ do-error primary
→ do-blue-light primary-hover
→ do-blue success
→ do-success surface
→ do-navy surface-elevated
→ do-blue-dark text-primary
→ do-white text-secondary
→ do-surface text-tertiary
→ do-gray-light warning
→ do-warning warning-hover
→ do-error Rules (7 typed constraints)
error · 5 rules
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 rules
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.