# Npstx Design System

> High-contrast fintech utility defined by electric cyan accents against deep navy and slate foundations.

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

## TL;DR
Npstx employs a "monochrome-plus-one" strategy where a singular primary cyan (#29b6c4) provides all interactive voltage against a heavy architectural base of navy (#051d25) and charcoal (#2d2e40). The system relies on the Ubuntu font family across all roles, utilizing weight shifts (300 to 700) rather than typeface pairings to establish hierarchy. Layouts are characterized by generous vertical spacing (up to 150px) and large-radius containers (22px to 50px), creating a softened professional aesthetic. UI elements frequently use 1px borders and subtle drop shadows to maintain legibility on complex backgrounds.

## Signature DNA
1. **The Cyan Pulse** (Primary #29b6c4 is used for buttons, text highlights, and borders, acting as the sole chromatic signal in an otherwise achromatic environment. Seen on Homepage and About pages.)
2. **Rounded Architectural Surfaces** (Cards and buttons use high-radius values—30px to 50px—softening the technical nature of the RegTech content. Seen in "Who we Serve" and "Value Added Services" sections.)
3. **Navy Depth** (Deep backgrounds #051d25 and #0d0d0c create a "dark mode" foundation for hero sections and footers, contrasting with white content areas. Seen on Homepage hero and site footer.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Surface background, button text, primary text | 83 | 1 | `--white` |
| `{colors.black}` | `#000000` | Primary text, deep shadows | 72 | 1 | `--black` |
| `{colors.charcoal}` | `#3b3a39` | Secondary text, borders | 60 | 1 | `--black2` |
| `{colors.slate}` | `#a6a8b4` | Muted text, section borders | 88 | 1 | `--grey2` |
| `{colors.dark-grey}` | `#212529` | Body text, footer text | 41 | 1 | `--bs-dark` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#29b6c4` | Buttons, highlights, active text | 68 | 1 | `--blue1` |
| `{colors.navy-deep}` | `#051d25` | Hero background, footer background | 3 | 1 | `--blue7` |
| `{colors.navy-soft}` | `#2d2e40` | Card backgrounds, section borders | 10 | 1 | `--black5` |
| `{colors.ink-black}` | `#0d0d0c` | Dark surface backgrounds | 7 | 1 | `--black3` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Ubuntu | 300, 400, 500, 700 | Display, Heading, Body, UI | Ubuntu (Google Fonts) | Canonical |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-lg}` | 48px | 62.4px | normal | 400 | Hero titles | `div.hw__title` |
| `{text.display-md}` | 42px | 46.2px | normal | 700 | Section heads | `h1.hw__title` |
| `{text.display-sm}` | 40px | 60px | normal | 300 | Editorial heads | `div.hw__title.text-center` |
| `{text.heading-md}` | 30px | 54px | normal | 400 | Secondary heads | `h1.hw__title` |
| `{text.heading-sm}` | 24px | 36px | normal | 400 | Card titles | `div.elem6__card_content_text` |
| `{text.body-lg}` | 20px | 36px | normal | 300 | Nav / Intro text | `li#menu-item-852` |
| `{text.body-md}` | 16px | 24px | normal | 400 | Default body | `header.c-header` |
| `{text.body-sm}` | 14px | 25.2px | normal | 400 | Footer links | `a.c-header_logo-item` |
| `{text.caption}` | 12px | 18px | normal | 400 | Copyright | `div.copyright` |

### Principles
1. **Ubuntu-Only Stack**: No secondary typeface is permitted; hierarchy is achieved via weight and size.
2. **Lightweight Display**: Hero sub-headers often use weight 300 at large sizes (38px-40px) for a modern feel.
3. **High Contrast Interaction**: Active states and highlights strictly use the primary cyan (#29b6c4).

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 90 |
| `{space.sm}` | 20px | 36 |
| `{space.md}` | 40px | 9 |
| `{space.lg}` | 120px | 3 |
| `{space.xl}` | 150px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 304 occurrences |
| `{radius.sm}` | 4px | Form inputs, small cards | Card component |
| `{radius.lg}` | 22px | Feature cards | Card component |
| `{radius.xl}` | 30px | Surface containers | Surface component |
| `{radius.full}` | 50px | Primary CTA buttons | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(59, 58, 57, 0.2) 2px 4px 12px 0px` | Floating cards on light backgrounds | 13 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Call to Action
**Pages observed:** https://npstx.com, https://npstx.com/about
**Spec:** 
- Background: `{colors.primary}` (#29b6c4)
- Text: `{colors.white}` (#ffffff)
- Border: 1px `{colors.primary}` (#29b6c4)
- Radius: 50px
- Padding: 15px 40px
- Typography: `{text.body-md}` (16px)
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service and client categorization
**Pages observed:** https://npstx.com, https://npstx.com/about
**Spec:** 
- Background: `{colors.white}` (#ffffff)
- Border: 0px
- Radius: 22px
- Padding: 40px 30px
- Shadow: `{shadow.soft}`
**States observed:** Default: captured

#### Dark Surface Section
**Role:** Hero and high-impact messaging areas
**Pages observed:** https://npstx.com
**Spec:** 
- Background: `{colors.navy-deep}` (#051d25)
- Text: `{colors.white}` (#ffffff)
- Radius: 0px
- Padding: 150px 0px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Footer Surface
**Role:** Site-wide navigation and legal
**Pages observed:** https://npstx.com, https://npstx.com/about
**Spec:** 
- Background: `{colors.ink-black}` (#0d0d0c)
- Text: `{colors.dark-grey}` (#212529)
- Radius: 0px
- Padding: 17px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px |
| Section padding (vertical) | 120px - 150px |
| Grid gap | 20px - 30px |

## Do's
- Use Ubuntu 300 for large editorial sub-headings.
- Apply `{radius.full}` (50px) to all primary buttons.
- Ensure primary cyan (#29b6c4) is used for all interactive text links.
- Use `{colors.navy-deep}` (#051d25) for full-width hero backgrounds.
- Maintain a minimum vertical section gap of 120px for major content transitions.

## Don'ts
- **Wrong:** Using a serif font for headings. **Right:** Use Ubuntu 700. **Reason:** The brand is strictly a single-family system.
- **Wrong:** Using #29b6c4 for body text. **Right:** Use #212529 or #3b3a39. **Reason:** Cyan is reserved for accents and interaction.
- **Wrong:** Sharp corners on feature cards. **Right:** Use `{radius.lg}` (22px). **Reason:** The brand identity relies on softened technical geometry.
- **Wrong:** Using sub-brand colors (like orange #fd7e14) as the primary button fill. **Right:** Use #29b6c4. **Reason:** Npstx parent identity is defined by its specific cyan.

## Quick start

```css
:root {
  --primary: #29b6c4;
  --navy-deep: #051d25;
  --charcoal: #3b3a39;
  --slate: #a6a8b4;
  --white: #ffffff;
  --font-main: 'Ubuntu', sans-serif;
  --radius-button: 50px;
  --radius-card: 22px;
  --shadow-soft: 2px 4px 12px 0px rgba(59, 58, 57, 0.2);
}
```

## Known gaps
- Hover and active states for secondary buttons were not explicitly captured in the evidence.
- Mobile-specific typography scale for display sizes was not fully mapped.
- Semantic colors (Success/Error) were present in tokens but not observed in UI components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://npstx.com | Desktop 1440 | 2026-06-06 |
| About | https://npstx.com/about | Desktop 1440 | 2026-06-06 |