# Potenzaglobalsolutions Design System

> High-contrast corporate tech canvas anchored by a vibrant cyan primary and heavy-weight Open Sans headlines.

**Source:** https://potenzaglobalsolutions.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Potenzaglobalsolutions utilizes a high-energy "monochrome" system where a single chromatic driver, Cyan (#00c7b1), punctuates a strictly grayscale foundation. The visual language is defined by extreme typographic contrast, pairing massive 100px ultra-bold display type with 14px functional body text. Layouts rely on sharp 0px corners for structural containers (inputs, sections) contrasted against 50px pill-radius accents for decorative or interactive elements. The system uses depth sparingly through subtle 6px blur shadows on white cards to separate them from the light-gray (#eceff7) or white (#ffffff) canvas.

## Signature DNA
1. **Cyan Punctuation** (#00c7b1 is used as a high-voltage signal for CTAs, icons, and emphasized text against a #323232 and #ffffff base).
2. **Typographic Scale Extremes** (Open Sans is pushed to weight 900 for display headers at 100px, creating a "heavy tech" editorial feel).
3. **Geometric Duality** (Strict 0px sharp edges for functional UI like inputs and surfaces, paired with 50px/50% circular radii for cards and badges).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.surface.white}` | `#ffffff` | Page background, button text, borders | 205 | 0.8 | computed_style |
| `{color.text.primary}` | `#323232` | Primary body text, dark surface backgrounds | 175 | 0.8 | computed_style |
| `{color.text.secondary}` | `#626262` | Secondary body text, muted labels | 27 | 0.8 | computed_style |
| `{color.surface.dark}` | `#252933` | Dark section backgrounds, primary button fills | 27 | 0.8 | computed_style |
| `{color.surface.muted}` | `#eceff7` | Alternating section backgrounds | 17 | 0.8 | computed_style |
| `{color.border.light}` | `#d2d2d2` | Subtle dividers and input borders | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#00c7b1` | Primary CTA background, brand icons, active states | 111 | 0.8 | computed_style |
| `{color.primary.dark}` | `#00a18f` | Hover states, secondary brand accents | 36 | 0.8 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 400, 500, 600, 700, 900 | All headings, display, and UI | Open Sans (Google Fonts) | Apache 2.0 |
| FontAwesome | 400 | Iconography and navigation arrows | FontAwesome Free | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 100px | 100px | normal | 900 | Hero headlines | `h2.text-uppercase` |
| `{type.display.lg}` | 64px | 64px | normal | 900 | Strong emphasis | `strong.text-cyan` |
| `{type.display.md}` | 40px | 40px | normal | 500 | Secondary hero | `h1.text-white` |
| `{type.h2}` | 36px | 44px | normal | 700 | Section titles | `h2` |
| `{type.h3}` | 30px | 38px | normal | 700 | Sub-section titles | `h3.text-black` |
| `{type.h4}` | 24px | 30px | normal | 700 | Card titles | `h4` |
| `{type.body.lg}` | 18px | 30px | normal | 600 | Large body/links | `a` |
| `{type.body}` | 14px | 24px | normal | 400 | Standard body text | `header.header` |
| `{type.caption}` | 12px | 24px | normal | 400 | Small annotations | `a` |

### Principles
1. **Weight as Hierarchy:** Display sizes use 900 weight to anchor the page; body text stays at 400 for legibility.
2. **Cyan for Emphasis:** Color is never used for long-form text, only for keywords (`.text-cyan`) and headings.
3. **Uppercase Display:** Largest display tokens (100px) are consistently transformed to uppercase.

