# Tekprovider Design System

> High-contrast financial technology interface utilizing deep charcoal surfaces, vibrant azure accents, and generous 30px rounded geometry.

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

## TL;DR
Tekprovider employs a "dark-mode first" aesthetic for its primary content areas, leaning heavily on a monochrome foundation of `#000000` and `#ffffff` with a signature corporate blue accent (`#1a87c6`). The system is characterized by high-density typography using **Inter** across all roles, with display sizes reaching 48px at bold weights. UI components favor extreme rounded corners (30px to 32px) for cards and primary CTAs, contrasting against sharp 0px edges for secondary utility surfaces. Large-scale vertical spacing (up to 120px) creates a rhythmic, section-based flow.

## Signature DNA
1. **Azure Punctuation** (The use of `#1a87c6` as the exclusive interactive signal color for primary buttons and icon backdrops against dark or neutral grounds).
2. **Soft-Shell Containers** (30px border-radius applied to feature cards and pricing-style blocks, creating a distinct "capsule" look for key content).
3. **Achromatic Depth** (Layering `#1d1d1d` and `#222222` surfaces to create hierarchy within dark sections without relying on shadows).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, primary text on dark, button text | 139 | 1.0 | `--bs-white` |
| `{color.black}` | `#000000` | Primary text, shadow definitions, emphasis | 27 | 1.0 | `--bs-emphasis-color` |
| `{color.gray.light}` | `#f2f2f2` | Secondary surface background | 19 | 1.0 | `--bg` |
| `{color.gray.muted}` | `#d0d0d0` | Secondary body text, muted labels | 80 | 1.0 | `--text` |
| `{color.gray.dark}` | `#212529` | Default body text color (Bootstrap default) | 4 | 1.0 | `--bs-body-color` |
| `{color.charcoal}` | `#1d1d1d` | Dark section surface background | 4 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.theme}` | `#1a87c6` | Primary CTA background, active borders, icon plates | 10 | 1.0 | `--theme` |
| `{color.accent.dark}` | `#404040` | Secondary button background | 4 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#198754` | Valid form states |
| `{color.error}` | `#dc3545` | Invalid form states |
| `{color.warning}` | `#ffc107` | Warning background tokens |
| `{color.info}` | `#0dcaf0` | Information background tokens |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.lg}` | 48px | 55.2px | normal | 700 | Accordion headers, section titles | `h2.accordion-header` |
| `{text.display.md}` | 40px | 10px | normal | 500 | Hero sub-titles | `span.text-inside-title` |
| `{text.heading.sm}` | 24px | 29.04px | normal | 600 | Feature titles | `h3` |
| `{text.body.lg}` | 17px | 28px | normal | 400 | Lead paragraphs | `p` |
| `{text.body.md}` | 16px | 28px | normal | 400 | Default running text | `div.mouse-cursor` |
| `{text.button}` | 16px | 16px | normal | 700 | Primary CTA labels | `a.theme-btn` |
| `{text.ui.bold}` | 16px | 55.2px | normal | 700 | Interactive labels | `button.accordion-button` |
| `{text.body.sm}` | 15px | 28px | normal | 600 | Footer links, small labels | `a` |

### Principles
1. **Bold Inter for Authority:** All major headings and interactive triggers use weight 600 or 700 to establish hierarchy.
2. **Generous Line Heights:** Body text maintains a 1.6x to 1.75x ratio (28px height on 16px/17px size) for readability.
3. **Display Tightness:** Large display sizes (40px+) use significantly reduced line-heights (as low as 10px for specific spans) to stack tightly.

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 23 |
| `{space.sm}` | 15px | 22 |
| `{space.md}` | 30px | 26 |
| `{space.lg}` | 50px | 46 |
| `{space.xl}` | 55px | 19 |
| `{space.section}` | 120px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Utility surfaces, secondary buttons | 178 occurrences |
| `{radius.lg}` | 30px | Feature cards | Card component |
| `{radius.xl}` | 32px | Primary rounded buttons | Rounded Button component |
| `{radius.full}` | 50% | Icon plates, circular avatars | Surface (50%) component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.04) 0px 9px 21px 0px` | Floating cards | components array |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** https://tekprovider.net
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius 32px / Typography `{text.button}`
**States observed:** Default | Hover: captured

