GoDaddy DESIGN.md

Small-business website and commerce design with confident black-and-green branding and guided-builder simplicity. GoDaddy’s current visual language mixes bold identity, rounded utility controls, and approachable site-building flows to make getting online feel manageable.

1. Visual Theme & Atmosphere

Overall Aesthetic

GoDaddy communicates small-business empowerment with strong brand recognition. The experience should feel direct, commercially practical, and visually confident without becoming intimidating to non-technical users.

Mood & Feeling

• Accessible: website and business tools should feel beginner-friendly
• Guided: setup flows and visual-brand controls should be easy to follow
• Commercial: the system should feel action-oriented and pragmatic
• Bold: the brand is strong and unmistakable
• Flexible: themes, colors, and fonts should support many small-business styles

Design Density

Medium density. GoDaddy often balances marketing, setup guidance, and builder controls, but it keeps those areas straightforward through panelization and short action steps.

Visual Character

• Black-driven branding with green accents
• Rounded controls and clear CTA areas
• Theme-driven website builder surfaces
• Helpful instructional structure for visual branding setup

2. Color Palette & Roles

Core Brand Colors

Neutral Foundation

Supportive Colors

Color Usage Rules

• Use black and green as the clearest GoDaddy signature.
• Let user-chosen brand colors appear inside the builder, but keep the product shell stable.
• Keep setup guidance highly readable and low-friction.

3. Typography Rules

Font Stack

css/* Modern small-business builder sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

GoDaddy typography should feel clear, bold, and beginner-friendly. It needs to support fast setup flows and small-business confidence rather than dense technical detail.

Practical Rules

• Keep setup steps short and explicit.
• Use stronger headings to simplify decisions.
• Preserve enough breathing room so builder controls never feel overwhelming.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #111111;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #111111;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

Accent Button

css.button-accent {
  background: #97D700;
  color: #111111;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #97D700;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #111111;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font: 400 16px/1.2 Inter, sans-serif;
}

Cards and Builder Panels

Theme Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: 20px;
}

Setup Panel

css.setup-panel {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

5. Layout Principles

Spacing Scale

Layout Rules

• Organize setup and builder flows into clear sequences.
• Use theme, color, and font controls as grouped panels.
• Keep calls to action simple and visually distinct.
• Balance marketing confidence with small-business approachability.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.06);
}

.shadow-panel {
  box-shadow: 0 18px 30px rgba(17, 17, 17, 0.12);
}

Depth Rules

• Use depth to support guided setup moments.
• Keep the builder organized and calm rather than flashy.
• Let brand confidence come from contrast and clarity before shadow.

7. Do's and Don'ts

Do

• Use black and green as the strongest GoDaddy brand cues.
• Keep website and brand setup flows simple and confidence-building.
• Group builder controls into obvious panels.
• Preserve clear distinction between guidance, action, and preview.

Don't

• Overcomplicate the path to launch.
• Flood the product shell with too many user-selected colors at once.
• Use overly technical language in core setup flows.
• Make key calls to action visually ambiguous.

8. Responsive Behavior

Responsive Rules

• Stack setup panels early on smaller screens.
• Preserve strong CTA order and visibility.
• Keep color and font controls touch-friendly.
• Maintain readable previews and theme cards in narrow layouts.

Mobile Character

GoDaddy mobile should still feel direct and helpful. Even when condensed, the experience should prioritize quick understanding and fast action over deep exploration.

9. Agent Prompt Guide

Quick Reference

• Mood: bold, guided, small-business-friendly
• Core palette: black, green, white
• Layout: setup panels and theme cards
• Components: strong pill CTAs, approachable builder inputs, guided flows

Prompt Snippet

textDesign this interface in the style of GoDaddy’s current website and website-builder experience. Use a bold black-and-green palette, approachable rounded controls, clean setup panels, and a guided small-business workflow structure. The result should feel direct, helpful, and commercially confident rather than technical or decorative.