# Eg-software Design System

> Corporate monochrome precision punctuated by high-contrast primary red accents and geometric sans-serif typography.

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

## TL;DR
Eg-software utilizes a high-contrast monochrome foundation, primarily relying on a deep charcoal `#161616` and pure white `#ffffff` canvas. The visual identity is anchored by a singular, aggressive accent color, Primary Red `#e7272d`, which is reserved for critical CTAs, brand-level headings, and decorative borders. Typography is strictly geometric, pairing Poppins for structural headings with Source Sans Pro and Open Sans for high-density body content. The system maintains a "sharp" aesthetic with a universal border-radius of `0px`, emphasizing a professional, software-centric architectural feel.

## Signature DNA
1. **The Red Punctuation** (Primary Red `#e7272d` is used as a surgical strike against the monochrome base, appearing on the "Subscribe" button and key product headings like "CalcMenu").
2. **Geometric Rigidity** (A strict `0px` border-radius policy across all interactive elements, including buttons and form inputs, creating a technical, non-organic silhouette).
3. **Poppins Display** (Headings utilize Poppins at weights 550-600, providing a modern, wide-set geometric contrast to the more traditional sans-serif body text).

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

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.ink.primary}` | `#161616` | Primary text, dominant achromatic | 9 | 0.6 | Computed Style |
| `{color.ink.deep}` | `#222222` | Secondary text emphasis | 1 | 1.0 | `--primary-black-color` |
| `{color.ink.muted}` | `#444444` | Sub-headings, secondary labels | 2 | 1.0 | `--secondary-black-color` |
| `{color.canvas}` | `#ffffff` | Page background, button text | 1 | 1.0 | `--bs-body-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.red}` | `#e7272d` | CTAs, Primary headings, Active borders | 10 | 1.0 | `--primary-red-color` |

### Semantic
| Token | Hex | Role | Source |
| :--- | :--- | :--- | :--- |
| `{color.success}` | `#198754` | Success states | `--bs-green` |
| `{color.error}` | `#dc3545` | Error states | `--bs-red` |
| `{color.warning}` | `#ffc107` | Warning states | `--bs-yellow` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Poppins | 550, 600 | Headings, UI Labels | Poppins (Google Fonts) | OFL |
| Source Sans Pro | 400, 600 | Primary Body | Source Sans 3 | OFL |
| Open Sans | 400 | Secondary Body | Open Sans | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h1}` | 30px | 36px | normal | 600 | Hero Headings | `h1` |
| `{type.h4}` | 23px | 27.6px | normal | 550 | Section Sub-heads | `h4` |
| `{type.h2}` | 20px | 24px | normal | 600 | Component Titles | `h2` |
| `{type.body.lg}` | 17px | 31.5px | normal | 400 | Primary Prose | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Section Content | `section` |
| `{type.label}` | 14px | 21px | normal | 600 | Navigation, Small Caps | `nav a` |

### Principles
1. **Heading Weight Hierarchy:** Poppins is never used below weight 550 for headings to maintain geometric presence.
2. **Prose Breathability:** Body text (Source Sans Pro) uses a generous line-height (approx 1.8x) to balance the density of software documentation.
3. **Color-Coded Emphasis:** Specific product names (e.g., CalcMenu) within headings inherit the Primary Red `#e7272d` color.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.1}` | 8px | 4 |
| `{space.2}` | 16px | 7 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Universal (Buttons, Inputs, Cards) | 22 occurrences |

## Elevation
*Not captured in source. The system is visually flat.*

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., Subscribe)
**Pages observed:** Home
**Spec:** Background `{color.accent.red}` (#e7272d) / Text `{color.canvas}` (#ffffff) / Radius `{radius.none}` (0px) / Typography `{type.body.md}`
**States observed:** Default | Hover: Not captured

#### Form Input
**Role:** User data entry
**Pages observed:** Home (Newsletter)
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px `#dee2e6` / Radius `{radius.none}` (0px) / Padding `{space.1}` (8px)
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns
#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** Home
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#161616) / Height ~80px / Border-bottom 1px `#dee2e6`
**States observed:** Default | Active: `{color.accent.red}` (#e7272d) text decoration

#### Footer
**Role:** Global site information
**Pages observed:** Home
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.muted}` (#444444) / Border-top 1px `#dee2e6`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max-width | 1320px (Bootstrap default) |
| Grid | 12-column |
| Section Padding | 80px (Vertical) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger menu; headings scale to 24px. |
| Desktop | 1440px | Full horizontal navigation; 3-column service grids. |

## Imagery & decoration
- **Hero Overlays:** Uses red diagonal geometric overlays on photography to integrate brand color into imagery.
- **Iconography:** Simple line-art icons in Primary Red `#e7272d`.
- **Avoids:** Rounded corners, soft shadows, and gradient fills.

## Do's
- Use `#e7272d` for the most important action on any given screen.
- Maintain a `0px` border-radius on all interactive containers.
- Use Poppins weight 600 for all top-level section headings.
- Ensure 16px (`{space.2}`) padding between text blocks in service descriptions.
- Use `#ffffff` as the primary background for all content-heavy sections.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for links. **Right:** Use `#161616` or `#e7272d`. **Reason:** Bootstrap defaults must be overridden to maintain brand monochrome.
- **Wrong:** Applying a 4px or 8px radius to buttons. **Right:** Keep it `0px`. **Reason:** Sharp corners are a core brand signature.
- **Wrong:** Using Poppins for long-form body text. **Right:** Use Source Sans Pro. **Reason:** Poppins is reserved for display and UI labels.

## Similar brands
- Rockwell Automation
- Siemens (Software Division)
- Autodesk

## Quick start
```css
/* CSS Variables */
:root {
  --primary-red: #e7272d;
  --ink-primary: #161616;
  --canvas: #ffffff;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Eg-software specs: background #e7272d, white text, Poppins 600, and strictly 0px border radius."
- "Create a contact form section with #ffffff background, 1px #dee2e6 borders on inputs, and no rounded corners."
- "Design a hero section heading where the company name is #161616 and the product name is #e7272d using Poppins 600."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the evidence.
- Mobile-specific spacing tokens were not fully defined in the CSS variables.

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