# Powergatesoftware Design System

> High-contrast enterprise software engineering identity defined by a vibrant orange accent cutting through a structured monochrome foundation.

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

## TL;DR
Powergatesoftware utilizes a "monochrome plus one" system where a high-energy orange `#f47322` serves as the primary functional and brand signal against a stark white `#ffffff` and deep charcoal `#222222` canvas. Typography is anchored by **Raleway** for headlines, providing a geometric, modern feel, while **Arial** handles high-density body content and UI labels. The system relies on generous vertical spacing (up to 108px) and a specific 16px border radius for content cards, creating a professional but accessible engineering aesthetic. Elevation is handled through soft, large-spread shadows rather than traditional borders.

## Signature DNA
1. **The Orange Pulse** (The use of `#f47322` for all primary CTAs, icons, and text highlights against a grayscale background to drive immediate visual hierarchy).
2. **Geometric Softness** (The juxtaposition of sharp 0px layout containers with 16px rounded cards and 25px pill-shaped buttons).
3. **Atmospheric Elevation** (Using high-diffusion shadows like `rgba(0, 0, 0, 0.05) 1px 4px 12px 0px` to separate white cards from white backgrounds without using heavy hairlines).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background, button text | 160 | 1.0 | Computed style |
| `{color.ink.primary}` | `#222222` | Primary headings, dark section backgrounds | 149 | 0.8 | Computed style |
| `{color.ink.secondary}` | `#797979` | Default body text, secondary borders | 266 | 0.8 | Computed style |
| `{color.ink.muted}` | `#9d9d9d` | De-emphasized text, metadata | 69 | 0.8 | Computed style |
| `{color.border.light}` | `#dfdfdf` | Input borders, subtle dividers | 17 | 1.0 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent}` | `#f47322` | Primary CTAs, active states, iconography | 77 | 0.8 | Computed style |
| `{color.accent.soft}` | `#fef1e9` | Decorative backgrounds, light highlights | 18 | 0.8 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Raleway | 400, 500, 600, 700 | Headings, Display | Raleway (Google Fonts) | OFL |
| Arial | 400, 500, 600, 700, 800 | Body, UI, Buttons | Arimo | System |
| FontAwesome | 400 | Icons | FontAwesome | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 50px | 50px | normal | 700 | Hero titles | `p.qodef-slide-title` |
| `{type.h2}` | 34px | 43.6px | normal | 700 | Section heads | `h2` |
| `{type.h3}` | 24px | 33.6px | normal | 700 | Subsection heads | `h3` |
| `{type.subheading}` | 18px | 24px | normal | 600 | Card titles | `h3` |
| `{type.body.lg}` | 16px | 30px | 1px | 500 | Large buttons | `a.qodef-btn-large` |
| `{type.body}` | 16px | 24px | normal | 500 | Standard body | `p` |
| `{type.body.sm}` | 14px | 23px | normal | 500 | Side menus, meta | `section.qodef-side-menu` |
| `{type.caption}` | 13px | 19px | normal | 400 | Testimonial jobs | `span.qodef-testimonials-job` |

### Principles
1. **Heading Geometry:** All major headings use Raleway at weight 700 to establish a technical, architectural tone.
2. **Functional Legibility:** Arial is used for all interactive elements and long-form text to ensure cross-platform consistency.
3. **Wide Tracking on CTAs:** Button text uses 1px letter spacing to increase prominence and readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 23 |
| `{space.sm}` | 12px | 35 |
| `{space.md}` | 16px | 66 |
| `{space.lg}` | 24px | 18 |
| `{space.xl}` | 32px | 52 |
| `{space.section}` | 108px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 483 occurrences |
| `{radius.input}` | 4px | Form fields | `Text Input` component |
| `{radius.card}` | 16px | Feature/Blog cards | `Card` component |
| `{radius.pill}` | 25px | Primary buttons | `Rounded Button` component |
| `{radius.full}` | 50% | Icon backgrounds | `Card` (circular variant) |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.05) 1px 4px 12px 0px` | Standard cards | Feature card grid |
| `{shadow.accent}` | `rgba(244, 115, 34, 0.15) 4px 20px 30px 0px` | Active/Hover CTAs | Primary orange buttons |
| `{shadow.deep}` | `rgba(10, 13, 18, 0.08) -3px 12px 16px -4px` | Floating UI elements | Industry cards |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `{color.accent}` (#f47322) / Text `{color.canvas}` (#ffffff) / Radius 25px / Padding 8px 16px / Typography `{type.body.lg}`
**States observed:** Default | Hover: captured (shadow increases)

#### Text Input
**Role:** Lead generation forms
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `#ffffff` / Text `#797979` / Border 1px `#dfdfdf` / Radius 4px / Padding 10px 15px
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or blog posts
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `#ffffff` / Border 1px `#dfdfdf` / Radius 16px / Padding 24px 0px 13px / Shadow `{shadow.soft}`
**States observed:** Default: captured

#### Industry Card
**Role:** Highlighting vertical expertise
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `#ffffff` / Radius 8px / Padding 12px 21px / Shadow `{shadow.deep}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Card
**Role:** Social proof sections
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `#ffffff` / Radius 16px / Padding 20px 20px 26px / Shadow `{shadow.soft}`
**States observed:** Default: captured

#### Circular Icon Plate
**Role:** Visual anchor for service lists
**Pages observed:** https://powergatesoftware.com
**Spec:** Background `{color.accent}` (#f47322) / Radius 50% / Width 60px (approx)
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 108px |
| Grid Gutter | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; multi-column feature grids. |

## Imagery & decoration
The brand uses high-quality professional photography of team members and office environments to humanize the technical offering. Decorative elements include circular "pulse" animations on maps and subtle geometric patterns in section backgrounds. It avoids illustrative "SaaS-style" flat characters.

## Do's
- Use `#f47322` for all primary action triggers.
- Apply `{radius.card}` (16px) to all content containers.
- Maintain `{space.section}` (108px) between major content bands.
- Pair Raleway Bold with Arial Regular for clear information hierarchy.
- Use `{shadow.soft}` to define cards on white backgrounds instead of borders.

## Don'ts
- **Wrong:** Using a sub-brand blue for a primary button. **Right:** Always use `#f47322`. **Reason:** Parent brand identity is strictly orange-accented.
- Do not use sharp corners for buttons; always use `{radius.pill}` (25px).
- Do not use Raleway for body text; keep it for headings only to maintain legibility.
- Do not use saturated colors for background surfaces; stick to `#ffffff`, `#fafafa`, or `#222222`.
- Do not overlap shadows; ensure `{shadow.soft}` has enough breathing room.

## Similar brands
- Accenture (High-contrast enterprise)
- EPAM (Engineering-focused monochrome)
- Thoughtworks (Modern geometric typography)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-accent: #f47322;
  --color-canvas: #ffffff;
  --color-ink-primary: #222222;
  --color-ink-secondary: #797979;
  --radius-card: 16px;
  --radius-pill: 25px;
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Arial', sans-serif;
  --shadow-soft: 1px 4px 12px 0px rgba(0, 0, 0, 0.05);
}
```

## Agent prompt examples
- "Create a primary CTA button using #f47322 with a 25px border radius and white Arial 16px text."
- "Design a service card with a 16px border radius, white background, and a 1px 4px 12px shadow."
- "Set a section header using Raleway Bold at 34px with #222222 color."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the computed style array.
- Success and Error semantic tokens were not present on the analyzed homepage.
- Mobile-specific font size adjustments for the 50px display type were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://powergatesoftware.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://powergatesoftware.com | 390x844 | 2026-06-06 |