#### Surface
**Role:** Base layout container
**Pages observed:** https://tekprovider.net
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.gray.muted}` (#d0d0d0) / Radius 0px / Padding 50px 55px
**States observed:** Default: captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlight container
**Pages observed:** https://tekprovider.net
**Spec:** Background `{color.gray.light}` (#f2f2f2) / Radius 30px / Typography `{text.body.md}`
**States observed:** Default: captured

#### Accordion Item
**Role:** Content disclosure
**Pages observed:** https://tekprovider.net
**Spec:** Text `{color.white}` (#ffffff) / Typography `{text.display.lg}` (48px/700) / Border-bottom 1px `{color.gray.muted}`
**States observed:** Default | Active: captured

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-contrast content bands
**Pages observed:** https://tekprovider.net
**Spec:** Background `{color.charcoal}` (#1d1d1d) / Padding 120px 0px / Text `{color.gray.muted}` (#d0d0d0)
**States observed:** Default: captured

#### Icon Plate
**Role:** Decorative brand markers
**Spec:** Background `{color.theme}` (#1a87c6) / Radius 50% / Border 0px
**Pages observed:** https://tekprovider.net

## Layout
| Property | Value |
|---|---|
| Section Padding | 120px (vertical) |
| Container Max-width | ~1320px (Bootstrap default) |
| Content Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Accordion headers stack; hero text centers; padding reduces to ~15px |
| Desktop | 1440px | Multi-column feature grids (3-up); 120px section spacing |

## Imagery & decoration
- **Network Graphics:** Uses blue connecting-dot patterns to signify "connectivity" and "technology."
- **High-Contrast Photography:** Corporate imagery often features dark backgrounds with focused lighting to match the UI.
- **Avoids:** Saturated gradients, thin line icons (prefers solid or themed icon plates).

## Do's
- Use `#1a87c6` for all primary interactive triggers.
- Apply `30px` radius to all content cards containing feature text.
- Maintain `120px` vertical spacing between major homepage sections.
- Use **Inter Bold (700)** for all display-level headings.
- Set body text to `#d0d0d0` when appearing on dark `#1d1d1d` surfaces.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap blue) as the primary brand color. **Right:** Use `#1a87c6`. **Reason:** `#0d6efd` is a default framework value, not the Tekprovider brand token.
- Do not mix 30px rounded corners with 8px or 12px corners; use 0px for utility or 30px for content.
- Do not use shadows on dark surfaces; rely on hex-step background changes (`#1d1d1d` to `#222222`).
- Avoid using weights below 400 for Inter; the brand requires a high-density, sturdy typographic feel.

## Similar brands
- IBM (Achromatic foundation, blue accents)
- Stripe (High-density typography, section-based layout)
- NCR (Financial tech focus, solid corporate color blocks)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --tk-primary: #1a87c6;
  --tk-black: #000000;
  --tk-white: #ffffff;
  --tk-gray-light: #f2f2f2;
  --tk-gray-muted: #d0d0d0;
  --tk-surface-dark: #1d1d1d;
  --tk-radius-card: 30px;
  --tk-radius-btn: 32px;
  --tk-font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card for Tekprovider using a #f2f2f2 background, 30px border radius, and an Inter 600 heading at 24px."
- "Generate a primary button with a #ffffff background, #000000 text, 32px border radius, and Inter 700 font at 16px."
- "Design a dark section container using #1d1d1d background with 120px vertical padding and #d0d0d0 body text."

## Known gaps
- Hover state hex values for the primary blue accent were not explicitly captured in the token list.
- Mobile-specific font size transitions for display text were not fully mapped.

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