# Winuxsoftwaresolutions Design System

> High-contrast corporate utility anchored by stark white surfaces, deep navy accents, and sharp-edged geometry.

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

## TL;DR
Winuxsoftwaresolutions utilizes a monochrome-first foundation, where primary content is delivered in Gray `#646464` on a pure White `#ffffff` canvas. The system is punctuated by a vibrant Cyan-Blue `#03c3ff` used for interactive states, navigation highlights, and decorative section underlines. Layouts are characterized by a total absence of border-radius (`0px`), creating a rigid, professional grid. Typography relies exclusively on Open Sans, utilizing heavy weights (700-800) for high-impact headings against a standard 400-weight body scale.

## Signature DNA
1. **Zero-Radius Rigidity** (Every container, button, and decorative element uses a strict `0px` radius, creating a sharp, architectural feel across all viewports.)
2. **Cyan-Blue Interaction** (The use of `#03c3ff` is the sole chromatic signal for "active" or "important," appearing as the background for the active nav item and section sub-headers.)
3. **Achromatic Hierarchy** (The brand uses a 5.9:1 contrast ratio between Gray `#646464` and White `#ffffff` to handle the bulk of information density without chromatic fatigue.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--white` | `#ffffff` | Primary page background and text on dark surfaces | 20 | 1 | CSS Variable |
| `--gray` | `#646464` | Primary body text and secondary headings | 16 | 1 | CSS Variable |
| `--light` | `#f7f7f7` | Subtle section backgrounds (White-shade) | 1 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--blue` | `#03c3ff` | Active nav states, borders, and accent text | 4 | 1 | CSS Variable |
| `--dark` | `#0f1c2d` | Decorative footer/section backgrounds | 2 | 1 | CSS Variable (decorative_only) |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--success` | `#28a745` | Declared token (Green) |
| `--error` | `#dc3545` | Declared token (Red) |
| `--warning` | `#ffc107` | Declared token (Yellow) |
| `--info` | `#17a2b8` | Declared token (Cyan) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Open Sans | 400, 700, 800 | Universal (Heading & Body) | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h1}` | 48px | 1.2 | normal | 800 | Main Hero Heading | Observed in Screenshot 1 |
| `{type.h2}` | 32px | 1.2 | normal | 700 | Section Titles | Observed in Screenshot 1 |
| `{type.nav}` | 16px | 24px | normal | 400 | Top Navigation | `nav#myHeader` |
| `{type.body}` | 16px | 24px | normal | 400 | Primary Content | `nav#myHeader` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | List items/Secondary | `li:nth-of-type(1)` |
| `{type.label}` | 12px | 1.4 | normal | 700 | Small Caps Labels | Not captured in source |
| `{type.button}` | 16px | 1.0 | normal | 700 | CTA Text | Observed in Screenshot 1 |
| `{type.caption}` | 13px | 1.4 | normal | 400 | Metadata | Not captured in source |

### Principles
1. **Weight as Hierarchy:** Boldness (700/800) is the primary tool for distinguishing headings; size alone is insufficient.
2. **Achromatic Body:** All long-form reading text must remain `#646464` or `#ffffff` depending on the background.
3. **Cyan for Focus:** Use `#03c3ff` sparingly to draw the eye to the current location or primary action.

## Spacing
**Base unit:** 5px (derived from common multiples in evidence)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 13 |
| `{space.sm}` | 10px | 3 |
| `{space.md}` | 20px | 9 |
| `{space.lg}` | 50px | 3 |
| `{space.xl}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | All buttons, cards, and inputs | 33 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elev.flat}` | none | All surfaces and cards | Observed in Screenshot 1 |

## Components
### Tier 1: Foundational

#### Navigation Item
**Role:** Primary site navigation links
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Background: transparent / Text: `#646464` / Radius: `0px` / Font: Open Sans 16px
**States observed:** Active: Background `#03c3ff`, Text `#ffffff`

#### Primary Button
**Role:** Main call to action (e.g., "Get Quote")
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Background: `#ffc107` (from declared tokens) / Text: `#ffffff` / Radius: `0px` / Padding: `10px 20px`
**States observed:** Default captured in Screenshot 1.

### Tier 2: Patterns

#### Section Header
**Role:** Introducing new content blocks
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Text: `#0f1c2d` / Typography: Open Sans 700 / Border-bottom: 3px solid `#03c3ff` (centered)
**States observed:** Default only.

#### Hero Slider
**Role:** Main value proposition display
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Background: Image with dark overlay / Text: `#ffffff` / Alignment: Center
**States observed:** Default only.

### Tier 3: Surface-specific

#### Service Card
**Role:** Displaying individual service offerings
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Background: `#ffffff` / Text: `#646464` / Border: `0px` / Radius: `0px`
**States observed:** Default only.

#### Top Bar
**Role:** Contact info and social links
**Pages observed:** https://winuxsoftwaresolutions.com
**Spec:** Background: `#0f1c2d` / Text: `#ffffff` / Font-size: 14px
**States observed:** Default only.

## Layout
| Property | Value |
| :--- | :--- |
| Max-width | 1140px |
| Section Padding | 80px (Vertical) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero text scales to ~28px |
| Desktop | 1440px | Full horizontal navigation; 3-column service grids |

## Imagery & decoration
The brand uses high-contrast, tech-focused photography with dark blue overlays to ensure text legibility. Decorative elements are limited to 3px horizontal lines in `#03c3ff` and a dotted world map motif.

## Do's
- Use `#646464` for all secondary text to maintain the brand's soft-monochrome feel.
- Ensure all buttons have a `0px` border-radius.
- Center-align section headers and include the `#03c3ff` underline.
- Use Open Sans 800 for Hero headings to maximize impact.
- Maintain a white background for content-heavy sections.

## Don'ts
- **Wrong:** Using `#007bff` (standard primary) for buttons. **Right:** Use the specific brand accent `#03c3ff` or the declared `#ffc107`. **Reason:** Standard browser blues break the specific Winux palette.
- **Wrong:** Applying rounded corners to cards. **Right:** Keep all corners at `0px`. **Reason:** Sharp geometry is a core brand identifier.
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use Gray `#646464`. **Reason:** The gray provides a more sophisticated, less jarring contrast on white.
- Do not use gradients on buttons or backgrounds.
- Do not use serif fonts in any context.

## Similar brands
- Infosys (Corporate utility)
- Cognizant (Tech-services blue/monochrome)
- Wipro (Structured grid focus)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #646464;
  --color-accent: #03c3ff;
  --color-bg: #ffffff;
  --color-dark: #0f1c2d;
  --font-main: 'Open Sans', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a pricing card using the Winuxsoftwaresolutions system: white background, #646464 text, 0px border radius, and a 3px #03c3ff top border."
- "Generate a hero section with a dark #0f1c2d overlay, white Open Sans 800 text, and a sharp-edged #ffc107 button."
- "Design a navigation bar with #646464 links that turn #03c3ff on active state, using 16px Open Sans."

## Known gaps
- Hover states for secondary buttons were not captured in the initial crawl.
- Form validation UI (error/success messages) was not observed in the provided screenshots.
- The specific behavior of the mobile menu transition was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://winuxsoftwaresolutions.com | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://winuxsoftwaresolutions.com | Mobile 390px | 2026-06-06 |