DNS Brand Design System Deep Dive

1. Brand Overview

The DNS site at dns.google is a Google property, but it doesn’t scream “marketing site.” This is a product utility page — aimed at developers, network engineers, and technically inclined users who want to use Google’s public DNS resolver. The vibe is minimal, functional, with a sprinkle of Google’s brand blue to signal trust and action.

There’s no heavy-handed branding here — no oversized hero images or ornamental flourishes. Instead, the interface is stripped down to essentials: a clean white background, a tight Roboto-based type system, and a handful of interactive elements like buttons and inputs. This is typical of Google’s infrastructure products: they lean on Material Design foundations but remove unnecessary “consumer” gloss.

The design philosophy reads as: clarity first, decoration last. The primary blue (rgb(30, 136, 229) / #1e88e5) is reserved for actions and focus states. Neutral greys handle text, links, and dividers. Shadows are used sparingly, more for Material-style elevation than for dramatic effect.

This is for people who know what DNS is. They don’t need to be sold — they need a clean interface that’s legible, fast, and trustworthy. The restrained palette and consistent spacing make the site feel reliable and predictable. That’s important. DNS is infrastructure — if the UI looks sloppy, the product will feel unreliable.

What’s interesting is that although it inherits from Material Design, it’s not a full Material component library dump. The scale is smaller, the typography is tighter (H1 is just 16px), and the spacing leans on an 8px grid but with some oddball numbers (like 12.8px).

I’d call this "functional-minimal" with a developer-first tone. Every style choice supports clarity and speed. You won’t find gradient buttons or oversized headings here. You will find small, precise components that look like they belong in a control panel, not a marketing site. And that’s exactly right for this audience.

2. Color System

2.1 Primary Colors

The primary brand color is:

• Primary Blue: rgb(30, 136, 229) → #1e88e5

This is a mid-saturated, medium-dark blue. It’s very close to Google’s “Material Design Blue 600.” It carries a perception of trust, stability, and action. Psychologically, blues in this spectrum are associated with professionalism and safety — ideal for a DNS service that positions itself as secure and reliable.

Compared to consumer Google products, which often lean on #4285f4 (Google Blue 500), this is slightly darker, which improves text contrast on white buttons and gives a more serious tone.

Usage: Primary CTAs, button backgrounds, input focus shadows, and other key interactive highlights.

2.2 Complete Palette

Here’s the full extracted palette:

Note: The rgba values are functional tokens (opacity variants) rather than distinct palette colors.

2.3 Color Relationships

• Contrast: Primary Blue on white easily meets WCAG AA contrast (ratio ~4.5:1+ for normal text). White text on Primary Blue also passes comfortably.
• Grey 600 (#616161) on white is borderline for body text under WCAG AA (contrast ~5:1), which is acceptable for secondary text but wouldn’t be ideal for small primary body copy.
• Black 87% is the standard Material Design body text color, optimized for readability on white.

No dark mode is implemented here — all values assume a light background.

2.4 Usage Guide

Do:

• Use Primary Blue (#1e88e5) for interactive elements only. Buttons, focus states, active indicators.
• Keep body text in Black 87% for readability.
• Use Grey 600 for secondary text and non-critical links.

Avoid:

• Using Primary Blue for large background fills — it’s too strong and will overpower.
• Using Grey 600 for small text under 14px — contrast will drop.
• Adding new accent colors. The minimal palette keeps the interface consistent.

3. Typography

3.1 Font Families

Every text style here uses Roboto as the base, with platform-specific fallbacks:

• Roboto, Helvetica Neue — for headings, links, captions (in some contexts)
• roboto-regular, arial — another form of Roboto reference (likely legacy CSS)
• Roboto, Segoe UI, system-ui, -apple-system — for buttons and some captions

No Google Fonts or Adobe Fonts are loaded — Roboto is likely assumed to be system-available or served locally.

3.2 Type Scale

3.3 Hierarchy

The hierarchy here is extremely flat. The largest heading is 16px — the same size as standard body text in many systems. This makes sense for a utility page: there are no big marketing headlines, just labels and instructions. Buttons drop to 14px, captions go as low as 12px.

Legibility is maintained with generous line-heights on smaller sizes (1.5 on 12.8px captions), and the boldest weight in the system is 500 (medium) on buttons. No heavy bolds or italics in sight.

4. Spacing & Layout

4.1 Spacing Scale

The base scale is 8px, but there are deviations.

4.2 Layout

No explicit breakpoints were extracted — likely the layout is flexible and relatively simple. The lack of responsive-specific tokens suggests it’s a single-column or lightweight layout that adapts naturally.

Given the audience and content density, the page probably uses a max-width container around 800–1000px, but that’s outside our extracted data.

5. Visual Elements

Border Radius

Only one radius is used:

• 4px — applied to inputs and buttons.

This is classic Material Design “small rounding.” Keeps corners subtle, avoids the pill-button look.

Shadows

Two shadows are in play:

1. Input focus shadow:

   Copy

   rgb(30, 136, 229) 1px 0px 0px 0px inset,
   rgb(30, 136, 229) -1px 0px 0px 0px inset,
   rgb(30, 136, 229) 0px -1px 0px 0px inset

   This creates a subtle inset border effect in Primary Blue.

2. Material elevation shadow (buttons):

   Copy

   rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
   rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
   rgba(0, 0, 0, 0.12) 0px 1px 5px 0px

   This is Material Design’s elevation level 2.

Borders and Dividers

• Footer border: 1px solid #e4e4e4 on the top edge only.

6. Components

6.1 Buttons

One primary button variant: .matter-button-contained.matter-primary.

Default:

• Background: #1e88e5
• Text color: #ffffff
• Padding: 0px 16px
• Border-radius: 4px
• Border: none
• Box-shadow: Material elevation level 2
• Font: Roboto, 14px, weight 500

Hover:

• Box-shadow: Elevation level 4
• Opacity: 0.16 — This is unusual. This likely applies to a ripple effect overlay in Material, not the whole button.

Active:

• Box-shadow: Elevation level 6
• Opacity: 0.16

Focus:

• Box-shadow: Elevation level 4
• Opacity: 0.16

Disabled state isn’t in the extracted data, but Material defaults would dim the button and remove shadows.

6.2 Links

Default:

• Color: #616161
• Text-decoration: none
• Weight: 400

Hover:

• Underline appears

No color change on hover — keeps it minimal.

6.3 Forms

Text input default:

• Background: transparent
• Text color: rgba(0,0,0,0.87)
• Border-radius: 4px
• Padding: 15px 13px
• Box-shadow: Inset Primary Blue outlines (3 sides)
• No outline

Focus:

• Outline: none
• Text color: var(--matter-helper-theme) (theme variable, likely Primary Blue)
• Border color: var(--matter-helper-safari3)
• Box-shadow: inset 0 1px var(--matter-helper-theme)

No checkboxes, radios, or selects detected.

6.4 Cards

No explicit “card” component is extracted, but the shadows on buttons suggest the same elevation system could be applied.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-black: #000000;
  --color-grey-600: #616161;
  --color-primary-blue: #1e88e5;
  --color-google-blue: #4285f4;
  --color-divider-grey: #e4e4e4;
  --color-white: #ffffff;
  --color-black-87: rgba(0,0,0,0.87);
  --color-transparent: rgba(0,0,0,0);

  /* Typography */
  --font-roboto-helvetica: 'Roboto', 'Helvetica Neue';
  --font-roboto-arial: 'roboto-regular', arial;
  --font-roboto-system: 'Roboto', 'Segoe UI', system-ui, -apple-system;

  --font-size-16: 16px;
  --font-size-14: 14px;
  --font-size-12-8: 12.8px;
  --font-size-12: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --line-height-1: 1.00;
  --line-height-1-25: 1.25;
  --line-height-1-5: 1.50;
  --line-height-2-57: 2.57;

  /* Spacing */
  --space-6: 6px;
  --space-12-8: 12.8px;
  --space-15: 15px;
  --space-16: 16px;
  --space-16-9: 16.9062px;
  --space-28: 28px;

  /* Radius */
  --radius-sm: 4px;

  /* Shadows */
  --shadow-inset-primary: rgb(30, 136, 229) 1px 0px 0px 0px inset,
                          rgb(30, 136, 229) -1px 0px 0px 0px inset,
                          rgb(30, 136, 229) 0px -1px 0px 0px inset;
  --shadow-elevation-2: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
                        rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
                        rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

8. AI Coding Assistant Prompt

# DNS Design System Specification

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

## Brand Context
DNS.Google is a utility-focused product page for Google's public DNS service. The design is functional-minimal, developer-oriented, and inherits from Material Design principles but with smaller, denser components. The priority is clarity, precision, and trust.

## Color Palette
- Black: #000000 — Logo elements, high-contrast text
- Grey 600: #616161 — Secondary text, body copy, links
- Primary Blue: #1e88e5 — CTAs, buttons, input focus states
- Google Blue 500: #4285f4 — Google wordmark text
- Divider Grey: #e4e4e4 — Footer border
- White: #ffffff — Backgrounds, button text
- Black 87%: rgba(0,0,0,0.87) — Body text in inputs
- Transparent: rgba(0,0,0,0) — Input backgrounds

## Typography
- Headings: 'Roboto', 'Helvetica Neue'
- Body: 'Roboto', 'Helvetica Neue'
- Buttons: 'Roboto', 'Segoe UI', system-ui, -apple-system
- Captions: 'Roboto', 'Helvetica Neue' or 'Roboto', 'Segoe UI', system-ui, -apple-system

| Level     | Size   | Weight | Line Height | Use For         |
|-----------|--------|--------|-------------|-----------------|
| Heading-1 | 16px   | 400    | 1.00/null   | Section titles  |
| Button    | 14px   | 500    | 2.57        | Primary actions |
| Link      | 14px   | 400    | null        | Inline actions  |
| Caption   | 14px   | 400    | null        | Secondary text  |
| Caption   | 12.8px | 400    | 1.50        | Small captions  |
| Caption   | 12px   | 400    | 1.25        | Meta info       |

## Spacing & Grid
Base: 8px. Scale includes: 6px, 12.8px, 15px, 16px, 16.9062px, 28px.
Use multiples of base for padding and margins. Odd values are for fine-tuning component internals.

## Border Radius
- sm: 4px — Inputs, buttons

## Shadows & Depth
- Inset Primary Shadow: rgb(30,136,229) 1px 0px 0px inset, -1px, 0px -1px — Input borders
- Elevation 2: Material shadow for buttons default
- Elevation 4: Hover/focus button state
- Elevation 6: Active button state

## Component Specifications

### Primary Button
Default:
- background: #1e88e5
- color: #ffffff
- padding: 0 16px
- border-radius: 4px
- border: none
- font: 14px Roboto, weight 500, line-height 2.57
- box-shadow: elevation 2

Hover:
- box-shadow: elevation 4
- opacity: 0.16 overlay

Active:
- box-shadow: elevation 6
- opacity: 0.16 overlay

Focus:
- box-shadow: elevation 4
- opacity: 0.16 overlay

### Navigation Links
Default:
- color: #616161
- text-decoration: none

Hover:
- text-decoration: underline

### Input Fields
Default:
- background: transparent
- color: rgba(0,0,0,0.87)
- border-radius: 4px
- padding: 15px 13px
- box-shadow: inset primary blue on 3 sides
- outline: none

Focus:
- outline: none
- color: var(--matter-helper-theme)
- border-color: var(--matter-helper-safari3)
- box-shadow: inset 0 1px var(--matter-helper-theme)

### Cards
No dedicated card component. Use white background, 4px radius, and Material elevation shadows if needed.

## Layout & Responsive Rules
- No breakpoints in extracted data — assume fluid width with reasonable max (~800–1000px)
- Maintain 8px spacing multiples

## Interaction Rules
- Use Material-style ripple or opacity overlay for hover/active
- No dramatic animations — keep transitions under 150ms ease
- Focus indicators via box-shadow changes

## DO List
- Use ONLY colors from the palette
- Reserve Primary Blue for interactive elements
- Maintain 8px spacing grid
- Keep border-radius consistent at 4px
- Use Roboto for all text
- Use Material elevation shadows only as specified

## DON'T List
- Don't invent new colors
- Don't use rounded corners larger than 4px
- Don't apply shadows to non-interactive text
- Don't reduce text contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #1e88e5;
  color: #ffffff;
  padding: 0 16px;
  border-radius: 4px;
  border: none;
  font: 500 14px/2.57 'Roboto', 'Segoe UI', system-ui, -apple-system;
  box-shadow: rgba(0,0,0,0.2) 0px 3px 1px -2px,
              rgba(0,0,0,0.14) 0px 2px 2px 0px,
              rgba(0,0,0,0.12) 0px 1px 5px 0px;
  transition: box-shadow 150ms ease;
}
.btn-primary:hover {
  box-shadow: rgba(0,0,0,0.2) 0px 2px 4px -1px,
              rgba(0,0,0,0.14) 0px 4px 5px 0px,
              rgba(0,0,0,0.12) 0px 1px 10px 0px;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: rgba(0,0,0,0.87);
  border-radius: 4px;
  padding: 15px 13px;
  box-shadow: rgb(30, 136, 229) 1px 0px 0px 0px inset,
              rgb(30, 136, 229) -1px 0px 0px 0px inset,
              rgb(30, 136, 229) 0px -1px 0px 0px inset;
  outline: none;
}
.input:focus {
  box-shadow: inset 0 1px var(--matter-helper-theme);
}
```

9. Summary

TL;DR — DNS.Google’s design system is small, precise, and functional. A minimal palette, tight typography, and Material-inspired components create a trustworthy, developer-friendly interface. Every style choice supports clarity and reduces noise.

Brand Keywords:

• functional-minimal
• developer-first
• trust-oriented
• Material-inspired