# Wisitech Design System

> High-contrast monochrome tech-noir with deep charcoal surfaces and stark white typography anchored by Work Sans.

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

## TL;DR
Wisitech utilizes a "Dark Mode by Default" aesthetic, characterized by a dominant achromatic palette of deep grays (#161616, #252525) and pure blacks (#000000). The system relies on high-contrast white typography (#ffffff) using the **Work Sans** family to create a technical, authoritative atmosphere. Interaction is driven by pill-shaped white buttons and outlined input fields that pop against dark, often textured or gradient-heavy backgrounds. Layouts are structured with generous vertical spacing and a mix of sharp-edged sections and ultra-rounded (100px) interactive elements.

## Signature DNA
1. **Achromatic Depth** (The brand avoids color in its core UI, using #161616 and #252525 for surfaces to create a "tech-noir" environment. Observed on all pages.)
2. **Work Sans Typography** (Heavy use of Work Sans at weight 700 for display and 600 for navigation creates a modern, geometric sans-serif identity. Observed on Home and About.)
3. **Pill-Shaped Interactivity** (Primary CTAs and inputs use a 100px border-radius, creating a soft, tactile contrast against the otherwise rigid, sharp-edged section containers. Observed on Home and About.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary text, button backgrounds, borders | 523 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Deepest surface backgrounds | 1 | 1.0 | `--wp--preset--color--black` |
| `{color.charcoal}` | `#252525` | Secondary surface backgrounds, button text | 14 | 0.8 | Computed Style |
| `{color.dark-gray}` | `#161616` | Primary brand surface / button text | 6 | 0.6 | Computed Style |
| `{color.mid-gray}` | `#404040` | Tertiary surface backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.border-muted}` | `#5a5a5a` | Decorative borders and dividers | 11 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Work Sans** | 400, 500, 600, 700 | Heading, Display, Nav | Work Sans (Google Fonts) | OFL |
| **Arial** | 400 | Form inputs, fallback | System Sans | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 47px | normal | 700 | Main Section Titles | `h2.ekit-heading--title` |
| `{type.h2}` | 32px | 38px | normal | 600 | Section Subtitles | `h2.elementskit-section-subtitle` |
| `{type.h3}` | 28px | 33px | normal | 600 | Card Titles | `h3.ekit-heading--title` |
| `{type.button-lg}` | 26px | 30px | normal | 700 | Hero CTA Buttons | `a.elementor-button` |
| `{type.nav}` | 20px | 20px | normal | 600 | Top Navigation Links | `a.ekit-menu-nav-link` |
| `{type.body-lg}` | 18px | 24px | normal | 400 | Standard Body Text | `header.elementor` |
| `{type.button-sm}` | 16px | 16px | normal | 600 | Secondary Buttons | `a.elementor-button.elementor-size-sm` |
| `{type.body-sm}` | 15px | 28px | normal | 400 | List items, Footer links | `span.elementor-icon-list-text` |

### Principles
1. **Bold Display Weights:** Display headings consistently use weight 700 to establish hierarchy against dark backgrounds.
2. **Geometric Navigation:** Navigation links use weight 600 at 20px, ensuring legibility and a "sturdy" UI feel.
3. **Tight Line Heights:** Display and heading sizes use tight line-height ratios (approx 1.17x) to keep grouped text blocks dense.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 24 |
| `{space.sm}` | 8px | 42 |
| `{space.md}` | 12px | 18 |
| `{space.lg}` | 24px | 4 |
| `{space.xl}` | 30px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, primary buttons | 505 occurrences |
| `{radius.card}` | 3px | Content cards | observed on Home/About |
| `{radius.pill}` | 100px | Rounded buttons, inputs, surfaces | 9 occurrences |

## Elevation
Not captured in source (system uses flat surfaces and borders rather than shadows for depth).

## Components
### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** Home, About
**Spec:** Background: `#ffffff` / Text: `#252525` / Radius: `100px` / Padding: `13.5px 24px` / Typography: `Work Sans 18px`
**States observed:** Default: Captured | Hover: Not captured

#### Text Input
**Role:** Lead generation and search
**Pages observed:** Home, About
**Spec:** Background: `#404040` / Text: `#ffffff` / Border: `rgba(255, 255, 255, 0.12)` / Radius: `100px` / Padding: `6px 16px`
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Service and feature highlights
**Pages observed:** Home, About
**Spec:** Background: `#404040` / Text: `#ffffff` / Radius: `100px` / Padding: `8px` / Typography: `Work Sans 18px`
**States observed:** Default: Captured

#### Surface Panel
**Role:** Sectional grouping
**Pages observed:** Home, About
**Spec:** Background: `#252525` / Text: `#ffffff` / Radius: `0px` / Padding: `0px 15px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Outlined Surface
**Role:** De-emphasized containers
**Pages observed:** Home, About
**Spec:** Background: `transparent` / Border: `rgba(255, 255, 255, 0.25) 1px` / Radius: `100px`
**States observed:** Default: Captured

#### Sharp Button
**Role:** Inline or secondary actions
**Pages observed:** Home, About
**Spec:** Background: `transparent` / Text: `#ffffff` / Radius: `0px` / Typography: `Work Sans 16px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Padding | 40px - 80px (vertical) |
| Grid | 3-column (Service cards), 1-column (Mobile) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; multi-column service grids. |

## Imagery & decoration
The brand utilizes red circuit-board patterns and dark gradients behind content sections to reinforce the "AI-first" and "Technical" positioning. It avoids photography with bright, natural lighting, favoring high-contrast or tech-themed imagery.

## Do's
- Use `#ffffff` for all primary text on dark backgrounds to maintain 18:1 contrast.
- Apply `Work Sans` weight 700 for all display headings (`{type.display}`).
- Use `{radius.pill}` (100px) for all lead-generation buttons.
- Maintain a `#161616` or `#252525` background for main content sections.
- Use 1px borders at `rgba(255, 255, 255, 0.25)` for outlined containers.

## Don'ts
- **Wrong:** Using `#007cba` (WordPress Admin Blue) as a primary UI color. 
  **Right:** Use `#ffffff` or `#161616`. 
  **Reason:** Saturated tokens in the manifest are for sub-brands or admin; the parent brand is strictly monochrome.
- Do not use serif fonts for body or display; stick to Work Sans.
- Do not use soft shadows; rely on borders and background shifts for depth.
- Do not use border-radii between 4px and 20px; use either 0px (sharp) or 100px (pill).
- Do not place dark text on dark backgrounds; ensure all text is `#ffffff`.

## Similar brands
- Vercel (Monochrome, geometric sans)
- Linear (Dark mode, high contrast, technical)
- Scale AI (Tech-noir, high-density typography)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-charcoal: #252525;
  --color-surface: #161616;
  --font-main: 'Work Sans', sans-serif;
  --radius-pill: 100px;
  --radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-primary: #161616;
  --color-brand-white: #ffffff;
  --font-work: "Work Sans";
  --radius-pill: 100px;
}
```

## Agent prompt examples
- "Generate a hero section with a #161616 background, a Work Sans 700 headline in #ffffff, and a pill-shaped button with #ffffff background and #252525 text."
- "Create a 3-column grid of cards using #404040 background and 100px border-radius, featuring Work Sans 600 titles."
- "Design a lead capture form with a 100px rounded input field using a #ffffff 1px border at 0.12 opacity."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the CSS evidence.
- Error and Success semantic colors were not present on the analyzed pages.
- Shadow tokens were present in the manifest but not rendered on the analyzed components.

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