# Witsync Design System

> Corporate blue gradients and Poppins-driven geometry anchored by high-contrast achromatic foundations.

**Source:** https://witsync.co | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Witsync utilizes a structured, monochrome-first foundation anchored by a deep charcoal `#212529` and pure white `#ffffff`. The visual identity is elevated through a "Fintech Blue" accent palette, primarily using `#0d6efd` and `#037cae` for interactive elements and section backgrounds. Typography is strictly Poppins, ranging from Light (300/400) for subheadings to Bold (700) for high-impact display headers. Components favor soft geometry with 10px and 30px radii, often supported by deep, multi-layered shadows to create a sense of professional software depth.

## Signature DNA
1. **Geometric Poppins Hierarchy** (Uses Poppins-Regular at 37px-40px for primary headers and Poppins-Light for descriptive sub-headers to create a clean, modern fintech aesthetic.)
2. **Layered Depth** (Employs complex shadows `rgba(0, 0, 0, 0.16) 0px 2px 25px -5px` on cards to lift content off the flat white canvas.)
3. **Achromatic Anchoring** (Despite the blue accents, the core interface logic relies on `#212529` for all primary text and button labels, ensuring high contrast and legibility.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, surface | 66 | 1.0 | `--bs-white` |
| `{color.dark}` | `#212529` | Primary text, button text, headings | 59 | 1.0 | `--bs-dark` |
| `{color.gray.700}` | `#787878` | Secondary body text | 5 | 0.6 | computed_style |
| `{color.gray.600}` | `#545454` | Muted descriptive text | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#0d6efd` | Primary action, borders, links | 3 | 1.0 | `--bs-primary` |
| `{color.blue.deep}` | `#037cae` | Section backgrounds, accent text | 7 | 0.6 | computed_style |
| `{color.cyan}` | `#10bad4` | Decorative text accent | 3 | 0.6 | computed_style |
| `{color.blue.soft}` | `#9cbccb` | Surface background (decorative_only) | 3 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#198754` | Success states (`--bs-green`) |
| `{color.error}` | `#dc3545` | Error states (`--bs-red`) |
| `{color.warning}` | `#ffc107` | Warning states (`--bs-yellow`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins-Regular | 500, 700 | Display, Headings | Poppins (Google Fonts) | SIL Open Font |
| Poppins-Light | 400, 500 | Subheadings, Hero text | Poppins Light | SIL Open Font |
| Poppins-Medium | 400 | Navigation, Body SM | Poppins Medium | SIL Open Font |
| system-ui | 400, 500 | Default Body, UI | Sans-serif | OS Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 48px | normal | 500 | Page Hero | `h2` |
| `{type.h2}` | 38px | 45.6px | normal | 500 | Section Header | `h2.wt-h-s-2-label-2` |
| `{type.h2.bold}` | 37px | 44.4px | normal | 700 | Impact Header | `strong` |
| `{type.h1.alt}` | 30px | 36px | normal | 500 | Subsection Hero | `h1` |
| `{type.h1.sm}` | 22px | 26.4px | normal | 500 | Component Header | `h1.bn-h1` |
| `{type.subheading}` | 19px | 22.8px | normal | 500 | Feature Label | `h1` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Body | `div.container-fluid.top-header` |
| `{type.link}` | 15px | 22.5px | 1px | 400 | Nav/Footer Links | `a.a-hover` |

### Principles
1. **Header Weight Pairing**: Pair Poppins-Regular (700) with Poppins-Light (500) for hierarchical clarity in feature sections.
2. **Achromatic Text Priority**: All long-form body copy must use `#212529` or `#ffffff` depending on background luminance; never use accent blues for paragraph text.
3. **Letter Spacing for Links**: Navigation and footer links use a `1px` tracking to increase legibility at smaller sizes (15px).

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 42 |
| `{space.sm}` | 10px | 13 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 25px | 7 |
| `{space.xl}` | 60px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers | 138 occurrences |
| `{radius.sm}` | 4px | Inputs, small surfaces | `radius: 4px` |
| `{radius.md}` | 10px | Cards, buttons | `radius: 10px` |
| `{radius.lg}` | 30px | Large panels, feature sections | `radius: 30px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.16) 0px 2px 25px -5px` | Feature Cards | Card component spec |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Basic content container
**Pages observed:** witsync.co
**Spec:** Background: transparent / Text: `#212529` / Radius: 4px / Padding: 0px / Typography: 16px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Card
**Role:** Feature highlight and service display
**Pages observed:** witsync.co
**Spec:** Background: transparent / Text: `#212529` / Border: 0px / Radius: 10px / Shadow: `{shadow.deep}`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific
#### Top Header
**Role:** Utility navigation bar
**Pages observed:** witsync.co
**Spec:** Background: `#ffffff` / Text: `#212529` / Typography: `{type.body}` (16px)
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 100% (Fluid) |
| Section Padding | 60px (`{space.xl}`) |
| Column Gap | 25px (`{space.lg}`) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger menu; text centers in feature blocks. |
| Desktop | 1440px | Multi-column grid for "Software Solutions" cards. |

## Imagery & decoration
Witsync uses high-detail isometric 3D illustrations featuring blue and purple gradients to represent technical concepts (jigsaw puzzles, servers, skyscrapers). Backgrounds frequently use large, soft organic "blob" shapes in light blue (`#9cbccb`) to break up the white canvas.

## Do's
- Use **Poppins-Regular (700)** for primary calls to action within headers.
- Apply **`{shadow.deep}`** to cards that sit on white backgrounds.
- Maintain a **10px radius** for all interactive card elements.
- Use **`#0d6efd`** for primary text links and active border states.
- Ensure all body text is **16px** for standard readability.

## Don'ts
- **Wrong:** Using `#0d6efd` for primary page headings. 
  **Right:** Use `#212529`. 
  **Reason:** Brand primary is achromatic; blues are reserved for accents and interaction.
- **Wrong:** Applying sharp 0px corners to feature cards.
  **Right:** Use `{radius.md}` (10px).
- **Wrong:** Using Poppins-Light for 13px footer text.
  **Right:** Use Poppins-Regular.
  **Reason:** Light weights lose legibility at sub-14px sizes.

## Similar brands
- SAP (Fintech/Enterprise structure)
- Stripe (Isometric illustration style)
- Oracle (Corporate blue/achromatic balance)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --witsync-dark: #212529;
  --witsync-primary: #0d6efd;
  --witsync-white: #ffffff;
  --witsync-radius-md: 10px;
  --witsync-shadow-deep: rgba(0, 0, 0, 0.16) 0px 2px 25px -5px;
  --font-main: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using Witsync's `{shadow.deep}`, a 10px border radius, and Poppins-Regular 22px for the title."
- "Generate a hero section with a `#ffffff` background, using Poppins-Regular at 40px for the H1 and `#212529` for the text color."
- "Design a button using the `{color.primary}` hex for the border and Poppins-Medium 15px with 1px letter spacing for the label."

## Known gaps
- Hover and Active states for primary buttons were not explicitly captured in the source evidence.
- Specific mobile breakpoint pixel values (e.g., 768px) were not declared in tokens, only observed via viewport rendering.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://witsync.co | 1440px | 2026-06-06 |
| Mobile View | https://witsync.co | 390px | 2026-06-06 |