## Spacing
**Base unit:** 10px (derived from high occurrence of 10, 20, 30, 40, 50, 60 values)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 66 |
| `{space.sm}` | 20px | 66 |
| `{space.md}` | 30px | 26 |
| `{space.lg}` | 40px | 4 |
| `{space.xl}` | 50px | 3 |
| `{space.xxl}` | 60px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Inputs, Section Containers | 410 occurrences |
| `{radius.sm}` | 3px | Standard Buttons | 17 occurrences |
| `{radius.pill}` | 50px | Decorative Badges, Icon Plates | 59 occurrences |
| `{radius.circle}` | 50% | Feature Icons, Avatars | Observed in Cards |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 1px 3px 6px 0px` | Feature cards on white canvas | 18 occurrences |
| `{shadow.surface}` | `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px` | Elevated content blocks | 3 occurrences |
| `{shadow.soft}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Subtle container separation | 3 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary actions
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.surface.dark}` (#252933) / Text: `{color.surface.white}` (#ffffff) / Radius: `{radius.sm}` (3px) / Padding: 14px 30px / Typography: `{type.body}` (14px/600)
**States observed:** Default | Hover (Cyan #00c7b1): captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.surface.muted}` (#eceff7) / Text: `{color.text.secondary}` (#858585) / Border: 0px / Radius: `{radius.none}` (0px) / Padding: 6px 20px
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns
#### Feature Card (White)
**Role:** Service and solution highlights
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.surface.white}` (#ffffff) / Text: `{color.text.secondary}` (#626262) / Radius: 50% (Icon plate) / Shadow: `{shadow.card}` (rgba(0,0,0,0.1) 1px 3px 6px 0px)
**States observed:** Default: captured

#### Feature Card (Cyan)
**Role:** High-emphasis service highlights
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.primary.dark}` (#00a18f) / Text: `{color.surface.white}` (#ffffff) / Radius: 50% (Icon plate) / Border: `{color.surface.white}` (#ffffff)
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Footer
**Role:** Global site closure
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.primary}` (#00c7b1) / Text: `{color.text.primary}` (#323232) / Radius: `{radius.none}` (0px) / Padding: 0px
**States observed:** Default: captured

#### Contact Surface
**Role:** Lead capture section
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{color.surface.white}` (#ffffff) / Text: `{color.text.primary}` (#505050) / Radius: `{radius.none}` (0px) / Shadow: `{shadow.surface}` (rgba(0,0,0,0.1) 0px 0px 10px 0px)
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 60px 0px |
| Content Gap | 30px |
| Max Width | Not captured (Fluid) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 10px; display type scales down. |

## Imagery & decoration
The brand uses flat, line-art iconography (FontAwesome and Flaticon) often contained within circular plates. Backgrounds feature subtle geometric "node" patterns (circles connected by lines) in light gray. Imagery is primarily high-quality stock photography related to technology and business, often treated with a dark overlay to support white text.

## Do's
- Use **Open Sans 900** for all primary headlines.
- Apply **#00c7b1** for primary CTA backgrounds.
- Maintain **0px radius** on all form inputs and section containers.
- Use **#eceff7** for alternating section backgrounds to provide subtle contrast.
- Ensure all white cards on white backgrounds use the **1px 3px 6px shadow**.

## Don'ts
- Do not use Cyan (#00c7b1) for body text; it is reserved for accents and CTAs.
- Do not apply border-radius to inputs; they must remain sharp (0px).
- Do not use pure black (#000000) for text; use **#323232**.
- Avoid using the primary cyan on dark backgrounds where contrast falls below 3:1.

## Similar brands
- DigitalOcean (Cyan/Dark Blue tech palette)
- Trello (Clean grayscale with high-saturation accent)
- Zendesk (Geometric, type-heavy corporate identity)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #00c7b1;
  --color-primary-dark: #00a18f;
  --color-text-main: #323232;
  --color-surface-muted: #eceff7;
  --font-main: 'Open Sans', sans-serif;
  --radius-sharp: 0px;
  --radius-pill: 50px;
  --shadow-card: 1px 3px 6px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Create a hero section with a #323232 background, a 100px Open Sans 900 headline in #ffffff, and a primary button using #00c7b1 with a 3px border-radius."
- "Design a feature card grid using #ffffff backgrounds, a 1px 3px 6px shadow, and 50px circular icon plates in #00c7b1."
- "Build a contact form with 0px radius inputs using #eceff7 background and #858585 text."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in token data.
- Mobile-specific typographic scale (px values) for the 100px display token was not fully resolved.
- Success and Error semantic colors for form validation were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://potenzaglobalsolutions.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://potenzaglobalsolutions.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://potenzaglobalsolutions.com/about | Desktop 1440 | 2026-06-06 |