# Wisedoc Design System

> High-contrast technical precision meets deep-space atmospheric gradients, anchored by electric cyan accents and robust Roboto typography.

**Source:** [https://wisedoc.net](https://wisedoc.net) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Wisedoc utilizes a "Dark Mode by Default" aesthetic for its primary marketing presence, shifting to a clean white canvas for utility pages like pricing. The system is defined by a high-voltage electric cyan (`#00d4ff`) used for critical signals, borders, and text highlights. Backgrounds alternate between a deep navy-black (`#0b0e16`) and a softer charcoal (`#151c28`), often layered with subtle glassmorphism effects (10% white overlays). Typography is strictly functional, relying on Roboto for display and body, occasionally punctuated by DM Mono for technical labels. Geometry is versatile, moving from sharp 0px containers to ultra-soft 9999px pill buttons.

## Signature DNA
1. **Electric Cyan Voltage:** The use of `#00d4ff` as both a text highlight and a glowing border element (often with a 40px blur shadow) creates a "high-tech" signal against dark backgrounds.
2. **Glassmorphic Layering:** Surfaces frequently use semi-transparent fills (e.g., `rgba(21, 28, 40, 0.6)`) and 1px translucent borders to create depth without heavy shadows.
3. **Monospace Technicality:** DM Mono is used for small-scale metadata and "process step" numbers, signaling the algorithmic nature of the ATS product.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background (Pricing), Primary text on dark | 295 | 1 | Computed |
| `{color.dark.primary}` | `#0b0e16` | Hero section backgrounds | 4 | 0.6 | Computed |
| `{color.dark.surface}` | `#151c28` | Card and section backgrounds | 26 | 1 | Computed |
| `{color.ink}` | `#212529` | Primary text on light surfaces | 149 | 1 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.cyan.signal}` | `#00d4ff` | Primary brand signal, highlights, borders | 46 | 1 | Brand Page |
| `{color.cyan.glow}` | `#00f2ff` | Hover states and glowing border effects | 46 | 0.8 | Computed |
| `{color.blue.link}` | `#0d6efd` | Standard link color, secondary buttons | 12 | 1 | CSS Variable |
| `{color.coral.filter}` | `#ffaea8` | "Filtering" category accent | 10 | 1 | Brand Page |
| `{color.yellow.speed}` | `#ffbf00` | "Speed" category accent | 10 | 1 | Brand Page |
| `{color.pink.diversity}` | `#ff80ab` | "Diversity" category accent | 10 | 1 | Brand Page |
| `{color.purple.ent}` | `#8b5cf6` | Enterprise badge background | 2 | 1 | decorative_only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.success}` | `#198754` | Valid form states |
| `{color.error}` | `#dc3545` | Invalid form states |
| `{color.warning}` | `#ffc107` | Warning notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto | 300, 400, 500, 600, 700, 800 | Primary Display & Body | N/A (Google Font) | Apache 2.0 |
| DM Mono | 400, 500 | Technical labels, step numbers | N/A (Google Font) | SIL OFL |
| Space Grotesk | 700 | Subheadings | N/A (Google Font) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 54px | 58.32px | normal | 600 | Hero H1 | `h1#landing-hero-title` |
| `{type.display.lg}` | 42px | 50.4px | -0.7px | 700 | Section Headers | `h2.text-[28px]` |
| `{type.heading.md}` | 32px | 38.4px | normal | 500 | Feature Titles | `h2` |
| `{type.heading.mono}` | 36px | 36px | normal | 400 | Step Numbers | `span.text-[32px]` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Intro Paragraphs | `p.mx-auto` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `div.relative` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Footer Links | `a.text-[14px]` |
| `{type.caption}` | 12px | 16px | normal | 400 | Mono Labels | `span.block.text-[12px]` |
| `{type.label.tiny}` | 10px | 15px | 2.2px | 700 | Eyebrow Text | `p.mt-[8px]` |

### Principles
1. **Tight Display Tracking:** Larger headers (42px+) use negative letter-spacing (-0.5px to -0.7px) to maintain visual density.
2. **Mono for Metadata:** Use DM Mono exclusively for non-prose elements like counters, tags, and technical specs.
3. **High Contrast Ratios:** Text on dark surfaces must be pure white (`#ffffff`) or light gray (`#dde2f4`) to ensure legibility against deep navy backgrounds.

