# Aroratechnologies Design System

> High-contrast professional service interface anchored by a vibrant lime-green accent against a deep charcoal and white foundation.

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

## TL;DR
Aroratechnologies utilizes a high-contrast monochrome base of white (#ffffff) and charcoal (#1e2022) punctuated by a single energetic lime-green (#7fbd2e) primary accent. The typography is exclusively Poppins, leaning on medium and semi-bold weights for hierarchy. Layouts are structured with generous vertical spacing (up to 50px) and a mix of sharp and slightly rounded (4px-5px) containers. Visual interest is generated through the contrast between the dark footer/header elements and the bright, airy content sections.

## Signature DNA
1. **Lime-Green Punctuation** (#7fbd2e is used strictly for primary actions, success indicators, and section sub-titles to draw the eye across a neutral canvas).
2. **Geometric Contrast** (The system mixes perfectly sharp 0px corners for large sections with soft 4px-5px radii for interactive cards and input fields).
3. **Poppins Hierarchy** (Heavy reliance on Poppins weight 600 for headings to create a stable, corporate architecture).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background, button text | 78 | 1.0 | Computed |
| `{color.ink.primary}` | `#1e2022` | Primary text, footer background | 48 | 0.8 | Computed |
| `{color.ink.secondary}` | `#222222` | Secondary body text | 24 | 0.8 | Computed |
| `{color.ink.muted}` | `#77838f` | De-emphasized text, labels | 36 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#7fbd2e` | Primary buttons, success states, borders | 46 | 0.8 | Computed |
| `{color.gray.dark}` | `#343a40` | Dark UI elements (decorative_only) | 1 | 1.0 | Token |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#28a745` | Success states (Token only) |
| `{color.warning}` | `#ffc107` | Warning states (Token only) |
| `{color.error}` | `#dc3545` | Error states (Token only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Poppins | 400, 500, 600, 700 | All roles | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 120px | 144px | normal | 500 | Hero/Stats | `div.year.float-left` |
| `{type.h2}` | 32px | 38.4px | normal | 600 | Section heads | `h2.sub-title` |
| `{type.h3}` | 22px | 26.4px | normal | 600 | Component heads | `h2.title` |
| `{type.h4}` | 20px | 24px | normal | 600 | Small headings | `h2` |
| `{type.body.lg}` | 18px | 27px | normal | 600 | Emphasis body | `span.name` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body | `section#header` |
| `{type.nav}` | 16px | 24px | 2px | 500 | Navigation links | `a.nav-link` |
| `{type.body.sm}` | 15px | 22.5px | normal | 400 | Footer/Captions | `span.client-title` |

### Principles
1. **Heading Weight Stability:** Use weight 600 for almost all section and component headings to maintain corporate authority.
2. **Navigation Tracking:** Navigation links use 2px letter spacing to differentiate from standard body text.
3. **Line Height Comfort:** Body text maintains a 1.5x to 1.7x line-height ratio for readability.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 27 |
| `{space.sm}` | 10px | 34 |
| `{space.md}` | 15px | 25 |
| `{space.lg}` | 30px | 20 |
| `{space.xl}` | 50px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, large buttons | 167 occurrences |
| `{radius.sm}` | 4px | Secondary cards, small surfaces | 10 occurrences |
| `{radius.md}` | 5px | Primary content cards | 10 occurrences |
| `{radius.full}` | 50px | Decorative badges/tags | 2 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `0px 0px 10px 0px #989898` | Content cards | `Card` component |
| `{shadow.soft}` | `0px 0px 10px 0px #cccccc` | Secondary cards | `Card` component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://aroratechnologies.com
**Spec:** Background: `#7fbd2e` / Text: `#ffffff` / Radius: `0px` / Font: Poppins 500
**States observed:** Default | Hover: Not captured

#### Surface Section
**Role:** Content grouping
**Pages observed:** https://aroratechnologies.com
**Spec:** Background: `transparent` / Border: `2px solid #7fbd2e` / Radius: `0px` / Padding: `30px 15px 50px`
**States observed:** Default

### Tier 2: Patterns

#### Testimonial Card
**Role:** Social proof
**Pages observed:** https://aroratechnologies.com
**Spec:** Background: `#ffffff` / Shadow: `0px 0px 10px 0px #989898` / Radius: `5px` / Padding: `10px`
**States observed:** Default

#### Service Surface
**Role:** Feature display
**Pages observed:** https://aroratechnologies.com
**Spec:** Background: `#fafafa` / Border: `0px` / Radius: `0px` / Text: `#7fbd2e`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Site navigation and info
**Pages observed:** https://aroratechnologies.com
**Spec:** Background: `#1e2022` / Text: `#ffffff` / Padding: `50px 0px`
**States observed:** Default

#### Navigation Link
**Role:** Header navigation
**Pages observed:** https://aroratechnologies.com
**Spec:** Text: `#1e2022` / Font: Poppins 500 / Size: 16px / Letter-spacing: 2px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 50px (vertical) |
| Column Gap | 30px |

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

## Imagery & decoration
- **Photography:** Uses high-key office/collaborative imagery with "torn paper" or organic mask edges.
- **Iconography:** Simple line icons, often paired with the lime-green accent.
- **Avoids:** Heavy gradients, drop shadows on text, or rounded corners on primary structural sections.

## Do's
- Use `#7fbd2e` for all primary "Get Started" or "Consultation" actions.
- Maintain a 2px letter spacing on all top-level navigation items.
- Use Poppins 600 for headings to ensure visual weight.
- Apply `0px 0px 10px 0px #989898` shadows only to white cards on light gray backgrounds.
- Ensure the footer remains `#1e2022` for strong site grounding.

## Don'ts
- **Wrong:** Using `#007bff` (token primary) for buttons. **Right:** Use `#7fbd2e`. **Reason:** The brand identity is built on the lime-green accent, not the default Bootstrap primary.
- **Wrong:** Applying large border radii (>5px) to main content sections. **Right:** Keep structural sections at `0px`.
- **Wrong:** Using weights below 400 for body text. **Reason:** Legibility on white backgrounds requires the standard Poppins 400 weight.
- Do not mix multiple saturated colors in the same section; stick to the lime-green/charcoal/white triad.

## Similar brands
- Deloitte (Green/Black/White palette)
- Hewlett Packard Enterprise (HPE)
- Shopify (Green accent usage)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #7fbd2e;
  --color-ink-primary: #1e2022;
  --color-canvas: #ffffff;
  --font-main: 'Poppins', sans-serif;
  --shadow-card: 0px 0px 10px 0px rgba(152, 152, 152, 1);
  --radius-card: 5px;
}
```

## Agent prompt examples
- "Create a pricing card using a white background, a 5px border radius, and the #989898 shadow. Use #7fbd2e for the primary button."
- "Design a hero section with Poppins 600 headings in #1e2022 and a primary CTA button with 0px border radius in #7fbd2e."
- "Build a footer component with a #1e2022 background and white Poppins text at 15px."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Form validation error states (visuals) were not captured.

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