# Wit-software Design System

> High-contrast technical noir anchored by deep obsidian surfaces and electric cyan accents.

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

## TL;DR
Wit-software utilizes a "monochrome" system type that is effectively a dark-mode-first technical aesthetic. The canvas is a deep near-black `{--bg}` (#05060a), providing a high-contrast foundation for white Inter typography and electric cyan accents `{--accent-2}` (#23f2ff). Layouts are structured with rigid 1px hairlines `{--line}` (#213051) and generous 16px card radii. The visual language is strictly functional, using high-density typography and pill-shaped interactive elements to signal a carrier-grade, engineering-led platform.

## Signature DNA
1. **Obsidian Depth** (The use of `#05060a` as a primary canvas with semi-transparent overlays like `rgba(11, 16, 32, 0.45)` for cards creates a layered, glass-morphism effect observed on all analyzed pages.)
2. **Electric Punctuation** (Vibrant cyan accents `#23f2ff` and `#0d8bff` are reserved strictly for high-priority actions and brand signals, contrasting sharply against the muted `#a7b2d0` secondary text.)
3. **Technical Typography** (Heavy use of Inter Bold (700) at large scales (83px) for display headers, paired with tight 1px borders, creates a "command center" UI feel.)

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{--bg}` | `#05060a` | Primary page background | 21 | 1.0 | Declared token |
| `{--text}` | `#f4f7ff` | Primary body and heading text | 21 | 1.0 | Computed style |
| `{--bg-soft}` | `#0b1020` | Surface background for inputs/dropdowns | 6 | 1.0 | Computed style |
| `Neutral` | `#808080` | Muted borders and secondary text | 24 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{--muted}` | `#a7b2d0` | Secondary text and metadata | 15 | 1.0 | Computed style |
| `{--line}` | `#213051` | Default 1px border and divider color | 6 | 1.0 | Computed style |
| `{--accent}` | `#0d8bff` | Primary brand blue | 3 | 1.0 | Declared token |
| `{--accent-2}` | `#23f2ff` | High-voltage cyan for primary CTAs | 3 | 1.0 | Declared token |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 400, 600, 700 | All UI, Display, and Body | Inter (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 83px | 87.36px | normal | 700 | Hero H1 | `h1` |
| `{type.display-lg}` | 58px | normal | normal | 700 | Section H2 | `h2` |
| `{type.body-lead}` | 19px | 25.488px | normal | 400 | Lead paragraph | `p.lead` |
| `{type.body-md}` | 16px | normal | normal | 400 | Standard body | `section.hero` |
| `{type.button}` | 16px | normal | normal | 600 | Primary CTA text | `a.btn-primary` |
| `{type.button-sm}` | 15px | normal | normal | 600 | Secondary CTA text | `a.btn-primary` |

### Principles
1. **High Contrast Headers:** Display type uses weight 700 to anchor sections against dark backgrounds.
2. **Functional Legibility:** Body text is kept at a minimum of 16px for readability on high-density technical pages.
3. **Tight Leading:** Large display sizes use tight line-heights (approx 1.05x) to maintain visual density.

## Spacing
**Base unit:** Custom (4px/5px hybrid)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 3 |
| `{space.sm}` | 10px | 9 |
| `{space.md}` | 16px | 18 |
| `{space.lg}` | 22px | 9 |
| `{space.xl}` | 38px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Layout containers | 42 occurrences |
| `{radius.card}` | 16px | Content cards and feature blocks | 6 occurrences |
| `{radius.pill}` | 999px | Buttons and interactive tags | 6 occurrences |

## Elevation
Not captured in source. The system relies on color layering and 1px borders rather than shadows.

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary and Secondary Actions
**Pages observed:** Home, Pricing, About
**Spec:** Background: `transparent` / Text: `#021321` / Border: `1px solid transparent` / Radius: `999px` / Padding: `12.8px 24.8px` / Typography: `16px 600`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Hairline Divider
**Role:** Section separation
**Pages observed:** Home, Pricing
**Spec:** Background: `none` / Border-top: `1px solid #213051`
**States observed:** Default: Captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** Home, Pricing, About
**Spec:** Background: `rgba(11, 16, 32, 0.45)` / Text: `#f4f7ff` / Border: `1px solid #213051` / Radius: `16px` / Padding: `0px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1440px (implied by viewport) |
| Grid type | Flex/Grid hybrid |
| Section padding | 38px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger menu; H1 scales to fit width. |

## Imagery & decoration
- **Technical Graphics:** Uses high-detail 3D renders and cityscapes with blue/cyan light trails to reinforce the "Telecom" and "AI" focus.
- **Avoids:** Flat illustrations, organic shapes, or warm color palettes (reds/yellows).

## Do's
- Use `#05060a` for all primary page backgrounds.
- Apply `{radius.pill}` (999px) to all interactive buttons.
- Set display headers to `Inter 700` for maximum authority.
- Use `rgba(11, 16, 32, 0.45)` for card backgrounds to maintain depth.
- Ensure all borders use the `{--line}` token (#213051).

## Don'ts
- **Wrong:** Using pure white (#ffffff) for body text. **Right:** Use `#f4f7ff`. **Reason:** Pure white creates excessive vibration on near-black backgrounds.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders (#213051). **Reason:** The brand uses a flat, technical "noir" aesthetic.
- **Wrong:** Using sub-brand colors (e.g., a hypothetical orange) for parent CTAs. **Right:** Use `#23f2ff`. **Reason:** Parent brand identity is strictly monochrome/cyan.

## Similar brands
- Cloudflare
- Vercel (Dark mode)
- Scale AI
- Datadog

## Quick start

```css
/* CSS Custom Properties */
:root {
  --bg: #05060a;
  --bg-soft: #0b1020;
  --text: #f4f7ff;
  --muted: #a7b2d0;
  --accent: #0d8bff;
  --accent-2: #23f2ff;
  --line: #213051;
  --radius-card: 16px;
  --radius-pill: 999px;
}
```

## Agent prompt examples
- "Create a feature card using a background of `rgba(11, 16, 32, 0.45)`, a 1px border of `#213051`, and a corner radius of `16px`. Use `Inter` for the heading in `#f4f7ff`."
- "Generate a primary CTA button with a pill shape, cyan background `#23f2ff`, and dark text `#021321`."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Shadow tokens are missing as the analyzed pages utilize flat borders for elevation.

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