PCCC Design System Deep Dive

1. Brand Overview

PCCC’s visual language is functional tech with a slight corporate polish. The site’s design system feels engineered for a company that deals in IT services—structured, dependable, but with a touch of warmth to prevent it from feeling sterile. This isn’t a brand chasing trendiness or maximalism—the palette is restrained, typography is straightforward, spacing is predictable, and components are built for consistency over flair.

The vibe: professional with a hint of friendliness. That friendliness comes from the strong orange #ff6c2c they use for CTAs—it’s a bold, warm accent against a backdrop of deep navy (#051441) and dark slate (#293a4a). Those dark tones anchor the brand, suggesting seriousness and trust, while the orange says “we’re approachable and proactive.”

Typography leans on Google Fonts Poppins for headings and Open Sans for most text—both are clean sans-serifs, easy to read at multiple sizes, and widely supported. This choice signals accessibility and reliability, rather than a bespoke or decorative brand font.

Spacing is built on an 8px scale—you see it in the common values like 8px multiples (4px, 16px, 32px) and in the way section padding jumps in clean intervals. This keeps layout predictable and makes responsive work easier for dev teams.

Components like buttons and links are utilitarian, but there’s a quirk: hover states sometimes introduce unexpected transformations (like rotate(-135deg) on buttons). This is unusual for corporate IT brands—it’s playful, maybe even a touch experimental. Whether that works depends on the context; it could undermine the otherwise steady tone.

Overall, PCCC’s system feels like it was built to function first, with a primary focus on clarity and contrast, but with occasional surprises in micro-interactions. For designers, it’s a safe palette and type system to work within, but you’ll need to make deliberate choices to ensure those quirks (like aggressive transforms) don’t conflict with the brand’s professional core.

2. Color System

2.1 Primary Colors

The hero color is Orange #ff6c2c—used for buttons and action prompts. This is psychologically strong: orange is energetic, signals urgency, and draws the eye without the harshness of pure red. Against the deep navy (#051441) and slate (#293a4a), it pops hard.

This combination works because:

