Ngenix Design System Deep Dive
1. Brand Overview
Ngenix is a tech-first brand. The product focus is clear: edge cloud services, web acceleration, and security. This isn’t a lifestyle brand, it’s infrastructure. The design language reflects that—precise, restrained, and a little utilitarian. No gradients. No ornamental fluff. Everything is functional and stripped down.
The vibe is enterprise, but not old-school enterprise with clunky serif fonts. Ngenix uses Graphik—a modern sans serif—across every context. That choice alone tells you they value clarity and neutrality over personality. Graphik is almost invisible; it’s there to communicate without getting in the way.
Colors stick to a narrow range: deep navy (#113a60), bright functional blue (#1388ca), a hard red (#dc3c3f) for alerts, and a set of steady grays (#999999, #dbdbdb, etc.). The primary semantic color is rgb(17, 22, 23)—a near-black with a hint of coolness. Feels secure, authoritative.
Spacing is mostly on an 8px scale (confirmed in data). You see 4px, 8px, 16px, 24px increments all over. Breakpoints range widely, from tiny mobile widths (350px) to large desktop (1235px).
If you’ve worked with B2B SaaS platforms, this will feel familiar. It’s not about delight, it’s about trust and legibility. But Ngenix still injects small touches—rounded corners on buttons (4px, 6px), occasional full-circle shapes for icons—that keep it from feeling too harsh.
This design system is aimed at developers and enterprise clients who need clarity and precision. The brand communicates “we are serious, we are stable, we are here to handle your traffic.”
2. Color System
2.1 Primary Colors
The semantic primary color is rgb(17, 22, 23) (#111617). This is almost black, but not pure. It’s cooler than #000000, leaning toward blue-gray. Psychologically, it feels secure and grounded—appropriate for a security/edge platform. Compared to competitors (think Cloudflare’s bright orange or Fastly’s red), Ngenix goes darker and more understated. This says: “We’re not flashy; we’re solid.”
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| Gray Medium | #999999 | Neutral text/UI | Secondary text, icons |
| White | #ffffff | Background / text | Buttons, text on dark |
| Link Blue | #0000ee | Interactive | Links, inline CTAs |
| Gray Light | #dbdbdb | Neutral bg | Dividers, inputs |
| Black | #000000 | Text | High-contrast body text |
| Deep Navy | #113a60 | Accent / search | Search field text, hover bg |
| Bright Blue | #1388ca | Accent / link | Secondary links, highlights |
| Semi-white | #ffffff (opacity) | Hover/focus overlay | Button hover, modals |
| Alert Red | #dc3c3f | Status | Error states, alert buttons |
| Gray Mid-light | #a6aaaf | Hover/focus UI | Borders, muted text |
| Gray Mid-light-alt | #a6abaf | Hover/focus UI | Borders, muted text |
| Gray Mid | #acb0b4 | Hover/focus UI | Borders, muted text |
| Gray Mid-alt | #a7abaf | Hover/focus UI | Borders, muted text |
| Gray Mid-dark | #abafb3 | Hover/focus UI | Borders, muted text |
2.3 Color Relationships
The palette has clear separation:
- Dark base (
#111617) vs. white backgrounds (#ffffff) - Accent blues for links and highlights (
#0000ee,#1388ca) - Red for destructive actions (
#dc3c3f)
Contrast is good—white on #111617 is well above WCAG AAA for body text. Blue links (#0000ee) on white are accessible for most users, though a bit saturated. The only potential issue: gray text (#999999) on white might not meet AAA for small text, but it’s fine for secondary content.
Dark mode? Not implemented here. The palette is light-first.
2.4 Usage Guide
- Primary actions: Use #dc3c3f for destructive or high-priority; #1388ca for positive/neutral.
- Links: #0000ee for inline; #1388ca for secondary nav.
- Backgrounds: White or #dbdbdb for soft contrast.
- Avoid: Mixing #0000ee and #1388ca in the same block—they fight for attention.
- Hover states: Often swap to #113a60 background and white text.
3. Typography
3.1 Font Families
Everything runs on Graphik. No Google Fonts. No Adobe subscription. Likely self-hosted. Fallbacks are minimal—sometimes Arial for buttons.
Graphik is a geometric sans. Neutral. Clean. Works at all sizes. Keeps the brand feeling modern without being trendy.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| H1 | Graphik | 60px | 700 | 0.95 |
| H1 alt | Graphik | 36px | 500 | 1.20 |
| H1 alt | Graphik | 30px | 500 | 1.40 |
| H1 alt | Graphik | 28px | 500 | 1.30 |
| H1 alt | Graphik | 24px | 500 | 1.40 |
| H1 alt | Graphik | 24px | 400 | 1.40 |
| H1 alt | Graphik | 20px | 500 | 1.40 |
| H1 alt | Graphik | 20px | 700 | 1.40 |
| Link | Graphik | 20px | 500 | 1.00 |
| Link | Graphik | 18px | 400 | 1.40 |
| Body | Graphik | 18px | 400 | 1.40 |
| Body bold | Graphik | 18px | 700 | 1.40 |
| Caption | Graphik | 14px | 400 | 1.40 |
| Caption bold | Graphik | 14px | 500 | 1.00 |
| Footnote | Graphik | 13px | 400 | 1.40 |
| Footnote bold | Graphik | 13px | 500 | 1.00 |
| Micro | Graphik | 12px | 400 | 1.40 |
| Tiny | Graphik | 10px | 400 | 1.00 |
3.3 Hierarchy
The scale is tight—small jumps between headings. This creates a flat hierarchy, which is common in enterprise sites: you don’t want giant jumps between H1 and H2. The 60px H1 is rare; most headings are in the 24–36px range. Links are larger than body text (often 18–20px) for clarity.
4. Spacing & Layout
4.1 Spacing Scale
Base unit is 8px. But they also use some odd decimals—14.6px is common for input padding. Frequency shows where they emphasize spacing:
| Value | Count |
|---|---|
| 5px | 497 |
| 12px | 42 |
| 14px | 34 |
| 14.6px | 26 |
| 24px | 34 |
| 70px | 8 |
The 5px padding is everywhere—tight buttons, small gaps. 24px is a common content padding. 70px is for big section spacing.
4.2 Layout
Breakpoints:
350px, 500px, 575px, 767px, 1235px. This suggests a mobile-first approach with manual tuning at key widths. Not a pure Bootstrap grid—you see uneven values (743px, 782px).
5. Visual Elements
Border Radius
- 0px: Lists (
0px 0px 5px 5pxetc.) - 4px: Buttons, inputs
- 6px: Small buttons/spans
- 8px: Cards/divs
- 50%: Circles (avatars, icon buttons)
Consistent rounding: no random large radii. 50% is reserved for perfect circles.
Shadows
Almost flat design—main shadow is rgb(136, 136, 136) 0px 0px 1px 0px. That’s barely perceptible, more a 1px outline.
Two rare cases:
rgba(0, 0, 0, 0.2) 1px 1px 4px and rgba(0, 0, 0, 0.1) 0px 0px 24px—probably for modals.
Borders
1px solid #c4c4c4 is the workhorse. Used for inputs, dividers. Occasionally dark (#111617) for emphasis.
6. Components
6.1 Buttons
1. .information-field__close
- Default: semi-white bg (
rgba(255,255,255,0.6)), black text, 5px padding, circle (50%), no border. - Hover: full white bg (#ffffff), white text (!), opacity 0.6. Odd—hover text color matches bg, likely relying on icon shape.
2. .owl-carousel__dot
- Default: pale blue bg (#d6e3ef), black text, 6px radius.
- Hover: deep navy bg (#113a60), white text.
3. .footer__callback
- Default: translucent white bg (
rgba(255,255,255,0.16)), black text, 4px radius, horizontal padding. - Hover: deep navy bg, white text.
4. .btn.notification__btn
- Default: red bg (#dc3c3f), white text, 16px vertical / 40px horizontal padding, 4px radius, 1px solid red border.
- Hover: pale gray bg (#e1e9ef), navy text (#113a60), opacity 0.6.
6.2 Links
Four styles:
- White text, underline. Hover: red.
- Navy text, no underline. Hover: red.
- Link blue (#0000ee), underline. Hover: red.
- Bright blue (#1388ca), no underline. Hover: red.
6.3 Forms
Search input: transparent bg, navy text, no border. Focus: white border, focus color from --ngenix-focus-border-color (#636363).
Text input: white bg, black text, 2px inset border (#767676). Focus: same focus border.
Email input: white bg, black text, 1px solid #c4c4c4, padding 14.6px top/bottom, 16px sides.
7. Design Tokens
:root {
/* Colors */
--ngenix-primary: #111617;
--ngenix-gray-medium: #999999;
--ngenix-white: #ffffff;
--ngenix-link-blue: #0000ee;
--ngenix-gray-light: #dbdbdb;
--ngenix-black: #000000;
--ngenix-deep-navy: #113a60;
--ngenix-bright-blue: #1388ca;
--ngenix-alert-red: #dc3c3f;
--ngenix-gray-mid-light: #a6aaaf;
--ngenix-gray-mid-light-alt: #a6abaf;
--ngenix-gray-mid: #acb0b4;
--ngenix-gray-mid-alt: #a7abaf;
--ngenix-gray-mid-dark: #abafb3;
--ngenix-focus-border-color: #636363;
--ngenix-main-border-color: #c4c4c4;
/* Typography */
--font-family-graphik: "Graphik", sans-serif;
--font-size-h1: 60px;
--font-size-h1-alt: 36px;
--font-size-h2: 30px;
--font-size-h3: 28px;
--font-size-h4: 24px;
--font-size-h5: 20px;
--font-size-body-lg: 18px;
--font-size-body: 16px;
--font-size-caption: 14px;
--font-size-footnote: 13px;
--font-size-micro: 12px;
--font-size-tiny: 10px;
/* Spacing */
--space-2: 2px;
--space-5: 5px;
--space-7-5: 7.5px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-14-6: 14.6px;
--space-15: 15px;
--space-16: 16px;
--space-20: 20px;
--space-23: 23px;
--space-24: 24px;
--space-25: 25px;
--space-26: 26px;
--space-28: 28px;
--space-30: 30px;
--space-35: 35px;
--space-36: 36px;
--space-39: 39px;
--space-70: 70px;
/* Border Radius */
--radius-0: 0px;
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-25: 25px;
--radius-full: 50%;
/* Shadows */
--shadow-thin: rgb(136,136,136) 0px 0px 1px 0px;
--shadow-soft: rgba(0,0,0,0.2) 1px 1px 4px 0px;
--shadow-large: rgba(0,0,0,0.1) 0px 0px 24px 0px;
}8. AI Coding Assistant Prompt
# Ngenix Design System Specification
You are a Ngenix design expert. Build UIs matching their visual language exactly.
## Brand Context
Ngenix is an edge cloud and web security platform. Their design language is functional, minimal, precise. No decorative excess. Colors are muted with strong accents. Typography is modern sans serif (Graphik) across all contexts.
## Color Palette
- Primary: #111617 — Primary text, dark backgrounds
- Gray Medium: #999999 — Secondary text
- White: #ffffff — Backgrounds, text on dark
- Link Blue: #0000ee — Inline links
- Gray Light: #dbdbdb — Surface backgrounds, dividers
- Black: #000000 — High-contrast text
- Deep Navy: #113a60 — Hover backgrounds, search field text
- Bright Blue: #1388ca — Secondary links, highlights
- Alert Red: #dc3c3f — Error states, alert buttons
- Gray Mid-light: #a6aaaf — Focus borders
- Gray Mid-light-alt: #a6abaf — Focus borders
- Gray Mid: #acb0b4 — Focus borders
- Gray Mid-alt: #a7abaf — Focus borders
- Gray Mid-dark: #abafb3 — Focus borders
## Typography
Font family: "Graphik", sans-serif (Arial as fallback for some buttons)
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 700 | 0.95 | Main page title |
| H2 | 36px | 500 | 1.20 | Section headings |
| H3 | 30px | 500 | 1.40 | Subheadings |
| H4 | 28px | 500 | 1.30 | Subheadings |
| H5 | 24px | 500 | 1.40 | Minor headings |
| H5-light | 24px | 400 | 1.40 | Minor headings |
| H6 | 20px | 500 | 1.40 | UI headings |
| H6-bold | 20px | 700 | 1.40 | UI headings |
| Link-large | 20px | 500 | 1.00 | Navigation links |
| Body-lg | 18px | 400 | 1.40 | Main body text |
| Body-lg-bold | 18px | 700 | 1.40 | Emphasis in body |
| Caption | 14px | 400 | 1.40 | Labels |
| Caption-bold | 14px | 500 | 1.00 | Labels |
| Footnote | 13px | 400 | 1.40 | Small notes |
| Footnote-bold | 13px | 500 | 1.00 | Small notes |
| Micro | 12px | 400 | 1.40 | Tiny UI text |
| Tiny | 10px | 400 | 1.00 | Micro labels |
## Spacing & Grid
Base: 8px grid.
Scale: 2px, 5px, 7.5px, 10px, 12px, 14px, 14.6px, 15px, 16px, 20px, 23px, 24px, 25px, 26px, 28px, 30px, 35px, 36px, 39px, 70px.
Use For:
- 5px: Tight button padding
- 14px: Small card padding
- 24px: Section padding
- 70px: Large section spacing
## Border Radius
- none: 0px — lists, table cells
- sm: 4px — buttons, inputs
- md: 6px — small buttons
- lg: 8px — cards
- avatar: 50% — circular icons/images
## Shadows & Depth
Mostly flat. Use:
- Thin: rgb(136,136,136) 0px 0px 1px 0px — subtle outlines
- Soft: rgba(0,0,0,0.2) 1px 1px 4px — modals
- Large: rgba(0,0,0,0.1) 0px 0px 24px — overlays
## Component Specifications
### Primary Button (.btn.notification__btn)
Default:
- Background: #dc3c3f
- Text: #ffffff
- Padding: 16px 40px
- Border-radius: 4px
- Border: 1px solid #dc3c3f
- Font-weight: 700
- Font-size: 16px
Hover:
- Background: #e1e9ef
- Text: #113a60
- Opacity: 0.6
### Secondary Button (.footer__callback)
Default:
- Background: rgba(255,255,255,0.16)
- Text: #000000
- Padding: 0px 10px
- Border-radius: 4px
Hover:
- Background: #113a60
- Text: #ffffff
- Opacity: 0.6
### Navigation Links
White text, underline. Hover: #dc3c3f.
### Input Fields
Search:
- Background: transparent
- Text: #113a60
- Border: none
Focus:
- Border: 1px solid #ffffff
- Border-color: #636363
Email:
- Background: #ffffff
- Text: #000000
- Border: 1px solid #c4c4c4
- Padding: 14.6px 16px
## Layout & Responsive Rules
Breakpoints: 350px, 500px, 575px, 767px, 1235px.
Mobile: full-width padding 16px.
Desktop: max-width ~1235px.
## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: border-color #636363
- Disabled: opacity 0.5
## DO List
- Use ONLY colors from palette
- Maintain 8px-based spacing
- Use Graphik for all text
- Keep button radii consistent (4px or 6px)
- Use subtle shadows only
## DON'T List
- Invent new colors
- Mix sharp and rounded corners
- Overuse red—reserve for alerts
- Add heavy drop shadows
## Code Examples
Button:
```css
.btn-primary {
background: #dc3c3f;
color: #ffffff;
padding: 16px 40px;
border-radius: 4px;
border: 1px solid #dc3c3f;
font-weight: 700;
font-size: 16px;
transition: background 150ms ease;
}
.btn-primary:hover {
background: #e1e9ef;
color: #113a60;
opacity: 0.6;
}
```
Card:
```css
.card {
background: #ffffff;
border-radius: 8px;
padding: 24px;
box-shadow: rgb(136,136,136) 0px 0px 1px 0px;
}
```
Input:
```css
.input-email {
background: #ffffff;
color: #000000;
border: 1px solid #c4c4c4;
padding: 14.6px 16px;
}
.input-email:focus {
border-color: #636363;
outline: none;
}
```9. Summary
TL;DR — Ngenix’s design system is minimal, precise, and functional. Dark base, bright accents, modern sans serif. Everything sits on an 8px grid. Buttons and links use strong color cues. Shadows are rare—borders do the work.
Brand Keywords
- enterprise-minimalist
- tech-precise
- security-assured
- grid-disciplined
- color-functional