## Spacing
**Base unit:** 4px (Inferred from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 79 |
| `{space.sm}` | 12px | 21 |
| `{space.md}` | 16px | 70 |
| `{space.lg}` | 24px | 32 |
| `{space.xl}` | 32px | 33 |
| `{space.section}` | 112px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main section containers | 716 occurrences |
| `{radius.sm}` | 8px | Feature cards | Pricing card borders |
| `{radius.md}` | 12px | Interactive cards | `Card` component |
| `{radius.pill}` | 9999px | CTA Buttons, Badges | `button-primary` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.glow}` | `rgba(0, 242, 255, 0.2) 0px 4px 15px 0px` | Active/Hovered Cyan elements | Pricing toggle |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | Modals/Overlays | Pricing tooltips |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.05) 0px 0px 24px 2px` | White surface cards | Pricing tiers |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Start hiring now")
**Pages observed:** [Home, About]
**Spec:** Background: `#ffffff` / Text: `#000000` / Radius: `9999px` / Padding: `10px 24px` / Typography: Roboto 700 16px
**States observed:** Default | Hover: Not captured

#### Ghost Button (Dark)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** [Home, About]
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `1px #ffffff` / Radius: `10px` / Padding: `0px 16px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (Glass)
**Role:** Highlighting product capabilities
**Pages observed:** [Home, About]
**Spec:** Background: `rgba(21, 28, 40, 0.6)` / Border: `1px rgba(255, 255, 255, 0.1)` / Radius: `8px` / Padding: `26px`
**States observed:** Default | Hover: Not captured

#### Pricing Tier Card
**Role:** Displaying plan options
**Pages observed:** [Pricing]
**Spec:** Background: `#ffffff` / Border: `1px #dee2e6` / Radius: `8px` / Padding: `40px 20px` / Shadow: `{shadow.soft}`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Signal Badge
**Role:** Small category labels (Filtering, Speed, etc.)
**Pages observed:** [Home]
**Spec:** Background: `rgba(0, 212, 255, 0.05)` / Text: `#00d4ff` / Border: `1px rgba(0, 212, 255, 0.2)` / Radius: `12px` / Padding: `5px 13px`
**States observed:** Default | Hover: Not captured

#### Enterprise Banner
**Role:** High-tier plan highlighting
**Pages observed:** [Home]
**Spec:** Background: `#8b5cf6` / Text: `#ffffff` / Radius: `9999px` / Padding: `0px 12px`
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 112px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked cards, H1 reduces to 28px-34px range |
| Desktop | 1440px | 3-column feature grids, 112px section spacing |

## Imagery & decoration
Wisedoc uses deep-space photography and nebula-like gradients (purples and cyans) behind hero text. UI elements use "glowing" borders created with thin cyan lines and matching outer glows. Avoids flat, illustrative icons in favor of thin-stroke glyphs with colored backgrounds.

## Do's
- Use `#00d4ff` for all primary interactive signals and emphasis text.
- Pair Roboto with DM Mono for a "human-meets-algorithm" feel.
- Apply `9999px` radius to all primary CTA buttons.
- Use semi-transparent navy backgrounds (`rgba(21, 28, 40, 0.6)`) for cards on dark sections.
- Maintain a minimum 112px vertical gap between major homepage sections.

## Don'ts
- **Wrong:** Using `#0d6efd` (Standard Blue) for primary brand highlights. **Right:** Use `#00d4ff` (Electric Cyan). **Reason:** Standard blue is a utility color; Electric Cyan is the brand's unique signature.
- **Wrong:** Using sharp corners for buttons. **Right:** Use `{radius.pill}`. **Reason:** Brand identity relies on the contrast between sharp section edges and soft interactive elements.
- **Wrong:** Placing dark text on navy backgrounds. **Right:** Use `#ffffff` or `#dde2f4`. **Reason:** Contrast ratios must be maintained for accessibility on dark mode.

## Quick start

```css
:root {
  --wisedoc-cyan: #00d4ff;
  --wisedoc-navy-deep: #0b0e16;
  --wisedoc-navy-surface: #151c28;
  --wisedoc-white: #ffffff;
  --wisedoc-font-main: 'Roboto', sans-serif;
  --wisedoc-font-mono: 'DM Mono', monospace;
  --wisedoc-radius-pill: 9999px;
  --wisedoc-shadow-glow: 0 4px 15px 0 rgba(0, 242, 255, 0.2);
}
```

## Known gaps
- Hover and Active states for buttons were not fully captured in the static analysis.
- Mobile-specific navigation transitions were not observed.
- Form validation error messaging UI was not captured in the source pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://wisedoc.net | 1440px / 390px | 2026-06-06 |
| Pricing | https://wisedoc.net/pricing | 1440px | 2026-06-06 |
| About | https://wisedoc.net/about | 1440px | 2026-06-06 |