# Kzsoftworks Design System

> Professional enterprise software development anchored by deep navy ink, high-contrast orange actions, and expansive cool-tinted canvases.

**Source:** [https://kzsoftworks.com](https://kzsoftworks.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kzsoftworks utilizes a high-trust "Enterprise Tech" palette, pairing a dominant deep navy (`#181f47`) with a vibrant orange (`#eb7520`) for primary calls to action. The interface is built on a foundation of cool, off-white surfaces (`#f0f8fc`) that provide a softer alternative to pure white. Typography is exclusively **Plus Jakarta Sans**, moving from heavy 700-weight display stats to clean 400-weight body prose. Layouts are characterized by generous 64px vertical rhythms and large-radius containers (up to 48px), creating a modern, approachable software-consultancy aesthetic.

## Signature DNA
1. **The Navy-Orange Punch:** Primary actions are strictly reserved for `#eb7520` (Orange), always set against the deep `#181f47` (Blue) or the light `#f0f8fc` (Tertiary) to maintain maximum visual hierarchy.
2. **Softened Enterprise Geometry:** While the brand uses sharp corners for some containers, key feature cards and badges use aggressive rounding (16px to 48px) to soften the "corporate" feel of the typography.
3. **Cool-Canvas Layering:** Instead of gray, the system uses a pale blue-tinted foundation (`#f0f8fc`) for secondary surfaces, creating a cohesive "cold" environment that makes the orange accents pop.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.tertiary}` | `#f0f8fc` | Page background, secondary surface, button text | 42 | 1.0 | `--tertiary` |
| `{colors.white-smoke}` | `#fafafa` | Alternating section backgrounds | 24 | 1.0 | `--white-smoke` |
| `{colors.border}` | `#e5e7eb` | Default 1px card and divider lines | 7 | 1.0 | `--border-color` |
| `{colors.black}` | `#0a0a0a` | Deep footer background | 1 | 1.0 | `--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.blue}` | `#181f47` | Primary text, headings, dark surface backgrounds | 173 | 1.0 | `--blue` |
| `{colors.orange}` | `#eb7520` | Primary CTA background, text emphasis | 18 | 1.0 | `--orange` |
| `{colors.para-color}` | `#4a5565` | Secondary body text, descriptions | 122 | 1.0 | `--new-para-color` |
| `{colors.secondary}` | `#56a6da` | Sky blue accent, icon backgrounds | 17 | 1.0 | `--secondary` |
| `{colors.gray}` | `#d7e2ea` | Muted borders on light cards | 28 | 1.0 | `--gray` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Plus Jakarta Sans | 300, 400, 500, 600, 700 | All roles (Display, Heading, Body) | Plus Jakarta Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 85px | 85px | normal | 700 | Hero stats | `p.home_stat` |
| `{type.display-lg}` | 49px | 61.25px | normal | 600 | Main section headers | `h2.h1.dark-text` |
| `{type.display-md}` | 40px | 50px | normal | 700 | Secondary stats | `p.home_stat_2nd` |
| `{type.heading-lg}` | 39px | 49px | normal | 600 | Capitalized sub-headers | `span.h2.capital` |
| `{type.heading-md}` | 32px | 40px | normal | 300 | Light section headers | `h1.h3.text-regular` |
| `{type.heading-sm}` | 21px | 26.25px | normal | 600 | Card titles | `h3.h4` |
| `{type.body-lg}` | 18px | 21px | normal | 600 | Button labels | `a.vf-button.w-button` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Navigation links | `nav.nav-menu-wrapper` |
| `{type.body-sm}` | 15px | 23.1px | normal | 400 | Default paragraph text | `p.p1` |
| `{type.caption}` | 12px | 20px | normal | 500 | Tags and labels | `div.tag` |

