DNSMadeEasy Design System Deep Dive

1. Brand Overview

DNSMadeEasy’s site feels unapologetically technical. It’s clearly built for sysadmins, CTOs, and developers who live in a world of uptime charts and failover configs, not lifestyle imagery. The brand voice in the UI is functional first, with a layer of trust-building polish. This isn’t a consumer SaaS trying to charm you—it’s infrastructure software, so the design leans on clarity, hard lines, and a restrained color palette that avoids fluff.

The vibe: confident, slightly austere, but not cold. There’s enough rounded corners and blues to avoid looking hostile. The color decisions scream “enterprise reliability”—primary blue (#0174c3) is everywhere in CTAs and key interactive elements. It’s a hue that’s very common in tech infrastructure brands because it reads as stable, secure, professional. Competitors like Cloudflare go for bright orange for aggressiveness; DNSMadeEasy sticks to blue for trust.

Typography choices reinforce this—Roboto and Roboto Condensed are workhorse fonts. They’re modern sans-serifs with excellent legibility at small sizes, minimal personality, and a wide range of weights. Perfect for a UI where the content is dense and functional. There’s no serif indulgence, no geometric playfulness—everything is about speed of reading and clarity.

Spacing follows an 8px grid with occasional 4px increments for tighter UI elements. This is a good choice—8px grids are predictable and make responsive scaling straightforward. Components are built with fairly generous paddings in key touch targets (buttons, cards), which helps usability despite the information density.

Overall, the design philosophy here is:

• Function over form—but don’t forget polish.
• Trust through consistency—same blue for all primary actions.
• No wasted pixels—everything has a job.
  I like this approach for a product where the audience would be suspicious of anything too flashy.

2. Color System

2.1 Primary Colors

The single most important brand color is rgb(1, 116, 195) → #0174c3. It’s medium-bright, leaning slightly toward cyan without losing the deep blue authority. This is used for CTAs, links, and primary buttons. In color psychology, this blue reads as dependable and intelligent. Against competitors, it’s calmer than Azure’s #007FFF and more saturated than AWS’s mixed palette. This choice positions DNSMadeEasy as trustworthy without being boring.

2.2 Complete Palette

Here’s every extracted color:

2.3 Color Relationships

The palette is blue-heavy with teal accents. White and dark neutrals provide contrast. Accessibility-wise, #0174c3 on white is comfortably above WCAG AA for normal text (~5.8:1 contrast ratio). The bright sky blue (#0f9dff) risks lower contrast against white if used for body text—fine for buttons, but not for small text.

Dark backgrounds like #242424 with white text are perfect for dark mode sections. Teal accents (#59c3c3) pop against both dark and light backgrounds, useful for hover/focus indicators without breaking the brand feel.

2.4 Usage Guide

Works well:

• #0174c3 + white → strong CTA
• #242424 + white → high-contrast dark section
• Teal accents on dark slate backgrounds → subtle, premium feel

Avoid:

• Bright sky blue (#0f9dff) on white for text—it’s too low contrast.
• Mixing teal variants arbitrarily—pick one for consistency in hover states.

3. Typography

3.1 Font Families

Two main families:

• Roboto (Google Fonts, variable): Used for body, links, smaller headings. Wide weight range from 300–700. No fallbacks listed—probably relying on system sans if Roboto fails.
• Roboto Condensed (Google Fonts): Used for larger headings. Slightly narrower, so more text fits without breaking grids.
• Helvetica (system) with Calibri, Arial fallbacks: Used in some buttons and headings.

Roboto is the workhorse—neutral, legible, no surprises. Condensed variant saves space and feels slightly more “technical.”

3.2 Type Scale

3.3 Hierarchy

Hierarchy comes from size jumps—biggest heading at 60px condensed, then stepping down to 48, 42, 40. Body text is mostly 16–20px Roboto, light to regular weights. Uppercase usage in headings and links adds emphasis without changing weight. This ensures legibility while keeping visual rhythm tight.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid with some 4px increments for micro adjustments.

4.2 Layout

Breakpoints range from mobile (300px) to ultra-wide (2400px). This is a granular approach—lots of intermediate points like 766px, 991px, 1024px mean they’re tuning layout for specific device classes. Likely using Vuetify’s grid system.

5. Visual Elements

Border Radius

They mix asymmetric radii (0px 25px) with full pills (50%). Slightly odd to see so many different corner styles—consistency could be improved.

Shadows

• rgba(0, 0, 0, 0.08) -6px 19px 16px -5px — subtle drop, used on cards.
• rgba(0, 0, 0, 0.09) 0px 10px 23px 7px — bigger card shadow.
• Inset shadows for special states: rgba(30, 112, 160, 0.5) and rgba(162, 199, 231, 0.5).

Not flat design—shadows are used for depth.

Borders

Mix of solid 1–2px in neutral colors (#edf2f7, #dfe1eb) and brand blue (#0174c3). Some asymmetric borders (0px 0px 0px 8px solid #33373d) for nav highlights.

6. Components

6.1 Buttons

They have several button styles:

White Outline Button
Default: transparent bg, white text, 2px solid white border, padding 5.76px 11.52px, radius 0px, weight 700, size 14.4px.
Hover: white border, bg var(--e-global-color-65006c0), text var(--e-global-color-cc28abb), shadow rgba(0,0,0,0.3) 5px 10px 15px.
Active: transparent bg, 1px solid transparent.
Focus: rotate(6deg), outline 2px, bg var(--e-global-color-0d13029).

Primary Blue Button
Default: bg #0174c3, white text, padding 8px 15px 5px, radius 15px, no border. Weight 500, size 12px.
Hover: bg var(--e-global-color-0d13029), white border 2px.
Active: transparent bg.
Focus: rotate(6deg).

Teal Button (#59c3c3) — same as above but teal bg.

Text Button
Default: transparent bg, #242424 text, padding 10px, radius 0px, no border.

Large White Outline Button
Padding 16px 30px, radius 25px, border 2px solid white.

Bright Sky Blue Button (#0f9dff) — same as large white button but solid bg.

Accordion Button
Bg white, text #0174c3, padding 36px 31px, border 1px solid #edf2f7, weight 300, size 20px.

6.2 Links

They vary:

• White text, underline → hover pink (#e01f78)
• Blue text (#0174c3) no underline → hover pink underline
• Black text → hover pink
• Charcoal (#242424) → hover var(--e-global-color-cc28abb)
• Dark gray (#333333) → hover var(--e-global-color-a3327c4)

Underline is inconsistent—sometimes only on hover.

6.3 Forms

Text inputs have 3px radius, white bottom border in some cases. No heavy styling—functional.

6.4 Cards

Shadows used (rgba(0,0,0,0.08) drop). Padding usually 36px or 40px. Borders for separation in accordions.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0174c3;
  --color-dark-slate: #334147;
  --color-white: #ffffff;
  --color-deep-navy: #085b91;
  --color-bright-sky: #0f9dff;
  --color-midnight-navy: #083d77;
  --color-dark-gray: #333333;
  --color-charcoal: #242424;
  --color-teal: #59c3c3;
  --color-steel-blue: #1c5073;
  --color-dark-teal: #285959;
  --color-dark-teal-2: #285858;
  --color-muted-teal: #214949;
  --color-deep-teal: #1f4545;
  --color-slate-teal: #244e4e;
  --color-slate-teal-2: #245050;
  --color-ocean-blue: #1a4868;
  --color-ocean-blue-2: #1a4969;

  /* Typography */
  --font-roboto: 'Roboto', sans-serif;
  --font-roboto-condensed: 'Roboto Condensed', sans-serif;
  --font-helvetica: 'Helvetica', Calibri, Arial, sans-serif;

  /* Spacing */
  --space-3_2: 3.2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-14_4: 14.4px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-45: 45px;
  --space-60: 60px;
  --space-90: 90px;

  /* Radius */
  --radius-none: 0px;
  --radius-3: 3px;
  --radius-15: 15px;
  --radius-25: 25px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.08) -6px 19px 16px -5px;
  --shadow-medium: rgba(0, 0, 0, 0.09) 0px 10px 23px 7px;
  --shadow-inset-blue: rgba(30, 112, 160, 0.5) 0px 0px 18px 0px inset;
  --shadow-inset-light: rgba(162, 199, 231, 0.5) 0px 0px 20px 0px inset;
}

8. AI Coding Assistant Prompt

# DNSMadeEasy Design System Specification

System Prompt:
You are a DNSMadeEasy design expert. Build UIs matching their visual language exactly.

Brand Context:
DNSMadeEasy’s design is functional, enterprise-focused, and built for clarity. It uses a restrained blue-and-neutral palette, Roboto typography, and an 8px spacing grid. Components are purposeful with minimal decoration—shadows are subtle, borders are clean.

Color Palette:
- Primary Blue: #0174c3 — CTAs, links, primary buttons
- Dark Slate: #334147 — Neutral text/background
- White: #ffffff — Backgrounds, text on dark
- Deep Navy: #085b91 — Dark accents
- Bright Sky Blue: #0f9dff — Alternate button backgrounds
- Midnight Navy: #083d77 — Dark section backgrounds
- Dark Gray: #333333 — Body text
- Charcoal: #242424 — Button text, headings
- Teal: #59c3c3 — Hover/focus accents
- Steel Blue: #1c5073 — Hover/focus
- Dark Teal: #285959 — Hover/focus
- Dark Teal 2: #285858 — Hover/focus
- Muted Teal: #214949 — Hover/focus
- Deep Teal: #1f4545 — Hover/focus
- Slate Teal: #244e4e — Hover/focus
- Slate Teal 2: #245050 — Hover/focus
- Ocean Blue: #1a4868 — Hover/focus
- Ocean Blue 2: #1a4969 — Hover/focus

Typography:
Fonts:
- Heading: 'Roboto Condensed', sans-serif
- Body: 'Roboto', sans-serif
- UI labels: 'Helvetica', Calibri, Arial, sans-serif

Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 60px | 400 | 1.00 | Page titles |
| H1 | 48px | 400 | 1.00 | Section titles |
| H1 | 42px | 400 | 1.00 | Subtitles |
| H1 | 40px | 400 | 1.00 | Smaller headings |
| Body | 16px | 400 | 1.00 | Paragraphs |
| Button | 14.4px | 700 | 1.67 | Calls to action |
(Include all provided values as needed)

Spacing & Grid:
Base: 8px
Scale: 3.2, 4, 5, 7, 8, 10, 14, 14.4, 15, 16, 18, 20, 30, 32, 36, 40, 45, 60, 90
Use: Buttons (5–20px padding), cards (36–40px), section gaps (45–60px)

Border Radius:
- none: 0px — data tables
- sm: 3px — inputs
- md: 15px — small buttons
- lg: 25px — large buttons
- xl: 50px — pill buttons
- full: 50% — avatars

Shadows & Depth:
- Soft: rgba(0,0,0,0.08) -6px 19px 16px -5px — cards
- Medium: rgba(0,0,0,0.09) 0px 10px 23px 7px — modals
- Inset blue: rgba(30,112,160,0.5) inset — active states

Component Specifications:
Primary Button:
Default: bg #0174c3, color #ffffff, padding 8px 15px 5px, radius 15px, border none, font-weight 500, font-size 12px
Hover: bg var(--e-global-color-0d13029), border 2px solid #ffffff
Active: bg transparent, border 1px solid transparent
Focus: rotate(6deg), outline 2px solid, bg var(--e-global-color-0d13029)

Secondary Button (White outline):
Default: transparent bg, color #ffffff, border 2px solid #ffffff, padding 5.76px 11.52px, radius 0px
Hover: bg var(--e-global-color-65006c0), shadow rgba(0,0,0,0.3) 5px 10px 15px

Navigation Links:
Default: color #0174c3, text-decoration none
Hover: color #e01f78, text-decoration underline

Layout & Responsive Rules:
Breakpoints: 300px, 320px, 411px, 425px, 479px, 480px, 481px, 568px, 575px, 576px, 640px, 766px, 767px, 768px, 800px, 900px, 991px, 992px, 1023px, 1024px, 1025px, 1199px, 1200px, 1366px, 1367px, 2399px, 2400px

Interaction Rules:
- Transitions: 150ms ease for hover/focus
- Focus: outline 2px solid focus color, rotate(6deg) for buttons

DO:
- Use only colors from palette
- Maintain 8px grid
- Use Roboto Condensed for headings
- Keep button paddings consistent with scale
- Use subtle shadows for depth

DON'T:
- Invent new color shades
- Mix sharp and rounded corners randomly
- Use bright sky blue for body text
- Apply heavy shadows

Code Examples:

```css
.btn-primary {
  background: #0174c3;
  color: #ffffff;
  padding: 8px 15px 5px;
  border-radius: 15px;
  font-weight: 500;
  font-size: 12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--e-global-color-0d13029);
  border: 2px solid #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #ffffff;
  transform: rotate(6deg);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card {
  background: #ffffff;
  border-radius: 15px;
  padding: 36px;
  box-shadow: rgba(0,0,0,0.08) -6px 19px 16px -5px;
}

.input-text {
  border: 1px solid #edf2f7;
  border-radius: 3px;
  padding: 10px;
  font-size: 16px;
}
.input-text:focus {
  border-color: #0174c3;
  outline: none;
}
```

9. Summary

TL;DR — DNSMadeEasy’s design system is a tight, functional toolkit built for enterprise reliability. Blue is king, Roboto is everywhere, and the 8px grid keeps layouts consistent. Shadows are subtle, borders are clean, and buttons have clear, consistent states.

Brand Keywords:

• trust-driven
• technical-clarity
• blue-consistency
• enterprise-functional
• grid-disciplined