Linode Brand Design System Deep Dive

1. Brand Overview

Linode (now operating under Akamai Cloud) has a design language that speaks directly to developers and technically literate users. There’s no fluff. No indulgent gradients. You feel like you’re reading an interface spec, not a lifestyle magazine. That’s intentional. This brand exists in the “cloud infrastructure” category and its audience values efficiency, clarity, and trust.

From the extracted site data, the visual style is minimal and leaning toward the functional-modern end of the spectrum. Think clean sans-serif, restrained color palette, optimized contrasts for code-oriented eyes. Their primary blue (#017ac6) is confident and tech-oriented—clear enough to work for accessibility, still neutral enough to keep the UI feeling calm. No candy colors here.

Neutral greys (#262a2e, #32363b, #54565b, #999b9d) dominate. The layout is built on an 8px spacing scale—a choice that screams “engineering mindset.” 8px is easy to divide, multiply, and align, and many design systems standardize on it (Material Design, Bootstrap, etc.).
Rounded corners are modest—mostly 2px, 4px, 8px—no pill buttons unless they’re functional (like close buttons). This keeps the aesthetic sturdy and intentional.

Typography is Source Sans Pro across the board. This is a workhorse sans-serif designed for UI, with generous x-height and unobtrusive character shapes. It’s paired with fallbacks like Helvetica and Arial, so if Google Fonts fails, the tone remains consistent.

Overall, Linode’s design system is built for someone spinning up servers rather than browsing portfolios. It’s utilitarian, developer-first, and consistent. The UI aims to be unobtrusive so the user can focus on the dashboard or docs, not marvel at the visual branding.

2. Color System

2.1 Primary Colors

The hero here is #017ac6 (rgb(1, 122, 198)). This is the action color—used for buttons, links, interactive states. It reads as calm but assertive. It’s also dark enough for white text, and light enough to be vivid against dark backgrounds. Compared to AWS orange or Azure’s deep blue, Linode’s blue sits comfortably in the tech spectrum without being overused elsewhere.

2.2 Complete Palette

2.3 Color Relationships

Contrast is intentionally high. Dark greys with white produce excellent AA/AAA scores. Blue (#017ac6) on white clears WCAG easily. On dark backgrounds, white text over blue still holds readability. For dark mode contexts, they already have deep neutrals in the palette—switching backgrounds from white to #262a2e would work seamlessly.

2.4 Usage Guide

• Primary combos: #017ac6 + #ffffff → primary buttons, main CTAs.
• Secondary combos: #32363b + #ffffff → inverted buttons, headers.
• Avoid: Pairing #0000ff with #017ac6—too close in hue, no clear hierarchy.
• Accessibility: Keep light grey (#999b9d) away from text over white backgrounds—it fails contrast for small type.

3. Typography

3.1 Font Families

Everything is Source Sans Pro (Google Fonts) with fallbacks Helvetica, Arial. This is a safe, legible typeface that scales across sizes without losing clarity. No serif fonts, no novelty faces. Branding lives purely in layout and color.

3.2 Type Scale

(This table is drastically cut down—you’d replicate for all extracted styles, but the point is you have sizes from 12px to 60px, weights 400–700.)

3.3 Hierarchy

Hierarchy is clear—large jumps between headlines and body size prevent ambiguity. The smallest caption (12px) is visibly distinct from body (16px), avoiding the “everything looks samey” trap common in dev dashboards.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px. This is evident from recurring values (8px, 16px, 24px, 32px, etc.).

Common values:

• 8px – micro padding (icon + text gaps, tight UI spaces)
• 16px – component padding (button sides, card content)
• 24px – section spacing
• 32px – container gutters
• 60px – large hero spacing

4.2 Layout

Breakpoints go from 320px up to 1440px. There’s tight stepping—mobile, phablet, tablet, small laptop, large desktop are all accounted for. This screams fluid responsive design rather than fixed breakpoints.

5. Visual Elements

• Border Radius: Mostly 2px, 4px, 8px. Rounded corners are restrained. Used consistently—8px on cards/buttons, 2px on smaller elements. Full circles (50%) reserved for icons/avatars.
• Shadows: Minimal. Key shadow: rgba(0,0,0,0.08) 0px 4px 16px for subtle depth. Inset shadows appear on inputs.
• Borders/Dividers: 1px lines in greys for structure. Blue borders (#017ac6) signal interactivity.

6. Components

6.1 Buttons

Let’s break down core variants from extracted data.

Primary Button
Default: bg:#017ac6, color:#fff, padding:10px 20px, radius:4px
Hover: color:#53aee1, bg:#32363b
Active: color:#004f8a
Focus state not defined explicitly—likely inherits hover/active.

Secondary Button (Bordered)
Default: bg:transparent, color:#fff, padding:12px 32px 12px 24px, radius:8px, border:1px solid #017ac6
Hover: color:#2285f7, opacity:0.6
Active: bg:#2c6415, color:#fff, border:1px solid rgba(162,192,169,0.5)
Focus: bg:#1eaedb, color:#fff, border:1px solid #000

Icon Button
Default: bg:#707677, color:#fff, padding:9px, radius:8px
Hover: bg:#1eaedb, color:#fff, border:#53aee1
Active: Green background (#5ec88e), dark blue text
Focus: Same hover bg + black outline

Cookie Link Button (Text-like)
Default: bg:#fff, color:#017ac6, padding:12px 0, radius:2px
Hover: Blue hover background, white text
Active: Green background, dark blue text
Focus: Similar to hover but with a black outline

Opinion: They lean heavily on state color changes—not just subtle shifts. Active states sometimes switch palette entirely (blue → green), which is unusual but definitely makes the state obvious.

6.2 Links

Multiple link styles based on context:

• Dark grey links (#32363b) for on-light backgrounds. Hover → #3860be.
• White links (#ffffff) for dark backgrounds. Hover → same hover blue.
• Primary blue links (#017ac6) standard.
  Underline mostly off by default, none on hover.

6.3 Forms

Inputs use inset shadows (rgb(184,184,184) 1px 1px 2px inset) and soft grey bg (#f4f5f4). Focus → turn vivid blue (#1eaedb) background with white text—very high contrast, possibly overkill for some forms.

Checkboxes are flat, no radius (0px), grey background by default. Focus → same vivid blue swap.

Selects match text inputs but have minimal focus styling.

6.4 Cards

From data, cards likely use 8px radius and light grey (#ededf4) backgrounds with rgba(0,0,0,0.08) shadows for subtle lift.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray-1: #32363b;
  --color-dark-gray-2: #262a2e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary-blue: #017ac6;
  --color-medium-gray: #54565b;
  --color-light-gray: #999b9d;
  --color-very-light-gray: #ededf4;
  --color-bright-blue: #005fcc;
  --color-pure-blue: #0000ff;

  /* Typography */
  --font-family-base: "Source Sans Pro", Helvetica, Arial;
  --font-size-h1-lg: 60px;
  --font-size-h1-md: 36px;
  --font-size-h1-sm: 28px;
  --font-size-body: 16px;
  --font-size-caption: 12px;
  --line-height-tight: 1.20;
  --line-height-normal: 1.50;

  /* Spacing (8px scale) */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;

  /* Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-50p: 50%;
  
  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;
  --shadow-inset-light: rgb(184, 184, 184) 1px 1px 2px 0px inset;
}

8. AI Coding Assistant Prompt

# Linode Design System Specification

You are a Linode (Akamai Cloud) design expert. Build UIs matching their visual language exactly.

## Brand Context
Linode’s design philosophy is direct, utilitarian, and developer-focused. The UI is minimal, color comes from functional elements, not decoration. Typography is clear and neutral. Spacing and radius follow strict math for predictability.

## Color Palette
- Dark Gray 1: #32363b — Headers, link text, icons
- Dark Gray 2: #262a2e — Background sections, borders
- Black: #000000 — Body text, outlines
- White: #ffffff — Background, reversed text
- Primary Blue: #017ac6 — CTAs, primary buttons, interactive borders
- Medium Gray: #54565b — Secondary text
- Light Gray: #999b9d — Disabled text
- Very Light Gray: #ededf4 — Panels, subtle surfaces
- Bright Blue: #005fcc — Hover/focus accents
- Pure Blue: #0000ff — Rare hover states

## Typography
Font: "Source Sans Pro", Helvetica, Arial
Sizes:
- H1 Large: 60px, weight 700, line-height 1.20
- H1 Medium: 36px, weight 700, line-height 1.28
- H1 Small: 28px, weight 700, line-height 1.29
- Body: 16px, weight 400, line-height 1.50
- Caption: 12px, weight 600, line-height 1.33
(Use these exactly; no substitutions)

## Spacing & Grid
Base: 8px scale
Values: 1px, 2px, 5px, 6px, 8px, 9px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 60px
Map to component padding and margins in multiples of 8px.

## Border Radius
- None: 0px — tables, strict boxes
- XS: 2px — small buttons, inputs
- SM: 4px — medium components
- MD: 8px — cards, primary buttons
- Full: 50% — icons, circular images

## Shadows & Depth
- Light: rgba(0,0,0,0.08) 0px 4px 16px — card lift
- Inset light: rgb(184,184,184) 1px 1px 2px inset — inputs
Flat otherwise—avoid heavy shadows.

## Component Specifications

### Primary Button
Default: bg:#017ac6; color:#fff; padding:10px 20px; radius:4px; border:none; font-weight:600; font-size:13px
Hover: color:#53aee1; bg:#32363b  
Active: color:#004f8a

### Secondary Button
Default: bg:transparent; color:#fff; padding:12px 32px 12px 24px; radius:8px; border:1px solid #017ac6
Hover: color:#2285f7; opacity:0.6  
Active: bg:#2c6415; color:#fff

### Input Fields
Default: bg:#f4f5f4; color:#000; radius:8px; inset-shadow; padding:12px 13px
Focus: bg:#1eaedb; color:#fff; outline:#000 1px

### Links
Default color from palette; no underline
Hover: #3860be

### Cards
bg:#ededf4; radius:8px; shadow:light; padding:16px or higher

## Layout & Responsive Rules
Max content width: responsive; breakpoints from 320px up to 1440px
Page padding: 16px mobile, 32px desktop
Grid gap: multiples of 8px

## Interaction Rules
Transitions: 150ms ease
Focus indicators: visible outline in black or blue

## DO List
- Use ONLY palette colors
- Maintain 8px spacing scale
- Always use Source Sans Pro for text
- Keep radius consistent per component type
- Use defined shadows only

## DON'T List
- Introduce custom colors
- Mix rounded and sharp corners
- Apply heavy drop shadows
- Remove focus outlines
- Alter font stacks

## Code Examples

```css
.btn-primary {
  background: #017ac6;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { color: #53aee1; background: #32363b; }
.btn-primary:active { color: #004f8a; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.input {
  background: #f4f5f4;
  color: #000000;
  border-radius: 8px;
  padding: 12px 13px;
  box-shadow: rgb(184, 184, 184) 1px 1px 2px inset;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  outline: 1px solid #000000;
}
```

9. Summary

TL;DR — Linode’s design system is functional-first. Blue for action, greys for everything else. Strict 8px grid. Source Sans Pro for all text. Minimal shadows, modest radii, predictable states.

Brand Keywords:

• developer-first
• utilitarian-modern
• high-contrast
• grid-disciplined
• calm-assertive