UI Skillbook
2

DigitalOcean DESIGN.md

Brands

Developer cloud infrastructure with approachable blue branding and practical product clarity. DigitalOcean's public site uses a bright blue anchor, white surfaces, rounded cards, and a friendly developer-cloud tone.

Raw DESIGN.md

At a glance

Group
Brands
Main color
#0080ffBlue design systems
Fonts
InterJetBrains Mono

Colors in this file

  • #0f172a

    Unnamed

  • #dce7f7

    Unnamed

  • #0080ff

    Unnamed

  • #0069d9

    Unnamed

  • #ffffff

    Unnamed

  • #f5f9ff

    Unnamed

  • #64748b

    Unnamed

  • #16825d

    Unnamed

Developer cloud infrastructure with approachable blue branding and practical product clarity. DigitalOcean's public site uses a bright blue anchor, white surfaces, rounded cards, and a friendly developer-cloud tone.

1. Visual Theme & Atmosphere

Overall Aesthetic

DigitalOcean feels like developer cloud made accessible and clean.

Mood & Feeling

  • Friendly
  • Technical
  • Clear
  • Cloud-native
  • Startup-to-scale

Design Density

Medium density. Platform breadth is present but digestible.

Visual Character

  • Strong blue brand accent
  • White cards and illustrations
  • Rounded SaaS surfaces
  • Developer-focused clarity

2. Color Palette & Roles

TokenHexRole
--do-blue#0080FFPrimary action
--do-blue-deep#0069D9Hover/support
--do-white#FFFFFFMain surface
--do-surface#F5F9FFSoft background
--do-ink#0F172AText
--do-muted#64748BSecondary text
--do-border#DCE7F7Borders
--do-success#16825DPositive state

3. Typography Rules

Font Stack

css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

Type Scale

Hero 56/700, H1 40/700, H2 30/700, Body 16/400, Small 14/400

Typography Philosophy

Use modern developer-friendly typography with direct hierarchy and high clarity.

4. Component Stylings

css.button-primary { background:#0080ff; color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:600; }
.button-secondary { background:#fff; color:#0f172a; border:1px solid #dce7f7; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #dce7f7; border-radius:22px; box-shadow:0 12px 24px rgba(15,23,42,.06); }
.code-card { background:#0f172a; color:#fff; border-radius:20px; font-family:var(--font-mono); }

Component Notes

  • Platform cards should stay approachable
  • Code examples and infra proof should feel first-class

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

  • Group by developer use case and infrastructure capability
  • Use bright blue sparingly but clearly
  • Pair marketing copy with code/product proof

6. Depth & Elevation

DigitalOcean uses light developer-SaaS elevation with strong border clarity.

7. Do's and Don'ts

Do

  • Keep it approachable and developer-native
  • Use blue as the main structural accent
  • Preserve product clarity over visual flourish

Don't

  • Don’t overcomplicate it with cloud-theater gradients
  • Don’t make it feel corporate-heavy

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack code and product modules
  • Keep pricing/product CTAs visible

9. Agent Prompt Guide

textDesign this like DigitalOcean: approachable developer cloud UI with bright blue accents, white rounded cards, clean technical typography, code-aware product sections, and simple infrastructure clarity.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/digitalocean.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "digitalocean" })

Related Design.md files

Epic Games Store

Brands · Brutal Type

Digital gaming marketplace with sleek, cinematic dark aesthetic. Deep black backgrounds (#121212, #202020), vibrant blue accent (#0074e4), bold yellow free game promotions, and immersive game imagery for a next-gen…

Studio

Brands · Inter

Studio is a no-code web design tool built for designers who refuse to compromise on craft. Its marketing site is the product's strongest argument: a near-monochrome, gallery-grade canvas where the work — beautiful…

Bluesky

Brands · Inter

Decentralized social platform with a clean, airy aesthetic — sky-blue brand accents, white surfaces, and a feed-first interface.

Expo

Brands · Inter

A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink…

Box

Brands · Inter

Enterprise content management with white space, blue trust cues, and AI-era document workflows. Box's public site uses bright white canvases, navy-blue accents, structured product cards, and a calm enterprise tone.

Zenn (ゼン)

Brands · Hiragino Kaku Gothic ProN

Zenn is a Japanese publishing platform for developers — articles, books and scraps, run by Classmethod. The surface is white on a pale blue-grey #edf2f7, with one saturated blue #3ea8ff doing every action, and it is…

All Design.md filesBrowse by font