# Pacificglobalsolutions Design System

> Corporate professionalism anchored in slate grays and high-contrast white, punctuated by a singular electric cyan accent.

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

## TL;DR
Pacificglobalsolutions utilizes a monochrome foundation of slate gray (#86898b) and deep charcoal (#2f3436) to establish a stable, corporate atmosphere. The system's primary energy is derived from a high-vibrancy cyan accent (#2bc0ec) used for interactive elements, borders, and primary call-to-actions. Typography is dominated by Poppins, ranging from heavy 700-weight displays to light 300-weight body text, creating a structured hierarchy. Layouts rely on sharp 0px radii for most containers, contrasted by perfect circles (50%) for iconography and specialized service cards.

## Signature DNA
1. **The Cyan Pulse** (#2bc0ec used as a thin 1px or 2px border on white surfaces and as a solid fill for high-priority contact blocks).
2. **Geometric Duality** (Sharp 0px corners for section containers and buttons, paired with 50% circular masks for service icons and testimonial avatars).
3. **Poppins Stack** (A strict reliance on Poppins across all weights, specifically using 600-weight for subheadings with 0.5px letter spacing to increase legibility).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background and card surface | 94 | 0.8 | computed_style |
| `{color.slate}` | `#86898b` | Secondary text, button outlines, and borders | 119 | 0.8 | computed_style |
| `{color.charcoal}` | `#2f3436` | Primary body text and headings | 68 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | High-contrast borders and footer text | 25 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.cyan}` | `#2bc0ec` | Primary interactive accent, borders, and CTA backgrounds | 64 | 0.8 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 100, 300, 400, 600, 700 | Primary Brand Font | Poppins (Google Fonts) | OFL |
| Font Awesome 6 Free | 400, 900 | Iconography | N/A | Commercial |
| Stroke-Gap-Icons | 400 | Decorative Icons | N/A | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 80px | normal | 700 | Counter numbers | `div.dt-sc-counter-number` |
| `{type.heading.lg}` | 36px | 36px | normal | 400 | Icon labels | `span.icon.icon-pointer` |
| `{type.heading.md}` | 24px | 20px | normal | 400 | Navigation links | `a:nth-of-type(1)` |
| `{type.heading.sm}` | 20px | normal | normal | 700 | Component titles | `span` |
| `{type.subheading}` | 18px | normal | 0.5px | 600 | Section headers | `h3` |
| `{type.body.lg}` | 18px | 30px | 0.5px | 600 | Primary links | `a` |
| `{type.body}` | 16px | 26px | normal | 700 | Citations | `cite` |
| `{type.body.sm}` | 15px | 26px | normal | 400 | General body | `header#header` |
| `{type.caption}` | 14px | normal | 0.5px | 600 | Small headers | `h4` |

### Principles
1. **Letter Spacing for Clarity:** Subheadings (18px) and captions (14px) consistently apply a 0.5px tracking to maintain Poppins' geometric clarity.
2. **Weight Contrast:** Hero elements jump from 300 (light) to 700 (bold) to create immediate visual hierarchy.
3. **Icon-Text Alignment:** Icons from Font Awesome are often sized at 24px or 55px to align with the vertical rhythm of adjacent Poppins text.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 66 |
| `{space.md}` | 20px | 72 |
| `{space.lg}` | 30px | 26 |
| `{space.xl}` | 35px | 16 |
| `{space.section}` | 75px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main sections and standard buttons | 270 occurrences |
| `{radius.sm}` | 3px | Form inputs | 3 occurrences |
| `{radius.md}` | 6px | Rounded buttons | 6 occurrences |
| `{radius.full}` | 50% | Icon wrappers and circular cards | 30 occurrences |

## Elevation
Not captured in source. The system is visually flat, relying on borders and color blocks for separation.

## Components

### Tier 1: Foundational

#### Cyan Surface Block
**Role:** High-visibility information or contact sections.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `#2bc0ec` | Text: `#ffffff` | Radius: `0px` | Padding: `30px 20px` | Typography: `15px Poppins`
**States observed:** Default: captured | Others: not captured

#### Outline Button
**Role:** Secondary actions and "Read More" links.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `transparent` | Text: `#86898b` | Border: `1px #2bc0ec` | Radius: `0px` | Padding: `12px 30px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Circular Service Icon
**Role:** Visual anchor for service categories.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `#ffffff` | Border: `1px rgba(0,0,0,0.15)` | Radius: `50%` | Padding: `0px` | Size: `~120px`
**States observed:** Default: captured

#### Service Feature Card
**Role:** Content grouping for global services.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `transparent` | Border: `1px #2bc0ec` | Radius: `0px` | Padding: `75px 35px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Newsletter Subscription Bar
**Role:** Lead generation footer element.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `#2f3436` (Section) | Input Background: `#ffffff` | Button: `#2bc0ec` | Radius: `0px`
**States observed:** Default: captured

#### Info Contact Card
**Role:** Footer/Contact page location details.
**Pages observed:** https://pacificglobalsolutions.com
**Spec:** Background: `#2bc0ec` | Text: `#ffffff` | Radius: `0px` | Padding: `30px 20px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1170px |
| Section Padding | 75px (Vertical) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; multi-column grids stack to 1-up. |
| Desktop | 1440px | 4-column grid for services; 3-column grid for contact info. |

## Imagery & decoration
- **Iconography:** Heavy use of circular-framed icons (Font Awesome and Stroke-Gap-Icons).
- **Overlays:** Light cyan overlays (`rgba(227, 252, 255, 0.95)`) used on background images to maintain text legibility.
- **Avoids:** Drop shadows, rounded corners on large containers, and multi-color gradients.

## Do's
- Use `#2bc0ec` for all primary action borders.
- Maintain `0px` border-radius on all rectangular content containers.
- Apply `50%` radius only to decorative icons or testimonial avatars.
- Keep Poppins as the sole sans-serif typeface.
- Use `#86898b` for secondary text to maintain a soft corporate contrast.

## Don'ts
- Do not use `#2bc0ec` for body text; it is reserved for interactive accents and headings.
- Do not apply shadows to cards; use 1px borders for separation.
- Do not mix Poppins with other sans-serifs like Arial or Helvetica.
- **Wrong:** Using a generic blue (#0000FF) for buttons. **Right:** Use `#2bc0ec`. **Reason:** Brand identity relies on the specific electric cyan.
- **Wrong:** Rounding section corners. **Right:** Use `0px`. **Reason:** The brand DNA is strictly geometric and sharp.

## Similar brands
- Infosys (Corporate structure)
- Wipro (Professional services palette)
- Cognizant (Clean, typography-heavy layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #2bc0ec;
  --color-text-main: #2f3436;
  --color-text-secondary: #86898b;
  --color-bg-canvas: #ffffff;
  --font-main: 'Poppins', sans-serif;
  --radius-sharp: 0px;
  --radius-circle: 50%;
}
```

## Agent prompt examples
- "Generate a service card with a 1px #2bc0ec border, 0px border-radius, and 75px vertical padding using Poppins 15px text."
- "Create a contact section with a solid #2bc0ec background and white Poppins text at 18px weight 600."
- "Design a circular icon wrapper with a 1px light gray border and a centered Font Awesome icon in #2bc0ec."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static analysis.
- Success/Error semantic colors were not present on the analyzed pages.
- Shadow tokens were not detected, suggesting a intentionally flat design system.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://pacificglobalsolutions.com | 1440px | 2026-06-06 |
| Mobile View | https://pacificglobalsolutions.com | 390px | 2026-06-06 |