• Navy grounds the palette—trust, authority.
• Orange injects warmth and motion—ideal for CTAs.
• White (#ffffff) keeps things readable and clean.

Competitor comparison: Many IT service firms lean on blues and grays exclusively. PCCC’s orange accent gives them a distinct “action” feel—more approachable than a pure blue palette.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• Orange (#ff6c2c) on white (#ffffff) fails WCAG for normal text but passes for large text/icons.
• Orange on navy (#051441) passes easily—strong legibility.
• White on deep navy is high contrast (AAA compliant).

Dark mode:
There’s no explicit dark mode palette, but the background colors (navy, slate) could invert easily if needed. The palette leans more toward dark UI than light.

2.4 Usage Guide

Good combos:

• Orange #ff6c2c on navy #051441 for primary buttons.
• White #ffffff on orange for CTA text.
• Slate #293a4a for secondary headings with white background.

Avoid:

• Orange on white for small text—low contrast.
• Purple #5e2ced on navy—clashes and reduces readability.
• Mixing multiple browns from hover/focus states without clear rules—could feel off-brand.

3. Typography

3.1 Font Families

• Poppins (Google Fonts) — Used for headings and some links. Clean, geometric sans-serif.
• Open Sans (Google Fonts) — Body copy, links, captions. Humanist sans-serif, highly legible.

No Adobe or variable fonts. Stack would be:
font-family: 'Poppins', sans-serif;
font-family: 'Open Sans', sans-serif;

3.2 Type Scale

3.3 Hierarchy

Large headings (43px Poppins) are rare—page titles. Most headings hover between 24px and 36px. Body text sits at 16px Open Sans, with high line heights for readability (up to 2.5). Link sizes vary—some are large (20px) for nav, others small (14px) for inline text.

Hierarchy is clear because sizes drop in predictable steps. The mix of Poppins for emphasis and Open Sans for content keeps visual rhythm.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px system. Values:

4.2 Layout

Breakpoints are abundant—down to 98px (!!) and up past 2561px. This suggests hyper-responsive design, possibly for embedded devices or very large displays. Standard clusters:

• Mobile: < 575px
• Tablet: 576px–991px
• Desktop: > 992px

5. Visual Elements

Border Radius:

• 3px: minor rounding (spans, divs)
• 4px: buttons
• 5px: common for containers
• 999px: pill shapes (avatars, round buttons)
• 50%: perfect circles (buttons with icons)

Shadows:

• Soft: rgba(14, 0, 40, 0.05) -1px 2px 19px 3px
• Medium: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px
• Light: rgba(12, 0, 46, 0.06) 0px 4px 6px 0px

Borders:

• White 3px solid (rare)
• Orange 2px solid (button borders)
• Navy 2px top border (section dividers)

6. Components

6.1 Buttons

Primary (Elementor button)

• Default: bg #ff6c2c, text #ffffff, padding 15px 30px, radius 4px.
• Hover: bg #5e35b1 (purple), text #ffffff, opacity 0.8, box-shadow rgba(66, 97, 234, 0.2) 0px 10px 20px 0px, transform translateY(-6px) rotate(-135deg), border 1px dashed #c0392b.
• Active: bg rgba(255,255,255,0.9), text #ffffff, transform scale(1.1).
• Focus: bg transparent, transform translateY(30px) (!!), text white.

Secondary (elementor-cta)

• Default: bg white, text white (odd—probably overridden), padding 50px 0px.

LinkedIn share button

• Default: bg #0077b5, text #1c2833, padding 0px.

6.2 Links

Multiple link styles:

• Slate (#293a4a) default → white hover.
• Navy (#051441) default → white hover.
• White default → white hover (no change).
  All are underline-free.

6.3 Forms

No inputs defined in data—likely rely on browser defaults or Elementor widgets.

6.4 Cards

No explicit card component—likely divs with 5px radius, shadows from shadow system.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-orange-cta: #ff6c2c;
  --color-slate-navy: #293a4a;
  --color-dark-gray: #212529;
  --color-deep-navy: #051441;
  --color-black: #000000;
  --color-medium-gray: #3f444b;
  --color-purple: #5e2ced;
  --color-warm-brown-1: #a25639;
  --color-brick-brown-1: #824037;
  --color-brick-brown-2: #834036;
  --color-warm-brown-2: #a45739;
  --color-warm-brown-3: #844136;
  --color-warm-brown-4: #99543a;
  --color-warm-brown-5: #8c4336;
  --color-brick-brown-3: #814037;
  --color-warm-brown-6: #8d4436;

  /* Typography */
  --font-poppins: 'Poppins', sans-serif;
  --font-open-sans: 'Open Sans', sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;

  /* Border Radius */
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: rgba(14, 0, 40, 0.05) -1px 2px 19px 3px;
  --shadow-medium: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  --shadow-light: rgba(12, 0, 46, 0.06) 0px 4px 6px 0px;
}

8. AI Coding Assistant Prompt

# PCCC Design System Specification

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

## Brand Context
PCCC’s design language is professional, structured, and functional, with a restrained palette anchored in navy and slate, and a bold orange for CTAs. Typography is clean and legible, spacing follows an 8px grid, and components prioritize clarity over decoration, with occasional playful hover transformations.

## Color Palette
- White: #ffffff — Backgrounds, text on dark
- Orange CTA: #ff6c2c — Primary buttons, key actions
- Slate Navy: #293a4a — Header, secondary text
- Dark Gray: #212529 — Body text
- Deep Navy: #051441 — Nav links, headings
- Black: #000000 — Icons
- Medium Gray: #3f444b — Secondary UI text
- Purple: #5e2ced — Accent (rare)
- Warm Browns: #a25639, #824037, #834036, #a45739, #844136, #99543a, #8c4336, #814037, #8d4436 — Hover/focus experimental

## Typography
Fonts:
- Headings: 'Poppins', sans-serif
- Body: 'Open Sans', sans-serif

Type scale:
| Element | Font | Size | Weight | Line Height |
|---------|------|------|--------|-------------|
| H1 | Poppins | 43px | 600 | 1.40 |
| H1 | Open Sans | 36px | 600 | 1.00 |
| H1 | Open Sans | 28px | 600 | 1.20 |
| H1 | Open Sans | 26px | 600 | 1.00 |
| H1 | Poppins | 24px | 600 | 1.00 |
| Link | Open Sans | 20px | 500 | 0.70 |
| Body | Open Sans | 16px | 500 | 2.50 |
| Caption | Open Sans | 14px | 500 | 1.00 |
...

## Spacing & Grid
Base: 8px
Scale: 4px, 5px, 10px, 15px, 16px, 20px, 25px, 30px, 35px, 40px, 50px, 80px, 100px, 120px
Map:
- Button padding: 15px 30px
- Card padding: 35px
- Section gaps: 20px, 30px

## Border Radius
- sm: 3px — spans, divs
- base: 4px — buttons
- md: 5px — containers
- pill: 999px — avatars, pill buttons
- circle: 50% — icon buttons

## Shadows & Depth
- Soft: rgba(14, 0, 40, 0.05) -1px 2px 19px 3px
- Medium: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px
- Light: rgba(12, 0, 46, 0.06) 0px 4px 6px 0px

## Component Specifications

### Primary Button
Default:
```css
background-color: #ff6c2c;
color: #ffffff;
padding: 15px 30px;
border-radius: 4px;
border: none;
font-weight: 500;
font-size: 16px;
```
Hover:
```css
background-color: #5e35b1;
color: #ffffff;
opacity: 0.8;
box-shadow: rgba(66, 97, 234, 0.2) 0px 10px 20px 0px;
transform: translateY(-6px) rotate(-135deg);
border: 1px dashed #c0392b;
```
Active:
```css
background-color: rgba(255,255,255,0.9);
transform: scale(1.1);
opacity: 0.8;
```
Focus:
```css
background-color: transparent;
transform: translateY(30px);
opacity: 0.8;
```

### Navigation Links
- Default: color: #293a4a, text-decoration: none
- Hover: color: #ffffff

## Layout & Responsive Rules
Breakpoints:
- 576px, 768px, 992px, 1200px, 1440px, 1650px, 1921px
Mobile padding: 15px
Desktop padding: 30px

## Interaction Rules
- Transition: 150ms ease for hover/active
- No underline for links
- Hover transforms allowed only for interactive elements

## DO List
- Use only palette colors
- Maintain 8px grid
- Keep text contrast high
- Use Poppins for headings, Open Sans for body
- Keep button radius at 4px

## DON'T List
- Don’t invent new colors
- Don’t mix rounded and sharp corners in same component
- Don’t use orange for text on white backgrounds
- Don’t add shadows outside defined set

## Code Examples

Primary button:
```css
.btn-primary {
  background: #ff6c2c;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background-color: #5e35b1;
  transform: translateY(-6px) rotate(-135deg);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 35px;
  box-shadow: var(--shadow-soft);
}
```

9. Summary

TL;DR: PCCC’s design system is clean, corporate, and grounded in navy and slate with a bold orange CTA. Typography is split between Poppins for emphasis and Open Sans for body, spacing is strictly on an 8px grid, and components are consistent with occasional playful hover effects.

Brand Keywords: tech-corporate, warm-action, grid-disciplined, contrast-driven, sans-serif-clean