# Agiliztech Design System

> Corporate agility anchored by deep purple gradients, high-contrast monochrome foundations, and technical blue accents.

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

## TL;DR
Agiliztech utilizes a monochrome foundation of pure black (#000000) and white (#ffffff) to establish a professional, high-contrast base for technical content. The visual "voltage" is provided by a signature deep purple gradient that defines hero sections and call-to-action bands, creating a sense of depth and modern enterprise energy. Typography is clean and functional, prioritizing legibility across dense service grids. UI elements like buttons and icons frequently employ a secondary "Signal Blue" (#0693e3) for interactive clarity, while layout structures rely on generous vertical rhythm and centered display type to guide the user through complex solution offerings.

## Signature DNA
1. **The Purple Gradient Horizon** (A deep-to-vibrant purple linear gradient used as a full-width background for hero sections and footer-adjacent CTA bands, providing the brand's primary chromatic identity against an otherwise monochrome canvas. Observed on Homepage and About pages.)
2. **Achromatic Contrast** (The use of pure black #000000 text on pure white #ffffff backgrounds for all primary body content and service descriptions, ensuring maximum readability and a "consultancy" feel. Observed across all analyzed pages.)
3. **Signal Blue Interactions** (Specific use of #0693e3 for primary action buttons and iconography accents, acting as a functional "active" layer on top of the brand's purple and monochrome base. Observed in hero CTAs and newsletter inputs.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--black` | `#000000` | Primary text, headings, and footer background | High | 100% | Declared Token |
| `--wp--preset--color--white` | `#ffffff` | Primary page background and text on dark surfaces | High | 100% | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--vivid-cyan-blue` | `#0693e3` | Primary CTA background, newsletter button, icon accents | High | 90% | Declared Token |
| `--wp--preset--color--vivid-purple` | `#9b51e0` | Gradient stop for brand hero surfaces | High | 85% | Declared Token |
| `--wp--preset--color--cyan-bluish-gray` | `#abb8c3` | Deemphasized text and secondary borders | Medium | 80% | Declared Token |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--vivid-red` | `#cf2e2e` | Error states (not captured in UI, but declared) | Low | 70% | Declared Token |
| `--wp--preset--color--vivid-green-cyan` | `#00d084` | Success states (not captured in UI, but declared) | Low | 70% | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Sans-Serif (System) | 400, 600, 700 | All UI, Headings, and Body | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|-------|-------------|----------------|--------|-----|-------------------|
| `{typography.display-hero}` | 48px | 1.2 | -0.02em | 700 | Main Hero Headline | `h1` |
| `{typography.heading-section}` | 36px | 1.3 | Normal | 600 | Section Titles | `h2` |
| `{typography.heading-card}` | 20px | 1.4 | Normal | 600 | Service Grid Titles | `h3` |
| `{typography.body-lg}` | 18px | 1.6 | Normal | 400 | Hero Subtext | `.hero p` |
| `{typography.body-md}` | 16px | 1.5 | Normal | 400 | Default Body Copy | `p` |
| `{typography.nav-link}` | 14px | 1.0 | 0.05em | 600 | Top Navigation | `nav a` |
| `{typography.button}` | 15px | 1.0 | Normal | 700 | CTA Buttons | `.btn` |
| `{typography.caption}` | 12px | 1.4 | Normal | 400 | Footer Legal/Small Print | `footer span` |

### Principles
1. **Centered Display Type:** All major section headings and hero copy are center-aligned to create a formal, symmetrical entry point.
2. **High Contrast Ratios:** Body text strictly adheres to black-on-white or white-on-dark-purple to maintain WCAG AA compliance.
3. **Tight Navigation:** Top-level menu items use reduced font sizes (14px) with increased letter spacing for a technical, utility-first feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.xs}` | 8px | Element internal padding |
| `{spacing.md}` | 24px | Card internal padding |
| `{spacing.xl}` | 64px | Section vertical padding |
| `{spacing.xxl}` | 100px | Hero vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radius.sm}` | 4px | Form inputs | Newsletter field |
| `{radius.md}` | 8px | Primary CTA buttons | "Get In Touch" button |
| `{radius.full}` | 9999px | Icon containers and pill buttons | "Contact" nav button |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|------|----------|
| Flat | None | Default card state | Service grid |
| Raised | 0 4px 20px rgba(0,0,0,0.08) | Hovered cards / Sticky Nav | Observed on scroll |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background: `{colors.vivid-cyan-blue}` (#0693e3) / Text: #ffffff / Radius: 8px / Typography: 15px Bold
**States observed:** Default | Hover: Slightly darker blue | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Top Navigation
**Role:** Global site traversal
**Pages observed:** Homepage, About
**Spec:** Background: Transparent (Hero) or #ffffff (Sticky) / Text: #ffffff or #000000 / Height: 80px
**States observed:** Default | Hover: Underline or color change to #0693e3

### Tier 2: Patterns

#### Service Card
**Role:** Displaying expertise categories
**Pages observed:** Homepage
**Spec:** Background: #ffffff / Border: None / Padding: 24px / Alignment: Center
**States observed:** Default | Hover: Subtle lift/shadow

#### Hero Section
**Role:** Primary page entry
**Pages observed:** Homepage, About
**Spec:** Background: Purple Gradient / Text: #ffffff / Padding: 100px 0 / Content: Centered
**States observed:** Default

### Tier 3: Surface-specific

#### Newsletter Signup
**Role:** Lead generation in footer
**Pages observed:** All pages
**Spec:** Input Background: #333333 / Button Background: #0693e3 / Radius: 4px
**States observed:** Default

#### Footer
**Role:** Global site info and links
**Pages observed:** All pages
**Spec:** Background: #000000 / Text: #ffffff / Columns: 4-column desktop
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Column Grid | 12-column |
| Section Gap | 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; 3-up grids become 1-up stacks; Hero text scales to 32px. |
| Desktop | > 1024px | Full horizontal menu; 4-column footer layout. |

## Imagery & decoration
Agiliztech uses stylized, flat-design illustrations for service categories (e.g., Application Development, Cloud). These illustrations use a broader palette including orange and teal but are always contained within white space. The brand avoids stock photography in service grids, preferring clean iconography.

## Do's
- Use pure black #000000 for all primary body text on white backgrounds.
- Apply the purple gradient only to full-width container backgrounds.
- Ensure all primary CTAs use the Signal Blue #0693e3.
- Center-align headings for section introductions.
- Maintain at least 80px of vertical space between major content sections.

## Don'ts
- **Wrong:** Using #9b51e0 (Purple) for body text. **Right:** Use #000000. **Reason:** Legibility and brand hierarchy; purple is a structural background color, not a reading color.
- **Wrong:** Using sub-brand colors like #ff6900 (Orange) for primary buttons. **Right:** Use #0693e3. **Reason:** Orange is reserved for decorative illustrations, not functional UI.
- **Wrong:** Applying heavy drop shadows to cards by default. **Right:** Keep cards flat or use subtle hairlines. **Reason:** Maintains the clean, professional consultancy aesthetic.

## Similar brands
- Accenture
- Infosys
- Cognizant
- Wipro

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #000000;
  --color-surface: #ffffff;
  --color-accent: #0693e3;
  --color-brand-purple: #9b51e0;
  --font-main: "Inter", sans-serif;
  --radius-button: 8px;
}
```

## Agent prompt examples
- "Create a service card component for Agiliztech using a white background, centered 20px bold black heading, and a 16px regular black body text, with a 48px icon placeholder at the top."
- "Generate a hero section with a linear gradient background from #9b51e0 to #7a00df, featuring a centered 48px white bold heading and a Signal Blue (#0693e3) button."
- "Design a footer layout on a #000000 background with four columns of white text links at 14px and a newsletter input field with a blue submit button."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the source evidence.
- Specific mobile menu transition animations were not documented.
- Error and Success validation messaging styles were not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------------|--------------|
| Homepage | https://agiliztech.com | Desktop 1440px | 2026-06-06 |
| About Us | https://agiliztech.com/about | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://agiliztech.com | Mobile 390px | 2026-06-06 |