Netangels Design System Deep Dive

1. Brand Overview

Netangels feels like a brand that’s firmly planted in the web hosting / cloud services space but with a slightly more approachable visual tone than the “corporate data center” look you see from some competitors. There’s a mix of bold blues, crisp whites, and neutral grays that make it clear: this is tech, but not sterile. The typography choice — Roboto across the board — reinforces that, giving a modern, versatile look that works equally well for marketing pages and dense UI.

The vibe is pragmatic. No ornamental flourishes, no unnecessary gradients. The primary blue (#0066ff and its lighter sibling #0f79d5) is used for CTAs, links, and interactive states. It’s bright enough to stand out against the neutral backgrounds (#f4f5fa and pure white), but balanced with plenty of space and clean edges.

Corners are gently rounded — 8px and 12px radii dominate — which softens the otherwise utilitarian feel. It’s not trying to be “playful” like a consumer app, but it’s also not all sharp edges and 1px borders. That’s a nice middle ground for a brand serving a wide range of customers.

The overall design philosophy: clarity first, then brand color. Components are clearly defined, with consistent padding and spacing based on an 8px scale. Interactions are restrained — hover states mostly adjust opacity and shadows. Nothing flashy. This works because users here care more about speed, structure, and trust than about “delight” animations.

If you’re designing for Netangels, you need to think about utility. Every pixel seems measured. Blue is for actions, gray for text, white for surfaces. There’s a clear hierarchy in typography, and the spacing grid is respected everywhere. This is a system you can build on without worrying about inconsistencies — but it won’t hide sloppy work. Deviate from the palette or spacing, and it’ll look wrong immediately.

2. Color System

2.1 Primary Colors

The main brand driver is Blue — specifically #0066ff for primary CTAs and #0f79d5 for link accents. Psychologically, blue communicates trust, reliability, and competence — perfect for a hosting brand. Compared to competitors like DigitalOcean (#0066ff) or Hetzner (red), Netangels’ blue is in the same energetic range but paired with gentler neutrals, making it feel less aggressive than some enterprise tech palettes.

This blue is used in multiple saturation levels:

• #0066ff — pure primary action buttons, icon accents.
• #0f79d5 — links, info cards.

The rest of the palette is neutral: blacks and grays for text, whites and off-whites for surfaces, plus a few functional colors for hover/focus or alerts.

2.2 Complete Palette

Functional CSS variables also exist:

• --toastify-icon-color-success: #07bc0c — success state
• --toastify-color-warning: #f1c40f — warning state
• --toastify-color-progress-dark: #bb86fc — progress indicator
• --rt-color-success: #8dc572 — success text
• --toastify-color-info: #3498db — info
• --toastify-color-error: #e74c3c — error
• --rt-color-error: #be6464 — error text
• --rt-color-info: #337ab7 — info text
• --rt-color-dark: #222 — dark surface
• --rt-color-warning: #f0ad4e — warning text
• --swiper-theme-color: #007aff — swiper controls

2.3 Color Relationships

Contrast is solid: #0066ff on white easily passes WCAG AA for normal text. Dark gray (#353535) on light gray (#f4f5fa) is borderline for small text but works fine for UI labels. The brand doesn’t seem to run a dark mode — all surfaces are light, with dark text or blue accents.

The blues are distinct enough from each other that you can use both in the same UI without confusion — #0f79d5 for links, #0066ff for buttons. The neutrals are consistent in lightness steps, which helps UI separation.

2.4 Usage Guide

Works well:

• #0066ff buttons on #ffffff or #f4f5fa backgrounds.
• #0f79d5 links inline with dark text.
• #353535 text on #f4f5fa surfaces for secondary emphasis.

Avoid:

• Blue text on blue backgrounds — kills contrast.
• Using functional reds (#e74c3c) outside of error states — breaks semantic clarity.
• Mixing the brown (#895835) hover accent with blue CTAs — visually jarring.

3. Typography

3.1 Font Families

All text is Roboto, no fallbacks listed, sourced locally or via Google Fonts. No variable fonts. This is a safe choice: clean, modern, readable at all sizes. Works well for UI-heavy sites.

3.2 Type Scale

3.3 Hierarchy

Headings scale down from 56px to 14px in sensible steps — large hero titles, medium section headers, small subheads. Line heights are mostly tight (1.3–1.4) except for some headings at 2.11, which read as more spacious, likely for hero text or special callouts.

Links are sized to match body text or slightly larger for emphasis. Buttons use 16px or 13px text — no microtext buttons here. The consistency in weights (400 and 500) keeps the hierarchy readable without relying on color shifts.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints range from 400px to 1921px — clearly targeting everything from small mobile to 4K. That’s a lot of breakpoint detail, so it’s likely a flexible grid that adjusts component sizes rather than a fixed container.

5. Visual Elements

Border Radius System

All corners are rounded, no sharp corners unless intentionally set to 0.

Shadows

Minimal use:

• rgba(53,53,53,0.1) 0px 0px 8px — subtle depth
• rgb(128,128,128) 0px 0px 5px — mild outline
• rgba(120,120,120,0.15) 0px 2px 6px — hover depth

Borders

Mostly 1px solid in neutral colors (#ccc, #c1c1c1). Occasionally blue (#0066ff) for focused buttons.

6. Components

6.1 Buttons

Primary (blue)

• Default: bg #0066ff, text #ffffff, padding 0 16px, radius 8px, border transparent.
• Hover: opacity 0.7, bg #dce2e9, border transparent, shadow rgba(0,0,0,0.12) 0px 5px 12px.
• Active: bg #788693, shadow rgba(53,53,53,0.5) 0px 0px 3px, text #455562.
• Focus: bg rgba(15,121,213,0.1), border #ccc, text #0066ff.

Secondary (white outline)

• Default: bg #ffffff, text #0066ff, border #0066ff.
• States same as primary.

Accent (orange)

• Default: bg #f28434, text #ffffff, padding 0 24px, radius 8px.

Small gray

• Default: bg #ccc, text white, padding 0 40px, radius 8px.
• Hover: bg #005ce6, border #0a60ab, text #0066ff.

6.2 Links

Variants:

• Blue (#0066ff) with underline hover shift to #0f79d5.
• White text for dark backgrounds.
• Gray (#b0b0b0) for disabled states.
• Dark gray (#353535) for nav links.

6.3 Forms

Search input:

• Default: bg rgba(0,102,255,0.15), text #455562, radius 8px, padding 0 38px 0 12px.
• Focus: bg rgba(15,121,213,0.1), border #ccc, shadow rgb(208,101,101) 0px 0px 6px, text #0066ff.

Textarea:

• Default: bg white, border #ccc, radius 8px.
• Focus: bg #0f79d5, border #0f79d5.

Checkbox:

• Default: bg white, border #ccc, radius 5.6px.
• Focus: same as search input.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #353535;
  --color-primary-blue: #0f79d5;
  --color-cta-blue: #0066ff;
  --color-white: #ffffff;
  --color-light-gray: #f4f5fa;
  --color-slate: #455562;
  --color-brown: #895835;
  --color-blue-focus: #0061f2;
  --color-deep-blue: #0a60ab;
  --color-blue-alt: #0062f4;
  --color-white-91: #ffffff;

  /* Functional */
  --toastify-icon-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-progress-dark: #bb86fc;
  --rt-color-success: #8dc572;
  --toastify-color-info: #3498db;
  --toastify-color-error: #e74c3c;
  --rt-color-error: #be6464;
  --rt-color-info: #337ab7;
  --rt-color-dark: #222;
  --rt-color-warning: #f0ad4e;
  --swiper-theme-color: #007aff;

  /* Typography */
  --font-family-primary: 'Roboto';

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-8-8: 8.8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30-08: 30.08px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-140: 140px;

  /* Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-5-6: 5.6px;
  --radius-6: 6px;
  --radius-6-9: 6.9px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;

  /* Shadows */
  --shadow-light: rgba(53,53,53,0.1) 0px 0px 8px 0px;
  --shadow-gray: rgb(128,128,128) 0px 0px 5px 0px;
  --shadow-medium: rgba(120,120,120,0.15) 0px 2px 6px 0px;
}

8. AI Coding Assistant Prompt

# Netangels Design System Specification

You are a Netangels design expert. Build UIs matching their visual language exactly.

## Brand Context
Netangels is a tech brand focused on clarity, trust, and functionality. The design is clean, grid-based, with a focus on blue for actions and neutral backgrounds. Rounded corners and consistent spacing keep layouts approachable but professional.

## Color Palette
- Black: #000000 — Primary text, headers
- Dark Gray: #353535 — Secondary text, UI elements
- Primary Blue: #0f79d5 — Links, info cards
- CTA Blue: #0066ff — Primary buttons, CTAs
- White: #ffffff — Backgrounds, text on dark
- Light Gray: #f4f5fa — Surface backgrounds
- Slate: #455562 — Secondary text
- Brown: #895835 — Rare hover/focus accents
- Blue Focus: #0061f2 — Focus outlines
- Deep Blue: #0a60ab — Focus outlines
- Blue Alt: #0062f4 — Hover/focus states

Functional:
- Success: #07bc0c
- Warning: #f1c40f
- Progress Dark: #bb86fc
- Info: #3498db
- Error: #e74c3c
- Success Text: #8dc572
- Error Text: #be6464
- Info Text: #337ab7
- Dark Surface: #222
- Warning Text: #f0ad4e
- Swiper Controls: #007aff

## Typography
Font: "Roboto"
Weights: 300, 400, 500
Type scale:
| Level | Size | Weight | Line Height | Use |
| H1 | 56px | 500 | 1.32 | Hero titles |
| H1 | 40px | 500 | 1.30 | Section titles |
| H1 | 36px | 500 | 1.39 | Subsection |
| Link | 26.4px | 500 | 1.06 | Prominent links |
| Body | 16px | 400 | 1.15 | Paragraphs |
| Caption | 14px | 400 | 1.36 | Notes |

## Spacing & Grid
Base: 8px
Scale: 2, 4, 7, 8, 8.8, 10, 11, 14, 16, 18, 20, 24, 28, 30.08, 32, 40, 48, 64, 80, 140
Use multiples for all padding/margins.

## Border Radius
- none: 0 — square sections
- sm: 4px — small buttons
- md: 8px — buttons, inputs
- lg: 12px — cards, headers
- xl: 16px — large containers
- round: 20px — special cards

## Shadows & Depth
Use subtle shadows:
- rgba(53,53,53,0.1) 0px 0px 8px
- rgba(120,120,120,0.15) 0px 2px 6px
Avoid heavy drop shadows.

## Components

### Primary Button
Default: bg #0066ff, color #ffffff, padding 0 16px, radius 8px  
Hover: opacity 0.7, bg #dce2e9, shadow rgba(0,0,0,0.12) 0px 5px 12px  
Active: bg #788693, shadow rgba(53,53,53,0.5) 0px 0px 3px, color #455562  
Focus: bg rgba(15,121,213,0.1), border #ccc, color #0066ff  

### Secondary Button
Default: bg #ffffff, color #0066ff, border #0066ff  
Same hover/active/focus as primary.

### Link
Default: color #0066ff, underline; hover: color #0f79d5

### Input Field
Default: bg rgba(0,102,255,0.15), border none, radius 8px  
Focus: bg rgba(15,121,213,0.1), border #ccc, shadow rgb(208,101,101) 0px 0px 6px, color #0066ff

### Card
bg white, radius 12px or 16px, padding 24px–32px, subtle shadow

## Layout & Responsive Rules
Breakpoints: 400px–1921px range  
Mobile padding: 16px  
Desktop padding: 32px  
Grid gap: 16px or 32px

## Interaction Rules
Transitions: 150ms ease  
Focus indicators: visible border or outline  
Hover: opacity change or subtle shadow

## DO
- Use only palette colors
- Maintain 8px grid
- Use Roboto consistently
- Apply correct radius per component
- Keep shadows subtle

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Ignore spacing scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0066ff;
  color: #ffffff;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  opacity: 0.7;
  background: #dce2e9;
  box-shadow: rgba(0,0,0,0.12) 0px 5px 12px;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: rgba(53,53,53,0.1) 0px 0px 8px;
}
```

Input:
```css
.input-search {
  background: rgba(0,102,255,0.15);
  border-radius: 8px;
  padding: 0 38px 0 12px;
  border: none;
  font-size: 16px;
}
.input-search:focus {
  background: rgba(15,121,213,0.1);
  border: 1px solid #ccc;
  box-shadow: rgb(208,101,101) 0px 0px 6px;
}
```

9. Summary

TL;DR — Netangels is a clean, blue-driven tech brand with a disciplined 8px grid, Roboto typography, and restrained shadows. Blue is for actions, gray for text, white for surfaces. Rounded corners make it approachable without losing professionalism.

Brand Keywords:

• clarity-driven
• tech-trust
• grid-disciplined
• blue-action
• approachable-neutral