Afternic Design System Deep-Dive

1. Brand Overview

Afternic’s site is a GoDaddy-owned marketplace for buying and selling domain names, and the design language reflects that corporate lineage: clean, direct, utilitarian. This isn’t a brand chasing ornate flourishes — it’s about trust, simplicity, and getting users to complete a transaction without distraction.

The vibe is business-first. There’s very little visual noise: minimal color palette, restrained typography, consistent spacing. They’ve kept the UI neutral to reduce friction for a broad audience — from professional domain investors to casual users looking to sell a single name. No flashy gradients, no aggressive brand patterns. The design is functional, almost spartan.

That restraint makes sense for their audience. Afternic sits in the domain aftermarket space — a niche where credibility and clarity matter more than “wow” factor. The design language says: “We’re here to help you buy or sell a domain safely.” The minimalism reduces cognitive load and improves scanning, which is critical for transaction-heavy platforms.

The typography is tight and modern, using GoDaddy’s proprietary gdsherpa font family with multiple weights. The color palette is anchored by near-black (#111111) and pure white (#ffffff), with subtle neutrals and a single bright blue accent (#4095e8) used sparingly for interactive feedback states. There’s also a corporate green (#00a63f) tucked away in CSS variables, hinting at GoDaddy’s broader brand identity.

Components are standard and predictable: two button styles (primary dark, secondary light), simple underline link patterns, and no exotic form treatments. They rely heavily on an 8px spacing scale, which keeps layout consistent across breakpoints. Border radii cluster around 6px and 12px — enough to soften edges without venturing into “friendly bubble” territory.

Overall: Afternic’s design system is minimalist transactional. It’s not here to entertain you. It’s here to make sure you can find the right domain, see the right price, and click the right button without hesitation.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(17, 17, 17) — normalized to #111111. This near-black is used for text, primary buttons, and critical CTAs. It’s a deliberate choice: black conveys authority, seriousness, and stability. In this space (domain sales), that’s exactly the vibe they want. It also pairs well with white for maximum contrast.

Where competitors might choose blues (for trust) or greens (for growth), Afternic’s black is a signal of neutrality. It avoids associating with any one “side” of the transaction — buyer or seller. It’s also flexible: black works over almost any background.

2.2 Complete Palette

2.3 Color Relationships

Contrast is excellent between #111111 and #ffffff — well above WCAG AA and AAA thresholds for normal and large text. The accent blue (#4095e8) over white also passes comfortably. The neutral gray (#bac0c3) is used for secondary text; contrast here is lower, but acceptable for non-critical content.

Accessibility win: primary text is always dark over light or light over dark — no low-contrast body copy. They keep accent colors for hover/focus, never as body text.

Dark mode: Not implemented. The palette is optimized for light backgrounds, with dark text and occasional dark surfaces.

2.4 Usage Guide

• Workhorse combo: #111111 text over #ffffff background — use for main content, headings, body copy.
• Primary actions: #111111 background with #ffffff text — high-impact buttons.
• Secondary actions: #ffffff background with #111111 text — outlined buttons.
• Disabled state: #bac0c3 text — never for critical info.
• Hover/focus accents: #4095e8 or #00a63f — use sparingly to signal interactivity.
• Avoid: Using #000000 for large surfaces — it’s reserved for sharp outlines and certain focus states.
• Avoid: Using #bac0c3 for body copy — it’s too light for sustained reading.

3. Typography

3.1 Font Families

Afternic uses gdsherpa, a GoDaddy proprietary font, with fallbacks: gdsherpaVF4 fallback, Helvetica, Arial. No Google or Adobe fonts. No variable fonts detected.

3.2 Type Scale

3.3 Hierarchy

Large headings (51–41px) are bold (700) with tight 1.25 line height — strong visual anchors. Mid-tier heading at ~28px keeps hierarchy without overwhelming. Body and link text hover around 16px with varying weights (450–850) — used to signal importance without changing size. Buttons match body text size, keeping clickable elements integrated into text flow.

Multiple heading entries at 16px show that they use weight, not size, to differentiate sublevels — an efficient system for UI labels and section titles.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints span from 320px to 2360px — they’re covering everything from small phones to ultra-wide desktops. The responsive approach uses many intermediate breakpoints, suggesting fine-tuned layouts rather than broad “mobile/tablet/desktop” tiers.

5. Visual Elements

Border Radius

Values:

• 4px 0px 0px — niche usage, possibly table corners
• 6px — Primary: buttons, CTAs
• 8px — secondary buttons, some divs
• 12px — cards, spans, presentations
• 12px 12px 0px 0px — top-rounded containers
• 16px — rare container
• 36px — large pill-like elements

Opinion: 6px is the workhorse. 12px used for larger surfaces. 36px is decorative or avatar-like.

Shadows

Two shadows detected:

• rgba(117, 117, 117, 0.25) 0px 8px 4px -8px
• rgba(117, 117, 117, 0.3) 0px 1px 8px 0px

Sparse usage — mostly flat design.

Borders

Mix of 1px and 2px solid borders, usually neutral grays (#d4dbe0) or primary black for emphasis. Used for separation, not decoration.

6. Components

6.1 Buttons

Secondary Button (light background)

• Default: bg: #ffffff, color: #111111, padding: 8px 12px, radius: 6px, border: 2px solid #111111.
• Hover: bg: var(--ux-ran6wz, green), color: #000000, border: 1px solid #d3d3d3.
• Active: bg: #d3d3d3, color: #ffffff.
• Focus: Outline 2px solid #000000, opacity 0.4.

Primary Button (dark background)

• Default: bg: #111111, color: #ffffff, padding: 8px 16px, radius: 6px, border: 0.
• Hover: same hover as secondary — odd design choice — bg: green, color: black.
• Active: bg: #d3d3d3, color: #ffffff.
• Focus: Outline 2px solid #000000, opacity 0.4.

Comment: Reusing hover styles across button types is unusual — makes primary lose its dark identity on hover.

6.2 Links

Three styles:

1. Black (#111111), bold (695), underline default/hover, hover color #00a4a6.
2. White (#ffffff), bold, underline default/hover, hover color #00a4a6.
3. Gray (#bac0c3), weight 450, no underline default, underline on hover, hover color #00a4a6.

6.3 Forms

No text/checkbox/radio/select styles detected — likely default browser styles overridden minimally.

6.4 Cards

Likely use 12px radius, light background (#f5f5f5 or #ffffff), minimal shadows, 12–24px padding.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #111111;
  --color-secondary: #ffffff;
  --color-black: #000000;
  --color-neutral-gray: #bac0c3;
  --color-accent-blue: #4095e8;
  --color-light-gray: #e8eaeb;
  --color-corporate-green: #00a63f;
  --color-light-bg: #f5f5f5;

  /* Typography */
  --font-family-primary: "gdsherpa", "gdsherpaVF4 fallback", Helvetica, Arial;
  --font-size-h1-lg: 3.25rem; --font-weight-h1-lg: 700; --line-height-h1-lg: 1.25;
  --font-size-h1-md: 2.89rem; --font-weight-h1-md: 700; --line-height-h1-md: 1.25;
  --font-size-h1-sm: 2.57rem; --font-weight-h1-sm: 700; --line-height-h1-sm: 1.25;
  --font-size-h1-xs: 1.80rem; --font-weight-h1-xs: 700; --line-height-h1-xs: 1.25;
  --font-size-body-lg: 1.13rem; --font-weight-body-lg: 450; --line-height-body-lg: 1.5;
  --font-size-body: 1rem; --font-weight-body: 450; --line-height-body: 1.5;
  --font-size-link: 1rem; --font-weight-link: 695; --line-height-link: 1;
  --font-size-caption: 0.8rem; --font-weight-caption: 450; --line-height-caption: 1.5;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-38-4: 38.4px;
  --space-48: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 36px;

  /* Shadows */
  --shadow-soft: rgba(117, 117, 117, 0.25) 0px 8px 4px -8px;
  --shadow-medium: rgba(117, 117, 117, 0.3) 0px 1px 8px 0px;
}

8. AI Coding Assistant Prompt

# Afternic Design System Specification

You are an Afternic design expert. Build UIs matching their visual language exactly.

## Brand Context
Afternic’s design is minimal, transactional, and trust-oriented. It uses a near-black primary color, restrained typography, and an 8px spacing grid. Components are clean, with subtle rounded corners and minimal shadows.

## Color Palette
- Primary: #111111 — Core text, primary buttons
- Secondary: #ffffff — Background, secondary buttons
- Black: #000000 — Outlines, focus indicators
- Neutral Gray: #bac0c3 — Secondary text, disabled states
- Accent Blue: #4095e8 — Hover/focus accent
- Light Gray: #e8eaeb — Light hover/focus backgrounds
- Corporate Green: #00a63f — Rare accent in hover states
- Light Background: #f5f5f5 — Cards, section backgrounds

## Typography
Font family: "gdsherpa", "gdsherpaVF4 fallback", Helvetica, Arial

| Level       | Size        | Weight | Line Height | Use For              |
|-------------|-------------|--------|-------------|----------------------|
| H1-lg       | 3.25rem     | 700    | 1.25        | Page titles          |
| H1-md       | 2.89rem     | 700    | 1.25        | Section headings     |
| H1-sm       | 2.57rem     | 700    | 1.25        | Subsection headings  |
| H1-xs       | 1.80rem     | 700    | 1.25        | Small headings       |
| Body-lg     | 1.13rem     | 450    | 1.5         | Lead paragraphs      |
| Body        | 1rem        | 450    | 1.5         | Standard body        |
| Link-bold   | 1rem        | 695    | 1           | Navigation links     |
| Caption     | 0.8rem      | 450    | 1.5         | Metadata             |

## Spacing & Grid
Base: 8px  
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 38.4px, 48px  
Use multiples for all margins/paddings.

## Border Radius
- sm: 6px — Buttons, inputs
- md: 8px — Secondary buttons, small containers
- lg: 12px — Cards, modals
- xl: 16px — Large containers
- pill: 36px — Rounded avatars or pills

## Shadows & Depth
- Soft: rgba(117,117,117,0.25) 0px 8px 4px -8px
- Medium: rgba(117,117,117,0.3) 0px 1px 8px 0px  
Use sparingly. Flat design preferred.

## Components

### Primary Button
Default: bg #111111, color #ffffff, padding 8px 16px, radius 6px, border 0  
Hover: bg #00a63f, color #000000, border 1px solid #d3d3d3  
Active: bg #d3d3d3, color #ffffff  
Focus: outline 2px solid #000000, opacity 0.4

### Secondary Button
Default: bg #ffffff, color #111111, padding 8px 12px, radius 6px, border 2px solid #111111  
Hover/Active/Focus: same as primary

### Navigation Links
Black: underline default, hover color #00a4a6  
White: underline default, hover color #00a4a6  
Gray: no underline default, underline on hover, hover color #00a4a6

### Input Fields
Use border 1px solid #d4dbe0, radius 6px, padding 8px, font-size 1rem. Focus: outline 2px solid #000000.

### Cards
bg #f5f5f5, radius 12px, padding 12–24px, optional soft shadow.

## Layout & Responsive Rules
Max content width: not specified, but breakpoints suggest fluid scaling.  
Page padding: multiples of 8px.  
Breakpoints: 320px up to 2360px — apply layout shifts incrementally.

## Interaction Rules
Transitions: 150ms ease for state changes.  
Focus indicators: 2px solid outline in #000000.  
Disabled: opacity 0.4.

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Match font weights exactly
- Use 6px radius for buttons
- Keep shadows minimal

## DON'T List
- Invent new colors
- Mix sharp and rounded corners
- Remove focus outlines
- Overuse shadows

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #111111;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 695;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #00a63f;
  color: #000000;
  border: 1px solid #d3d3d3;
}
.btn-primary:focus {
  outline: 2px solid #000000;
  opacity: 0.4;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #111111;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 695;
  font-size: 16px;
  border: 2px solid #111111;
}
.btn-secondary:hover {
  background: #00a63f;
  color: #000000;
  border: 1px solid #d3d3d3;
}
```

### Card
```css
.card {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 24px;
  box-shadow: rgba(117, 117, 117, 0.25) 0px 8px 4px -8px;
}
```

9. Summary

TL;DR — Afternic’s design system is stripped-down, functional, and trust-driven. Black and white dominate, with occasional blue/green accents for interactivity. Typography is proprietary, bold for headings, moderate for body. Spacing is tight and consistent on an 8px grid. Components are predictable, corners slightly rounded, shadows rare.

Brand Keywords:

• transaction-focused
• neutral-minimal
• trust-first
• functional-clarity