Alright, let's dive in.
Here’s the full Cloudns design system teardown, written like we’re passing notes between two senior designers.

1. Brand Overview

Cloudns is a DNS hosting provider. Their site isn’t trying to win beauty awards — it’s engineered for a technical audience who values clarity over theatrics. But they do care about brand presence: the moment you land, you see that punchy orange (#ff6921) in the logo and call‑to‑action buttons. It’s bright, confident, and stands out against the otherwise neutral grays and whites.

The vibe: functional, slightly conservative, but with a pop of energy. They’re not going for bleeding‑edge design trends. No neumorphism, no glassmorphism. Just clean UI components with enough polish to feel trustworthy.

Philosophy here:

• Keep things readable — Nunito is the workhorse font, soft and friendly without losing professionalism.
• Stick to a small palette — three main colors dominate, with deliberate use.
• Rounded buttons everywhere — pill radius of 50px is a signature.
• Shadows are restrained — mostly subtle drops to lift cards and inputs off the page.

Audience is DNS admins, sysadmins, and tech business owners. These people scan for data, click the right button, move on. The design supports that workflow — high‑contrast CTAs, clear headings, predictable layouts. It’s not trying to seduce, it’s trying to convert.

2. Color System

2.1 Primary Colors

Main brand color: #ff6921 (rgb(255, 105, 33)).
This is their energy shot — used for logo accents, primary buttons, focus borders. It’s a warm orange, leaning towards red‑orange. It says “act now” without the aggression of pure red. Compared to many tech brands that lean blue for trust, orange is more about urgency and friendliness. Think “we’re fast, we’re approachable.”

2.2 Complete Palette

That’s it — three core colors. Everything else (dark text, hover grays) comes from inline rgb values, but the palette is tight.

2.3 Color Relationships

Contrast:

• Orange (#ff6921) on white (#ffffff) — passes WCAG AA for large text easily, borderline for small text but acceptable given bold usage.
• White on orange — good contrast.
• Light gray (#d7d7d7) is low contrast against white — should be reserved for non‑critical UI like separators, not text.

No dark mode here — palette is fixed.

2.4 Usage Guide

Works well:

• Orange + white for high‑impact CTAs.
• Orange focus borders on inputs — draws attention without being harsh.
• Light gray backgrounds for secondary sections.

Avoid:

• Light gray text on white — kills readability.
• Overusing orange for non‑interactive elements — it’s powerful, keep it for actions.

3. Typography

3.1 Font Families

Primary: Nunito.
Fallbacks: None listed explicitly, but standard sans‑serif fallback assumed.
Secondary: Occasional Arial for small utility text.

No Google Fonts import in data — likely locally hosted.

3.2 Type Scale

3.3 Hierarchy

They use weight and size to separate headings from body — nothing exotic, but consistent. Uppercase pops in buttons and some headings. Nunito’s rounded terminals soften the tone, keeping it approachable. Arial shows up in utility text — a bit jarring, but probably legacy.

4. Spacing & Layout

4.1 Spacing Scale

Scale type: 8px grid.
Values (px/rem/frequency):

4.2 Layout

Breakpoints:
320px, 410px, 460px, 480px, 500px, 510px, 600px, 615px, 640px, 670px, 750px, 870px, 890px, 920px, 1020px, 1080px, 1200px, 1266px, 1366px, 1400px, 1410px, 1940px.
They’re not sticking to the classic 320/768/1024 — they’ve got a bunch of device‑specific stops. This feels like iterative tweaks over time.

5. Visual Elements

Border Radius System

Signature: pill buttons at 50px. Avatars/images at 50% (perfect circle). Inputs/cards at 3px–10px.

Shadow System

Mostly subtle — no heavy drops.

Borders

Two main combos:

• Bottom border: 1px solid #333 on list items (113 times) — clean separators.
• Solid 1px #111 on div — rare.

6. Components

6.1 Buttons

They have multiple variants. All pill‑shaped (50px radius).

Sign-in Dark Button (sign-in round-btn dark-btn s-btn):

• Default: bg #46494e, white text, padding 5px 30px.
• Hover: bg #55585d, inset box‑shadow #999.
• Focus: white bg, orange text (#ff6921), border 1px solid orange, glow shadow rgba(255,105,33,0.3).

Primary Orange Button (round-btn color-btn m-btn):

• Default: bg #ff6921, white text, padding 11px 40px.
• Hover: white bg (0.8 opacity), orange text, orange border 1px solid #ff6f2c, box‑shadow #ff6921 0px 0px 0px 2px.
• Focus: white bg, orange text, orange border 1px solid #ff6921, glow shadow.

Light Gray Button (round-btn x-bright-btn m-btn):

• Default: bg #ededed, text #46494e, padding 11px 40px.
• Hover: white bg (0.8 opacity), orange text, orange border.
• Focus: same as orange button.

Domain Check Button (domain-check round-btn bright-btn h-c):

• Default: bg #d6d6d6, text #46494e, padding 10px 40px.
• Hover: white bg (0.8 opacity), inset shadow #999.
• Focus: white bg, orange text, orange border.

White Secondary Button (round-btn s-btn white-btn second-btn):

• Default: white bg, orange text, padding 5px 30px.
• Hover: orange bg, white text, inset shadow #999.
• Focus: same as others — white bg, orange text, orange border.

6.2 Links

Variants:

• Orange (#ff6921) default, hover #eeeeee.
• White default, hover #eeeeee.
• Gray (#777777) default, hover #eeeeee.
• Dark gray (#46494e) bold, hover #eeeeee.
• Near black (#333333) default, hover #eeeeee.

No underline, hover is pure color change.

6.3 Forms

Inputs:

• Default: white bg, gray text (#777), border 1px solid transparent, radius 3px, padding 6px 10px, subtle shadow rgba(0,0,0,0.2).
• Focus: white bg, orange text, border 1px solid orange, glow shadow.

Selects:
Same as inputs but with right padding 30px.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #d7d7d7;
  --color-orange: #ff6921;

  /* Typography */
  --font-family-primary: "Nunito", sans-serif;
  --font-family-secondary: "Arial", sans-serif;
  --font-size-h1-xl: 40px;
  --font-size-h1-lg: 30px;
  --font-size-h1-md: 24px;
  --font-size-h1-sm: 22px;
  --font-size-h1-xs: 20px;
  --font-size-body-lg: 16.6667px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption-lg: 13.3333px;
  --font-size-caption-md: 13px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-37_5: 37.5px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(72, 62, 52, 0.2) 0px 10px 20px 0px;
  --shadow-md: rgb(167, 159, 158) -1px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
  --shadow-xs: rgb(0, 0, 0) 0px 0px 8px 0px;
}

8. AI Coding Assistant Prompt

# Cloudns Design System Specification

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

## Brand Context
Cloudns is a DNS hosting provider with a clean, functional interface. The design prioritizes clarity, predictable layouts, and a restrained palette. Orange is used for energy and CTAs, while neutrals keep the interface professional.

## Color Palette
- White: #ffffff — Backgrounds, text on dark, secondary buttons
- Light Gray: #d7d7d7 — Footer backgrounds, dividers
- Orange (Primary): #ff6921 — Logo accents, primary buttons, focus borders

### Color Rules
- Use orange only for interactive or brand elements
- Maintain high contrast between text and background
- Avoid light gray for text on white backgrounds

## Typography
Font Families:
- Primary: "Nunito", sans-serif
- Secondary: "Arial", sans-serif

Type Scale:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 XL | 40px | 400    | 1.20        | Page titles |
| H1 LG | 30px | 400/700| —           | Section headings |
| H1 MD | 24px | 700    | 1.00        | Uppercase headings |
| Body LG | 16.6667px | 400 | — | Body text |
| Body MD | 16px | 400/700 | 1.20 | Body text, UI labels |
| Button | 14px | 400/700 | — | CTAs |
| Caption | 13.3333px | 400 | — | Utility text |
| Caption Bold | 13px | 700 | — | Emphasized captions |
| Caption Sm | 12px | 400 | — | Fine print |

## Spacing & Grid
Base: 8px grid  
Tokens: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 11px, 15px, 16px, 20px, 24px, 30px, 37.5px, 40px, 45px, 50px, 60px, 80px, 100px

## Border Radius
- sm: 3px — inputs, selects
- md: 10px — cards, general buttons
- lg: 30px — links
- pill: 50px — primary buttons
- full: 50% — avatars, images

## Shadows & Depth
- Large: rgba(72, 62, 52, 0.2) 0px 10px 20px
- Medium: rgb(167, 159, 158) -1px 1px 2px
- Small: rgba(0,0,0,0.2) 0px 2px 5px
- XSmall: rgb(0,0,0) 0px 0px 8px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background-color: #ff6921;
  color: #ffffff;
  padding: 11px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  border: none;
}
.btn-primary:hover {
  background-color: rgba(255,255,255,0.8);
  color: #ff6921;
  border: 1px solid #ff6f2c;
  box-shadow: #ff6921 0px 0px 0px 2px;
}
.btn-primary:focus {
  background-color: #ffffff;
  color: #ff6921;
  border: 1px solid #ff6921;
  box-shadow: rgba(255,105,33,0.3) 0px 1px 9px;
}

Secondary Button (White)

.btn-secondary {
  background-color: #ffffff;
  color: #ff6921;
  padding: 5px 30px;
  border-radius: 50px;
  font-weight: 400;
  font-size: 14px;
}
.btn-secondary:hover {
  background-color: #ff6921;
  color: #ffffff;
  box-shadow: #999999 0px 0px 0px 1px inset;
}

Input Field

.input {
  background-color: #ffffff;
  color: #777777;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 6px 10px;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 5px;
}
.input:focus {
  background-color: #ffffff;
  color: #ff6921;
  border: 1px solid #ff6921;
  box-shadow: rgba(255,105,33,0.3) 0px 1px 9px;
}

Layout & Responsive Rules

• Breakpoints: 320px, 410px, 460px, 480px, 500px, 510px, 600px, 615px, 640px, 670px, 750px, 870px, 890px, 920px, 1020px, 1080px, 1200px, 1266px, 1366px, 1400px, 1410px, 1940px

Interaction Rules

• Transitions: 150ms ease for hover/focus
• Focus indicators: Orange border + glow
• No active state specified — keep consistent with hover

DO List

• Use only palette colors
• Maintain 8px grid
• Pill buttons must have 50px radius
• Use Nunito for all headings and body
• Keep hover states high contrast

DON'T List

• Don’t use light gray for text on white
• Don’t mix sharp corners with rounded in same component
• Don’t introduce new shadows
• Don’t apply underline to links

Code Examples

Primary Button, Secondary Button, Input given above.

---

# 9. Summary

**TL;DR** Cloudns runs a lean, functional design system: three core colors, Nunito everywhere, pill‑radius buttons, subtle shadows. Orange drives action, grays keep it grounded.

**Brand Keywords**: tech-functional, orange-driven, pill-buttons, minimal-palette

--- 

That’s the whole teardown. Every number here came straight from their extracted styles — no guessing. This is production‑ready spec material.