# Qualsofttech Design System

> High-contrast enterprise blue anchored by heavy Roboto display type and sharp geometric containers.

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

## TL;DR
Qualsofttech utilizes a high-voltage "Vivid Cyan Blue" (#009cff) as its primary functional and brand color, contrasted against a clinical white (#ffffff) canvas. The typography is dominated by **Roboto**, used at significant weights (600) and large scales (50px+) for display headers, while **Roboto Slab** provides a more traditional serif counterpoint for specific UI labels. The system is strictly geometric, favoring 0px border radii for most containers and sections, punctuated by rare 50px rounded panels or circular icons. Layouts are dense, using a 20px base spacing unit to organize complex enterprise information.

## Signature DNA
1. **The Blue Anchor** (#009cff is applied aggressively across primary CTAs, iconography backgrounds, and section borders, creating a high-energy "tech" atmosphere against white surfaces.)
2. **Roboto Display 600** (Headlines consistently use Roboto at weight 600 with sizes ranging from 36px to 50px, establishing a heavy, authoritative hierarchy.)
3. **Sharp Edge Geometry** (With over 340 occurrences of 0px radius, the brand identity is built on hard-edged boxes and dividers, signaling enterprise stability.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 71 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text, footer backgrounds | 82 | 1.0 | Computed |
| `{color.gray.dark}` | `#333333` | Secondary headings, body text | 53 | 0.8 | Computed |
| `{color.gray.medium}` | `#4a4a4a` | Sub-labels, borders | 72 | 0.8 | Computed |
| `{color.gray.light}` | `#7a7a7a` | Muted text, background overlays | 95 | 0.8 | Computed |
| `{color.border.light}` | `#eaeaea` | Subtle section dividers | 4 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#009cff` | Primary CTAs, icon plates, active borders | 30 | 0.8 | Computed |
| `{color.primary.deep}` | `#00476d` | Darker blue text, footer accents | 16 | 0.8 | Computed |
| `{color.primary.soft}` | `#6ec1e4` | Decorative text accents | 6 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400, 500, 600 | Display, Headings, Buttons | Roboto (Google Fonts) | Apache 2.0 |
| Roboto Slab | 400 | Counter titles, specific labels | Roboto Slab (Google Fonts) | Apache 2.0 |
| Open Sans | 400 | Body text, icons | Open Sans (Google Fonts) | Apache 2.0 |
| Raleway | 600 | Subheadings | Raleway (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 69px | 69px | normal | 600 | Hero counters | `span.elementor-counter-number-prefix` |
| `{type.display.lg}` | 50px | 50px | normal | 600 | Page H1 | `h1.elementor-heading-title` |
| `{type.display.md}` | 36px | 36px | normal | 600 | Section H2 | `h2.elementor-heading-title` |
| `{type.heading.md}` | 30px | 30px | 1px | 600 | Sub-section H2 | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 24px | normal | 600 | Large headings | `h2.elementor-heading-title.elementor-size-large` |
| `{type.button}` | 23px | 23px | normal | 500 | Primary CTA text | `a.elementor-button` |
| `{type.body.lg}` | 19px | 47.5px | normal | 400 | Counter labels | `div.elementor-counter-title` |
| `{type.body.md}` | 18px | 25.2px | normal | 600 | Card titles | `h3.elementor-image-box-title` |
| `{type.body.sm}` | 14px | 25.2px | normal | 400 | Default body | `p.elementor-icon-box-description` |

### Principles
1. **Heavy Display Weight:** All major headlines must use Roboto 600.
2. **Tight Line Heights:** Display sizes (30px+) use a 1:1 ratio (e.g., 50px size / 50px height).
3. **Serif for Data:** Use Roboto Slab 400 specifically for secondary labels or counter titles to distinguish from UI.

## Spacing
**Base unit:** 20px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 11 |
| `{space.sm}` | 15px | 7 |
| `{space.md}` | 20px | 99 |
| `{space.lg}` | 30px | 15 |
| `{space.xl}` | 60px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default for sections, cards, and inputs | 343 occurrences |
| `{radius.panel}` | 50px | Softened background panels | 32 occurrences |
| `{radius.full}` | 50% | Icon backgrounds (Cards) | Observed in About page cards |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.5) 5px 5px 10px 0px` | Floating elements / Emphasis | 5 occurrences |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** Home, About
**Spec:** Background `{color.primary}` (#009cff) / Text `{color.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Typography `{type.button}` (23px/500)
**States observed:** Default | Hover: Not captured

#### Icon Plate
**Role:** Visual anchor for service features
**Pages observed:** Home, About
**Spec:** Background `{color.primary}` (#009cff) / Radius 50% / Padding 25px / Icon Size 50px
**States observed:** Default: Captured

### Tier 2: Patterns
#### Service Card
**Role:** Feature grid item
**Pages observed:** Home, About
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.border.light}` (#eaeaea) / Radius `{radius.sharp}` (0px) / Padding `{space.md}` (20px)
**States observed:** Default: Captured

#### Section Header
**Role:** Major page division
**Pages observed:** Home, About
**Spec:** Typography `{type.display.md}` (36px/600) / Text `{color.gray.dark}` (#333333) / Bottom Margin `{space.lg}` (30px)
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Counter Block
**Role:** Social proof statistics
**Pages observed:** Home, About
**Spec:** Text `{color.white}` (#ffffff) / Number `{type.display.xl}` (69px/600) / Label `{type.body.lg}` (19px/400 Roboto Slab)
**States observed:** Default: Captured

#### Timeline Node
**Role:** History visualization
**Pages observed:** About
**Spec:** Background `{color.primary}` (#009cff) / Radius 50% / Text `{color.white}` (#ffffff)
**States observed:** Default: Captured

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

## Do's
- Use `#009cff` for all primary interactive elements.
- Set display headlines to Roboto weight 600.
- Maintain 0px border radius for all standard content containers.
- Use Roboto Slab 400 for secondary labels in data-heavy sections (counters).
- Ensure section headers are centered and use 36px/600 Roboto.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper default) for brand CTAs. **Right:** Use `#009cff`. **Reason:** Swiper blue is a library default, not the brand primary.
- Do not apply border-radius to primary buttons; they must remain sharp (0px).
- Do not use weights below 600 for display headlines.
- Do not mix Roboto Slab into primary body paragraphs; it is reserved for labels.

## Quick start

```css
:root {
  --color-primary: #009cff;
  --color-primary-deep: #00476d;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #333333;
  --font-display: 'Roboto', sans-serif;
  --font-data: 'Roboto Slab', serif;
  --radius-sharp: 0px;
  --space-base: 20px;
}
```

## Agent prompt examples
- "Create a feature section with a 3-column grid of cards using #ffffff background, 1px #eaeaea borders, and 0px border radius. Each card should have a 50px circular #009cff icon plate at the top."
- "Generate a hero section with a centered H1 in Roboto 600 at 50px and a sharp-edged primary button with #009cff background and 23px Roboto 500 text."
- "Design a statistics counter using Roboto 600 at 69px for the number and Roboto Slab 400 at 19px for the label, both in #ffffff."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific typography scaling for the 69px display size was not explicitly measured.
- Form input validation states (Error/Success) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://qualsofttech.com | Desktop 1440 | 2026-06-06 |
| About | https://qualsofttech.com/about | Desktop 1440 | 2026-06-06 |
| Home Mobile | https://qualsofttech.com | Mobile 390 | 2026-06-06 |