Name.com Design System Deep Dive

1. Brand Overview

Name.com’s visual language is functional, slightly utilitarian, but with soft edges where it matters. This is a brand serving domain registration, DNS, and hosting customers — not an audience looking for flamboyant visual storytelling. The design is built to be clear, direct, and trustworthy.

The first thing you notice: a dark, neutral backbone (#282828) with pops of green (#1eaa50 and #6eda78) for interactive elements. This isn’t a “brand that wants to wow you with gradients and motion”—it’s a brand that wants you to find what you need, register it, and feel confident that you’re in safe hands.

Typography is consistent and unified. Everything is set in Proxima Nova and its weight variants. There’s no secondary font for accents — no serif for personality. That’s intentional. This brand’s personality comes from the way it uses size, spacing, and color, not from typeface contrast.

Rounded corners are everywhere — from pills (9999px radius) to cards (8px radius) to avatar-like elements (24px). The effect is approachable without being childish. Even the inputs get a high-radius pill treatment in some places.

Breakpoints are granular — they’ve defined widths as small as 376px and as specific as 897px. This suggests they’ve tuned the responsive behavior to real device widths and not just standard Bootstrap breakpoints. They’re thinking about how forms, search bars, and domain lists render on various phones and small laptops.

Overall: Name.com’s design system is built for clarity, speed, and trust. It balances a dark, stable foundation with a green accent language that signals “go” and “success.” It’s aimed at a mix of professionals, small business owners, and tech-savvy individuals — people who value a clean interface that stays out of their way. This is a functional design system dressed just enough to feel modern.

2. Color System

2.1 Primary Colors

The primary brand color is #1eaa50 — a vibrant green. It’s used for CTAs, primary buttons, and highlight text. Green in UI psychology signals action, confirmation, and success — perfect for a brand whose core action is “register” or “purchase” domains.

The secondary green #6eda78 is lighter and feels fresh. It’s used in buttons, icons, and accents. That dual-green system lets them layer meaning: dark green for serious “go” actions, lighter green for supportive highlights.

The foundation is #282828 — nearly black, but softer. It’s the header background, button base, and heavy text color. White (#ffffff) is the counterpoint, used liberally for text and surfaces.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: #1eaa50 on #ffffff has strong contrast — works well for WCAG AA.
• Text on Dark: White (#ffffff) on #282828 is safe.
• Disabled States: They drop opacity (rgba(190, 190, 190, 0.5)) for disabled buttons, which clearly signals non-interactive elements without breaking the palette.
• Blue (#005fcc): Rare — only appears in hover/focus states. It’s functional, not brand-defining.

They’re not running a dark mode; instead, they balance dark headers with light content areas. This keeps readability high without flipping entire UI themes.

2.4 Usage Guide

• Works well: Dark neutral with either green. White text on dark backgrounds.
• Avoid: Green on green — the two greens are close enough that it can create low contrast if layered.
• Pattern: Primary green for high-value actions, lighter green for secondary. Never swap them.
• Blue is a focus signal — don’t use it for static elements.
• Grays are for text hierarchy and borders; don’t use them for interactive elements unless disabled.

3. Typography

3.1 Font Families

Everything is Proxima Nova — with SemiBold, Bold variants for hierarchy. Fallbacks are utilitarian: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji. No Google Fonts, no Adobe Fonts — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

They build hierarchy mainly with size jumps — from 72px hero headings to 32px section titles, then down to 16px body. Boldness is applied sparingly — SemiBold for emphasis, Bold mainly in smaller sizes. This keeps big type light and approachable.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Frequent values: 8px (176 uses), 16px (70 uses), 24px (49 uses). They also use sub-8px increments (3.6px, 4.5px) — likely for icon alignment or pixel-perfect adjustments.

4.2 Layout

Breakpoints: extremely granular, from 376px to 1536px, with midpoints like 897px. This is tuned for device-specific layouts, not just “mobile/tablet/desktop.”

5. Visual Elements

Border Radius

Shadows

Mostly flat design. Only subtle shadows:

• rgba(0,0,0,0.2) 0px 0px 18px (rare)
• Otherwise, rgba(0,0,0,0) — no visual depth.

Borders

Thin 1px borders in greys (#bebebe, #747474) for inputs and dividers. They use borders instead of shadows to separate elements.

6. Components

6.1 Buttons

Primary CTA (#1eaa50 / #6eda78 variant)

• Default: bg #6eda78, color same green (odd — likely icon button), padding 6.75px 22.5px, radius 9999px
• Hover: bg white, opacity 0.9
• Active: bg #2c6415, border rgba(162,192,169,0.5)
• Focus: bg #1eaedb (blue), border black

Secondary (#282828)

• Default: bg #282828, color same dark, padding 6px 20px, radius 9999px
• Hover: bg white
• Active: same as above
• Focus: blue bg

Utility (#6cc04a)

• Default: bg #6cc04a, color white, padding 12px 10px, radius 2px
• Hover: bg #1eaedb
• Focus: outline black solid 2px

6.2 Links

Multiple styles, all no-underline except explicit underline variants:

• Default color matches palette (dark neutral, medium neutral, green, light gray, white, etc.)
• Hover: always shifts to #565656 and no underline.

6.3 Forms

Inputs:

• Default: bg transparent, color #282828, no border, padding 16px 8px 16px 24px
• Focus: bg #1eaedb, text white, border black.

6.4 Cards

Two styles:

• Light surface (#f6f6f6), radius 24px, padding 24px
• White surface, radius 8px, padding 12px 16px, border #dfdfdf

7. Design Tokens

:root {
  /* Colors */
  --color-dark-neutral: #282828;
  --color-white: #ffffff;
  --color-medium-neutral: #4e4e4e;
  --color-primary-green: #1eaa50;
  --color-neutral-gray: #747474;
  --color-light-gray: #bebebe;
  --color-accent-green-light: #6eda78;
  --color-dark-gray: #3e3e3e;
  --color-light-surface-gray: #f6f6f6;
  --color-action-blue: #005fcc;

  /* Typography */
  --font-proxima-nova: 'ProximaNova', ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-proxima-nova-semibold: 'ProximaNovaSemiBold', ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-proxima-nova-bold: 'ProximaNovaBold', ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

  /* Spacing */
  --space-3_6: 3.6px;
  --space-4: 4px;
  --space-4_5: 4.5px;
  --space-6: 6px;
  --space-6_75: 6.75px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13_008: 13.008px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: rgba(0, 0, 0, 0) 0 0 0 0;
  --shadow-light: rgba(0, 0, 0, 0.2) 0 0 18px 0;
}

8. AI Coding Assistant Prompt

# Name.com Design System Specification

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

Brand Context:
Name.com values clarity, trust, and functional speed. Their design system is neutral-dark with green accents for actions. Typography is consistent, corners are rounded, and spacing follows an 8px grid with occasional fine-tuning.

Color Palette:
- Dark Neutral: #282828 — headers, button backgrounds, heavy text
- White: #ffffff — text on dark, card surfaces
- Medium Neutral: #4e4e4e — secondary text
- Primary Green: #1eaa50 — CTAs, primary buttons
- Neutral Gray: #747474 — captions, footers
- Light Gray: #bebebe — borders, disabled states
- Accent Green Light: #6eda78 — secondary actions, icons
- Dark Gray: #3e3e3e — button text
- Light Surface Gray: #f6f6f6 — card surfaces
- Action Blue: #005fcc — focus outlines, hover states

Typography:
- All text: Proxima Nova family with SemiBold/Bold for emphasis
- H1: 72px 400 0.56 LH — hero titles
- H1 medium: 60px 400 0.60 LH — section titles
- H1 bold: 60px SemiBold 1.00 LH — emphasis
- Down to 12px captions with consistent line heights
- No secondary font — all weights are Proxima Nova variants

Spacing & Grid:
- Base: 8px
- Scale: 3.6px, 4px, 4.5px, 6px, 6.75px, 7.5px, 8px, 9px, 10px, 12px, 13.008px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 80px, 96px
- Apply 8px multiples for layout; fine-tune with sub-8px where necessary

Border Radius:
- 2px — small buttons
- 6px — medium buttons
- 8px — cards, images
- 12px — inputs
- 24px — large buttons, avatars
- full (9999px) — pill buttons, search bars

Shadows & Depth:
- Mostly flat — use borders for separation
- Rare shadow: rgba(0,0,0,0.2) 0px 0px 18px

Component Specifications:

Primary Button:
Default: bg #1eaa50, color #ffffff, padding 6.75px 22.5px, radius full, border none, font-size 18px
Hover: bg #ffffff, color #ffffff, opacity 0.9
Active: bg #2c6415, border rgba(162,192,169,0.5)
Focus: bg #1eaedb, border 1px solid #000000

Secondary Button:
Default: bg #282828, color #ffffff, padding 6px 20px, radius full
Hover: bg #ffffff, opacity 0.9
Active: same as primary
Focus: bg #1eaedb, border black

Utility Button:
Default: bg #6cc04a, color #ffffff, padding 12px 10px, radius 2px, border #6cc04a
Hover: bg #1eaedb
Focus: outline black solid 2px

Navigation Links:
Default: color from palette, no underline
Hover: color #565656, no underline

Input Fields:
Default: bg transparent, color #282828, padding 16px 8px 16px 24px, no border
Focus: bg #1eaedb, color #ffffff, border 1px solid #000000

Cards:
Light: bg #f6f6f6, radius 24px, padding 24px
White: bg #ffffff, radius 8px, padding 12px 16px, border 1px solid #dfdfdf

Layout & Responsive Rules:
- Multiple breakpoints: 376px, 400px, 425px, 426px, 530px, 550px, 600px, 640px, 767px, 768px, 769px, 800px, 860px, 890px, 896px, 897px, 991px, 992px, 1023px, 1024px, 1280px, 1300px, 1536px

Interaction Rules:
- Transition: 150ms ease for state changes
- Focus: color change + border
- Disabled: reduce opacity to 0.5

DO:
- Use only colors from the palette
- Maintain 8px grid
- Apply full radius for pill buttons
- Keep typography in Proxima Nova family
- Use blue only for focus states

DON'T:
- Invent new colors
- Mix sharp and rounded corners
- Use shadows unless specified
- Apply boldness inconsistently

Code Examples:

Primary Button (Tailwind CSS):
```css
.btn-primary {
  background-color: #1eaa50;
  color: #ffffff;
  padding: 6.75px 22.5px;
  border-radius: 9999px;
  font-size: 18px;
  transition: background-color 150ms ease;
}
.btn-primary:hover {
  background-color: #ffffff;
  opacity: 0.9;
}
.btn-primary:focus {
  background-color: #1eaedb;
  border: 1px solid #000000;
}
```

Card:
```css
.card {
  background-color: #f6f6f6;
  border-radius: 24px;
  padding: 24px;
}
```

Input:
```css
.input {
  background-color: transparent;
  color: #282828;
  padding: 16px 8px 16px 24px;
  border: none;
}
.input:focus {
  background-color: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — Name.com’s design system is dark-neutral with green accents, built for clarity and trust. It’s Proxima Nova everywhere, 8px grid with fine-tuning, rounded corners, and minimal shadows.

Brand Keywords:

• trust-functional
• neutral-dark
• action-green
• rounded-approachable
• grid-disciplined