### Principles
1. **Weight as Hierarchy:** The system relies on weight shifts (300 to 700) within the same font family to distinguish between "Stability" (300) and "Results" (700).
2. **Tight Display Leading:** Large display stats use 1:1 line height (`85px` size / `85px` height) to maintain visual density.
3. **Color-Coded Text:** Primary information is always `#181f47` (Blue); supporting context is always `#4a5565` (Para-color).

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 6px | 35 |
| `{space.sm}` | 14px | 10 |
| `{space.md}` | 32px | 13 |
| `{space.section}` | 64px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 8px | Primary Buttons | `Rounded Button` |
| `{radius.md}` | 12px | Large Buttons | `Rounded Button` (Tier 2) |
| `{radius.lg}` | 16px | Standard Cards | `Card` (Tier 2) |
| `{radius.xl}` | 20px | Elevated Cards | `Card` (Tier 3) |
| `{radius.panel}` | 48px | Feature Section Cards | `Card` (Tier 1) |
| `{radius.pill}` | 1440px | Outline Badges | `Pill / Badge` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.08) 0px 4px 30px 0px` | Elevated feature cards | `Card` component |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.075) 0px 53.7px 41.4px 0px` | Hover/Active states | `Card` (Tier 2) |

## Components

### Tier 1: Foundational

#### Feature Card (Light)
**Role:** Primary content container for industry lists.
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `#f0f8fc` | Text: `#181f47` | Border: 1px `#d7e2ea` | Radius: `48px` | Padding: `6px 9px`
**States observed:** Default: captured | Hover: not captured

#### Primary Button
**Role:** Main CTA for "Book a consultation".
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `#eb7520` | Text: `#f0f8fc` | Radius: `8px` | Padding: `7px 14px` | Typography: `14px / 600`
**States observed:** Default: captured | Hover: `#ef914d` (token `--orange-hover`)

### Tier 2: Patterns

#### Elevated Card
**Role:** Used for "Our Technology Stack" or "Work" highlights.
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `#fafafa` | Border: 1px `#e5e7eb` | Radius: `20px` | Shadow: `{shadow.card}`
**States observed:** Default: captured

#### Outline Badge
**Role:** Secondary labels for project metadata.
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `transparent` | Text: `#181f47` | Border: 2px `#181f47` | Radius: `1440px` | Padding: `7px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Surface Card
**Role:** Decorative or icon containers on dark backgrounds.
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `#181f47` | Radius: `100%` (Circle) | Padding: `0px`
**States observed:** Default: captured

#### Info Card (Muted)
**Role:** Background cards for "Meet our team".
**Pages observed:** [https://kzsoftworks.com](https://kzsoftworks.com)
**Spec:** Background: `#eae8e4` | Text: `#4a5565` | Radius: `16px` | Shadow: `{shadow.deep}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Width | 1200px (approx) |
| Section Gap | 64px |
| Card Gap | 32px |

## Do's
- Use `#eb7520` exclusively for primary conversion points.
- Set display statistics in **Plus Jakarta Sans 700** at `85px`.
- Use `#f0f8fc` as the default background for feature grids to maintain brand "coolness".
- Apply `48px` border radius to large-scale feature containers.
- Pair `#181f47` text with `#f0f8fc` backgrounds for maximum readability.

## Don'ts
- **Wrong:** Using `#eb7520` for large background surfaces. **Right:** Use it only for buttons and small accents. **Reason:** Over-saturation kills the professional enterprise tone.
- **Wrong:** Using pure `#000000` for body text. **Right:** Use `#181f47` (Blue) or `#4a5565` (Para-color). **Reason:** Pure black is too harsh against the cool-tinted canvas.
- **Wrong:** Mixing different font families. **Right:** Stick to Plus Jakarta Sans across all weights.
- **Wrong:** Using sharp corners for primary feature cards. **Right:** Use `{radius.panel}` (48px).

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kz-blue: #181f47;
  --kz-orange: #eb7520;
  --kz-orange-hover: #ef914d;
  --kz-tertiary: #f0f8fc;
  --kz-para: #4a5565;
  --kz-border: #e5e7eb;
  --kz-radius-card: 20px;
  --kz-radius-panel: 48px;
}
```

## Known gaps
- Mobile-specific typography scaling for the `85px` display stats was not fully captured in the evidence provided.
- Success and Error semantic tokens were not observed in the analyzed page.
- Hover states for the `Pill / Badge` component were not captured.