# Kansys Design System

> High-contrast enterprise infrastructure defined by deep obsidian canvases, vibrant signal-red accents, and light-weight geometric typography.

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

## TL;DR
Kansys utilizes a high-contrast "Dark Mode" foundation as its primary identity, anchoring layouts on a deep navy-black (#090d16) canvas. The system is punctuated by a high-voltage primary red (#fa0542) used for critical actions and brand-defining accents. Typography is exclusively Work Sans, leaning heavily on weight 300 for body and 500 for headers to maintain a technical, precise aesthetic. Geometry is strictly functional, utilizing sharp 0px corners for major sections and a subtle 6px radius for interactive components like buttons and form fields.

## Signature DNA
1. **Obsidian Canvas** (The brand defaults to a deep #090d16 background for heroes and core sections, creating a high-contrast environment for white text and red accents; observed on Homepage and About pages).
2. **Signal Red Punctuation** (The use of #fa0542 as a singular "voltage" color for primary CTAs and bullet points against dark backgrounds; evidenced by `--clr-primary`).
3. **Light-Weight Precision** (Extensive use of Work Sans at weight 300 for long-form body text at 16px, signaling a modern, engineering-led approach to data-heavy content).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--clr-background-dk` | `#090d16` | Primary page canvas and dark section backgrounds | 69 | 1 | `computed_style` |
| `--clr-background-lt` | `#ffffff` | Secondary light section backgrounds and card text | 341 | 1 | `computed_style` |
| `--clr-base-dk` | `#090d16` | Primary text on light backgrounds | 69 | 1 | `css_variable` |
| `--clr-text-dk` | `#ffffff` | Primary text on dark backgrounds | 341 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--clr-primary` | `#fa0542` | Primary CTA background, links, and decorative bullets | 17 | 1 | `css_variable` |
| `--clr-accent-lt` | `#00c2fe` | Secondary accent, arrow icons, and intro titles | 6 | 1 | `css_variable` |
| `--clr-nav-hover-background` | `#a1aab1` | Navigation hover states (decorative_only) | 1 | 1 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Work Sans | 300, 400, 500, 700 | All headings, body, and UI labels | Work Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 72px | 85px | -1px | 500 | Main Hero H1 | `h1#purpose-built-solutions-for--faster-monetization` |
| `{type.display-lg}` | 48px | 48px | normal | 700 | Data/Stats numbers | `span.pwr-stat__number` |
| `{type.heading-lg}` | 38px | 61px | -1px | 500 | Section H2 | `h2#trusted-by-worldwide-leaders` |
| `{type.heading-md}` | 32px | 51px | -0.5px | 500 | Subsection H3 | `h3:nth-of-type(1)` |
| `{type.heading-sm}` | 20px | 32px | normal | 400 | Card titles | `span` |
| `{type.body-lg}` | 18px | 26px | normal | 700 | Names/Emphasis | `span.pwr-team-member__name` |
| `{type.body-md}` | 16px | 26px | normal | 300 | Default running text | `div.pwr-hero.vanilla` |
| `{type.button}` | 13px | 20.8px | normal | 500 | CTA labels | `a.pwr-cta_button` |
| `{type.caption}` | 12px | 19.2px | normal | 500 | Small UI labels | `a.pwr-cta_button` |

### Principles
1. **Weight Contrast:** Headlines use weight 500 for a medium presence, while body text drops to 300 for maximum legibility on dark backgrounds.
2. **Tight Display Tracking:** Large display headers (38px+) utilize negative letter spacing (-1px) to maintain visual tension.
3. **Generous Body Leading:** 16px body text uses a 26px line height (1.625x) to prevent "vibration" on high-contrast dark surfaces.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 16 |
| `{space.sm}` | 10px | 10 |
| `{space.md}` | 15px | 13 |
| `{space.lg}` | 20px | 6 |
| `{space.xl}` | 35px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main layout sections, large containers | 368 occurrences |
| `{radius.interactive}` | 6px | Buttons, form fields, content cards | 38 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All components observed | Evidence shows 0px shadows across all analyzed pages |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage, About
**Spec:** Background: transparent (rgba(0,0,0,0)) or #fa0542 / Text: #ffffff / Border: 2px #ffffff / Radius: 6px / Padding: 15px 21px / Typography: 13px Work Sans 500
**States observed:** Default | Hover: captured (border remains, background shifts)

### Tier 2: Patterns
#### Surface Section
**Role:** Major content blocks
**Pages observed:** Homepage, About
**Spec:** Background: #090d16 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: variable / Typography: 16px Work Sans 300
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Content Card
**Role:** Product and Value Prop display
**Pages observed:** Homepage, About
**Spec:** Background: #090d16 or rgba(255, 255, 255, 0.85) / Text: #ffffff or #090d16 / Border: 0px / Radius: 6px / Padding: 20px / Typography: 16px Work Sans
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px (desktop) |
| Section Padding | 80px - 120px (vertical) |
| Grid | 12-column fluid |

## Imagery & decoration
- **Abstract Light Streaks:** High-speed, colorful (purple/blue/red) motion-blurred light trails used in hero backgrounds to signify speed and data flow.
- **Achromatic Logos:** Partner and client logos are presented in pure white or grayscale to maintain system hierarchy.

## Do's
- Use #090d16 as the default background for high-impact sections.
- Set body copy to Work Sans 300 for an editorial, technical feel.
- Use #fa0542 for the primary "Request a Demo" action.
- Maintain 0px border radius on all section-level containers.
- Apply 6px border radius to all interactive elements (buttons/inputs).

## Don'ts
- **Wrong:** Using #00c2fe for primary buttons. **Right:** Use #fa0542. **Reason:** #00c2fe is a secondary accent for icons and titles only.
- Do not use shadows or elevation; the brand is strictly flat.
- Do not use bold (700) weights for body paragraphs.
- Do not mix rounded and sharp corners on the same component type.

## Similar brands
- Cloudflare
- Datadog
- HashiCorp
- CrowdStrike

## Quick start

```css
/* CSS Custom Properties */
:root {
  --clr-primary: #fa0542;
  --clr-accent: #00c2fe;
  --clr-bg-dark: #090d16;
  --clr-bg-light: #ffffff;
  --font-main: 'Work Sans', sans-serif;
  --radius-ui: 6px;
}
```

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated trace.
- Mobile-specific navigation transitions were not analyzed.
- Success and Error semantic tokens were not present in the analyzed page flows.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://kansys.com | 1440x900 | 2026-06-06 |
| About Page | https://kansys.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://kansys.com | 390x844 | 2026-06-06 |